# Suno — Marketing Site Design Spec

> 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).

## 1. Visual Theme & Atmosphere

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.

## 2. Color Palette & Roles

### Canvas & surfaces

| 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 |

### Text (warm cream)

| 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 |

### Accents

| 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.

## 3. Typography Rules

- Primary: `"Neue Montreal", system-ui, -apple-system, sans-serif` — everything except plan names.
- Serif accent: `"Editorial New", ui-serif, Georgia, serif` — pricing plan names only.
- Body: 16px / 24px / 400 / `#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.

## 4. Component Stylings

### Buttons (all pills, radius 9999)
- **Cream primary**: bg `#f7f4ef`, text `#101012`; nav h 40, padding 8/16, 15/500; large h 56, padding 16/32, 17/500.
- **Aura CTA**: background-image grainy amber→magenta texture, white text, same pill metrics; used for Create, Subscribe (featured), Join Suno for free.
- **Ghost**: bg `rgba(255,255,255,.10)`, cream text (Sign Up, Advanced chip h 36 padding 0/12 16px).
- **Log in**: transparent/near-black translucent pill with faint hairline, cream text.

### Hero prompt bar (signature)
- Radius 20, glass fill `rgba(20,20,20,.10)`, border 0.5px `rgba(255,255,255,.10)`, dual glow: `-7px 0 40px rgba(255,176,3,.16), 7px 0 40px rgba(254,60,125,.16)`.
- Placeholder "Chat to make music" 18px cream @.50; left round + icon, Advanced chip; right icon chip + aura Create pill.

### Feature cards
- bg `rgba(255,255,255,.04)`, border 1px `rgba(255,255,255,.10)`, radius 24, padding 32; title 20/500 white, body 16 dim; colorful product illustration anchored bottom.

### Pricing cards
- bg `rgba(255,235,235,.05)`, radius 24, padding 24; serif plan name 24/300; price row; full-width pill CTA; checklist (green check / muted ✕, 16px). Featured plan: 1px `#fd429c` ring + `MOST POPULAR` badge (pink pill, 10px/500 uppercase, padding 2/8, radius 12).

### Song cards (carousel)
- Radius 20, art cover, heavy shadow (shadow-2xl), dark translucent stat chips (play/like counts) over art; below: title 16/500 cream, avatar + author 13 gray.

### FAQ rows
- 16px cream question + thin "+" icon; 1px `rgba(255,255,255,.10)` divider between rows; centered "See the full FAQ →" in gray.

## 5. Layout Principles

- Hero: 100svh full-bleed aura image, center-stacked: typewriter display → subhead → prompt bar; tilted song-card thumbnails float at the far left/right edges; press-logo marquee pinned to the bottom.
- Content column ~1200px; pricing grid 3-up, feature grid 3-up × 2 rows, gap ~24; sections padded ~100–160px vertically.
- Nav: transparent over content, logo wordmark left, Log in + cream Join pill right.
- Footer: minimal — two link columns (Brand / Support, 12px), social icon row, centered © + language pill.

## 6. Depth & Elevation

- Radius scale: 6 (small), 12 (badges), 20 (prompt bar, song/rating cards), 24 (feature/pricing cards), 9999 (all buttons).
- Shadows: only two kinds — the prompt bar's colored dual glow, and heavy soft black shadows under floating song cards. Cards otherwise rely on translucent fills + 1px hairlines.
- Control heights: nav pill 40, large CTA 56, chip 36.

## 7. Motion

- Hero headline is a continuous typewriter cycling through example prompts ("Make a house song about…").
- Press-logo marquee scrolls horizontally (`marquee` keyframe); sections fade up on scroll (`fade-up`, `fade-in` keyframes).
- Transition census: fast color/bg/border at 75ms and 150–200ms, transform at 150–300ms, all on Tailwind's `cubic-bezier(0.4,0,0.2,1)`; occasional `all .25s ease-out`.
- Other keyframes shipped: shimmer, pop-in, slide-down, pulse, spin. No GSAP/Lenis/Three detected on the landing page.

## 8. Backgrounds, Effects & WebGL

- The signature effect is **baked grain**: the aura gradients are pre-rendered noisy JPG textures (hero `Aura-1-Hero-Web.jpg` full-bleed via object-cover; buttons `aura_horizontal.jpg` as background-image), giving film-grain texture with zero runtime cost. No canvas/WebGL on the landing page.
- Sections after the hero sit on flat `#101012`; the app-store section brings the aura texture back as a full-bleed backdrop.
- User videos (rounded 20) autoplay in cards; dark scrims over art for stat chips.

## 9. Do's and Don'ts

### Do
- Keep the canvas `#101012` and all text warm cream (`#f7f4ef` family) — warm-on-cool is the brand.
- Render every button as a fully-rounded pill; reserve the grainy amber→magenta aura fill for the highest-emphasis CTA on screen.
- Use huge (72px) but medium-weight (500) display type with slight negative tracking at hero scale.
- Use Editorial New serif only as a small-scale luxury cue (plan names).
- Build cards as translucent fills (4–5% white) with 1px 10%-white hairlines at radius 24.
- Keep pink `#fd429c` to badges and the featured-plan ring; keep green to logo/check marks; yellow to stars.
- Add grain/noise to any large gradient field.
- Keep interactions fast (75–300ms, ease-out).

### Don't
- Don't use font weights above 500 — even 72px display stays medium.
- Don't use flat un-grained CSS gradients for the aura — it reads as texture, not a smooth ramp.
- Don't put the aura fill on secondary actions or spread it across regular chrome.
- Don't use box-shadows for card elevation — hairlines + translucency; shadows only under floating art and as the prompt-bar glow.
- Don't brighten the canvas — sections stay near-black between aura moments.

## 10. Responsive Behavior

Not captured — desktop 1512px only.

## 11. Agent Prompt Guide

Quick token reference:

- Canvas `#101012` · Text `#f7f4ef` · Dim `rgba(255,255,255,.70)` · Border `rgba(255,255,255,.10)` · Accent: aura gradient (amber→crimson→magenta, grainy) + pink `#fd429c`
- Font: `"Neue Montreal", system-ui, sans-serif` (+ Editorial New serif for plan names) · Body: 16px · Radius: 9999 buttons / 24 cards / 20 prompt bar · Control height: 40px nav, 56px CTA
- Hover fill: `rgba(255,255,255,.10)` · Glow: `-7px 0 40px rgba(255,176,3,.16), 7px 0 40px rgba(254,60,125,.16)`

<suno-marketing_design_language>
Use the Suno marketing design language: cool near-black canvas #101012, warm cream text #f7f4ef (secondary rgba(255,255,255,.70), gray #a3a3a3), font Neue Montreal at weights 300–500 only — hero display 72px/500 with -0.96px tracking, body 16/24. One signature accent: a grainy amber→crimson→magenta "aura" gradient used exactly twice — as the full-bleed hero backdrop and as the fill of the single highest-emphasis CTA; add film grain to it. All buttons are pills (radius 9999; nav 40px 15/500, large CTA 56px 17/500): cream #f7f4ef on dark, aura fill, or ghost rgba(255,255,255,.10). Cards are translucent 4–5% white fills with 1px rgba(255,255,255,.10) hairlines at radius 24; prompt bar is glass at radius 20 with a dual amber/pink glow shadow. Editorial New serif appears only for pricing plan names (24/300); pink #fd429c only as badge + featured ring; hairline dividers for FAQs. Motion: typewriter hero, marquee logo wall, 75–300ms ease-out micro-transitions, scroll fade-ups. Feels: cinematic, warm, expressive. Avoid: weights >500, smooth un-grained gradients, aura on secondary buttons, box-shadow card elevation, brightening the canvas.
</suno-marketing_design_language>