AI music app: cool near-black with warm cream text, Neue Montreal, grainy amber→magenta aura hero and CTAs, pill buttons, hot-pink accent, album-art grid and a persistent player bar.
Browse Suno in the interactive gallery
Captured from the live site's computed styles into a prompt-ready DESIGN.md you can paste into Cursor, v0, Lovable, Bolt or Claude Code. Below is a summary of each captured surface.
Source: suno.com logged-out landing (live DOM, computed styles, color census), 2026-07-08, desktop 1512px. Coverage: full landing page (hero → features → pricing → app store → explore → FAQ → footer). Responsive: not captured. Font files: Neue Montreal, Editorial New, Input Sans loaded (Input Sans not observed in use).
A night-time album-cover of a landing page: a cool near-black canvas ignited by one signature "aura" — a grainy amber→crimson→magenta gradient texture that fills the hero and reappears as the fill of every high-emphasis CTA. Text is warm cream, set in Neue Montreal at light-to-medium weights, with a single serif voice (Editorial New) reserved for pricing plan names. Everything interactive is a fully-rounded pill; everything containing is a large-radius translucent panel over black. Color otherwise comes from user-generated song art and video; the chrome stays dark and quiet. Feels: cinematic, warm, expressive, confident.
| Token | Hex | Role / usage |
|---|---|---|
| bg | #101012 | Page canvas (cool near-black) |
| surface-4 | rgba(255,255,255,.04) | Feature cards, rating cards |
| surface-pricing | rgba(255,235,235,.05) | Pricing cards (faint warm cast) |
| ghost-fill | rgba(255,255,255,.10) | Ghost pill buttons, hover fills |
| chip-fill | rgba(255,255,255,.05) | Small chips (Advanced) |
| border | rgba(255,255,255,.10) | Hairlines: cards, FAQ dividers (also a fainter .02 tier) |
| prompt-glass | rgba(20,20,20,.10) + 0.5px rgba(255,255,255,.10) | Hero prompt bar glass |
| Token | Hex | Role / usage |
|---|---|---|
| cream | #f7f4ef | Primary text, cream buttons |
| cream-bright | #fcfbf9 | Emphasis, badge text |
| white | #ffffff | Hero display, card titles |
| dim | rgba(255,255,255,.70) | Card body copy, subheads |
| gray | #a3a3a3 | Secondary text |
| muted | #696969 | Tertiary, disabled |
| Token | Hex | Role / usage |
|---|---|---|
| aura | grainy image texture, amber→crimson→magenta | Hero background (Aura-1-Hero-Web.jpg) and primary CTA fill (aura_horizontal.jpg) |
| pink | #fd429c | "MOST POPULAR" badge, featured-plan ring |
| amber-glow / pink-glow | rgba(255,176,3,.16) / rgba(254,60,125,.16) | Prompt-bar dual glow shadows |
| yellow | #f5d907 | Rating stars |
| green | #02d95c | Brand/logo SVG marks, checklist icons |
Rule: the aura gradient is the only large color field — it appears in exactly two roles, hero backdrop and CTA fill. Chrome between them is monochrome dark.
"Neue Montreal", system-ui, -apple-system, sans-serif — everything except plan names."Editorial New", ui-serif, Georgia, serif — pricing plan names only.#f7f4ef.| Role | Size/Line | Weight | Notes |
|---|---|---|---|
| Hero display (h1) | 72 / 72 | 500 | tracking -0.96px; typewriter-animated prompt text |
| Section display (h1) | 72 / 64 | 500 | tracking normal |
| Hero subhead (h2) | 16 / 24 | 300 | white |
| Card body / copy | 16 / 24 | 400 | rgba(255,255,255,.70) on cards |
| Feature card title (h3) | 20 / 24 | 500 | white |
| Plan name (serif) | 24 | 300 | Editorial New, cream @.90 |
| UI / buttons | 15 / 500 | nav pills; 17 / 500 on large CTAs | |
| Badge | 10 | 500 | uppercase, pink pill |
| Footer links | 12 | 400 | #faf7f5 |
Patterns: weights stay 300–500 — nothing bold; display sizes are huge (72px) but medium weight; the serif appears only at small scale as a luxury cue.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.
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.
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.
| 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 |
| Token | Hex | Role / usage |
|---|---|---|
| cream | #f7f4ef | Primary text (warm off-white) |
| cream-bright | #fcfbf9 | Emphasis |
| gray | #a3a3a3 | Secondary text |
| muted | #6a6a72 | Tertiary / disabled |
| 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.
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.
Also documented in the full DESIGN.md: Component Stylings, Layout Principles, Depth & Elevation, Motion, Backgrounds, Effects & WebGL, Do's and Don'ts, Responsive Behavior, Agent Prompt Guide.