--- version: alpha name: "Suno" description: "Suno's site is a recording booth. The canvas drops to `#101012` with cream `#f7f4ef` text — the off-white reads warmer than pure white, like vinyl-sleeve paper under stage lights — and Neue Montreal carries display copy at 72px with `-0.96px` tracking. The single chromatic accent is a hot-pink `#fd429c` cue light that signals records, hearts, and the active row in long lists; everything else stays monochromatic so the album-art tiles can sing. Where Krea commits to absolute `#000000` and refuses to bold, Suno warms the canvas slightly and sets Neue Montreal at weight 500 with tight leading — chunky song-title cadence over museum placard." colors: bg: "#101012" bg-alt: "#1c1c1f" surface: "#1c1c1f" surface-translucent: "rgba(28, 28, 31, 0.60)" surface-soft: "rgba(255, 255, 255, 0.05)" surface-strong: "rgba(255, 255, 255, 0.08)" surface-iced: "#fcfbf9" surface-paper: "#f7f4ef" text: "#f7f4ef" text-strong: "#ffffff" text-medium: "#e0ddd6" text-muted: "#c2c2c1" text-soft: "#a3a3a3" text-faint: "#737373" text-paper: "#101012" brand: "#fd429c" brand-deep: "#e02f8a" brand-soft: "rgba(253, 66, 156, 0.15)" on-brand: "#ffffff" accent-cobalt: "#3860be" accent-deep: "#27455c" accent-amber: "#f5a623" link: "#f7f4ef" link-hover: "#fd429c" selected-bg: "rgba(253, 66, 156, 0.15)" disabled: "#737373" border: "rgba(255, 255, 255, 0.10)" border-strong: "rgba(255, 255, 255, 0.18)" border-subtle: "rgba(255, 255, 255, 0.05)" border-pink: "rgba(253, 66, 156, 0.40)" success-bg: "rgba(34, 197, 94, 0.12)" success-text: "#86efac" warning-bg: "rgba(245, 166, 35, 0.12)" warning-text: "#fcd34d" danger-bg: "rgba(239, 68, 68, 0.12)" danger-text: "#fca5a5" info-bg: "rgba(56, 96, 190, 0.15)" info-text: "#93b8ee" typography: display: fontFamily: "Neue Montreal" fontSize: "96px" lineHeight: 1.5 letterSpacing: "-0.013em" body: fontFamily: "Neue Montreal" fontSize: "16px" lineHeight: 1.5 mono: fontFamily: "SFMono-Regular" rounded: button: "8px" card: "20px" pill: "9999px" spacing: xs: "1px" sm: "2px" md: "6px" lg: "12px" xl: "20px" --- ## Overview ## Overview Suno is a recording booth dressed as a chat app. The canvas drops to `#101012` — a near-black with a faint warm tint — and the body text is `#f7f4ef`, an off-white cream that reads like the paper of a vinyl sleeve under tungsten light. The combination is the brand's defining mood: warmer than Krea's absolute black, more atmospheric than Vercel's monochrome, more curated than a generic dark dashboard. The page reads as a recording studio at golden hour. The display face is **Neue Montreal** by Pangram Pangram, set at 72px on a 72px line-height with `-0.96px` of tracking and weight **500** (medium). The medium weight on tight leading is the typographic signature: it produces a chunky, song-title cadence. "Make a house song about quitting your job" reads like a track listing on a record sleeve — not a marketing headline, not a research paper title, a *song title*. The choice of medium (not bold, not regular) puts Suno in Spotify's headline-weight register rather than the SaaS-marketing register of Stripe or Vercel. The single chromatic accent is **hot-pink `#fd429c`** — used sparingly as a cue light on records, hearts, and the now-playing row. Suno's product surface is a long vertical feed of square album-art tiles, so the chrome stays monochromatic to let the user-generated artwork carry all the colour. The pink only appears when something is "active" — currently playing, freshly liked, the primary CTA. The discipline keeps the pink-on-near-black pairing recognisable from a thumbnail and ties the marketing surface to the product UI without breaking the metaphor. Atmospheric vocabulary: **booth-warm, vinyl-sleeve-cream, song-title-cadence, hot-pink-cue-light, composer-at-bottom, chunky-medium-weight, tungsten-undertone, album-tile-feed, chat-app-as-music-studio, Pangram-Pangram-Neue-Montreal.** Card radii sit at 20px — softer than Linear's 6–8px, harder than Apple Music's near-circles — landing at the chat-app sweet spot. Section rhythm runs 64–96px; the feed packs tight while the chrome breathes. **Key Characteristics** - Near-black `#101012` canvas — warm-tinted, not absolute black - Cream `#f7f4ef` body text — warmer than pure white, vinyl-sleeve paper register - Neue Montreal (Pangram Pangram) at 72px / weight 500 / -0.96px tracking - Hot-pink `#fd429c` accent — single chromatic moment, used as cue light - Album-art tile grid — 1:1 squares at 20px radius - Composer-at-bottom shape — chat-app metaphor for music creation - Body weight 300 (light) — captions whisper, headlines shout - Card radius 20px — Suno's signature shape, softer than Linear - 10% white hairlines — tonal stacking, no heavy shadows - Dark-first; cream surface only on rare light contexts ## Colors ### Primary - **bg** `#101012` — near-black with faint warm tint; the booth ground. - **text** `#f7f4ef` — cream display copy; warmer than pure white, the vinyl-sleeve register. - **bg-alt** `#1c1c1f` — secondary panel for chrome and inset zones. - **brand-cta-bg** `#fd429c` — hot-pink primary CTA fill. ### Brand & Accent - **brand** `#fd429c` — hot-pink cue light. Primary CTA, link hover, "now playing" indicator, hearts. - **brand-deep** `#e02f8a` — pressed pink. - **brand-soft** `rgba(253, 66, 156, 0.15)` — 15% pink wash for selected rows and hovered tiles. - **accent-cobalt** `#3860be` — secondary blue accent, used in feature panels (never on chrome). - **accent-deep** `#27455c` — deep teal-blue accent for inset feature backgrounds. - **accent-amber** `#f5a623` — rare amber for warnings. ### Interactive - **link** `#f7f4ef` — links stay cream on dark; underlined for affordance. - **link-hover** `#fd429c` — pink on hover — the cue-light moment. - **selected-bg** `rgba(253, 66, 156, 0.15)` — selected row in feed lists. - **disabled** `#737373` — neutral-500 disabled chrome. ### Neutral Scale - **cream** `#f7f4ef` — primary text, the vinyl-sleeve white. - **white** `#ffffff` — rare absolute white for primary hero emphasis only. - **cream-medium** `#e0ddd6` — slightly muted cream. - **cool-grey-300** `#c2c2c1` — muted UI label. - **cool-grey-400** `#a3a3a3` — quiet metadata. - **cool-grey-500** `#737373` — disabled. - **near-black** `#101012` — page canvas. - **panel** `#1c1c1f` — raised surfaces. - **whisper** `rgba(255, 255, 255, 0.05)` — softest hover wash. ### Surface & Borders - **surface-0 (page)** — `#101012` near-black booth. - **surface-1 (panel)** — `#1c1c1f` raised. - **surface-translucent** — `rgba(28, 28, 31, 0.60)` — 60% panel for floated cards on imagery. - **surface-soft** — `rgba(255, 255, 255, 0.05)` — whisper card on hover. - **surface-paper** — `#f7f4ef` rare cream surface for paper-light contexts. - **border** `rgba(255, 255, 255, 0.10)` — 10% white hairline (default). - **border-strong** `rgba(255, 255, 255, 0.18)` — emphasised rule. - **border-subtle** `rgba(255, 255, 255, 0.05)` — quietest division. - **border-pink** `rgba(253, 66, 156, 0.40)` — brand-tinted ring. ### Shadow Colors Suno's shadows are **deep-black with rare pink-glow accents**. The dark canvas absorbs cast shadows, so most surfaces lift via tonal stepping (`#101012` → `#1c1c1f` → whisper). The brand uses an exceptional **pink glow** (`0 0 24px rgba(253, 66, 156, 0.35)`) on the now-playing tile — a single brand-tinted shadow used as a cue-light effect. This is the rare case where the brand colour bleeds into elevation. ### Semantic - **success** — bg `rgba(34, 197, 94, 0.12)`, text `#86efac`. Reserved for save-confirmation. - **warning** — bg `rgba(245, 166, 35, 0.12)`, text `#fcd34d` (amber-300). - **danger** — bg `rgba(239, 68, 68, 0.12)`, text `#fca5a5` (red-300). - **info** — bg `rgba(56, 96, 190, 0.15)`, text `#93b8ee` — borrows the cobalt accent. Note: Suno uses Tailwind 300-step text colours for semantic on dark to maintain AA contrast while staying calm. Saturated 500s would compete with the pink cue light. ## Typography ### Font Family - **Display & Body**: `"Neue Montreal", ui-sans-serif, system-ui, sans-serif` — Pangram Pangram's modern grotesque, licensed and self-hosted. Closer to Helvetica Now than to Inter; relaxed terminals, tight apertures, slightly playful counters. - **Mono**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` — used only for tabular data (track durations, BPM, sample rates). - **OpenType features**: `kern` and `liga` enabled. `ss01` for the alternate single-storey `a` in Neue Montreal display sizes. `tnum` and `zero` enabled in mono. ### Hierarchy | Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes | |---|---|---|---|---|---|---|---| | Display Hero | Neue Montreal | 96px | 500 | 1.0 | -0.013em | kern liga | Reserved for major launches | | Display | Neue Montreal | 72px | 500 | 1.0 | -0.013em | kern liga | Homepage hero — the signature | | H1 | Neue Montreal | 56px | 500 | 1.05 | -0.012em | liga | Page title | | H2 | Neue Montreal | 48px | 500 | 1.05 | -0.012em | liga | Major section | | H3 | Neue Montreal | 24px | 500 | 1.2 | normal | — | Sub-section | | H4 | Neue Montreal | 20px | 500 | 1.3 | normal | — | Card heading | | H5 | Neue Montreal | 16px | 500 | 1.4 | normal | — | Inline emphasis | | Eyebrow | Neue Montreal | 12px | 500 | 1.4 | 0.06em | uppercase | Section pre-label | | Body Large | Neue Montreal | 18px | 300 | 1.5 | normal | — | Lede paragraph | | Body | Neue Montreal | 16px | 300 | 1.5 | normal | — | Default body — *light weight is the brand* | | Body Small | Neue Montreal | 14px | 300 | 1.5 | normal | — | Compact UI body | | Caption | Neue Montreal | 13px | 400 | 1.4 | normal | — | Image captions | | Caption Tabular | mono | 13px | 500 | 1.4 | normal | tnum | Track duration, BPM | | Label | Neue Montreal | 12px | 500 | 1.3 | normal | — | UI labels, chips | | Code | mono | 13px | 400 | 1.55 | normal | tnum zero | Inline code (rare) | | Code Micro | mono | 11px | 400 | 1.4 | normal | — | Footnote, version | ### Principles - **Display weight 500 with tight leading is the signature.** Neue Montreal at 72px / 500 / 1.0 line-height / -0.96px tracking produces the chunky song-title cadence. The choice of medium (not 700, not 400) defines the brand voice. - **Body weight 300 (light) is non-negotiable.** The contrast between heavy 500 headlines and 300 body is the brand's typographic signal: song titles shout, captions whisper. - **Single-family discipline.** Neue Montreal carries display, body, captions, labels — everything except tabular numerals. - **Negative tracking only at display sizes.** -0.013em at 72px+, -0.012em at 48–56px, normal at 24px and below. - **Body size 16/24.** Slightly tighter than editorial 18/28; matches the chat-app density of Discord and Linear. - **Eyebrow uses 0.06em tracking + uppercase.** Wider than Anthropic's 0.04em, narrower than Krea's 0.08em — the music-context register. - **No italics in display.** Italics belong to lyric quotes in body copy. - **OpenType: ss01 in display** — switches to the alternate `a` glyph in Neue Montreal headlines for visual interest. ## Layout ### Spacing System - **Base unit**: 4px. - **Scale**: 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128 — chat-app density. - **Density observation**: Suno is *medium-tight*. The album feed packs at 16–24px gutters; chrome breathes at 64–96px section rhythm. The composer-at-bottom requires the feed to be navigable without competing for vertical space. ### Grid & Container - **Page max width**: `1280px` for chrome; feed pages bleed to viewport. - **Site gutter**: `clamp(20px, 5vw, 48px)`. - **Grid**: 12 columns with 16px gutters. - **Album feed grid**: 4–6 columns at 1:1 aspect ratio with 16px gutters; collapses to 3 → 2 → 1 across breakpoints. - **Hero treatment**: 72px headline left-aligned, body 16px / 300 below in cream; sticky composer pill at viewport bottom. ### Whitespace Philosophy The whitespace is **booth-warm**. Section gutters at 64–96px; intra-section at 16–24px. The page reads tighter than Anthropic's broadsheet but warmer than a developer dashboard — closer to a curated record-store website. ### Section Cadence - Hero (booth-dark) → Album feed (booth-dark, full-bleed grid) → Feature panels (occasional cobalt-tinted dark for contrast) → Footer (slightly lighter `#1c1c1f`). - The whole site stays in dark territory; cream surfaces appear only on rare paper-light contexts (legal, terms). - Section breaks: 64–96px vertical space + 1px hairlines (`rgba(255, 255, 255, 0.10)`). ### Breakpoints | Name | Width | Use | |---|---|---| | Mobile | < 640px | Single-column feed; full-screen nav | | Tablet | 640–1024px | 2–3 column album feed | | Desktop | 1024–1280px | 4-column album feed; full nav | | Wide | 1280–1536px | 5-column album feed | | Ultra | > 1536px | Page locks at 1280; gutters expand; feed up to 6 columns | ### Touch Targets - Minimum tap target: 44×44px. - Pill buttons: 48px minimum height on mobile (12px vertical padding). - Album tile: tile = tap target; play overlay icon 48×48 at center. - Composer mic / send buttons: 48×48 visual + extended tap area. ### Collapsing Strategy - **Header**: full nav at ≥1024px; hamburger sheet below. - **Hero**: 72px → 56px → 40px headline across desktop/tablet/mobile. - **Composer**: full-width at mobile; max-width 720px on tablet+; remains sticky-bottom across all sizes. - **Album grid**: 5-up → 4-up → 3-up → 2-up → 1-up across sizes. - **Section spacing**: 96px → 64px → 48px across sizes. ### Image Behavior - Album artwork uses `srcset` with 1x/2x/3x for crisp Retina rendering. - Native lazy-loading on below-fold tiles. - `aspect-ratio: 1 / 1` locked. ### Container Queries Used inside album tiles to switch caption layout (single line vs. wrap) when tile width crosses 200px. ## Elevation & Depth | Level | Treatment | Use | |---|---|---| | 0 | Flat — no shadow | Default page surface, hero, body sections | | 1 | Tonal — `#1c1c1f` against `#101012` | Cards, panels | | 2 | `rgba(0,0,0,0.30) 0 1px 3px` | Sticky nav on scroll | | 3 | `rgba(0,0,0,0.40) 0 4px 12px` | Hover-lifted cards | | 4 | `rgba(0,0,0,0.50) 0 16px 32px -8px` | Dropdowns, popovers | | 5 | `rgba(0,0,0,0.70) 0 24px 48px -12px` | Modals, dialogs | | Special | `0 0 24px rgba(253, 66, 156, 0.35)` | Pink-glow on now-playing tile only | ### Shadow Philosophy Suno's depth is **tonal-first with a single brand-tinted exception**. The dark canvas absorbs cast shadows, so most surfaces lift via tonal stepping. The exception: the "now-playing" album tile gets a pink-glow shadow (`0 0 24px rgba(253, 66, 156, 0.35)`) — the only place the brand colour bleeds into elevation. This is intentional: the glow signals *currently playing* without needing a separate badge or indicator. ## Shapes | Tier | Value | Use | |---|---|---| | Micro | 2px | Decorative dividers | | Standard (sm) | 4px | Compact chips (rare) | | Comfortable (md) | 8px | Sub-controls, code blocks | | Relaxed (lg) | 12px | Inputs, dropdowns, ghost buttons | | Featured (xl) | 16px | Inset cards | | Card | 20px | Cards, album tiles, modals — Suno's signature | | Pill | 9999px | Primary CTA, composer, tag chips, sign-in | Suno's signature radius is **20px on cards and album tiles** — softer than Linear/Vercel, harder than Apple Music's near-circles. Pills (`9999px`) are reserved for the primary CTA, the composer, and tag chips. Buttons land at `9999` (pill) for primary/secondary; `12px` for ghost (quieter). ## Components ### Buttons **Primary (Pink Pill)** - Background: `#fd429c` hot-pink. Text: `#ffffff`, Neue Montreal 500 / 14px. - Padding: `12px 24px`. Radius: `9999` (full pill). No border. - Hover: bg → `#e02f8a` over 200ms. - Active: bg → `#cb2680` (pressed beat). - Focus: 2px pink ring with 2px offset. - Use: Primary CTA — *Make a song, Sign up, Try Suno.* **Secondary (Outline Pill)** - Background: transparent. Text: `#f7f4ef`, Neue Montreal 500 / 14px. - Border: `1px solid rgba(255, 255, 255, 0.18)`. Radius: `9999` (pill). - Hover: bg → `rgba(255, 255, 255, 0.06)`. - Use: Twin to primary — *Listen on Spotify, Read more.* **Ghost (Quiet)** - Background: transparent. Text: `#f7f4ef`, Neue Montreal 500 / 14px. - Padding: `8px 14px`. Radius: `12px`. - Hover: bg → `rgba(255, 255, 255, 0.06)`. - Use: Nav links, footer, repeated inline. **Cream (Inverted)** - Background: `#f7f4ef` cream. Text: `#101012`, Neue Montreal 500 / 14px. - Padding: `12px 24px`. Radius: `9999`. - Hover: bg → `#ffffff`. - Use: Rare inverted CTA — paper button on the booth ground for press contexts. ### Cards **Editorial Card** - Background: `#1c1c1f`. Border: `1px solid rgba(255, 255, 255, 0.10)`. Radius: `20px`. Padding: `20px`. - Shadow: none at rest; on hover, `rgba(0, 0, 0, 0.40) 0 4px 12px`. - Use: Feature card, capability tile. **Album Tile** - Background: `#1c1c1f` (placeholder while artwork loads). Border: none. Radius: `20px`. Aspect: 1:1. - Hover: 24px soft shadow at 50% black + 1.02× scale; play-button overlay fades in. - Use: Album art grid — image bleeds to edge, title/artist drop below tile in cream/muted. **Now-Playing Tile** - Same as album tile, but with `pink-glow` shadow (`0 0 24px rgba(253, 66, 156, 0.35)`). - Optional 1px pink hairline ring. - Use: The single tile in view that's currently playing — pink glow signals state. ### Badges, Tags, Pills **Genre Tag** — bg `rgba(255, 255, 255, 0.08)`, text `#c2c2c1`, Neue Montreal 500 / 12px, padding `4px 12px`, radius `9999`. Hover deepens bg to 12% white. **Pink Pill** — bg `rgba(253, 66, 156, 0.15)`, text `#fd429c`, radius `9999`. "Now playing", "Hearted", "New" badges. **Eyebrow Label** — no chrome, just type. Neue Montreal 500 / 12px / uppercase / 0.06em tracking, colour `#a3a3a3`. ### Inputs / Forms **Text Input** - Background: `#1c1c1f`. Border: `1px solid rgba(255, 255, 255, 0.18)`. Radius: `12px`. Padding: `12px 16px`. - Font: Neue Montreal 400 / 14px. Placeholder: `#a3a3a3`. - Focus: `0 0 0 2px #fd429c` ring, border → `#fd429c`. - Error: border → `#ef4444`, helper red below. **Prompt Composer (Hero / Studio)** - Background: `#1c1c1f`. Border: `1px solid rgba(255, 255, 255, 0.18)`. Radius: `9999` (full pill). Padding: `14px 20px 14px 24px`. - Font: Neue Montreal 400 / 16px. Placeholder: `#a3a3a3` ("Describe a song…"). - Inner button: 40px pink circle hard-right, white note glyph. - Position: sticky-to-viewport-bottom on the home feed, mirroring the in-product studio composer. - Use: The brand's hero shape — composer-at-bottom that ties marketing to product UI. ### Navigation - Header height `64px`. Background `transparent` over hero (uses `backdrop-filter: blur(12px)` on scroll). - Logo: Suno wordmark in cream, Neue Montreal 500. - Nav links: Neue Montreal 500 / 14px, colour `#f7f4ef`, padding `8px 14px`. Hover: text → `#fd429c`. - Right-side: ghost "Sign in" + primary pink "Try Suno" button. - Mobile (<640px): hamburger collapses to a full-screen sheet; links stack at 24px / 500. ### Optional Components **Dropdown Menu** — bg `#1c1c1f`, border `rgba(255, 255, 255, 0.10)`, radius `12px`, shadow `rgba(0, 0, 0, 0.50) 0 12px 24px -8px`. Items: Neue Montreal 400 / 14px, hover bg `rgba(255, 255, 255, 0.06)`. **Tooltip** — bg `#1c1c1f`, text `#f7f4ef`, radius `8px`, padding `6px 10px`, font `12px / 500`. **Toast** — bg `#1c1c1f`, border `rgba(255, 255, 255, 0.10)`, radius `12px`, padding `12px 16px`, shadow standard. **Modal** — bg `#1c1c1f`, radius `20px`, shadow `rgba(0, 0, 0, 0.70) 0 24px 48px -12px`, max-width `560px`. Backdrop: 80% black. **Waveform Visualizer** — translucent panel `rgba(255, 255, 255, 0.05)` with pink-tinted bars; animated only on actively-playing tiles. ### Easing Curves - **`ease-standard`**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material default. - **`ease-emphasized`**: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter. - **`ease-music`**: `cubic-bezier(0.32, 0.72, 0, 1)` — slow-out, fast-settle; tile reveal, waveform animation. ### Duration Buckets - **Fast (100ms)** — colour transitions, focus rings, link hovers. - **Standard (200ms)** — button hover, card hover, dropdown reveal. - **Slow (320ms)** — modal enter/exit, composer expansion. - **Page (480ms)** — route transitions, hero reveal sequences. ### Per-Component Micro-States - **Button hover (primary pink)**: bg `#fd429c` → `#e02f8a` over 200ms; subtle 1.02× scale on the icon glyph. - **Album tile hover**: scale 1.02× over 200ms + 24px shadow + play-button overlay fades in over 100ms. - **Now-playing tile**: pink glow pulses subtly (`@keyframes glow-pulse` from 35% to 50% opacity over 2s, infinite, respects reduced-motion). - **Link hover**: colour `#f7f4ef` → `#fd429c` over 100ms; underline thickens 1px → 2px. - **Heart toggle**: empty → pink fill with 1.2× scale over 200ms ease-music (springy "boop"). - **Composer focus**: ring grows from 2px to 3px at 30% pink; placeholder fades to 60%. ### Page Transitions Hero / feed cross-fade over 480ms ease-music. Album tiles fade in via `IntersectionObserver` at 80% viewport, 320ms duration with 12px translate-up. Composer persists across navigation (sticky-to-bottom). ### Reduced Motion `@media (prefers-reduced-motion: reduce)` — looping waveforms freeze on a static frame; pink glow stops pulsing (holds at 35%); all transforms collapse to opacity-only; durations halved. ### Contrast Pairs - **`#f7f4ef` text on `#101012` bg**: 17.0:1 — AAA at all sizes. - **`#ffffff` text on `#101012` bg**: 18.5:1 — AAA. - **`#c2c2c1` text on `#101012` bg**: 11.0:1 — AAA at body sizes. - **`#a3a3a3` text on `#101012` bg**: 7.5:1 — AAA at body sizes. - **`#737373` text on `#101012` bg**: 4.6:1 — AA at body sizes. - **`#ffffff` text on `#fd429c` brand**: 4.5:1 — AA at body sizes; safe for pink CTA. - **`#fd429c` text on `#101012` bg**: 5.6:1 — AA at body sizes; safe for link hover. ### Focus Indicators - Default ring: `0 0 0 2px #fd429c` with 2px offset. - Soft ring (composer focus): `0 0 0 3px rgba(253, 66, 156, 0.30)`. - All interactive surfaces show a visible focus state. ### ARIA Patterns - **Navigation**: `