# Suno — Product App Design Spec

> Source: suno.com/discover (live DOM, computed styles + color census 2026-07-06; motion/effects capture 2026-07-07).
> Coverage: web app shell (Discover feed + player). Marketing is minimal; the app is the product. Responsive: not captured.

## 1. Visual Theme & Atmosphere

Sleek, moody, and creative — a night-studio aesthetic built on a cool near-black canvas warmed by cream text, the signature warm-on-cool contrast. Type is Neue Montreal, a geometric grotesque with warm proportions, kept modest at even weights so it stays out of the way of the content. The real color comes from vibrant AI-generated album-art gradients tiled across the card grid; the chrome around them is flat, layered, cool-dark monochrome. A hot-pink accent appears only sparingly — badges, active states, glow washes — while fully-rounded pill controls and a persistent bottom player bar define the shell. Feels: premium, expressive, night-studio.

## 2. Color Palette & Roles

### Cool-dark neutrals

| Token | Hex | Role / usage |
|---|---|---|
| bg | `#101012` | App canvas (cool near-black) |
| surface | `#252529` | Buttons, cards, chips |
| surface-alpha | `rgba(255,255,255,.04)` | Feed panels, tiles |
| overlay | `rgba(0,0,0,.3)` | Art overlays, scrims |
| border | `rgba(255,255,255,.08)` | Hairlines |

### Text (warm cream)

| Token | Hex | Role / usage |
|---|---|---|
| cream | `#f7f4ef` | Primary text (warm off-white) |
| cream-bright | `#fcfbf9` | Emphasis |
| gray | `#a3a3a3` | Secondary text |
| muted | `#6a6a72` | Tertiary / disabled |

### Accent

| Token | Hex | Role / usage |
|---|---|---|
| pink | `#fd429c` | Signature accent — badges, highlights, glow (`rgba(253,66,156,.25)` washes) |
| teal | `#27455c` | Album-gradient tint |

Rule: the UI is cool-dark monochrome with warm cream text; hot pink `#fd429c` is a sparing highlight (version badges, active states, glow). The real color comes from vibrant AI-generated album-art gradients tiled across the feed.

## 3. Typography Rules

Font stack: `"Neue Montreal", system-ui, -apple-system, sans-serif`. Neue Montreal is a geometric grotesque with warm proportions. Base: 15–16px / 400 / cream. App headings are modest (section-header scale), not oversized — the artwork carries the page.

| Role | Size/Line | Weight | Tracking |
|---|---|---|---|
| Section header | 16–18 | 600 | 0 |
| Card title | 15–16 | 500–600 | 0 |
| Body | 15–16 | 400 | 0 |
| UI / button | 15 | 500 | 0 |
| Meta / caption | 12–13 | 400 | 0 (gray/muted) |
| Marketing display | 40–64 | 500–600 | -2% (where present) |

Pattern: functional, even weights (400 body, 500 UI, 600 headers); the type stays out of the way of the album art.

## 4. Component Stylings

### Buttons / controls

- **Pill**: bg `#252529`, cream text, radius 9999, h40, 15px/500, padding `8px 16px`. Hover: lighten to ~`#2e2e33`.
- **Icon button**: round, `#252529` or transparent, cream icon; play buttons often cream/white circle over art. Icon-button padding `8px` square-round.
- **Accent / CTA**: pink `#fd429c` fill or pink-glow highlight for primary actions and "new version" badges.

### Song / album card

- `rgba(255,255,255,.04)` tile or bare art, radius 12; square AI-art cover (vibrant gradient), a hover play button, title (cream 15/500), artist + play-count meta (gray 12–13). Grid/rows in the Discover feed.

### Feed panels

- Radius 16, `rgba(255,255,255,.04)`, 20px padding; section header (16–18/600) + horizontal card row ("For You", "Made with Studio", "Because you like…").

### Sidebar

- Cool-dark, icon+label rows (Home, Create, Library), cream on hover, pill-highlight active; a prominent "Create" affordance.

### Player bar (signature)

- Persistent bottom bar: small square cover, title + artist, transport controls (prev/play/next as round icon buttons), a progress/waveform line (cream fill on muted track), time, volume. Pink accent on the active scrubber.

## 5. Layout Principles

- App shell: left sidebar + main scrollable Discover feed + persistent bottom player.
- Feed: stacked labeled sections, each a horizontal row of album-art cards; hero/featured items get a pink glow.
- Spacing: 4px grid; dense discovery grid; comfortable player bar.
- Dense but breathable; artwork-forward; dark throughout.

## 6. Depth & Elevation

- Radii: buttons/controls `9999px` (pills) and round icon buttons, album art / tiles `12px`, feed panels `16px`, small chips `6px`, tiny tags `2–4px`.
- Control heights: pill button `40px`.
- Elevation: flat, layered surfaces (`#252529`, 4% white) over shadows; art tiles pop against the dark. Pink glow used behind active/featured items.
- Layering: art overlays and scrims use `rgba(0,0,0,.3)`; hairline separation via `rgba(255,255,255,.08)`.

## 7. Motion

- Signature speed is **ultra-fast**: `color/background-color/border-color/opacity 0.075s cubic-bezier(0.4,…)` on 112 elements — 75ms interactive transitions give the shell its app-like snappiness.
- Everything else stays ≤200ms: `top 0.1s` (20 elements), `background-color 0.15s ease` (18), `opacity 0.1–0.15s` (25), `transform 0.1–0.15s` (19). Cards lift/scale on hover with play-button fade-in; subtle pink glow on active/generating tracks.
- Keyframes observed: `wave 1.6s infinite` (audio waveform pulse), `progress-shimmer` (player progress sheen), `fadeIn 0.15s`, plus `randomBackground`, `spin`, `ping`, `pulse`. 21 live WAAPI animations at rest — expressive, in step with playback.
- No GSAP / Three.js / Lottie globals detected.

## 8. Backgrounds, Effects & WebGL

- **WebGL**: one canvas (905×396) in the Discover hero — an audio-reactive visualizer.
- **Blur ladder**: backdrop-filter glass layers over album art (player bar, overlays) at `blur(16px)`, `blur(25px)`, `blur(52px)`; blur animates in (`blur(0px)` transition states observed).
- **Gradients**: hot brand sweep, linear `rgb(248,68,27)` orange-red → `rgb(253,66,156)` hot-pink; black fade `rgb(0,0,0)` → transparent as edge scrims over art grids.
- **No box-shadows** — depth comes from blur layers over flat dark surfaces. Atmosphere = vibrant album art + glass blurs + the WebGL visualizer.

## 9. Do's and Don'ts

### Do

- Keep the UI cool-dark monochrome (`#101012` canvas, `#252529` / 4%-white surfaces) with warm cream `#f7f4ef` text — the warm-on-cool contrast is the signature.
- Use hot pink `#fd429c` only as a sparing highlight: version badges, active states, glow washes (`rgba(253,66,156,.25)`).
- Let vibrant AI-generated album-art gradients carry the color; keep the chrome neutral.
- Keep type functional at even weights — 400 body, 500 UI, 600 section headers — so it stays out of the way of the album art.
- Keep app headings modest (section-header scale); the artwork carries the page.
- Use pills (radius 9999, 40px) and round icon buttons for controls; tiles radius 12, panels 16.
- Keep elevation flat with layered surfaces separated by faint `rgba(255,255,255,.08)` hairlines.
- Keep interactions snappy and ≤200ms — 75ms for color/opacity state changes, 100–150ms for transform/opacity — with hover lift/scale and play-button fade-in.
- Use backdrop-filter blur layers (16/25/52px) over art for glass depth, not shadows.

### Don't

- Don't use box-shadows — depth comes from flat layered surfaces and glass blur layers, not elevation.
- Don't oversize app headings — the layout is artwork-forward, not type-forward.
- Don't spread pink beyond badges, active states, and glow — it is a sparing highlight, not a fill color.
- Don't slow interactions past 200ms — the shell's app-like snappiness (75ms) is part of the brand.

## 10. Responsive Behavior

Not captured.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#101012` · Text `#f7f4ef` · Muted `#6a6a72` · Border `rgba(255,255,255,.08)` · Accent `#fd429c`
- Font: `"Neue Montreal", system-ui, -apple-system, sans-serif` · Body: 16px · Radius: 9999px controls / 12px tiles / 16px panels · Control height: 40px

<suno_design_language>
Use the Suno design language: cool near-black canvas #101012 with layered surfaces #252529 and rgba(255,255,255,.04), separated by faint rgba(255,255,255,.08) lines — flat, no box-shadows; depth comes from backdrop-filter glass blurs (16/25/52px) over album art. Text is WARM CREAM #f7f4ef (the signature warm-on-cool contrast) with gray #a3a3a3 and muted #6a6a72; font Neue Montreal, 16px body, even weights (400/500/600), modest headings — the artwork leads. Accent is hot pink #fd429c, sparing (badges, active states, glow washes rgba(253,66,156,.25)); a hot orange-red→pink sweep rgb(248,68,27)→rgb(253,66,156) is the brand gradient. Controls are pills (radius 9999, 40px) and round icon buttons; tiles radius 12, panels 16. Shell: left sidebar, Discover feed of album-card rows with an audio-reactive WebGL visualizer hero, persistent bottom player bar. Motion is app-snappy: 75ms interactive transitions, everything ≤200ms, plus a 1.6s waveform pulse. Feels: sleek, moody, expressive. Avoid: box-shadows, oversized headings, slow (>200ms) transitions, and pink beyond sparing badges, active states, and glow.
</suno_design_language>