What is Suno's primary brand color?

Suno has no single saturated brand voltage. The canvas is near-black `#101012` and the primary action is a cream-white pill at `#f7f4ef` with `#101012` ink — an inverted move where the primary CTA holds the lightest color in the system. The saturated palette lives one tier down on the gradient `Create` sub-pill, which mixes six accent tokens: pink `#fd429c`, orange `#ff9448`, yellow `#f5d907`, green `#02d95c`, blue `#1f8bff`, and violet `#8b6efe`. None of these is the brand color alone; they cycle as a gradient signature.

What typography does Suno use, and what should I substitute?

Suno runs Neue Montreal across every tier — display, body, button, and wordmark — at weights 300 and 500 only. The hero h1 sits at 72px / weight 500 / -0.96px tracking with a 72px line-height (line-height equals font-size, no display leading), the dek runs 16px / weight 300, and the uppercase wordmark sits at 12.68px / weight 500. Neue Montreal is licensed from Pangram Pangram. Open-source substitutes that preserve the geometric humanist feel are PP Neue Montreal Mono for the wordmark or General Sans / Inter Tight at weight 500 for body and display.

What is the atmospheric haze and how is it built?

The haze is a single full-bleed radial gradient on the canvas that animates slowly through orange, magenta, and violet — closer to a vinyl-record cover backdrop than to a typical SaaS gradient mesh. It is decorative only: no copy sits inside the haze hot spot, no card extracts a color from it, and no CTA inherits it as a fill. The hero copy is centered over the cooler center band of the gradient so the cream pill primary holds maximum contrast against the canvas, not against the haze.

What is Suno's radius scale and shape language?

Pill plus soft rectangle. Every CTA and chip uses a `9999px` pill (the JSON reports the legacy `3.35544e+07px` value — both resolve to a full pill). The chat input wraps at `12px`, advanced toggles and small chips run at `6px`, and the tilted album-art preview cards run at `20px`. There is no sharp corner anywhere except inside the play-button glyph. The scale is intentionally short: 4 visible radii plus the pill, not a 10-step ladder.

Why does Suno use a cream pill for the primary CTA instead of a saturated brand color?

Where most AI tools paint the primary CTA with their brand voltage (Spotify Green, Cursor Indigo, Claude Coral), Suno reserves the saturated palette for the secondary `Create` button that holds the pink-to-orange gradient and triggers the music-generation flow. The primary `Join Suno for free` pill is a cream-on-near-black inversion so the visual weight reads as 'sign up' rather than 'compose'. The hierarchy is gradient = act-in-product, cream = onboard.

How do I use this DESIGN.md in my own React project?

Feed the file to Claude, Cursor, or GitHub Copilot and the agent will reproduce Suno's inversion — cream pill primary, gradient sub-CTA, atmospheric haze, tilted card decoration — rather than defaulting to a saturated-CTA-on-dark theme. You can also reference the tokens directly: every color, type style, radius, and spacing value is a quoted token ready to paste into Tailwind config or CSS variables. The component block maps each surface (button-primary-cream, button-create-gradient, chat-input, album-card-tilted, log-in-outline) to its token references.

Suno Design System

Suno's design system as a DESIGN.md file.

About Suno DESIGN.md

Curated by Dov AzencotUpdated May 13, 2026Source suno.com

Music, Video & Streaming
AI & LLM Platforms

Suno's landing surface is a near-black theater (`#101012`) lit from behind by an animated orange-to-magenta-to-violet atmospheric haze — closer to a vinyl-cover backdrop than to a typical SaaS gradient mesh. The wordmark sits at 12.68px in uppercase Neue Montreal, the 72px hero ("Make a song about…") cycles a typewriter cursor at -0.96px tracking, and two tilted album-art preview cards drift in from the page edges as the only product chrome. Where most AI tools paint a saturated brand voltage onto the primary CTA, Suno inverts the move: the primary "Join Suno for free" is a cream-white pill (`#f7f4ef` fill, `#101012` ink) and the saturated palette is reserved for the sub-action — a pink-to-orange-to-violet "Create" button that cycles through the six accent tokens of the system.

This DESIGN.md packages the marketing surface into a single machine-readable file built on the Google Labs spec. Inside: 22 color tokens spanning the canvas tier, surface ladder, hairline atmospheric stack, and the six saturated accent voltages; 12 type styles all running Neue Montreal at weight 300 / 500 from a 72px display down to an 11px micro-caption; 6 radius tokens including the strict 20px card and 9999px pill; 9 spacing tokens anchored on a 4px base; and 18 component recipes covering the cream pill, gradient sub-pill, glass chat input, advanced toggle, tilted album-art card, press-logo row, and the dim "Log in" outline pill that pairs with the primary.

Feed the file to Claude, Cursor, or GitHub Copilot and the agent reproduces Suno's inversion — cream pill primary, gradient sub-CTA, atmospheric haze, tilted preview cards — rather than defaulting to a saturated-CTA-on-dark AI-product theme. Reference the tokens directly to seed a Tailwind config or CSS variable layer; the component block maps each surface to its token references, so reconstructing the hero is a token lookup. The system is worth studying because it refuses two category defaults at once: the saturated primary CTA and the centered product illustration. Atmospheric haze plus tilted-card decoration carries the brand instead.

What makes it distinct

Inverted CTA voltagethe primary is a cream pill (`#f7f4ef`) on the near-black canvas, the saturated brand color sits on the sub-action only
Atmospheric haze, not gradient mesha single orange-to-magenta-to-violet radial bloom carries every brand color cue across the hero band
Multi-accent palettesix saturated tokens (`#fd429c`, `#ff9448`, `#f5d907`, `#02d95c`, `#1f8bff`, `#8b6efe`) cycle through the Create-button gradient rather than locking to one voltage
Neue Montreal at weight 500 across every tier72px hero, 16px dek at weight 300, 12.68px uppercase wordmark, no italics
Tilted album-art cards as decorative product previewtwo `20px` rounded cards rotate in from the page edges instead of a centered hero illustration

Live at suno.com

A snapshot of the brand in production. Hover the frame to scroll the page; click to visit.

suno.com

Explore Suno

Pick what you want to see — mockups, colors, typography, layout, or the full component list.

Brand & Accent

Sparing, CTA-only voltage.

Surface

Page and card backgrounds.

Text

Headlines, body, captions, muted.

Other

Specialty colors.

Suno design system FAQ

Common questions about Suno's tokens, components, and how to use this DESIGN.md in your project.

Specs, directories, and component libraries that pair with this design system.

Browse all design systems

The full directory of DESIGN.md files on shadcn.io, with live mockups for each.

Suno

The AI music generator whose marketing surface this spec captures.

The DESIGN.md specification

Google Labs' open spec for machine-readable design system files.

Use Suno in your project

One machine-readable file. Drop it into Claude, Cursor, or any AI tool that reads DESIGN.md.

Download DESIGN.md

Get Pro — Save 33%·Ends in --:--:--→