Suno — design system & UI screens
Centered hero where an oversized rounded-sans headline ("Make a house song about quitting your job") sits over a grainy sunset gradient that bleeds yellow-to-magenta-to-black. The signature element is the dark glassmorphic "Chat to make music" prompt bar pinned center, anchored by a vivid orange-to-pink gradient "Create" pill, with two tilted, glowing album-art track cards floating in from the left and right edges as if mid-scroll. A muted grayscale press-logo strip (Variety, Wired, Billboard, Complex, Forbes) grounds the bottom for social proof.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/suno.
Decoded design system
Suno's decoded design system: background #101012, text #DFE6F1, accent #E55428, link #0E51A0, primary #1269CF; type scale h1 140px / h2 16px / body 16px; 4px spacing base; 4px base radius. The single interactive/action color is #000000 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #101012 |
| surface | #1C1C1F |
| border | #2F3033 |
| text | #DFE6F1 |
| text_muted | #90949C |
| primary | #1269CF |
| accent | #E55428 |
| link | #0E51A0 |
| secondary | #DFE6F1 |
| button_bg | #000000 |
| button_text | #FFFFFF |
Using these colors
- Action color
#000000— the single interactive color; only on things you click or must notice, never large fills. - accent
#E55428— accent for emphasis — keep it rare on the page. - primary
#1269CF— a brand color — but the call-to-action uses #000000, not this. - link
#0E51A0— fails contrast on the background (~2.4:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference). - secondary
#DFE6F1— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: PP Neue Montreal
- Body: PP Neue Montreal
- h1: 140px
- h2: 16px
- body: 16px
Spacing
- base unit: 4px
- scale: 2px, 4px, 6px, 8px, 10px, 12px, 16px, 20px, 24px, 32px
Radii
- base: 4px
- button: 9999px
Shadows (elevation)
- card:
rgba(255, 176, 3, 0.094) -5.81026px 0px 40px 0px, rgba(254, 60, 125, 0.094) 5.81026px 0px 40px 0px
Motion
Micro-interactions run at 300ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).
- durations: 300ms · 75ms · 150ms
- easings:
cubic-bezier(0.4, 0, 0.2, 1)·ease-out - animated properties: color, background-color, border-color, outline-color
Native design tokens
| Token | Value |
|---|---|
--color-brown-900 | #b3aaaa |
--color-opacity-white-75 | #ffffffbf |
--color-pink-500 | lab(56.9303% 76.8162 -8.07021) |
--color-orange-600 | lab(57.1026% 64.2584 89.8886) |
--color-neutral-600 | lab(34.924% 0 0) |
--color-foreground-tertiary-on-light | #7d7c83 |
--color-teal-400 | lab(76.0109% -53.3483 -2.27906) |
--color-foreground-inactive | #6a6a72 |
--color-opacity-white-10 | #ffffff1a |
--color-blue-700 | lab(36.9089% 35.0961 -85.6872) |
…and 110 more measured on the page.
Button states (measured)
- primary focus: outline
2px solid rgb(253, 66, 156)
Layout (measured)
- container max-width:
800px
Motion choreography (measured)
Load order: h1.text-center×4 → div.jsx-bcbfb8bf8f3589d5 → div.jsx-75a1aa3ca1c68a2a → span.ml-[10px]×9 → span.jsx-75a1aa3ca1c68a2a×36 → div.otFlat
Input (measured)
height 32px · radius 12px
Responsive (measured)
- breakpoints: 320px · 480px · 550px · 640px · 768px · 820px
- mobile (390px): hero 48px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →