Suno Design System

Overview

Suno's landing surface is a near-black theater ({colors.canvas} — #101012) lit from behind by an animated orange-to-magenta-to-violet atmospheric haze. The wordmark sits at 12.68px uppercase Neue Montreal in the top-left, a 72px hero rotates through typewriter prompts at -0.96px tracking, and two tilted album-art preview cards drift in from the page edges. The brand voltage is inverted CTA: the primary "Join Suno for free" is a cream-white pill ({colors.primary} — #f7f4ef) carrying {colors.primary-ink} text, and the saturated palette is held back for a secondary "Create" sub-pill that mixes the six accent tokens into a pink-to-orange-to-violet gradient.

Where most AI-product hero bands paint a single saturated CTA against a dark canvas, Suno reverses the move. The cream primary handles onboarding; the gradient secondary handles the act of composing music inside the chat input. Two tiers of action, two opposite voltage strategies.

Type runs Neue Montreal at weight 500 across every visible tier — there is no display serif, no monospace, and no italic. Weight 300 appears only on the 16px dek and the 18px h2; everything else holds 500. The hero h1 lands at 72px with a 72px line-height (line-height equals font-size, no display leading), which keeps the typewriter cursor flush against the cap-height.

Key Characteristics:

• Inverted primary CTA: cream pill {colors.primary} (#f7f4ef) on near-black canvas {colors.canvas} (#101012).
• Atmospheric haze (orange {colors.haze-warm} / rose {colors.haze-rose}) as the only background color cue — no gradient mesh, no overlay grid.
• Multi-accent palette (six saturated voltages) reserved for the gradient sub-CTA, never on the primary.
• Neue Montreal at weight 500 across every tier, with weight 300 only on the dek.
• Strict short radius scale: 6px chips, 12px chat input, 20px album cards, 9999px pills.
• Tilted album-art preview cards drift in from page edges instead of a centered hero illustration.
• 80px hero-band padding, 150px hero-gutter — generous vertical breathing without crowding the haze.

Colors

The palette stacks in four bands: a near-black canvas tier, a thin hairline ladder, an inverted cream primary, and a six-token saturated accent pool.

Canvas & Surface

• Canvas (#101012) — frequency 12. Used as bg (3), gradient (5), text (2), border (2). The base near-black holding the entire page; CSS variable --color-background-primary. Not pure black — a 0.4% violet tint at oklch lightness 0.17.
• Canvas Elevated (#1c1c1f) — frequency 2. Used as bg (2). The chat input and tilted album-card surface; CSS variable --color-background-secondary. Sits one shade above the canvas — visible only on the chat input perimeter.
• Canvas Deep (#000000) — frequency 4. Used as shadow (4). Pure black, reserved for cast-shadow stops on the tilted album-art cards.
• Surface Tertiary (#252529) — Used as bg (1). The "+" add-circle and dice-square button surface inside the chat input.
• Surface Hairline (#38383e) — Default 1px divider on the chat input perimeter and the "Log in" outline pill.

Cream Primary (inverted)

• Primary (#f7f4ef) — frequency 244. Used as text (123), border (120), bg (1). The cream pill primary CTA fill; CSS variable --color-background-button-primary. Doubles as the foreground-primary text token in the rare light-mode contexts.
• Primary Ink (#101012) — The black ink that sits on the cream pill. Same hex as the canvas — the inversion is built from one canvas token used as both ground and figure depending on the surface.

Text

• Ink on Canvas (#ffffff) — frequency 462. Used as text (231), border (231). The white text on the dark canvas — hero h1, dek, wordmark.
• Ink Secondary (#c2c2c1) — Used as text. The dim chat-input placeholder and advanced-chip label. Maps to --color-foreground-secondary.
• Ink Tertiary (#7d7c83) — Used as text. The press-logo row caption tier. Maps to --color-foreground-tertiary-on-light.
• Ink Inactive (#6a6a72) — Used as text. Maps to --color-foreground-inactive. The disabled state inside the chat-input chip row.

Saturated Accent Pool (signature)

• Accent Pink (#fd429c) — --color-accent-pink / --color-accent-brand. The dominant stop on the Create-gradient sub-pill. The closest token to a single brand voltage but cycles through the other five.
• Accent Orange (#ff9448) — --color-pumpkin-600. The mid stop on the Create-gradient.
• Accent Vermilion (#fa7658) — --color-vermilion-600. Transitional stop between pink and orange.
• Accent Yellow (#f5d907) — --color-accent-yellow. The lightest stop, used scarcely.
• Accent Green (#02d95c) — --color-accent-green. Reserved for success and the upload-state glyph.
• Accent Blue (#1f8bff) — --color-accent-blue. Reserved for link affordance and the secondary accent badge.
• Accent Violet (#8b6efe) — --color-accent-purple. The terminal stop on the Create-gradient.
• Accent Red (#f8441b) — --color-accent-red. Error and destructive states only.

Atmospheric Haze (decorative)

• Haze Warm (#ffb003) — frequency 1. Used as shadow (1). The orange center of the radial bloom behind the hero band — pure atmosphere, never a fill or text color.
• Haze Rose (#fe3c7d) — frequency 1. Used as shadow (1). The magenta lobe of the haze. Same role — atmosphere only.

Typography

Font Family

Neue Montreal is the entire system — display, body, button, wordmark, caption. There is no display serif and no monospace. Fallback stack: ui-sans-serif, system-ui, sans-serif, plus the legacy 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' for emoji glyph passthrough.

Hierarchy

Principles

• Weight 500 is the system default. Display, button, label, and wordmark all hold 500. Weight 300 appears only on the dek and a narrow body variant.
• Display line-height equals font-size. The 72px hero runs at a 72px line-height so the typewriter cursor flushes against the cap-height — display leading would float the cursor too high.
• Negative tracking only on hero. The 72px display pulls -0.96px tighter; every other tier holds normal tracking.

Note on Font Substitutes

Neue Montreal is licensed from Pangram Pangram. Open-source substitutes: General Sans at weight 500 (the closest geometric humanist match), Inter Tight at weight 500 (preserves the cap-height ratio), or PP Neue Montreal Mono for the wordmark tier only.

Layout

Spacing System

• Base unit: 4px.
• Tokens: {spacing.xxs} 4px · {spacing.xs} 8px · {spacing.sm} 12px · {spacing.base} 16px · {spacing.md} 20px · {spacing.lg} 24px · {spacing.xl} 32px · {spacing.section} 80px · {spacing.hero-gutter} 150px.
• Section padding: 80px vertical, 24px horizontal on the top-nav and the press-logo row.

Grid & Container

• Single-column landing: hero band is centered with the chat input capped at ~720px width and the tilted album-art cards positioned at the left and right edges with negative offsets.
• The hero-gutter token (150px) is the vertical breathing distance between the top-nav and the hero h1 — generous enough to keep the haze from crowding the wordmark.

Whitespace Philosophy

The landing is one viewport tall by design. Padding is heavy at the top (150px gutter) and shallow inside the chat input (20px) so the haze occupies the full canvas while the interactive surface stays compact.

Elevation & Depth

The system uses atmospheric depth, not shadow ladders. Cards float over the canvas via the orange-to-magenta haze rather than via cast shadows; the only literal shadow stop is #000000 underneath the tilted album-art cards.

Decorative Depth

The orange-to-magenta-to-violet haze is the system's strongest atmospheric pattern. It is generated as a radial bloom centered behind the hero h1, and it animates slowly to suggest motion without forcing the eye away from the cream pill primary.

Shapes

Border Radius Scale

The JSON extractor reports the legacy 3.35544e+07px value for full pills — both 9999px and that value resolve identically in browsers. Every interactive surface is rounded; the only sharp corners in the system are inside the play-button SVG glyph.

Components

Top Navigation

top-nav — Background {colors.canvas}, text {colors.ink-on-canvas}. Wordmark left at {typography.wordmark} (12.68px uppercase), "Log in" text-link plus "Join Suno for free" cream pill right. Padding 0px 24px, height 64px.

wordmark — Uppercase "SUNO" at 12.68px / weight 500 / {colors.ink-on-canvas} — the only uppercase tier in the system.

Buttons

button-primary-cream — The inverted primary. Background {colors.primary} (#f7f4ef), text {colors.primary-ink} (#101012), type {typography.button-md} (15px / 500), padding 8px 16px, height 40px, rounded {rounded.pill}, border 0. Used on "Join Suno for free" only.

button-log-in-outline — Transparent pill with a {colors.surface-hairline} 1px border. Background transparent, text {colors.ink-on-canvas}, type {typography.button-md}, padding 8px 16px, height 40px, rounded {rounded.pill}. Pairs with the cream primary as the secondary nav action.

button-create-gradient — The pink-to-orange-to-violet sub-pill on the chat input. Background {colors.accent-pink} (linear gradient to {colors.accent-orange} and through {colors.accent-violet}), text {colors.ink-on-canvas}, type {typography.button-md}, padding 8px 16px, height 40px, rounded {rounded.pill}. The saturated palette lives here, not on the primary.

button-advanced-chip — Inline "Advanced" toggle inside the chat input. Background transparent, text {colors.ink-secondary}, type {typography.label-md}, padding 4px 8px, height 32px, rounded {rounded.xs}.

button-add-circle — The 32×32 round "+" glyph button inside the chat input. Background {colors.surface-tertiary}, rounded {rounded.full}.

button-dice-square — The 32×32 dice-randomize glyph next to the Create sub-pill. Background {colors.surface-tertiary}, rounded {rounded.xs}.

Hero & Atmospheric

hero-band — Background {colors.canvas}, padding 80px 0px. Holds the wordmark, the 72px hero h1 with typewriter cursor, the dek, and the chat input centered.

hero-heading — Display h1 at {typography.display-hero} (72px / 500 / -0.96px / lh:1). Text {colors.ink-on-canvas}. Width capped at ~593px to wrap the typewriter prompt across two lines.

hero-dek — Sub-heading at {typography.dek-light} (18px / 400). Padding 12px 20px 0px (no bottom padding — the chat input sits directly below).

haze-bloom — Decorative atmospheric layer. Background {colors.haze-warm} radial-gradient through {colors.haze-rose} to violet, opacity 0.6. Pure decoration — no copy or interactive surface sits inside the bloom.

Chat Input

chat-input — The composer surface. Background {colors.canvas-elevated}, text {colors.ink-secondary}, type {typography.body-light}, padding 20px, height 104px, rounded {rounded.md} (12px), 1px {colors.surface-hairline} border.

chat-placeholder — The "Chat to make music" placeholder at {typography.body-light} (16px / 300), color {colors.ink-tertiary}.

Product Preview

album-card-tilted — Tilted album-art preview cards drifting in from the left and right edges. Background {colors.canvas-elevated}, rounded {rounded.lg} (20px), padding 12px, width 240px. Each card holds a play-glyph circle, an artwork image, and a 11px caption-xs metadata row.

play-glyph-circle — 48×48 circular play glyph over the album artwork. Background {colors.canvas-elevated}, opacity 0.6, rounded {rounded.full}.

Press Logo Row

press-logo-row — Footer-adjacent row carrying Rolling Stone, Variety, Wired, Billboard, Complex logos. Background transparent, text {colors.ink-tertiary}, type {typography.caption-sm} (11.685px), padding 0px 24px, height 56px.

Inline Affordances

log-in-text-link — Plain text "Log in" affordance in the top-nav, paired with the cream pill primary. Background transparent, text {colors.ink-on-canvas}, type {typography.button-md}.

footer-caption — The thin caption tier under the press-logo row. Background transparent, text {colors.ink-tertiary}, type {typography.caption-sm}.

Do's and Don'ts

Do

• Reserve {colors.primary} (cream pill) for the onboarding primary CTA — "Join Suno for free" and equivalents.
• Hold the saturated accent pool back for the {component.button-create-gradient} sub-pill and the in-product compose action.
• Use the atmospheric haze ({colors.haze-warm} + {colors.haze-rose} + violet) as decoration only, never as a fill or text color.
• Use Neue Montreal at weight 500 across every visible tier. Weight 300 stays on the 16px dek and the 18px h2 only.
• Use the strict short radius scale: 6px chips, 12px chat input, 20px album cards, 9999px pills. No 8px, no 16px.

Don't

• Don't paint the primary CTA with the accent pink (#fd429c). That hex is reserved for the gradient Create sub-pill — using it on the primary collapses the inversion that distinguishes onboarding from compose.
• Don't extract a fill color from the atmospheric haze. The orange #ffb003 and rose #fe3c7d are shadow-tier hexes with a total frequency of 1 each in the JSON — they exist only as the radial-gradient stops, not as surface colors.
• Don't use a 9999px pill on the chat input. The composer surface holds 12px ({rounded.md}) specifically to distinguish a typing surface from an interactive CTA.
• Don't drop the hero h1 below 72px on desktop. Suno's display tier is a single fixed size with -0.96px tracking — scaling it down to 56px or 48px shifts the brand voice from theatrical to utility.
• Don't pair the cream pill with a saturated outline. The "Log in" secondary uses a {colors.surface-hairline} (#38383e) outline on the canvas — a saturated outline competes with the gradient Create sub-pill below.
• Don't use the multi-accent palette as a six-color rainbow on the same surface. The accents cycle inside the Create-gradient as a continuous bloom, not as discrete swatches.

Known Gaps

• Neue Montreal is a licensed typeface; General Sans and Inter Tight are documented substitutes.
• The atmospheric haze animation timing (slow drift, color cycle period) is out of scope for the static spec.
• In-product surfaces (the actual track-generation studio, library, and player) are not captured — the spec covers only the public landing.
• The typewriter-cursor hero loop (prompt rotation list, cursor blink rate) is documented as a single 72px display but not as a motion sequence.
• Sub-brand surfaces (Suno Studio, Suno Pro) may use additional accent voltages not visible on the public homepage.