DESIGN.md inspired by Udio

1. Visual Theme & Atmosphere

Udio is a darkened stage. The canvas drops to absolute #000000 black — no warm tint, no near-black compromise — and the type rests on it in #f9f9f9, a near-white that sits a single notch below pure white. The combination is the brand’s defining mood: harder and more absolute than Suno’s warm #101012 booth, more committed than a generic dark dashboard. Where Suno stages a recording booth at golden hour, Udio runs the lights all the way down. The page reads like a mixing console in a blacked-out studio — the only light is what you bring to it.

The display face is the custom Innovator family — a clean modern grotesque that carries the homepage h1 at 60px. This is the single most important thing to get right and the easiest to miss: a raw CSS audit of Udio reports the body font as Times, which looks like a serif brand. It is not. Times is the unloaded serif fallback that shows for a flash before the custom Innovator web font arrives; the real brand face is a sans-serif grotesque across both display and body. Any reproduction that sets Udio in a serif has misread the fallback for the face.

The single chromatic accent is hot magenta-pink #e30b5d (rgb 227, 11, 93). Its discipline is extreme: in the sampled chrome the pink appears almost exclusively on the Sign-Up call to action — a 6px-radius solid-pink button — while its twin, Sign-In, stays a quiet 5%-white fill. Everything else on the marketing surface is black, near-white, and grey. The pink is a spotlight: one saturated mark on a monochrome stage, drawing the eye to the single action that matters. This is the same restraint Suno uses with its hot pink, but Udio is even stingier with it and pairs it with absolute black rather than a warmed canvas.

The shapes are sharp. Buttons and inputs round to just 6px — a tight, console-like corner, far from Suno’s 20px album tiles or Apple Music’s near-circles. The result is a surface that feels like equipment rather than a soft consumer app: precise, technical, built for making rather than browsing. Section rhythm runs 64–96px, hairlines are 10% white, and there are no gradients or meshes — the black is flat and total, so the user’s generated tracks and artwork can supply every bit of color the page contains.

Atmospheric vocabulary: blacked-out-stage, absolute-black-canvas, near-white-Innovator-type, magenta-pink-spotlight, sharp-6px-corner, console-register, single-saturated-mark, fallback-is-not-the-face, monochrome-chrome, music-supplies-the-color.

Key Characteristics

• Absolute #000000 black canvas — no warm tint, the lights are fully down
• Near-white #f9f9f9 type — one notch below pure white, easier on the eyes than #fff
• Custom Innovator grotesque (NOT Times — that is the unloaded fallback) at 60px h1
• Hot magenta-pink #e30b5d accent — a single spotlight, almost only on the Sign-Up CTA
• Sharp 6px button/input radius — console-precise, not soft-consumer
• Sign-In = 5% white fill; Sign-Up = solid pink — the asymmetry IS the hierarchy
• Monochrome chrome — black, near-white, grey; user content supplies all color
• 10% white hairlines — tonal stacking, no heavy cast shadows
• Flat and total — no gradients, no meshes, no glow except the rare pink-glow state
• Dark-only — the black stage is the brand; there is no light variant

2. Color Palette & Roles

Primary

• bg #000000 — absolute black; the darkened stage, the page ground.
• text #f9f9f9 — near-white display and body copy; one notch below pure white for reduced glare on full black.
• bg-alt #08080a — barely-lifted panel ground for inset zones.
• surface #0a0a0a — raised panel / card fill, still reads near-black.

Brand

• brand #e30b5d — hot magenta-pink spotlight (rgb 227, 11, 93). Primary CTA, link hover, focus ring, the single chromatic accent.
• brand-deep #c2094f — pressed / hover-darkened pink.
• brand-soft rgba(227, 11, 93, 0.15) — 15% pink wash for selected rows and hovered states.
• on-brand #ffffff — white label on the pink button.

Accent

Udio has no secondary chromatic accent. The brand pink is the only saturated color on the chrome; everything else is monochrome. Resist the urge to add a blue or teal — the single-spotlight discipline is the brand.

Interactive

• link #f9f9f9 — links stay near-white on black; underline on hover for affordance.
• link-hover #e30b5d — pink on hover, the spotlight moment.
• selected-bg rgba(227, 11, 93, 0.15) — selected row / active item in lists.
• disabled #737373 — neutral disabled chrome.

Neutral Scale

• near-white #f9f9f9 — primary text.
• white #ffffff — rare absolute white for the highest-emphasis headline only.
• grey-300 #c2c2c2 — muted UI label.
• grey-500 #8a8a8a — quiet metadata, placeholders.
• grey-600 #737373 — disabled / faintest readable.
• panel #0a0a0a — raised surfaces.
• whisper rgba(255, 255, 255, 0.05) — softest hover wash; the Sign-In fill.

Surface & Borders

• surface-0 (page) — #000000 absolute black stage.
• surface-1 (panel) — #0a0a0a raised card.
• surface-soft — rgba(255, 255, 255, 0.05) — 5% white whisper (Sign-In button, hover).
• surface-strong — rgba(255, 255, 255, 0.08) — 8% white emphasised panel.
• border rgba(255, 255, 255, 0.10) — 10% white hairline (default).
• border-strong rgba(255, 255, 255, 0.18) — emphasised rule, input edge.
• border-subtle rgba(255, 255, 255, 0.05) — quietest division.
• border-pink rgba(227, 11, 93, 0.40) — brand-tinted ring for focus/active.

Shadow Colors

Udio’s shadows are deep black on black — the canvas already absorbs cast shadows, so elevation is carried mostly by tonal stepping (#000000 → #0a0a0a → 5–8% white) rather than visible drop shadows. The one brand-tinted exception is a pink glow (0 0 24px rgba(227, 11, 93, 0.35)) used sparingly on an actively-generating or now-playing element — the single place the spotlight bleeds into elevation.

Semantic

• success — bg rgba(34, 197, 94, 0.12), text #86efac. Save / generation-complete confirmation.
• warning — bg rgba(245, 166, 35, 0.12), text #fcd34d.
• danger — bg rgba(239, 68, 68, 0.12), text #fca5a5.
• info — bg rgba(255, 255, 255, 0.08), text #c2c2c2 — stays monochrome rather than borrowing a blue, to protect the single-accent rule.

3. Typography Rules

Font Family

• Display & Body: "InnovatorFont", "Innovator", ui-sans-serif, system-ui, -apple-system, sans-serif — a custom modern grotesque, self-hosted. Critical: an automated audit of Udio reports Times as the computed font; that is the unloaded serif fallback shown for a flash before the Innovator web font arrives, not the brand face. Udio is a sans-serif brand. Display and body share the one family.
• Mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace — reserved for tabular data (durations, BPM, sample rates).
• OpenType features: kern and liga enabled across the family. tnum and zero in mono.

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	OT Features	Notes
Display Hero	Innovator	80px	700	1.0	-0.03em	kern liga	Reserved for major launches
Display Large	Innovator	56px	700	1.05	-0.02em	kern liga	Section lead
H1	Innovator	60px	400	1.05	-0.02em	kern liga	Homepage hero — observed 60px, the signature
H2	Innovator	40px	600	1.1	-0.018em	liga	Major section
H3	Innovator	32px	600	1.2	-0.012em	liga	Sub-section
H4	Innovator	24px	600	1.25	-0.005em	—	Card heading
H5	Innovator	20px	600	1.3	normal	—	Inline emphasis
Eyebrow	Innovator	12px	600	1.4	0.08em	uppercase	Section pre-label
Body Large	Innovator	18px	400	1.55	normal	—	Lede paragraph
Body	Innovator	16px	400	1.55	normal	—	Default body (observed 16/400)
Body Small	Innovator	14px	400	1.5	normal	—	Compact UI body
Caption	Innovator	13px	400	1.4	normal	—	Image captions
Label	Innovator	13px	500	1.4	normal	—	UI labels, chips
Caption Tabular	mono	13px	500	1.4	normal	tnum	Track duration, BPM
Overline	Innovator	12px	500	1.4	0.02em	—	Minor pre-label
Code	mono	13px	400	1.55	normal	tnum zero	Inline code (rare)

Principles

• The brand face is sans-serif Innovator — never a serif. If your reproduction is set in Times or any serif, you have copied the unloaded fallback, not the face. This is Udio’s number-one reproduction trap.
• Hero h1 observed at 60px. The homepage signature is Innovator at 60px on a tight 1.05 line-height; the 80px display-hero is reserved for launch banners.
• Negative tracking at display sizes only. -0.02em to -0.03em above 40px; normal tracking at 24px and below — the grotesque is already compact.
• Body is 16px / 400 / 1.55. Comfortable editorial leading, not chat-app tight; the black stage benefits from a little air between lines.
• Single-family discipline. Innovator carries display, body, captions, and labels; mono appears only for tabular numerals.
• Near-white, not pure white, for running text. #f9f9f9 at body sizes reduces halation against full black; reserve #ffffff for the single highest-emphasis headline.
• No italics in display. Italics belong to occasional inline emphasis in body copy.
• Eyebrows go uppercase at 0.08em. The widest tracking in the system, used to label sections without competing with the grotesque headlines.

4. Component Stylings

Buttons

Primary (Pink Sign-Up)

• Background: #e30b5d magenta-pink. Text: #ffffff, Innovator 500 / 14px.
• Padding: 10px 16px. Radius: 6px. No border.
• Hover: bg → #c2094f over 240ms.
• Active: bg darkens further (pressed beat).
• Focus: 2px pink ring with 2px offset.
• Use: The primary CTA — Sign Up, Create, Get Pro. The one saturated mark on the page; never duplicate it.

Secondary (Sign-In, 5% White)

• Background: rgba(255, 255, 255, 0.05). Text: #ffffff, Innovator 500 / 14px.
• Border: 1px solid rgba(255, 255, 255, 0.10). Radius: 6px.
• Hover: bg → rgba(255, 255, 255, 0.08).
• Use: Twin to primary — Sign In, Learn more. Sampled exactly as a 5%-white fill; the deliberate quietness next to the pink IS the hierarchy.

Ghost (Quiet)

• Background: transparent. Text: #f9f9f9, Innovator 500 / 14px.
• Padding: 8px 12px. Radius: 6px.
• Hover: bg → rgba(255, 255, 255, 0.06).
• Use: Nav links, footer, repeated inline utilities.

White (Inverted)

• Background: #f9f9f9. Text: #000000, Innovator 500 / 14px.
• Padding: 10px 16px. Radius: 6px.
• Hover: bg → #ffffff.
• Use: High-emphasis non-brand action where pink would be wrong — near-white button on the black stage.

Cards

Info / Track Card

• Background: #0a0a0a. Border: 1px solid rgba(255, 255, 255, 0.10). Radius: 12px. Padding: 24px.
• Shadow: none at rest; on hover, rgba(0, 0, 0, 0.50) 0 4px 12px.
• Use: Feature card, plan card, capability tile.

Track-Art Tile

• Background: #0a0a0a (placeholder while artwork loads). Border: none. Radius: 8px. Aspect: 1:1.
• Hover: 1.02× scale + soft black shadow; play-button overlay fades in.
• Use: Generated-track grid — artwork bleeds to edge, title/artist drop below in near-white / grey.

Now-Generating Tile

• Same as track tile, but with pink-glow shadow (0 0 24px rgba(227, 11, 93, 0.35)) and an optional 1px pink hairline ring.
• Use: The single tile that is actively generating or playing — the pink glow signals state without a separate badge.

Badges, Tags, Pills

Genre Tag — bg rgba(255, 255, 255, 0.08), text #c2c2c2, Innovator 500 / 12px, padding 4px 10px, radius 6px. Hover deepens bg to 12% white.

Pink Badge — bg rgba(227, 11, 93, 0.15), text #e30b5d, radius 6px. “New”, “Pro”, “Beta” markers — the only badge that may carry the brand color.

Eyebrow Label — no chrome, just type. Innovator 600 / 12px / uppercase / 0.08em tracking, color #8a8a8a.

Inputs / Forms

Text Input

• Background: #0a0a0a. Border: 1px solid rgba(255, 255, 255, 0.18). Radius: 6px. Padding: 8px 12px.
• Font: Innovator 400 / 14px. Placeholder: #8a8a8a.
• Focus: 0 0 0 2px #e30b5d ring, border → #e30b5d.
• Error: border → #ef4444, helper red below.

Prompt Composer (Studio)

• Background: #0a0a0a. Border: 1px solid rgba(255, 255, 255, 0.18). Radius: 12px. Padding: 12px 16px.
• Font: Innovator 400 / 16px. Placeholder: #8a8a8a (“Describe your song…”).
• Inner action: pink Create button hard-right with white label.
• Use: The product’s hero shape — describe-and-generate box that ties marketing to the in-product creator.

Navigation

• Header height 64px. Background transparent over the black stage (backdrop-filter: blur(12px) on scroll).
• Logo: Udio wordmark in near-white, Innovator 600.
• Nav links: Innovator 500 / 14px, color #f9f9f9, padding 8px 12px. Hover: text → #e30b5d.
• Right-side: secondary “Sign In” (5% white fill, 6px) + primary pink “Sign Up” (6px). The asymmetry is the whole CTA story.
• Mobile (<640px): hamburger collapses to a full-screen sheet; links stack at 20px / 600.

Optional Components

Dropdown Menu — bg #0a0a0a, border rgba(255, 255, 255, 0.10), radius 8px, shadow rgba(0, 0, 0, 0.60) 0 12px 24px -8px. Items: Innovator 400 / 14px, hover bg rgba(255, 255, 255, 0.06).

Tooltip — bg #0a0a0a, text #f9f9f9, radius 6px, padding 6px 10px, font 12px / 500.

Toast — bg #0a0a0a, border rgba(255, 255, 255, 0.10), radius 8px, padding 12px 16px, shadow standard.

Modal — bg #0a0a0a, radius 12px, shadow rgba(0, 0, 0, 0.80) 0 24px 48px -12px, max-width 560px. Backdrop: 80% black over the already-black stage.

Waveform Visualizer — translucent panel rgba(255, 255, 255, 0.05) with near-white bars; pink-tinted only on the actively-playing track.

5. Layout Principles

Spacing System

• Base unit: 4px.
• Scale: 0, 4, 8, 12, 16, 24, 32, 48, 64, 96, 128.
• Density observation: Udio is medium. Marketing sections breathe at 64–96px rhythm; product rows and track grids pack tighter at 16–24px gutters. The black canvas tolerates dense grids because the spacing between tiles reads as negative space, not clutter.

Grid & Container

• Page max width: 1280px for chrome; feed and grid pages bleed to viewport on the black ground.
• Site gutter: clamp(20px, 5vw, 48px).
• Grid: 12 columns with 16–24px gutters.
• Track grid: 4–6 columns at 1:1 aspect, collapsing to 3 → 2 → 1 across breakpoints.
• Hero treatment: centered 60px Innovator headline, body 16px below in near-white, prompt composer / dual CTA beneath; full-bleed black behind.

Whitespace Philosophy

The whitespace is stage-dark and total. Because the ground is absolute black, empty space reads as depth rather than emptiness — the page feels like a room with the lights off, not a blank document. Section gutters at 64–96px; intra-section at 16–24px.

Section Cadence

• Hero (black stage, centered) → Capability / feature panels (black, occasional 8% white inset cards) → Track showcase grid (full-bleed) → Pricing → Footer (#0a0a0a, a single tonal step up).
• The whole site stays in black territory; there is no light section.
• Section breaks: 64–96px vertical space + 1px hairlines (rgba(255, 255, 255, 0.10)).

6. Shapes & Radius Scale

Tier	Value	Use
Micro	2px	Decorative dividers, tag corners
Standard (sm)	4px	Compact chips (rare)
Button	6px	Primary / secondary / ghost buttons, inputs — Udio’s signature corner
Comfortable (md)	8px	Track tiles, tooltips, dropdowns
Relaxed (lg)	12px	Cards, composer, modals
Featured (xl)	16px	Large feature panels
Pill	9999px	Reserved — rare, for filter chips only

Udio’s signature radius is 6px on buttons and inputs — a sharp, console-precise corner sampled directly from both CTAs. Cards relax slightly to 12px and track tiles to 8px, but the whole system stays well below Suno’s 20px. Pills are deliberately rare; Udio’s controls read as equipment, not soft consumer chips.

7. Depth & Elevation

Level	Treatment	Use
0	Flat — no shadow	Default black page surface, hero, body sections
1	Tonal — #0a0a0a against #000000	Cards, panels
2	rgba(0,0,0,0.40) 0 1px 3px	Sticky nav on scroll
3	rgba(0,0,0,0.50) 0 4px 12px	Hover-lifted cards
4	rgba(0,0,0,0.60) 0 16px 32px -8px	Dropdowns, popovers
5	rgba(0,0,0,0.80) 0 24px 48px -12px	Modals, dialogs
Special	0 0 24px rgba(227, 11, 93, 0.35)	Pink-glow on now-generating / now-playing tile only

Shadow Philosophy

Udio’s depth is tonal-first against absolute black. Because the canvas is #000000, a cast shadow has almost nothing darker to fall onto, so elevation is communicated by stepping the surface tone up (#000000 → #0a0a0a → 5–8% white) and by hairline borders rather than by visible drop shadows. The single brand-tinted exception is the pink glow on an actively-generating tile — the only place the spotlight color bleeds into elevation, used to signal working / playing without a separate badge.

8. Interaction & Motion

Easing Curves

• ease-standard: cubic-bezier(0.4, 0, 0.2, 1) — Material default for most transitions.
• ease-emphasized: cubic-bezier(0.2, 0, 0, 1) — punchier exit; modal and sheet enter.

Duration Buckets

• Fast (150ms) — color transitions, focus rings, link hovers.
• Standard (240ms) — button hover, card hover, dropdown reveal.
• Slow (320ms) — modal enter/exit, composer expansion.
• Page (480ms) — route transitions, hero reveal.

Per-Component Micro-States

• Button hover (primary pink): bg #e30b5d → #c2094f over 240ms; no scale — the button stays planted.
• Sign-In hover: fill 5% → 8% white over 150ms.
• Track tile hover: 1.02× scale over 240ms + soft black shadow; play overlay fades in over 150ms.
• Now-generating tile: pink glow pulses subtly (@keyframes glow-pulse 35% → 50% opacity over 2s, infinite, respects reduced-motion).
• Link hover: color #f9f9f9 → #e30b5d over 150ms; underline thickens 1px → 2px.
• Composer focus: ring grows 2px → 3px at 30% pink; placeholder fades to 60%.

Page Transitions

Hero / feed cross-fade over 480ms. Track tiles fade in via IntersectionObserver at 80% viewport, 320ms with 12px translate-up. The black ground holds constant across navigation so transitions read as content moving on a fixed stage.

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.

9. Accessibility & A11y

Contrast Pairs

• #f9f9f9 text on #000000 bg: 19.95:1 — AAA at all sizes.
• #ffffff text on #000000 bg: 21.0:1 — AAA, the theoretical maximum.
• #c2c2c2 text on #000000 bg: 11.79:1 — AAA at all sizes.
• #8a8a8a text on #000000 bg: 6.08:1 — AA at all sizes, AAA at large.
• #737373 text on #000000 bg: 4.43:1 — AA at large / disabled only.
• #ffffff text on #e30b5d brand: 4.70:1 — AA at body sizes; safe for the pink CTA label.
• #e30b5d text on #000000 bg: 4.47:1 — AA at large text / link-hover; keep pink text at ≥18px or bold, or use near-white for small body links.

Focus Indicators

• Default ring: 0 0 0 2px #e30b5d with 2px offset.
• Soft ring (composer focus): 0 0 0 3px rgba(227, 11, 93, 0.30).
• Every interactive surface shows a visible focus state; the pink ring reads clearly against the black ground.

ARIA Patterns

• Navigation: <nav aria-label="Main"> with a skip-link.
• Composer: <form aria-label="Create a song"> with an aria-label on the input.
• Track grid: role="feed"; each tile is <article> with aria-labelledby pointing at the title; the now-playing tile uses aria-current="true".
• Audio player: role="region" aria-label="Audio player" with labelled controls.
• Dialog: role="dialog" aria-modal="true" aria-labelledby with a focus trap.
• Live regions: aria-live="polite" for “song ready” toasts.

Keyboard Navigation

• Tab order: skip-link → masthead → composer → feed → footer.
• Enter activates the focused CTA; Space toggles play/pause on a focused tile.
• Arrow keys navigate within the track grid.
• Esc closes modals and sheets.

Screen Reader Hints

• Track tiles: alt text matches “