Suno AI Music Design System

Overview

Suno presents as a cinematic, nocturnal creative studio — a dark canvas that recedes into shadow so that the act of musical creation feels intimate, focused, almost ritualistic. The dominant visual gesture is a warm atmospheric gradient bleeding from burnt amber through deep crimson into near-black, suggesting the glow of a studio at 2 AM, monitors humming, headphones on. Against this backdrop, the typography speaks in a single proprietary voice: Neue Montreal, a geometric sans-serif that balances technical precision with approachable warmth. The type never shouts — even at {typography.display-xl} (72px), it holds its weight at a restrained medium 500, letting scale carry emphasis rather than boldness.

Brand voltage lives selectively: most of the interface operates in the {colors.ink} off-white against {colors.canvas}, but the {component.button-accent} Create button erupts in a coral-pink ({colors.accent} — #ff6b6b) that glows with a subtle bi-color aura shadow ({extensions.shadows.glow-accent}). This is the sole moment of chromatic intensity — everything else is monochrome or desaturated warmth. Navigation items are rendered as pill-shaped ghosts ({component.nav-item-pill}) that fill slightly on hover, reinforcing the tactile, touch-friendly interaction model. Input surfaces use translucent dark glass ({colors.music-input-container}) that feels like frosted obsidian, with internal elements (the plus button, advanced toggle, dice randomizer) arranged in a tight horizontal choreography.

The shape language is aggressively rounded: {rounded.pill} (9999px) dominates buttons, nav items, and toggles; {rounded.DEFAULT} (12px) defines the main input container; {rounded.lg} (24px) softens the floating album art cards. There are virtually no sharp corners in the system — every surface has been filed down to feel handheld, app-native, welcoming. Sub-systems visible include the hero creation dialect (input + accessories + Create button), the press-validation band (grayscale publisher logos), and implied dashboard/card surfaces suggested by the decorative album art floating at viewport edges.

Key Characteristics:

• Dark-first canvas ({colors.canvas} — #101012) with warm atmospheric gradient overlay ({extensions.gradients.hero-atmosphere})
• Single brand color voltage: {colors.accent} coral-pink on the primary CTA only
• Off-white ink ({colors.ink} — #f7f4ef) warmer than pure white, used for primary text
• Proprietary typeface Neue Montreal across all roles, weights 300–500
• Pill-shaped ({rounded.pill}) interactive elements throughout — no rectangular buttons
• Translucent glass surfaces ({colors.surface-white-4} through {colors.surface-white-10}) for layered depth
• Bi-color glow shadow ({extensions.shadows.glow-accent}) on signature actions
• Generous vertical rhythm: {spacing.section} (100px) between major bands
• Editorial display type at 72px ({typography.display-xl}) with tight leading (-0.96px tracking)

Colors

Brand & Accent

• primary ({colors.primary} — #010000): Near-black solid background for filled buttons like {component.button-primary} and {component.button-login}. Functions as the darkest surface in the system.
• accent ({colors.accent} — #ff6b6b): Coral-pink brand voltage applied exclusively to the {component.button-accent} / {component.create-button-inline} Create action. This is the single chromatic focal point.
• accent-glow-pink ({colors.accent-glow-pink} — #fe3c7d): Pink channel of the dual-color glow shadow ({extensions.shadows.glow-accent}) radiating from the Create button.
• accent-glow-yellow ({colors.accent-glow-yellow} — #ffb003): Amber/yellow channel of the dual-color glow shadow, balancing the pink for a warm halo effect.
• signature-yellow ({colors.signature-yellow} — #f5d907): Bright yellow accent observed sparingly — likely for star ratings, badges, or notification dots.

Surface

• canvas ({colors.canvas} — #101012): The foundational background — near-black with a hint of blue undertone. Used for {component.hero-band}, {component.footer-band}, and page-level background.
• surface-transparent ({colors.surface-transparent} — #00000000): Fully transparent baseline for {component.top-nav} and overlay containers.
• surface-elevated ({colors.surface-elevated} — #1c1c1f): Slightly lighter dark for raised surfaces like {component.card-album-art} backs.
• surface-white-4 ({colors.surface-white-4} — #ffffff0a): 4% opacity white — subtle tint for ghost buttons and dividers.
• surface-white-5 ({colors.surface-white-5} — #ffffff0d): 5% opacity white — hover state fill for {component.button-ghost-hover} and {component.button-icon-circle}.
• surface-white-10 ({colors.surface-white-10} — #ffffff1a): 10% opacity white — active/pressed state fill and {component.input-toggle-advanced} background.
• surface-overlay-dark ({colors.surface-overlay-dark} — #1c1c1f66): 40% opacity elevated surface for modal backdrops or scrim layers.

Text / Ink

• ink ({colors.ink} — #f7f4ef): Primary warm off-white for headlines, navigation, and high-emphasis labels. Slightly warmer than #ffffff for reduced eye strain in dark mode.
• body ({colors.body} — #ffffff): Pure white for maximum readability in body copy, input placeholders, and {component.hero-headline} text.
• body-warm ({colors.body-warm} — #fcfbf9): Near-white variant for secondary body text where subtle differentiation from {colors.body} is needed.
• muted ({colors.muted} — #c2c2c1): Medium-gray for de-emphasized text — input labels, captions, helper text.
• muted-medium ({colors.muted-medium} — #ffffffb3): 70% opacity white — subtitle and descriptive text below headlines.
• muted-strong ({colors.muted-strong} — #ffffffcc): 80% opacity white — secondary button text, toggle labels.
• muted-subtle ({colors.muted-subtle} — #ffffff66): 40% opacity white — very faint metadata, timestamps, disabled hints.
• on-primary ({colors.on-primary} — #ffffff): White text on {colors.primary} (black) backgrounds — guaranteed AA contrast.
• on-dark ({colors.on-dark} — #f7f4ef): Warm off-white on dark surfaces, identical to {colors.ink} by value.
• on-surface ({colors.on-surface} — #f7f4ef): Default text color on standard surfaces.

Hairlines & Borders

• hairline ({colors.hairline} — #ffffff1a): 10% opacity white divider lines — subtle separation between content zones.
• border-input ({colors.border-input} — #ffffff33): 20% opacity white for input field focus rings or container borders when present.

Semantic

• error ({colors.error} — #ff4444): Red for validation errors, destructive actions.
• success ({colors.success} — #44ff88): Green for confirmations, success states.

Typography

Font Family

The system is built entirely on Neue Montreal, a proprietary geometric sans-serif from Pangram Pangram. It serves every role — from the massive 72px display headline down to 13px caption text. Two font-face declarations are active in the DOM: one stack includes emoji support ranges (ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji"...) for headline contexts, while a more compact stack (system-ui, -apple-system, BlinkMacSystemFont...) handles body and interface text. Both resolve to the same .woff2 files served from /static-p/PPNeueMontreal-*.woff2. Weight range deployed: Book (300), Regular (400), Medium (500), SemiBold (600). Additional font faces declared but not heavily utilized include Editorial New (300, 400) for potential editorial accents and Input Sans (400, 500) for monospace-adjacent UI elements.

Hierarchy

| Token | Size | Weight | Line Height | Letter Spacing | Use | |---|---|---|---|---|---| | {typography.display-xl} | 72px | 500 | 72px | -0.96px | Hero headline ("Make any song you can imagine") | | {typography.display-lg} | 48px* | 500 | 56px* | -0.64px* | Section headlines, large feature titles | | {typography.title-lg} | 20px | 500 | 24px | 0 | Card titles, feature headings | | {typography.title-md} | 16px | 300 | 24px | 0 | Hero subtitle, light secondary headers | | {typography.body-lg} | 18px | 400 | 24px | 0 | Input field text, prominent body | | {typography.body-md} | 16px | 400 | 24px | 0 | Standard body copy | | {typography.body-sm} | 14px | 400 | 20px | 0 | Toggles, small labels | | {typography.button} | 15px | 500 | 24px | 0 | All button text, nav items | | {typography.nav-item} | 15px | 500 | 24px | 0 | Navigation pills, login text | | {typography.label} | 14px | 400 | 20px | 0 | Input placeholder ("Chat to make music") | | {typography.caption} | 13px | 400 | 18px | 0 | Metadata, fine print |

*Inferred from scale pattern — not directly extracted at this size.

Principles

The typographic hierarchy relies on dramatic size contrast rather than weight modulation. The {typography.display-xl} headline at 72px is five times larger than the {typography.caption} at 13px, yet the weight spread across the entire system is only 300–500 — no bold (700) anywhere. This creates an editorial, refined voice that feels confident without being aggressive. Letter-spacing is tightened on display sizes (-0.96px at 72px) to keep large letterforms visually cohesive, while body text sits at normal spacing for optimal readability. The {typography.title-md} role uniquely drops to weight 300, creating a whisper-soft subtitle beneath the headline — a deliberate "quiet loud" pairing. Color also carries hierarchy: the headline is pure {colors.body} (#fff) while supporting text steps down through {colors.muted-medium} and {colors.muted}.

Note on Font Substitutes

Neue Montreal is not available on Google Fonts. For open-source reimplementation, the closest match is DM Sans (weight 400~500) paired with Inter for smaller UI text. Define these CSS variables for substitution:

:root {
  --font-heading: 'DM Sans', 'Neue Montreal', system-ui, sans-serif;
  --font-body: 'Inter', 'Neue Montreal', system-ui, sans-serif;
}

If Neue Montreal licensing is available, load via the self-hosted .woff2 files observed in the font-face declarations (PPNeueMontreal-Book.woff2, PPNeueMontreal-Regular.woff2, PPNeueMontreal-Medium.woff2).

Layout

Spacing System

• Base unit: 4px ({spacing.xxs}).
• Tokens: {spacing.xxs} (4px — icon internals, tight gaps), {spacing.xs} (6px — nav pill padding-vertical), {spacing.sm} (8px — button padding-vertical, small gaps), {spacing.md} (12px — component gaps, form spacing), {spacing.base} (16px — standard padding), {spacing.lg} (20px — input padding), {spacing.xl} (24px — card padding, section gaps), {spacing.xxl} (32px — large section spacing), {spacing.section} (100px — major band vertical rhythm).
• Section padding (vertical): {spacing.section} — used between hero and content bands, and before footer.
• Card internal padding: {component.card-album-art} uses zero internal padding (image-bleed); {component.music-input-container} uses 16px 20px.
• Gutters: Desktop container inferred at ~1200–1400px max-width based on nav span; mobile gutters at 16px.

Grid & Container

The hero section employs a centered single-column layout constrained to approximately 700px width for the text+input block (per extracted container data). The navigation spans full-width with left-aligned logo, centered-spaced menu items, and right-aligned auth/CTA pair. Floating album art cards sit outside the central flow at viewport edges (absolute or fixed positioning). The press logo band uses a flex-row with gap or justify-between distribution. No explicit 12-column grid was detected — layout appears to use flexbox and intrinsic sizing rather than a rigid column system.

Whitespace Philosophy

Whitespace is generous and theatrical. The {typography.display-xl} headline breathes with ample surrounding margin; the {spacing.section} (100px) vertical rhythm between major sections approaches print-editorial proportions. Within components, spacing is tight — the music input packs plus-button, label, text area, advanced toggle, dice, and Create button into a single horizontal band with minimal padding ({spacing.lg} / 20px internal). This contrast — expansive between blocks, dense within them — focuses attention on the creation interface as the singular point of interaction.

Header Architecture

┌─────────────────────────────────────────────────────────────────┐
│ [SUNO]   Products ▾  Resources ▾  Pricing  Careers     [Log in] [Join Suno for free] │
└─────────────────────────────────────────────────────────────────┘
  ↑logo      ↑nav-pill   ↑nav-pill    ↑link    ↑link       ↑ghost-btn  ↑filled-btn
              {rounded.pill}                                    {rounded.pill}

Max-width: full viewport. Height: 64px ({component.top-nav.height}). Logo uses {typography.display-lg} weight. Nav items are {component.nav-item-pill} with chevron indicators on dropdown-enabled items. Right rail pairs {component.button-login} (ghost) and {component.button-primary} (filled black).

Hero Section

┌──────────────────────────────────────────────────────┐
│                                                      │
│  [Album Art Card]        Make any song you         [Album Art Card]
│   (floating left)          can imagine │               (floating right)
│                          ────────────────             │
│                          Start with a simple...       │
│                                                      │
│  ┌───────────────────────────────────────────────┐   │
│  │ Chat to make music                     [⚙][🎲][→ Create] │   │
│  │ [+ Advanced]                                     │   │
│  └───────────────────────────────────────────────┘   │
│                                                      │
│          Forbes   RollingStone   VARIETY   WIRED      │
└──────────────────────────────────────────────────────┘

The hero centers a ~700px-wide content column containing: headline ({typography.display-xl}), subtitle ({typography.title-md} weight 300), and the {component.music-input-container}. Album art cards float at horizontal edges with {extensions.shadows.glow-accent} depth. The press logos occupy a subdued row below the input.

Elevation & Depth

| Level | Treatment | Use | |---|---|---| | 0 — Flat | No shadow, {colors.canvas} direct | Page background, flat nav bar | | 1 — Glass | {colors.surface-white-4} / {colors.surface-white-5} fill | Ghost buttons, icon circles | | 2 — Raised glass | {colors.surface-white-10} fill | Active/hover states, toggles | | 3 — Container | {colors.music-input-container} (translucent dark) | Input field wrapper | | 4 — Floating card | {extensions.shadows.none} (25px blur, 25% black) | Album art cards | | 5 — Glow signature | {extensions.shadows.glow-accent} (bi-color ambient) | Create/accent button |

The system favors color-layered depth over traditional drop shadows. Most elevation changes are communicated through white-at-opacity fills on the dark canvas — a "glassmorphism" approach where higher elements appear brighter/more opaque against the dark ground. True box shadows appear only on the floating album art cards and the signature accent button glow. The philosophy is cinematic: think shallow depth-of-field photography where foreground subjects glow softly and background falls to darkness.

Decorative Depth

The hero background features a complex atmospheric gradient ({extensions.gradients.hero-atmosphere}) transitioning from warm amber upper-left through crimson mid-frame to deep black lower-right. This is not a flat wash — it suggests volumetric lighting, as if the scene is illuminated by off-screen warm sources. The album art cards cast colored glow shadows (yellow-left, pink-right) that complement this ambient warmth. This decorative depth is unique to the hero band; content sections below likely flatten to solid {colors.canvas}.

Shapes

Border Radius Scale

| Token | Value | Use | |---|---|---| | {rounded.sm} | 6px | Small internal elements (plus button) | | {rounded.DEFAULT} | 12px | Input containers, default cards | | {rounded.md} | 20px | Medium panels, modals | | {rounded.lg} | 24px | Album art cards, large image containers | | {rounded.pill} | 9999px | All buttons, nav items, toggles | | {rounded.full} | 9999px | Icon circles, avatar placeholders |

The pill radius (9999px) is the dominant shape for anything interactive. This is a deliberate "app-native" choice that makes every clickable target feel touch-friendly and modern. Only containers (inputs, cards) use smaller radii to differentiate "content holders" from "actions."

Photography Geometry

Album art cards (observed at hero edges) use {rounded.lg} (24px) corners with full-bleed imagery inside. They float at a slight angle (rotated ~3–5 degrees) for dynamic composition, casting deep shadows. Play button overlays are perfectly circular ({rounded.full}) centered on each card at 48px diameter. Aspect ratio appears square (1:1) for the visible card faces.

Components

No hover states documented. Hover behavior is unreliable to extract from a single screenshot. State variants live as separate entries in the components: frontmatter (e.g. {component.nav-item-pill-hover}, {component.button-accent-hover}); add hover styling at implementation time per your stack's conventions.

Buttons

{component.button-primary} — Solid black ({colors.primary}) filled button with white ({colors.on-primary}) text. Used for "Join Suno for free" in the nav rail and "Open App" on mobile. Rounded {rounded.pill}, padding 8px 20px, typography {typography.button} (15px/500). Hover state transitions to {component.button-primary-hover} with slightly lighter background (#1a1a1a). Transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1).

{component.button-accent} / {component.create-button-inline} — The signature CTA in coral-pink ({colors.accent}). Used for the "Create" button inline within the music input. White text, {rounded.pill}, padding 10px 20px. Features the distinctive {extensions.shadows.glow-accent} bi-color glow (amber left, pink right) that makes it appear to emit light. Hover brightens toward {component.button-accent-hover} (#ff857f). This is the single highest-voltage element in the entire system.

{component.button-login} — Ghost/transparent button with {colors.ink} text, used for "Log in" in nav. Same dimensions as {component.button-primary} but no fill — purely typographic interaction.

{component.button-ghost} — Transparent circular icon button at 32×32px. Used for utility actions (menu toggle, settings trigger). Fills to {colors.surface-white-5} on hover ({component.button-ghost-hover}) and {colors.surface-white-10} on active ({component.button-ghost-active}). Contains SVG icons at currentColor.

{component.nav-item-pill} — Pill-shaped navigation link (Products, Resources, etc.) with transparent background and {colors.ink} text. Padding 6px 12px, typography {typography.nav-item} (15px/500). Includes chevron indicator on dropdown-enabled items. Hover: {component.nav-item-pill-hover} fills to 5% white. Active: {component.nav-item-pill-active} fills to 10% white.

Cards & Containers

{component.card-album-art} — Square image container with {rounded.lg} (24px) corners. Holds album artwork with zero internal padding (full bleed). Background defaults to {colors.surface-elevated} when no image. Casts {extensions.shadows.none} (deep 25px blur shadow). Observed floating at hero viewport edges with slight rotation.

{component.music-input-container} — The central creation interface: a translucent dark rectangle (#1a191a at ~40% opacity) with {rounded.DEFAULT} (12px) corners. Internal padding 16px 20px. Houses the prompt textarea ({component.music-input-field}), accessory buttons (plus, advanced toggle, dice), and the {component.create-button-inline}. This is the most component-dense surface in the system.

{component.hero-band} — Full-viewport-width section with {colors.canvas} background and the atmospheric gradient overlay. Vertical padding {spacing.section} (100px). Contains the headline, subtitle, input container, and press logo row. Typography defaults to {typography.display-xl}.

{component.press-logo-row} — Horizontal flex container holding grayscale publisher logos (Forbes, RollingStone, VARIETY, WIRED, bilibili). Text color {colors.muted} at reduced opacity, typography {typography.body-lg}. Acts as social proof band below the hero input.

Inputs & Forms

{component.music-input-field} — The primary text entry point: a transparent textarea inside {component.music-input-container}. Placeholder text "Chat to make music" renders in {typography.label} (14px/400) at {colors.muted}. Active text inputs render in {colors.body} (white) at {typography.body-lg} (18px/400). Border is none — the container provides visual boundary. Focus state ({component.music-input-focus}) likely shows subtle ring or brightness increase.

{component.input-addon-plus} — Small square button (32×32px, {rounded.sm} / 6px) with a "+" icon, positioned left of the input field. Transparent background, {colors.ink} icon. Likely opens attachment or layer options.

{component.input-toggle-advanced} — Pill-shaped toggle labeled "Advanced" with sparkle icon. Background {colors.surface-white-10} (10% white), text {colors.muted-strong} at {typography.body-sm}. Rounded {rounded.pill}, padding 6px 12px. Toggles expanded prompt options.

{component.input-dice-button} — Circular randomize button (32×32px, {rounded.full}) with dice icon. Background {colors.surface-white-5}, icon color {colors.muted-strong}. Generates random prompt suggestions.

Navigation

{component.top-nav} — Fixed/sticky header at 64px height. Transparent background ({colors.surface-transparent}) allowing hero gradient to show through. Contains {component.logo-wordmark} left, {component.nav-item-pill} items center-left, {component.button-login} + {component.button-primary} right. Z-index elevated above hero content.

{component.logo-wordmark} — "SUNO" wordmark in uppercase, using {typography.display-lg} (inferred 48px) or similar large size, {colors.body} white. Custom wordmark (not system font letter-spaced).

Signature Components

{component.play-overlay-button} — Circular play control (48px diameter, {rounded.full}) overlaid on album art cards. Background {colors.surface-white-10} (semi-transparent white), play triangle icon in {colors.body}. Indicates interactive media preview on hover/focus.

Do's and Don'ts

Do

• Do use {colors.ink} (#f7f4ef) for primary navigation and headline text — it's warmer and softer than pure white against the dark canvas.
• Do apply {rounded.pill} (9999px) to every button, toggle, and nav item — the system has no sharp-cornered interactives.
• Do reserve {colors.accent} (#ff6b6b) exclusively for the primary Create/confirm action — it loses power if overused.
• Do layer surfaces with white-at-opacity fills ({colors.surface-white-5}, {colors.surface-white-10}) rather than grays for hover/active states on dark backgrounds.
• Do maintain the {typography.display-xl} headline at weight 500 with -0.96px letter-spacing — this tight tracking is intentional for large display type.
• Do give the {component.music-input-container} generous internal padding (16px 20px) — it needs room for its accessory buttons alongside the text area.
• Do use {extensions.shadows.glow-accent} (bi-color glow) on the accent button only — other elements use flat or subtle shadows.
• Do keep body copy at {typography.body-lg} (18px) minimum for readability in dark mode — don't drop below {typography.body-sm} (14px) except for true micro-copy.
• Do place press/validation logos in {colors.muted} at reduced opacity — they should support, not compete.
• Do allow the hero atmospheric gradient to breathe behind content — don't cover it with opaque surfaces.

Don't

• Don't use pure {colors.primary} black (#010000) as text color on {colors.canvas} — contrast fails. Use {colors.ink} or {colors.body} instead.
• Don't introduce new brand colors beyond the defined palette — the system's power comes from restraint.
• Don't round album art cards below {rounded.lg} (24px) — they need that extra softness to feel "floating."
• Don't bold any text beyond weight 500 — the system tops out at semi-bold and uses scale for emphasis.
• Don't add borders to input fields — the {component.music-input-container} provides boundary through its translucent background and corner radius alone.
• Don't place the Create button outside the {component.music-input-container} visual grouping — proximity reinforces the "chat → create" mental model.
• Don't use the Editorial New or Input Sans font faces for primary UI — they're reserved for special contexts if used at all.
• Don't let the press logo row exceed {typography.body-lg} in size — it should be quietly subordinate to the hero content.
• Don't apply {rounded.sm} (6px) to any user-facing button — that radius is reserved for internal micro-elements like the plus addon.
• Don't omit the transition timing — all color/opacity changes should use 150ms cubic-bezier(0.4, 0, 0.2, 1) for consistency.

Motion & Animation

Transition Tokens

/* Core UI transitions */
--transition-colors: color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     background-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                     border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1);

--transition-transform: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                       translate 0.15s cubic-bezier(0.4, 0, 0.2, 1),
                       scale 0.15s cubic-bezier(0.4, 0, 0.2, 1);

/* Specialized transitions */
--transition-opacity: opacity 0.2s cubic-bezier(0.33, 1, 0.68, 1);
--transition-opacity-fast: opacity 0.1s cubic-bezier(0.4, 0, 0.2, 1);
--transition-filter: filter 0.5s ease-out;
--transition-transform-slow: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
--transition-marquee: d 3s cubic-bezier(0.4, 0, 0.2, 1);

Keyframe Animations

• cowrite-shimmer-fade — Shimmer sweep effect across the input container during AI generation (loading state).
• cowrite-bar-stroke-rotate — Animated stroke rotation for audio waveform visualization.
• vmbShimmer — Video/music block shimmer loading placeholder.
• hxc-shine-rotate — Rotating shine highlight on accent buttons (subtle gloss sweep).
• hxc-ripple-expand — Material-style ripple expanding from click/touch origin on buttons.
• earn-credits-aura — Pulsing aura glow around credit/reward badges.
• earn-credits-ripple — Concentric ripple emanating from credit notifications.
• randomBackground — Subtle background color cycling (likely unused in production).
• progress-shimmer — Horizontal shimmer sweep on progress bars.
• seo-wave-sweep — Decorative wave animation for SEO/brand moments (footer?).
• spin — Continuous 360° rotation for loading spinners.
• ping — Expanding opacity ring for notification dots (like Tailwind's animate-ping).
• uppy-* series — File upload widget animations (fade, slide, spinner, progress stripes).

Interaction Patterns

• Ghost button lift: Buttons with transparent background gain {colors.surface-white-5} fill on hover, {colors.surface-white-10} on active — creating a "pressing into fog" sensation.
• Pill hover glow: Nav items and pills show smooth 150ms color transition with no transform — purely chromatic feedback.
• Accent button pulse: The Create button's glow shadow may intensify on hover (implied by the complex shadow definition).
• Input focus reveal: The {component.music-input-container} likely brightens or shows a subtle ring on focus, drawing attention to the creation zone.
• Album card float: Hero album art cards may have subtle parallax or float animation (inferred from their positioned, shadowed treatment).
• Shimmer during generation: When music is being created, the input area likely shows cowrite-shimmer-fade or vmbShimmer loading animation.
• Notification ping: Badge/dot notifications use ping keyframe — expanding ring that fades out.
• Scroll-triggered reveals: Sections below the fold likely fade/slide in on scroll (common pattern with the detected uppy-Dashboard-fadeIn-style animations available).

Imagery Style

• Primary imagery: Square album artwork with photographic or illustrated covers, displayed in {component.card-album-art} containers with {rounded.lg} soft corners.
• Hero placement: Album cards float at viewport edges, partially cropped, rotated 3–5 degrees, casting deep shadows — creating a "desk with vinyl scattered" atmosphere.
• Color treatment: Full-color imagery (no duotone or heavy filtering) allowed to pop against the dark background; the darkness does the desaturating work.
• Play overlays: Centered circular {component.play-overlay-button} with semi-transparent white background indicates interactivity.
• Atmospheric background: Not photographic — a procedural gradient (amber → crimson → black) simulates studio lighting/volumetric haze.
• Press logos: Grayscale or desaturated publisher wordmarks treated as typographic texture, not photographs — low opacity, {colors.muted} tone.
• Imagery role: Supporting, never dominant — the text and input are always the focal point; images frame the experience.
• No illustrations detected: System relies on photography (album art) and abstract gradients rather than drawn illustration.
• Aspect ratios: Square (1:1) for album cards; hero background is panoramic/full-bleed.

Icon System

• Library: Custom SVG icons (no external icon library detected in the iconLibs array).
• Specific icons observed: Chevron/down arrow (nav dropdowns), Plus/circle (input addon), Sparkles/wand (Advanced toggle), Dice/random (prompt generator), Play/triangle (media overlay), Menu/hamburger (mobile nav trigger), External link, Settings/gear.
• Treatment: Stroke-based (not filled), rendered in currentColor for automatic theme adaptation. Size varies: 16px for inline icons (nav chevrons), 20px for button icons (plus, dice), 24px for standalone icons (play button inner).
• Alignment: Icons center vertically with adjacent text using flexbox items-center; gap typically {spacing.xs} (6px) or {spacing.sm} (8px) between icon and label.
• Weight: Consistent 1.5–2px stroke width matching the medium weight of surrounding text.

Recommended Frontend Stack

- Framework:      Next.js (App Router) — detected Turbopack bundler references in source
- Styling:        Tailwind CSS v4 — confirmed tailwindLikely: true, utility classes throughout
- Fonts:          Self-hosted Neue Montreal (.woff2 from /static-p/) with system-ui fallback chain
- Animation:      Tailwind animate utilities + custom @keyframes (cowrite-shimmer-fade, hxc-*, etc.)
- Icons:          Custom SVG components (no library dependency)
- Component lib:  Custom components (hxc- prefixed classes suggest internal design system)

Responsive Behavior

Breakpoints

| Name | Width | Key Changes | |---|---|---| | Mobile | < 768px | Nav collapses to hamburger + "Open App" button; hero stacks vertically; input container narrows to full-width minus gutters; album cards hide or stack below | | Tablet | 768–1024px | Nav shows simplified item set; hero maintains centered column but narrower; input accessories may wrap | | Desktop | 1024–1440px | Full nav rail with all items; hero at designed ~700px content width; album cards float at edges | | Wide | > 1440px | Max-content container centers; additional horizontal padding; larger album cards |

Touch Targets

• {component.button-accent} / {component.create-button-inline}: ~140×44px (padding 10px 20px + text) — exceeds WCAG AAA 44×44 minimum ✓
• {component.nav-item-pill}: ~80×36px (padding 6px 12px + 15px text) — meets minimum ✓
• {component.button-ghost} / {component.button-icon-circle}: 36×36px — meets minimum ✓
• {component.input-addon-plus} / {component.input-dice-button}: 32×32px — below 44px recommendation; consider enlarging to 40px on mobile
• {component.music-input-container}: Full-width touch target; textarea itself is pointer-accessible ✓

Collapsing Strategy

• Navigation: At mobile breakpoint, Products/Resources collapse under hamburger; "Join Suno for free" becomes "Open App" (solid black button); logo remains left-positioned.
• Hero columns: Headline + subtitle + input stack vertically (single column) instead of any side-by-side layout. Album art cards likely disappear or move to a horizontal scroll gallery below the input.
• Input container: Maintains full internal arrangement (label + textarea + accessories + Create) but may stack the Create button below the textarea on narrow screens (< 400px).
• Press logos: Horizontal scroll (overflow-x: auto) or wrap to two rows on mobile; reduce opacity further to save visual weight.
• Sticky nav: Remains fixed-top on all breakpoints but reduces height to 56px on mobile.

Image Behavior

• Album art cards: On desktop, absolute/fixed position at hero edges with partial viewport overflow. On mobile, likely hidden or converted to a horizontal carousel below the fold. Aspect ratio remains square (1:1) regardless of screen size.
• Play overlay buttons: Scale proportionally with parent card; minimum 40px touch target maintained.
• Background gradient: background-size: cover or 100% auto — gradient stretches to fill hero section height, which compresses on mobile. Consider adding background-position: center top to keep warm tones visible even on short viewports.

Iteration Guide

1. Build a landing page closely mimicking this design system using Next.js with Tailwind CSS v4. Initialize the project with the dark mode class strategy (class: 'dark').
2. Pull every color, font, radius, and spacing value from the YAML frontmatter via the {section.token} paths. Define these as Tailwind theme extensions in tailwind.config.ts — never hard-code a hex or pixel value that has a token.
3. Add state variants (-hover, -active, -focus, -disabled) per Tailwind's hover:, active:, focus: prefix conventions. The spec documents Default and Active/Pressed explicitly; infer hover as intermediate between default and active.
4. When adding a new component, decide which sub-system it belongs to: hero creation dialect (input + accessories + Create), navigation shell (nav bar, footer), card surface (album art, content cards), or utility (buttons, toggles, badges). Each sub-system has distinct padding/radius/color rules.
5. Variants of an existing component live as separate frontmatter entries (button-accent vs button-accent-hover) and separate CSS/Tailwind classes — never nest variants or use pseudo-class selectors for semantic differences.
6. Run npx @google/design.md lint DESIGN.md after edits — broken-ref, contrast-ratio, and orphaned-tokens warnings will flag missing token definitions or inaccessible color pairings automatically.
7. When in doubt about emphasis: larger type before bolder type (scale from {typography.caption} 13px up to {typography.display-xl} 72px), signature accent color ({colors.accent}) on exactly one element per screen, and glass-morphism fills (white-at-opacity) over gray backgrounds for dark-mode elevation.
8. Implement the hero atmospheric gradient as a CSS linear-gradient on a ::before pseudo-element of the hero section with pointer-events: none and z-index: 0 — content sits at z-index: 1 above it.
9. Load Neue Montreal fonts from the observed /static-p/ paths using @font-face declarations with font-display: swap. If unavailable, substitute DM Sans (headings) + Inter (body) and update the {typography.*}.fontFamily values accordingly.
10. Test the creation input container at 375px (iPhone SE) width — ensure the plus button, "Advanced" toggle, dice button, and Create button all fit without wrapping to three lines. If they don't, stack the Create button below the textarea on mobile.

Font Setup

For local development without access to Suno's self-hosted font files:

/* tailwind.config.ts or global.css */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500&family=Inter:wght@300;400;500&display=swap');

:root {
  --font-heading: 'DM Sans', 'Neue Montreal', system-ui, sans-serif;
  --font-body: 'Inter', 'Neue Montreal', system-ui, sans-serif;
}

Update all {typography.*}.fontFamily references to use var(--font-heading) for display/title roles and var(--font-body) for body/UI roles. The visual match is ~90% — Neue Montreal has slightly wider apertures and more geometric circular forms than DM Sans.

Known Gaps

• Hover state styling: Per the no-hover policy, hover appearance for all interactive elements is inferred from active states and common patterns — actual hover colors/shadows may differ.
• Loading/generation state: The cowrite-shimmer-fade and vmbShimmer keyframes suggest animated loading states for the input during AI generation, but exact visual treatment (shimmer direction, color, speed) is not captured in static extraction.
• Mobile navigation drawer: The collapsed mobile nav (hamburger-triggered) structure, contents, and animation are not visible in the desktop-only screenshot.
• Dashboard/authenticated surfaces: All pricing, user profile, track library, and settings pages are behind authentication — their layouts, tables, and sub-components are unknown.
• Footer content: The footer band structure is inferred from typical patterns; actual links, columns, and legal text are not visible in the above-fold screenshot.
• Form validation states: Error ({colors.error}) and success ({colors.success}) semantic colors are defined but their application to input borders, helper text, and icons is not observed.
• Tooltip/popover styling: Navigation dropdowns (Products ▾, Resources ▾) likely show popover menus, but their internal layout, shadows, and item styling are not captured.
• Audio player component: As a music platform, Suno certainly has audio playback controls (waveform, play/pause, seek, volume) — none of these are visible or extractable from the landing page.
• Exact gradient values: The hero atmospheric gradient is described qualitatively; precise color stops would require DOM inspection of the background-image property which appeared as an oklab function in the extracted data.
• CSS variable naming mismatches: Source uses oklab() color functions for some surface tokens — these were approximated to hex sRGB for the design.md spec, but implementation may prefer keeping native oklab for smoother dark-mode interpolation.