---
version: alpha
name: Suno
description: A near-black creative canvas where centered Neue Montreal headlines float over an orange-to-pink glow, amethyst purple does the linking, and the one primary CTA is a warm-cream pill — an AI music studio that dresses like a record-label landing page, not a SaaS dashboard.

colors:
  # Surface / canvas
  background: "#101012"          # near-black canvas, the whole site
  surface: "#1a1a1d"             # raised cards, song tiles, panels
  surface-elevated: "#222226"    # hover / popover surfaces
  surface-translucent: "#26262b" # opaque stand-in for white@5% chips — was rgba(255,255,255,0.05)

  # Ink / text (warm-tinted, never pure)
  ink: "#ffffff"                 # primary headings
  ink-cream: "#f7f4ef"           # warm off-white — button + label text, the brand's true "white"
  ink-secondary: "#c2c2c1"       # supporting copy on dark
  ink-tertiary: "#a3a3a3"        # captions, metadata
  ink-inactive: "#6a6a72"        # disabled, faint helper text
  on-primary: "#101012"          # near-black text on the cream CTA

  # Brand accent — amethyst purple
  primary: "#7251f7"             # links, focus, primary accent
  primary-hover: "#8b6efe"       # accent hover / on-primary purple
  primary-soft: "#9e86ff"        # lighter purple tint
  primary-container: "#d7cdff"   # pale amethyst chips / badges
  on-accent: "#ffffff"

  # Creative spectrum — Suno's multicolor "make anything" palette
  accent-orange: "#ff6a00"       # hero glow left, energy
  accent-pink: "#fd429c"         # hero glow right, vocals
  accent-blue: "#1f8bff"         # info, links-on-tile
  accent-green: "#02d95c"        # success, "free" tags
  accent-red: "#f8441b"          # destructive, hot tags

  # Borders
  border: "#38383e"              # card edges, dividers (gray-300)
  border-strong: "#56565e"       # input outlines, focused chrome

  # Shadow tints (opaque approximations for the elevation table)
  shadow-ambient: "#000000"      # was rgba(0,0,0,0.25) — Google format requires hex
  shadow-glow-orange: "#ffb003"  # was rgba(255,176,3,0.094) — Google format requires hex
  shadow-glow-pink: "#fe3c7d"    # was rgba(254,60,125,0.094) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 72px
    fontWeight: 500
    lineHeight: 1.0
    letterSpacing: -0.96px
  display:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 48px
    fontWeight: 500
    lineHeight: 1.05
    letterSpacing: -0.8px
  heading:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 32px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: -0.4px
  heading-sub:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: -0.24px
  body-large:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.78
    letterSpacing: 0px
  body:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  body-light:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 300
    lineHeight: 1.5
    letterSpacing: 0px
  button:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.5
    letterSpacing: 0px
  label:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Neue Montreal, ui-sans-serif, system-ui, -apple-system, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 32px
  3xl: 48px
  4xl: 64px
  5xl: 96px
  6xl: 128px

rounded:
  xs: 2px
  sm: 6px
  md: 12px
  lg: 16px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink-cream}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-primary}"

  button-ghost:
    backgroundColor: "{colors.surface-translucent}"
    textColor: "{colors.ink-cream}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-accent}"
    typography: "{typography.button}"
    rounded: "{rounded.pill}"
    padding: 10px 20px
  button-accent-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-accent}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.md}"
    padding: 12px
  card-elevated:
    backgroundColor: "{colors.surface-elevated}"
    textColor: "{colors.ink-secondary}"
    rounded: "{rounded.lg}"
    padding: 16px

  song-tile:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-cream}"
    rounded: "{rounded.md}"
    padding: 8px

  input:
    backgroundColor: "{colors.surface-translucent}"
    textColor: "{colors.ink-cream}"
    typography: "{typography.body}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
  input-focus:
    backgroundColor: "{colors.surface-translucent}"
    textColor: "{colors.ink}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink-cream}"
    typography: "{typography.label}"
    padding: 16px 24px

  link:
    textColor: "{colors.primary}"
    typography: "{typography.body}"
    padding: 0px

  stat-chip:
    backgroundColor: "{colors.surface-translucent}"
    textColor: "{colors.ink-cream}"
    typography: "{typography.caption}"
    rounded: "{rounded.sm}"
    padding: 4px 8px

  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px
---

# Suno Design System

## Overview

Suno's site looks like the splash page for a record label that happens to run on AI. The canvas is a deep, faintly-blue near-black (`{colors.background}`), and the hero is not a product screenshot or a feature grid — it's a centered, two-line Neue Montreal headline ("Mind blowing song quality") floating in the dark, lit from behind by a soft orange-to-pink glow. Everything below it is a wall of album-art song tiles, each a tiny piece of cover art with a play button and a like count. The message lands before you read a word: this is a place where music gets made, and it should feel like culture, not configuration.

The signature move is the warm, off-white temperature of the "white." Headings are true white (`{colors.ink}`), but the workhorse light tone — button labels, secondary copy, the primary CTA fill — is a creamy `{colors.ink-cream}`, a paper-warm off-white that takes the clinical edge off a dark UI. The one primary call-to-action, "Join Suno for free," is a fully-rounded pill in that cream with near-black text, sitting opposite a transparent "Log in" ghost. There is exactly one filled button in the chrome; restraint at the top so the music tiles can be loud below.

Then there's color as material. Amethyst purple (`{colors.primary}`) is the structural accent — links, focus, the brand's identity hue — but Suno also carries a full creative spectrum (`{colors.accent-orange}`, `{colors.accent-pink}`, `{colors.accent-blue}`, `{colors.accent-green}`) that shows up in the hero glow, genre tags, and waveform moments. The hero's backlight is literally an orange-left / pink-right gradient (`{colors.shadow-glow-orange}` → `{colors.shadow-glow-pink}`), the visual equivalent of a synth pad. Type stays tight and confident: Neue Montreal at medium weight 500, -0.96px tracking at 72px, centered. The result reads as expressive and a little nocturnal — closer to a music app than a developer tool.

**Key Characteristics:**
- Deep near-black canvas (`{colors.background}`) edge to edge — committed dark theme, no light mode
- Centered Neue Montreal hero (`{typography.display-hero}`) at weight 500, -0.96px tracking — confident, not bold
- The "white" is warm cream (`{colors.ink-cream}`), not pure white, for labels and the primary CTA
- Exactly one primary button: a cream **pill** (`{rounded.pill}`) with near-black text — "Join Suno for free"
- Amethyst purple (`{colors.primary}`) as the structural accent for links and focus
- A full creative spectrum (`{colors.accent-orange}`, `{colors.accent-pink}`, `{colors.accent-blue}`, `{colors.accent-green}`) for tags and glows
- Hero backlit by an orange-to-pink radial glow (`{colors.shadow-glow-orange}` → `{colors.shadow-glow-pink}`)
- Song tiles in album-art format do the heavy lifting — the product is content, shown as a gallery
- Compact radii: `{rounded.sm}` (6px) on chips, `{rounded.md}` (12px) on tiles, pill on buttons
- Stat chips (play / like counts) on translucent fills (`{colors.stat-chip}`) — UI as liner notes
- Body copy runs airy with generous 1.78 line-height on lead paragraphs (`{typography.body-large}`)

## Colors

### Surface & Canvas
- **Near-Black** (`{colors.background}`): The dominant canvas — a deep charcoal with a faint blue cast. The entire site sits on it.
- **Raised Surface** (`{colors.surface}`): Song tiles, cards, and panels lifted a step off the canvas.
- **Elevated Surface** (`{colors.surface-elevated}`): Hover and popover surfaces, one step brighter.
- **Translucent Surface** (`{colors.surface-translucent}`): Opaque stand-in for the white@5% fills used on chips and inputs (the originals were rgba).

### Ink / Text
- **White** (`{colors.ink}`): Headlines only — the brightest, most deliberate tone.
- **Cream** (`{colors.ink-cream}`): The brand's true working "white" — warm off-white for button labels, secondary copy, and the primary CTA fill.
- **Secondary / Tertiary** (`{colors.ink-secondary}`, `{colors.ink-tertiary}`): Supporting copy and captions on dark.
- **Inactive** (`{colors.ink-inactive}`): Disabled and faint helper text.

### Brand Accent
- **Amethyst** (`{colors.primary}`): The structural accent — links, focus rings, brand identity. Hover lifts to `{colors.primary-hover}`.
- **Amethyst Soft / Container** (`{colors.primary-soft}`, `{colors.primary-container}`): Lighter purple tints for chips, badges, and decorative purple.

### Creative Spectrum
- **Orange / Pink / Blue / Green / Red** (`{colors.accent-orange}`, `{colors.accent-pink}`, `{colors.accent-blue}`, `{colors.accent-green}`, `{colors.accent-red}`): Suno's "make anything" palette — genre tags, the hero glow, status, and waveform color. Used expressively, not as primary chrome.

### Borders & Shadow Tints
- **Border / Strong** (`{colors.border}`, `{colors.border-strong}`): Hairline card edges and stronger input outlines on the dark surface.
- **Ambient / Glow** (`{colors.shadow-ambient}`, `{colors.shadow-glow-orange}`, `{colors.shadow-glow-pink}`): Opaque stand-ins for the deep drop shadow and the orange→pink hero backlight (originals were rgba — flattened for the Google spec).

## Typography

### Font Family
- **Primary**: `Neue Montreal` — a clean, slightly geometric Swiss-grotesque sans, with fallbacks `ui-sans-serif, system-ui, -apple-system, sans-serif`. It carries every word on the site; there is no monospace voice.
- **Weights**: the system lives between 300 and 500. Display and headings sit at medium 500; body runs 400 with an occasional light 300 for sub-headings.
- **Tracking**: tight negative tracking on display (-0.96px at 72px), neutral on body.

### Hierarchy

The full type scale lives in the `typography:` token block. Reference tokens directly.

| Token | Use |
|---|---|
| `display-hero` | 72px / 500 / -0.96px / centered — the marquee headline |
| `display` | 48px / 500 — large section titles |
| `heading` | 32px / 500 — feature headings |
| `heading-sub` | 24px / 400 — sub-section headings |
| `body-large` | 18px / 400 / 1.78 — airy lead paragraphs |
| `body` | 16px / 400 — standard body |
| `body-light` | 16px / 300 — lighter supporting lines |
| `button` | 16px / 500 — button and CTA text |
| `label` | 13px / 500 — UI labels |
| `caption` | 12px / 400 — stat chips, metadata |

### Principles
- **One typeface, full range**: Neue Montreal does everything. Hierarchy comes from size and weight, not from switching families.
- **Medium, not bold**: display weight is 500 — confident lightness over heavy black. The system rarely exceeds 500.
- **Tighten the big, relax the body**: aggressive negative tracking on the hero; neutral tracking and generous line-height on prose.

## Layout

### Spacing System
The full scale is in the `spacing:` token block. Base unit: 8px, with a 4px sub-step for tight tile internals. Song-tile galleries pack tightly; major sections breathe with large vertical rhythm (`{spacing.5xl}`–`{spacing.6xl}`).

### Grid & Container
- Max content width: ~1280px, centered
- Hero is centered single-column: headline + sub + a horizontal row of two CTAs
- Below the hero, a dense responsive grid of square album-art song tiles (5–7 per row on desktop)

### Whitespace Philosophy
- **Dark space as backdrop**: the near-black canvas is the silence between tracks — content tiles pop against it
- **Centered, stage-lit hero**: the headline is centered and backlit, framed like a marquee rather than left-aligned like a doc
- **Galleries pack, sections breathe**: tiles sit close together; section-to-section spacing is generous

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` hairline | Canvas content, most tiles |
| Raised (Level 1) | Surface step-up to `{colors.surface}` | Song tiles, cards lifted off the canvas |
| Card (Level 2) | `0 10px 15px -3px` + `0 4px 6px -4px` at ~10% black | Hover cards, popovers |
| Elevated (Level 3) | `0 25px 50px -12px` (`{colors.shadow-ambient}`) | Modals, the now-playing bar |
| Glow (Hero) | Dual radial `{colors.shadow-glow-orange}` left + `{colors.shadow-glow-pink}` right | The hero backlight — color, not shadow |

**Shadow Philosophy**: On a dark canvas, Suno separates layers mostly by raising surface brightness (`{colors.surface}` → `{colors.surface-elevated}`) rather than casting heavy shadows. True drop shadows are reserved for floating chrome like modals and the now-playing bar. The most distinctive "elevation" isn't a shadow at all — it's the hero's orange-to-pink radial glow, which lights the headline from behind like a stage rig.

## Shapes

The full radius scale is in the `rounded:` token block.

| Token | Value | Use |
|---|---|---|
| `xs` | 2px | Tiny inline markers, waveform bars |
| `sm` | 6px | Stat chips, inputs, small tiles |
| `md` | 12px | Song tiles, standard cards |
| `lg` | 16px | Large elevated cards, panels |
| `pill` | 9999px | All buttons, avatars, genre tags |

The system pairs compact rectangular radii on content (6–12px) with full pills on every interactive button. That contrast — tidy square-ish tiles, fully-round CTAs — is part of the music-app personality.

## Components

The complete component spec lives in the `components:` token block.

### Buttons
- **`button-primary`** — Cream (`{colors.ink-cream}`) pill, near-black text. The single filled CTA, "Join Suno for free." Hover brightens to pure white.
- **`button-ghost`** — Translucent surface pill, cream text. The "Log in" / secondary pattern.
- **`button-accent`** — Amethyst (`{colors.primary}`) pill, white text. Used when the accent needs to carry a CTA inside the app.

### Cards & Tiles
- **`card`** / **`card-elevated`** — Raised dark surfaces, 12–16px radius. **`song-tile`** is the signature unit: album art with a small play button and a stat chip, packed into galleries.

### Inputs
- **`input`** — Translucent fill, cream text, 6px radius. **`input-focus`** brightens the text and ring; Suno uses purple focus accents.

### Stat Chips & Badges
- **`stat-chip`** — Play / like counts on a translucent pill-ish fill, cream text — the liner-notes microcopy on every tile.
- **`badge`** — Pale amethyst container, near-black text, pill radius.

### Navigation
- **`nav-bar`** — Sits on the canvas color, cream UI labels, the cream "Join" pill at the right. No heavy bar shadow.

## Do's and Don'ts

### Do
- Keep the canvas near-black (`{colors.background}`) and separate layers by raising surface brightness, not by shadow
- Center the hero headline and backlight it with the orange→pink glow (`{colors.shadow-glow-orange}` → `{colors.shadow-glow-pink}`)
- Use cream (`{colors.ink-cream}`), not pure white, for button labels and secondary copy — keep true white (`{colors.ink}`) for headlines
- Keep exactly one filled primary CTA: a cream pill (`{components.button-primary}`)
- Let song-tile galleries (`{components.song-tile}`) be the visual weight — content is the hero
- Use amethyst (`{colors.primary}`) for links and focus; deploy the creative spectrum for tags and expressive moments
- Make every button a full pill (`{rounded.pill}`); keep tiles compact at `{rounded.sm}`–`{rounded.md}`
- Set display type in Neue Montreal at weight 500 with -0.96px tracking

### Don't
- Don't add a light mode — Suno's site is committedly dark
- Don't use pure white for body text or buttons — the warm cream is the brand temperature
- Don't fill multiple buttons in the chrome — one cream pill, the rest ghost
- Don't reach past weight 500 — the headlines are medium, not black
- Don't let the creative spectrum colors become primary chrome; they're accents, glows, and tags
- Don't square off the buttons — CTAs are always pills
- Don't cast heavy drop shadows on tiles — lift them with surface brightness instead
- Don't introduce a monospace label voice — Neue Montreal carries everything

---

## Responsive Behavior

### Breakpoints
*(No explicit breakpoints surfaced in extraction; the values below are the standard Tailwind-style stops the site behaves to.)*

| Name | Width | Key Changes |
|---|---|---|
| Mobile | <640px | Single column; hero scales 72px → ~40px; song grid drops to 2 columns; CTAs stack |
| Tablet | 640–1023px | Hero ~56px; song grid at 3–4 columns; nav condenses |
| Desktop | 1024–1279px | Full layout; centered hero; song grid at 5 columns |
| Large | ≥1280px | Max ~1280px container; song grid up to 6–7 columns; full glow visible |

### Touch Targets
- Pill buttons run ~40px tall with `10px 20px` padding — comfortable for thumbs
- Play / like controls on tiles carry generous hit areas; stat chips stay legible at 12px

### Collapsing Strategy
- **Navigation**: full horizontal nav → menu toggle; the cream "Join" pill persists
- **Hero**: headline scales down while keeping center alignment and the glow
- **Song grid**: column count drops with width (6–7 → 2) while tiles keep their square aspect
- **Spacing**: section padding compresses from `{spacing.6xl}` toward `{spacing.4xl}`

### Image Behavior
- Album-art covers are square and crop to fill their tiles; they reflow as responsive grid children rather than fixed art

---

## Agent Prompt Guide

### Quick Color Reference
- Background: Near-Black (`{colors.background}`)
- Headings: White (`{colors.ink}`)
- Working light tone: Cream (`{colors.ink-cream}`)
- Brand accent: Amethyst (`{colors.primary}`)
- Secondary text: `{colors.ink-secondary}`
- Border: `{colors.border}`
- Primary CTA: Cream pill (`{colors.ink-cream}` fill, `{colors.on-primary}` text)

### Example Component Prompts

- "Create a centered hero on near-black (`{colors.background}`) with a 72px white (`{colors.ink}`) Neue Montreal headline, weight 500, letter-spacing -0.96px, line-height 1.0, backlit by a radial glow that goes orange (`{colors.shadow-glow-orange}`) on the left to pink (`{colors.shadow-glow-pink}`) on the right, with a cream pill CTA and a transparent ghost button below"
- "Build the primary button: cream (`{colors.ink-cream}`) fill, near-black (`{colors.on-primary}`) text, `{rounded.pill}` radius, `10px 20px` padding, `{typography.button}` — 'Join Suno for free'; hover brightens to pure white (`{colors.ink}`)"
- "Render a song tile: square album art on a raised dark surface (`{colors.surface}`), `{rounded.md}` radius, a small play button overlay and a stat chip (translucent fill `{colors.surface-translucent}`, cream text, `{rounded.sm}`) showing the play count"
- "Design an input: translucent fill (`{colors.surface-translucent}`), cream text (`{colors.ink-cream}`), `{rounded.sm}` radius, `10px 14px` padding; on focus brighten the text to white and add an amethyst (`{colors.primary}`) ring"
- "Create a genre tag using the creative spectrum: pale amethyst container (`{colors.primary-container}`) with near-black text, or one of `{colors.accent-orange}` / `{colors.accent-pink}` / `{colors.accent-blue}` as a pill (`{rounded.pill}`)"

### Iteration Guide

1. Start on near-black (`{colors.background}`). If you reached for white or light gray, stop — Suno is committedly dark.
2. Separate layers by raising surface brightness (`{colors.surface}` → `{colors.surface-elevated}`), not by stacking shadows.
3. Use cream (`{colors.ink-cream}`) for labels and the primary CTA; reserve pure white (`{colors.ink}`) for headlines.
4. One filled button only — a cream pill. Everything else is ghost (`{components.button-ghost}`).
5. Headlines are Neue Montreal weight 500 at -0.96px tracking, centered. Verify before moving on.
6. Buttons are always full pills (`{rounded.pill}`); content tiles stay compact at `{rounded.sm}`–`{rounded.md}`.
7. Treat the orange→pink glow and the creative spectrum as expressive accents — never let them become the primary chrome.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Suno. Brand names and trademarks belong to their respective owners.