dark·sans·spacious·warm·bright·playful
DESIGN.md inspired by Suno
A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas.
By webdesignhot · suno.com↗
$npx @webdesignhot/design-md add suno
Learn more about the CLI →try on →
theme
mobile · 390 × 844
Tokenswebdesignhot/0.2
- bg
#101012 - bg-alt
#1c1c1f - surface
#1c1c1f - surface-translucent
rgba(28, 28, 31, 0.60) - surface-soft
rgba(255, 255, 255, 0.05) - surface-strong
rgba(255, 255, 255, 0.08) - surface-iced
#fcfbf9 - surface-paper
#f7f4ef - textAAA · 17.3
#f7f4ef - text-strong
#ffffff - text-medium
#e0ddd6 - text-muted
#c2c2c1 - text-soft
#a3a3a3 - text-faintAA·LG · 4.0
#737373 - text-paper
#101012 - brandAA · 5.8
#fd429c - brand-deep
#e02f8a - brand-soft
rgba(253, 66, 156, 0.15) - on-brand
#ffffff - accent-cobalt
#3860be - accent-deep
#27455c - accent-amber
#f5a623 - link
#f7f4ef - link-hover
#fd429c - selected-bg
rgba(253, 66, 156, 0.15) - disabled
#737373 - border— · 1.3
rgba(255, 255, 255, 0.10) - border-strong— · 1.7
rgba(255, 255, 255, 0.18) - border-subtle
rgba(255, 255, 255, 0.05) - border-pink
rgba(253, 66, 156, 0.40) - success-bg
rgba(34, 197, 94, 0.12) - success-text
#86efac - warning-bg
rgba(245, 166, 35, 0.12) - warning-text
#fcd34d - danger-bg
rgba(239, 68, 68, 0.12) - danger-text
#fca5a5 - info-bg
rgba(56, 96, 190, 0.15) - info-text
#93b8ee
Ship faster than ever.
display-hero"Neue Montreal"96pxw500-0.013em
Ship faster than ever.
display"Neue Montreal"72pxw500-0.013em
Ship faster than ever.
h1"Neue Montreal"56pxw500-0.012em
Built for teams that ship.
h2"Neue Montreal"48pxw500-0.012em
A complete kit
h3"Neue Montreal"24pxw5000
The quick brown fox jumps over the lazy dog.
h4"Neue Montreal"20pxw5000
The quick brown fox jumps over the lazy dog.
body-large"Neue Montreal"18pxw300
The quick brown fox jumps over the lazy dog.
h5"Neue Montreal"16pxw5000
The quick brown fox jumps over the lazy dog.
body"Neue Montreal"16pxw300
The quick brown fox jumps over the lazy dog.
body-small"Neue Montreal"14pxw300
OUR DESIGN SYSTEM
caption"Neue Montreal"13pxw400
OUR DESIGN SYSTEM
caption-tabularui-monospace13pxw500
npx @webdesignhot/design-md add stripe
codeui-monospace13pxw400
The quick brown fox jumps over the lazy dog.
eyebrow"Neue Montreal"12pxw5000.06em
OUR DESIGN SYSTEM
label"Neue Montreal"12pxw500
npx @webdesignhot/design-md add stripe
code-microui-monospace11pxw400
- step-01px
- step-12px
- step-24px
- step-36px
- step-48px
- step-510px
- step-612px
- step-716px
- step-820px
- step-924px
- step-1032px
- step-1148px
- step-1264px
- step-1396px
- step-14128px
- micro
2px - sm
4px - md
8px - lg
12px - xl
16px - card
20px - pill
9999px
Text link →
Card previewA complete kit — everything your product needs.Hero, pricing, FAQ, dashboard, docs — every layout your product needs.
NewStablev1.0
Design roles8/8 mapped · webdesignhot/0.2
Maps the 8 canonical role names to this entry's actual tokens. Use these to plug the design into role-aware tools — shadcn/ui themes, role-aware Tailwind plugins, atelier-lint — without hard-coding token names.
- background→bg
- foreground→text
- primary→brand
- primary-foreground→on-brand
- accent→accent-cobalt
- muted→text-muted
- border→border
- ring→border-strong
Export4 formats · paste-ready
Tailwind
theme.extend block for tailwind.config.js
CSS variables
:root { --bg, --text, --brand, … } you can paste anywhere
DTCG JSON
W3C Design Tokens Community Group format
Figma Variables
Importable into Figma → Variables → Import
Google DESIGN.md
Portable DESIGN.md Alpha core format
---
name: Suno
tagline: A near-black booth with cream Neue Montreal and a hot-pink cue light — a music studio, a record sleeve, and a chat app fused into one canvas.
updated_at: 2026-05-05T10:17:17+12:00
published_at: 2026-05-03T16:49:18+12:00
author: webdesignhot
source_url: https://suno.com
spec: webdesignhot/0.2
profile: catalog
quality: curated
featured: false
categories: [ai, media, social]
tags: [dark, sans, spacious, warm, bright, playful]
preview_swatch: ['#101012', '#f7f4ef', '#fd429c']
related: [openai, anthropic, claude-ai]
description: 'Suno''s site is a recording booth. The canvas drops to `#101012` with cream `#f7f4ef` text — the off-white reads warmer than pure white, like vinyl-sleeve paper under stage lights — and Neue Montreal carries display copy at 72px with `-0.96px` tracking. The single chromatic accent is a hot-pink `#fd429c` cue light that signals records, hearts, and the active row in long lists; everything else stays monochromatic so the album-art tiles can sing. Where Krea commits to absolute `#000000` and refuses to bold, Suno warms the canvas slightly and sets Neue Montreal at weight 500 with tight leading — chunky song-title cadence over museum placard.'
# Canonical 8-role aliases (bg / text / brand / border / accent / muted / surface / danger).
# Maps role names to this entry's actual token names so role-aware
# downstream tools resolve `theme.background` → entry's `bg`, etc.
# Auto-generated by scripts/add-aliases.mjs — do not edit manually;
# regenerate after changing color token names.
aliases:
background: bg
foreground: text
primary: brand
primary-foreground: on-brand
accent: accent-cobalt
muted: text-muted
border: border
ring: border-strong
colors:
# Primary
bg: '#101012' # near-black with slight warm tint, the booth ground
bg-alt: '#1c1c1f' # secondary panel for chrome and inset zones
surface: '#1c1c1f' # raised panel
surface-translucent: 'rgba(28, 28, 31, 0.60)' # 60% panel for floated cards
surface-soft: 'rgba(255, 255, 255, 0.05)' # 5% white whisper card for hover
surface-strong: 'rgba(255, 255, 255, 0.08)' # 8% white emphasised
surface-iced: '#fcfbf9' # near-white modal/light surface for support pages
surface-paper: '#f7f4ef' # cream paper for rare light layouts
text: '#f7f4ef' # cream display, warmer than pure white
text-strong: '#ffffff' # pure white reserved for primary headlines
text-medium: '#e0ddd6' # slightly muted cream
text-muted: '#c2c2c1' # muted UI label
text-soft: '#a3a3a3' # quiet metadata
text-faint: '#737373' # disabled
text-paper: '#101012' # near-black on light surfaces
# Brand
brand: '#fd429c' # signature hot-pink cue light
brand-deep: '#e02f8a' # pressed pink
brand-soft: 'rgba(253, 66, 156, 0.15)' # pink wash for selected/hover
on-brand: '#ffffff'
# Secondary accents (used in feature panels, never on chrome)
accent-cobalt: '#3860be' # secondary blue accent
accent-deep: '#27455c' # deep teal-blue accent panel
accent-amber: '#f5a623' # rare amber accent for warnings
# Interactive
link: '#f7f4ef' # links stay cream on dark; underlined
link-hover: '#fd429c' # pink on hover — the cue-light moment
selected-bg: 'rgba(253, 66, 156, 0.15)' # pink-wash selected row
disabled: '#737373'
# Borders
border: 'rgba(255, 255, 255, 0.10)' # 10% white hairline
border-strong: 'rgba(255, 255, 255, 0.18)' # emphasised rule
border-subtle: 'rgba(255, 255, 255, 0.05)' # whisper hairline
border-pink: 'rgba(253, 66, 156, 0.40)' # brand-tinted ring
# Semantic
success-bg: 'rgba(34, 197, 94, 0.12)'
success-text: '#86efac'
warning-bg: 'rgba(245, 166, 35, 0.12)'
warning-text: '#fcd34d'
danger-bg: 'rgba(239, 68, 68, 0.12)'
danger-text: '#fca5a5'
info-bg: 'rgba(56, 96, 190, 0.15)'
info-text: '#93b8ee'
typography:
display:
family: '"Neue Montreal", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"'
weights: [300, 400, 500, 700]
opentype-features: ['kern', 'liga', 'ss01']
body:
family: '"Neue Montreal", system-ui, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif'
weights: [300, 400, 500]
opentype-features: ['kern', 'liga']
mono:
family: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace'
weights: [400, 500]
opentype-features: ['tnum', 'zero']
scale:
display-hero: { size: 96, weight: 500, lineHeight: 1.0, tracking: '-0.013em', family: display, opentype: 'kern liga' }
display: { size: 72, weight: 500, lineHeight: 1.0, tracking: '-0.013em', family: display, note: 'observed -0.96px @ 72 — the brand signature' }
h1: { size: 56, weight: 500, lineHeight: 1.05, tracking: '-0.012em', family: display }
h2: { size: 48, weight: 500, lineHeight: 1.05, tracking: '-0.012em', family: display }
h3: { size: 24, weight: 500, lineHeight: 1.2, tracking: '0', family: display }
h4: { size: 20, weight: 500, lineHeight: 1.3, tracking: '0', family: display }
h5: { size: 16, weight: 500, lineHeight: 1.4, tracking: '0', family: display }
eyebrow: { size: 12, weight: 500, lineHeight: 1.4, tracking: '0.06em', family: display, transform: uppercase }
body-large: { size: 18, weight: 300, lineHeight: 1.5, family: body }
body: { size: 16, weight: 300, lineHeight: 1.5, family: body }
body-small: { size: 14, weight: 300, lineHeight: 1.5, family: body }
caption: { size: 13, weight: 400, lineHeight: 1.4, family: body }
caption-tabular: { size: 13, weight: 500, lineHeight: 1.4, family: mono, opentype: 'tnum' }
label: { size: 12, weight: 500, lineHeight: 1.3, family: display }
code: { size: 13, weight: 400, lineHeight: 1.55, family: mono, opentype: 'tnum zero' }
code-micro: { size: 11, weight: 400, lineHeight: 1.4, family: mono }
radius:
micro: 2
sm: 4
md: 8
lg: 12
xl: 16
card: 20
pill: 9999
spacing:
base: 4
scale: [1, 2, 4, 6, 8, 10, 12, 16, 20, 24, 32, 48, 64, 96, 128]
layout:
page-width: 1280
prose-width: 720
site-gutter: 'clamp(20px, 5vw, 48px)'
header-height: 64
grid-columns: 12
feed-pattern: 'long vertical feed; 4-6 column album-tile rows; composer at bottom'
section-rhythm: '64-96px'
components:
button-primary:
background: '#fd429c'
text: '#ffffff'
padding: '12px 24px'
radius: 9999
border: 'none'
font: 'Neue Montreal 500 / 14px'
hover-bg: '#e02f8a'
active-bg: '#cb2680'
use: 'Primary CTA — hot-pink pill, cue-light register.'
button-secondary:
background: 'transparent'
text: '#f7f4ef'
padding: '12px 24px'
radius: 9999
border: '1px solid rgba(255, 255, 255, 0.18)'
font: 'Neue Montreal 500 / 14px'
hover-bg: 'rgba(255, 255, 255, 0.06)'
use: 'Outline twin — cream pill on dark.'
button-ghost:
background: 'transparent'
text: '#f7f4ef'
padding: '8px 14px'
radius: 12
font: 'Neue Montreal 500 / 14px'
hover-bg: 'rgba(255, 255, 255, 0.06)'
use: 'Quiet utility — nav links, footer, repeated inline.'
button-cream:
background: '#f7f4ef'
text: '#101012'
padding: '12px 24px'
radius: 9999
font: 'Neue Montreal 500 / 14px'
hover-bg: '#ffffff'
use: 'Inverted CTA on dark — cream paper button against the booth ground.'
card:
background: '#1c1c1f'
border: '1px solid rgba(255, 255, 255, 0.10)'
radius: 20
padding: '20px'
use: 'Quiet info card — neutral-900 fill, hairline edge.'
card-album-tile:
background: '#1c1c1f'
border: 'none'
radius: 20
padding: '0'
aspect-ratio: '1 / 1'
use: 'Album art tile — 1:1 cell at 20px radius, image bleeds to edge.'
input:
background: '#1c1c1f'
border: '1px solid rgba(255, 255, 255, 0.18)'
radius: 12
padding: '12px 16px'
font: 'Neue Montreal 400 / 14px'
placeholder-color: '#a3a3a3'
focus-ring: '0 0 0 2px #fd429c'
use: 'Form fields, search.'
prompt-composer:
background: '#1c1c1f'
border: '1px solid rgba(255, 255, 255, 0.18)'
radius: 9999
padding: '14px 20px 14px 24px'
font: 'Neue Montreal 400 / 16px'
placeholder-color: '#a3a3a3'
inner-button: '40px pink circle hard-right with white note glyph'
position: 'composer-at-bottom — sticky to viewport bottom on home'
use: 'Studio composer — long-pill input, mirrors the in-product studio.'
badge-tag:
background: 'rgba(255, 255, 255, 0.08)'
text: '#c2c2c1'
padding: '4px 12px'
radius: 9999
font: 'Neue Montreal 500 / 12px'
use: 'Genre / mood chip.'
badge-pink:
background: 'rgba(253, 66, 156, 0.15)'
text: '#fd429c'
padding: '4px 12px'
radius: 9999
font: 'Neue Montreal 500 / 12px'
use: '"Now playing" badge or hearted indicator — pink pill.'
nav-link:
background: 'transparent'
text: '#f7f4ef'
padding: '8px 14px'
font: 'Neue Montreal 500 / 14px'
hover-text: '#fd429c'
active-bg: 'rgba(255, 255, 255, 0.06)'
motion:
ease-standard: 'cubic-bezier(0.4, 0, 0.2, 1)'
ease-emphasized: 'cubic-bezier(0.2, 0, 0, 1)'
ease-music: 'cubic-bezier(0.32, 0.72, 0, 1)'
duration-fast: 100
duration-standard: 200
duration-slow: 320
duration-page: 480
reduced-motion: 'respects prefers-reduced-motion: reduce — looping waveforms freeze, all transforms collapse to opacity-only, durations halve.'
breakpoints:
mobile: 640
tablet: 1024
desktop: 1280
wide: 1536
shadows:
none: 'none'
ambient: 'rgba(0, 0, 0, 0.30) 0 1px 3px'
standard: 'rgba(0, 0, 0, 0.40) 0 4px 12px'
elevated: 'rgba(0, 0, 0, 0.50) 0 16px 32px -8px'
pink-glow: '0 0 24px rgba(253, 66, 156, 0.35)'
modal: 'rgba(0, 0, 0, 0.70) 0 24px 48px -12px'
ring: '0 0 0 2px #fd429c'
ring-soft: '0 0 0 3px rgba(253, 66, 156, 0.30)'
accessibility:
contrast-text-on-bg: 17.0 # #f7f4ef on #101012 — AAA at all sizes
contrast-text-strong-on-bg: 18.5 # #ffffff on #101012 — AAA
contrast-text-muted-on-bg: 11.0 # #c2c2c1 on #101012 — AAA
contrast-text-soft-on-bg: 7.5 # #a3a3a3 on #101012 — AAA at body sizes
contrast-text-on-brand: 4.5 # #ffffff on #fd429c — AA at body sizes
contrast-link-pink-on-bg: 5.6 # #fd429c on #101012 — AA at body sizes
focus-ring: '2px solid #fd429c with 2px offset'
reduced-motion-honored: true
keyboard-nav: 'tab order: skip-link → masthead → composer → feed → footer; Cmd/Ctrl+Enter submits composer.'
prose-line-length: 'capped at 720px on text pages.'
dark-mode: optional # Suno is dark-first; light mode exists for support pages.
colors-dark: same as colors # primary surface is already dark.
---
## 1. Visual Theme & Atmosphere
Suno is a recording booth dressed as a chat app. The canvas drops to `#101012` — a near-black with a faint warm tint — and the body text is `#f7f4ef`, an off-white cream that reads like the paper of a vinyl sleeve under tungsten light. The combination is the brand's defining mood: warmer than Krea's absolute black, more atmospheric than Vercel's monochrome, more curated than a generic dark dashboard. The page reads as a recording studio at golden hour.
The display face is **Neue Montreal** by Pangram Pangram, set at 72px on a 72px line-height with `-0.96px` of tracking and weight **500** (medium). The medium weight on tight leading is the typographic signature: it produces a chunky, song-title cadence. "Make a house song about quitting your job" reads like a track listing on a record sleeve — not a marketing headline, not a research paper title, a *song title*. The choice of medium (not bold, not regular) puts Suno in Spotify's headline-weight register rather than the SaaS-marketing register of Stripe or Vercel.
The single chromatic accent is **hot-pink `#fd429c`** — used sparingly as a cue light on records, hearts, and the now-playing row. Suno's product surface is a long vertical feed of square album-art tiles, so the chrome stays monochromatic to let the user-generated artwork carry all the colour. The pink only appears when something is "active" — currently playing, freshly liked, the primary CTA. The discipline keeps the pink-on-near-black pairing recognisable from a thumbnail and ties the marketing surface to the product UI without breaking the metaphor.
Atmospheric vocabulary: **booth-warm, vinyl-sleeve-cream, song-title-cadence, hot-pink-cue-light, composer-at-bottom, chunky-medium-weight, tungsten-undertone, album-tile-feed, chat-app-as-music-studio, Pangram-Pangram-Neue-Montreal.** Card radii sit at 20px — softer than Linear's 6–8px, harder than Apple Music's near-circles — landing at the chat-app sweet spot. Section rhythm runs 64–96px; the feed packs tight while the chrome breathes.
**Key Characteristics**
- Near-black `#101012` canvas — warm-tinted, not absolute black
- Cream `#f7f4ef` body text — warmer than pure white, vinyl-sleeve paper register
- Neue Montreal (Pangram Pangram) at 72px / weight 500 / -0.96px tracking
- Hot-pink `#fd429c` accent — single chromatic moment, used as cue light
- Album-art tile grid — 1:1 squares at 20px radius
- Composer-at-bottom shape — chat-app metaphor for music creation
- Body weight 300 (light) — captions whisper, headlines shout
- Card radius 20px — Suno's signature shape, softer than Linear
- 10% white hairlines — tonal stacking, no heavy shadows
- Dark-first; cream surface only on rare light contexts
## 2. Color Palette & Roles
### Primary
- **bg** `#101012` — near-black with faint warm tint; the booth ground.
- **text** `#f7f4ef` — cream display copy; warmer than pure white, the vinyl-sleeve register.
- **bg-alt** `#1c1c1f` — secondary panel for chrome and inset zones.
- **brand-cta-bg** `#fd429c` — hot-pink primary CTA fill.
### Brand & Accent
- **brand** `#fd429c` — hot-pink cue light. Primary CTA, link hover, "now playing" indicator, hearts.
- **brand-deep** `#e02f8a` — pressed pink.
- **brand-soft** `rgba(253, 66, 156, 0.15)` — 15% pink wash for selected rows and hovered tiles.
- **accent-cobalt** `#3860be` — secondary blue accent, used in feature panels (never on chrome).
- **accent-deep** `#27455c` — deep teal-blue accent for inset feature backgrounds.
- **accent-amber** `#f5a623` — rare amber for warnings.
### Interactive
- **link** `#f7f4ef` — links stay cream on dark; underlined for affordance.
- **link-hover** `#fd429c` — pink on hover — the cue-light moment.
- **selected-bg** `rgba(253, 66, 156, 0.15)` — selected row in feed lists.
- **disabled** `#737373` — neutral-500 disabled chrome.
### Neutral Scale
- **cream** `#f7f4ef` — primary text, the vinyl-sleeve white.
- **white** `#ffffff` — rare absolute white for primary hero emphasis only.
- **cream-medium** `#e0ddd6` — slightly muted cream.
- **cool-grey-300** `#c2c2c1` — muted UI label.
- **cool-grey-400** `#a3a3a3` — quiet metadata.
- **cool-grey-500** `#737373` — disabled.
- **near-black** `#101012` — page canvas.
- **panel** `#1c1c1f` — raised surfaces.
- **whisper** `rgba(255, 255, 255, 0.05)` — softest hover wash.
### Surface & Borders
- **surface-0 (page)** — `#101012` near-black booth.
- **surface-1 (panel)** — `#1c1c1f` raised.
- **surface-translucent** — `rgba(28, 28, 31, 0.60)` — 60% panel for floated cards on imagery.
- **surface-soft** — `rgba(255, 255, 255, 0.05)` — whisper card on hover.
- **surface-paper** — `#f7f4ef` rare cream surface for paper-light contexts.
- **border** `rgba(255, 255, 255, 0.10)` — 10% white hairline (default).
- **border-strong** `rgba(255, 255, 255, 0.18)` — emphasised rule.
- **border-subtle** `rgba(255, 255, 255, 0.05)` — quietest division.
- **border-pink** `rgba(253, 66, 156, 0.40)` — brand-tinted ring.
### Shadow Colors
Suno's shadows are **deep-black with rare pink-glow accents**. The dark canvas absorbs cast shadows, so most surfaces lift via tonal stepping (`#101012` → `#1c1c1f` → whisper). The brand uses an exceptional **pink glow** (`0 0 24px rgba(253, 66, 156, 0.35)`) on the now-playing tile — a single brand-tinted shadow used as a cue-light effect. This is the rare case where the brand colour bleeds into elevation.
### Semantic
- **success** — bg `rgba(34, 197, 94, 0.12)`, text `#86efac`. Reserved for save-confirmation.
- **warning** — bg `rgba(245, 166, 35, 0.12)`, text `#fcd34d` (amber-300).
- **danger** — bg `rgba(239, 68, 68, 0.12)`, text `#fca5a5` (red-300).
- **info** — bg `rgba(56, 96, 190, 0.15)`, text `#93b8ee` — borrows the cobalt accent.
Note: Suno uses Tailwind 300-step text colours for semantic on dark to maintain AA contrast while staying calm. Saturated 500s would compete with the pink cue light.
## 3. Typography Rules
### Font Family
- **Display & Body**: `"Neue Montreal", ui-sans-serif, system-ui, sans-serif` — Pangram Pangram's modern grotesque, licensed and self-hosted. Closer to Helvetica Now than to Inter; relaxed terminals, tight apertures, slightly playful counters.
- **Mono**: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace` — used only for tabular data (track durations, BPM, sample rates).
- **OpenType features**: `kern` and `liga` enabled. `ss01` for the alternate single-storey `a` in Neue Montreal display sizes. `tnum` and `zero` enabled in mono.
### Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Display Hero | Neue Montreal | 96px | 500 | 1.0 | -0.013em | kern liga | Reserved for major launches |
| Display | Neue Montreal | 72px | 500 | 1.0 | -0.013em | kern liga | Homepage hero — the signature |
| H1 | Neue Montreal | 56px | 500 | 1.05 | -0.012em | liga | Page title |
| H2 | Neue Montreal | 48px | 500 | 1.05 | -0.012em | liga | Major section |
| H3 | Neue Montreal | 24px | 500 | 1.2 | normal | — | Sub-section |
| H4 | Neue Montreal | 20px | 500 | 1.3 | normal | — | Card heading |
| H5 | Neue Montreal | 16px | 500 | 1.4 | normal | — | Inline emphasis |
| Eyebrow | Neue Montreal | 12px | 500 | 1.4 | 0.06em | uppercase | Section pre-label |
| Body Large | Neue Montreal | 18px | 300 | 1.5 | normal | — | Lede paragraph |
| Body | Neue Montreal | 16px | 300 | 1.5 | normal | — | Default body — *light weight is the brand* |
| Body Small | Neue Montreal | 14px | 300 | 1.5 | normal | — | Compact UI body |
| Caption | Neue Montreal | 13px | 400 | 1.4 | normal | — | Image captions |
| Caption Tabular | mono | 13px | 500 | 1.4 | normal | tnum | Track duration, BPM |
| Label | Neue Montreal | 12px | 500 | 1.3 | normal | — | UI labels, chips |
| Code | mono | 13px | 400 | 1.55 | normal | tnum zero | Inline code (rare) |
| Code Micro | mono | 11px | 400 | 1.4 | normal | — | Footnote, version |
### Principles
- **Display weight 500 with tight leading is the signature.** Neue Montreal at 72px / 500 / 1.0 line-height / -0.96px tracking produces the chunky song-title cadence. The choice of medium (not 700, not 400) defines the brand voice.
- **Body weight 300 (light) is non-negotiable.** The contrast between heavy 500 headlines and 300 body is the brand's typographic signal: song titles shout, captions whisper.
- **Single-family discipline.** Neue Montreal carries display, body, captions, labels — everything except tabular numerals.
- **Negative tracking only at display sizes.** -0.013em at 72px+, -0.012em at 48–56px, normal at 24px and below.
- **Body size 16/24.** Slightly tighter than editorial 18/28; matches the chat-app density of Discord and Linear.
- **Eyebrow uses 0.06em tracking + uppercase.** Wider than Anthropic's 0.04em, narrower than Krea's 0.08em — the music-context register.
- **No italics in display.** Italics belong to lyric quotes in body copy.
- **OpenType: ss01 in display** — switches to the alternate `a` glyph in Neue Montreal headlines for visual interest.
## 4. Component Stylings
### Buttons
**Primary (Pink Pill)**
- Background: `#fd429c` hot-pink. Text: `#ffffff`, Neue Montreal 500 / 14px.
- Padding: `12px 24px`. Radius: `9999` (full pill). No border.
- Hover: bg → `#e02f8a` over 200ms.
- Active: bg → `#cb2680` (pressed beat).
- Focus: 2px pink ring with 2px offset.
- Use: Primary CTA — *Make a song, Sign up, Try Suno.*
**Secondary (Outline Pill)**
- Background: transparent. Text: `#f7f4ef`, Neue Montreal 500 / 14px.
- Border: `1px solid rgba(255, 255, 255, 0.18)`. Radius: `9999` (pill).
- Hover: bg → `rgba(255, 255, 255, 0.06)`.
- Use: Twin to primary — *Listen on Spotify, Read more.*
**Ghost (Quiet)**
- Background: transparent. Text: `#f7f4ef`, Neue Montreal 500 / 14px.
- Padding: `8px 14px`. Radius: `12px`.
- Hover: bg → `rgba(255, 255, 255, 0.06)`.
- Use: Nav links, footer, repeated inline.
**Cream (Inverted)**
- Background: `#f7f4ef` cream. Text: `#101012`, Neue Montreal 500 / 14px.
- Padding: `12px 24px`. Radius: `9999`.
- Hover: bg → `#ffffff`.
- Use: Rare inverted CTA — paper button on the booth ground for press contexts.
### Cards
**Editorial Card**
- Background: `#1c1c1f`. Border: `1px solid rgba(255, 255, 255, 0.10)`. Radius: `20px`. Padding: `20px`.
- Shadow: none at rest; on hover, `rgba(0, 0, 0, 0.40) 0 4px 12px`.
- Use: Feature card, capability tile.
**Album Tile**
- Background: `#1c1c1f` (placeholder while artwork loads). Border: none. Radius: `20px`. Aspect: 1:1.
- Hover: 24px soft shadow at 50% black + 1.02× scale; play-button overlay fades in.
- Use: Album art grid — image bleeds to edge, title/artist drop below tile in cream/muted.
**Now-Playing Tile**
- Same as album tile, but with `pink-glow` shadow (`0 0 24px rgba(253, 66, 156, 0.35)`).
- Optional 1px pink hairline ring.
- Use: The single tile in view that's currently playing — pink glow signals state.
### Badges, Tags, Pills
**Genre Tag** — bg `rgba(255, 255, 255, 0.08)`, text `#c2c2c1`, Neue Montreal 500 / 12px, padding `4px 12px`, radius `9999`. Hover deepens bg to 12% white.
**Pink Pill** — bg `rgba(253, 66, 156, 0.15)`, text `#fd429c`, radius `9999`. "Now playing", "Hearted", "New" badges.
**Eyebrow Label** — no chrome, just type. Neue Montreal 500 / 12px / uppercase / 0.06em tracking, colour `#a3a3a3`.
### Inputs / Forms
**Text Input**
- Background: `#1c1c1f`. Border: `1px solid rgba(255, 255, 255, 0.18)`. Radius: `12px`. Padding: `12px 16px`.
- Font: Neue Montreal 400 / 14px. Placeholder: `#a3a3a3`.
- Focus: `0 0 0 2px #fd429c` ring, border → `#fd429c`.
- Error: border → `#ef4444`, helper red below.
**Prompt Composer (Hero / Studio)**
- Background: `#1c1c1f`. Border: `1px solid rgba(255, 255, 255, 0.18)`. Radius: `9999` (full pill). Padding: `14px 20px 14px 24px`.
- Font: Neue Montreal 400 / 16px. Placeholder: `#a3a3a3` ("Describe a song…").
- Inner button: 40px pink circle hard-right, white note glyph.
- Position: sticky-to-viewport-bottom on the home feed, mirroring the in-product studio composer.
- Use: The brand's hero shape — composer-at-bottom that ties marketing to product UI.
### Navigation
- Header height `64px`. Background `transparent` over hero (uses `backdrop-filter: blur(12px)` on scroll).
- Logo: Suno wordmark in cream, Neue Montreal 500.
- Nav links: Neue Montreal 500 / 14px, colour `#f7f4ef`, padding `8px 14px`. Hover: text → `#fd429c`.
- Right-side: ghost "Sign in" + primary pink "Try Suno" button.
- Mobile (<640px): hamburger collapses to a full-screen sheet; links stack at 24px / 500.
### Optional Components
**Dropdown Menu** — bg `#1c1c1f`, border `rgba(255, 255, 255, 0.10)`, radius `12px`, shadow `rgba(0, 0, 0, 0.50) 0 12px 24px -8px`. Items: Neue Montreal 400 / 14px, hover bg `rgba(255, 255, 255, 0.06)`.
**Tooltip** — bg `#1c1c1f`, text `#f7f4ef`, radius `8px`, padding `6px 10px`, font `12px / 500`.
**Toast** — bg `#1c1c1f`, border `rgba(255, 255, 255, 0.10)`, radius `12px`, padding `12px 16px`, shadow standard.
**Modal** — bg `#1c1c1f`, radius `20px`, shadow `rgba(0, 0, 0, 0.70) 0 24px 48px -12px`, max-width `560px`. Backdrop: 80% black.
**Waveform Visualizer** — translucent panel `rgba(255, 255, 255, 0.05)` with pink-tinted bars; animated only on actively-playing tiles.
## 5. Layout Principles
### Spacing System
- **Base unit**: 4px.
- **Scale**: 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128 — chat-app density.
- **Density observation**: Suno is *medium-tight*. The album feed packs at 16–24px gutters; chrome breathes at 64–96px section rhythm. The composer-at-bottom requires the feed to be navigable without competing for vertical space.
### Grid & Container
- **Page max width**: `1280px` for chrome; feed pages bleed to viewport.
- **Site gutter**: `clamp(20px, 5vw, 48px)`.
- **Grid**: 12 columns with 16px gutters.
- **Album feed grid**: 4–6 columns at 1:1 aspect ratio with 16px gutters; collapses to 3 → 2 → 1 across breakpoints.
- **Hero treatment**: 72px headline left-aligned, body 16px / 300 below in cream; sticky composer pill at viewport bottom.
### Whitespace Philosophy
The whitespace is **booth-warm**. Section gutters at 64–96px; intra-section at 16–24px. The page reads tighter than Anthropic's broadsheet but warmer than a developer dashboard — closer to a curated record-store website.
### Section Cadence
- Hero (booth-dark) → Album feed (booth-dark, full-bleed grid) → Feature panels (occasional cobalt-tinted dark for contrast) → Footer (slightly lighter `#1c1c1f`).
- The whole site stays in dark territory; cream surfaces appear only on rare paper-light contexts (legal, terms).
- 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 |
| Standard (sm) | 4px | Compact chips (rare) |
| Comfortable (md) | 8px | Sub-controls, code blocks |
| Relaxed (lg) | 12px | Inputs, dropdowns, ghost buttons |
| Featured (xl) | 16px | Inset cards |
| Card | 20px | Cards, album tiles, modals — Suno's signature |
| Pill | 9999px | Primary CTA, composer, tag chips, sign-in |
Suno's signature radius is **20px on cards and album tiles** — softer than Linear/Vercel, harder than Apple Music's near-circles. Pills (`9999px`) are reserved for the primary CTA, the composer, and tag chips. Buttons land at `9999` (pill) for primary/secondary; `12px` for ghost (quieter).
## 7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Default page surface, hero, body sections |
| 1 | Tonal — `#1c1c1f` against `#101012` | Cards, panels |
| 2 | `rgba(0,0,0,0.30) 0 1px 3px` | Sticky nav on scroll |
| 3 | `rgba(0,0,0,0.40) 0 4px 12px` | Hover-lifted cards |
| 4 | `rgba(0,0,0,0.50) 0 16px 32px -8px` | Dropdowns, popovers |
| 5 | `rgba(0,0,0,0.70) 0 24px 48px -12px` | Modals, dialogs |
| Special | `0 0 24px rgba(253, 66, 156, 0.35)` | Pink-glow on now-playing tile only |
### Shadow Philosophy
Suno's depth is **tonal-first with a single brand-tinted exception**. The dark canvas absorbs cast shadows, so most surfaces lift via tonal stepping. The exception: the "now-playing" album tile gets a pink-glow shadow (`0 0 24px rgba(253, 66, 156, 0.35)`) — the only place the brand colour bleeds into elevation. This is intentional: the glow signals *currently playing* without needing a separate badge or indicator.
## 8. Interaction & Motion
### Easing Curves
- **`ease-standard`**: `cubic-bezier(0.4, 0, 0.2, 1)` — Material default.
- **`ease-emphasized`**: `cubic-bezier(0.2, 0, 0, 1)` — punchier exit; modal enter.
- **`ease-music`**: `cubic-bezier(0.32, 0.72, 0, 1)` — slow-out, fast-settle; tile reveal, waveform animation.
### Duration Buckets
- **Fast (100ms)** — colour transitions, focus rings, link hovers.
- **Standard (200ms)** — button hover, card hover, dropdown reveal.
- **Slow (320ms)** — modal enter/exit, composer expansion.
- **Page (480ms)** — route transitions, hero reveal sequences.
### Per-Component Micro-States
- **Button hover (primary pink)**: bg `#fd429c` → `#e02f8a` over 200ms; subtle 1.02× scale on the icon glyph.
- **Album tile hover**: scale 1.02× over 200ms + 24px shadow + play-button overlay fades in over 100ms.
- **Now-playing tile**: pink glow pulses subtly (`@keyframes glow-pulse` from 35% to 50% opacity over 2s, infinite, respects reduced-motion).
- **Link hover**: colour `#f7f4ef` → `#fd429c` over 100ms; underline thickens 1px → 2px.
- **Heart toggle**: empty → pink fill with 1.2× scale over 200ms ease-music (springy "boop").
- **Composer focus**: ring grows from 2px to 3px at 30% pink; placeholder fades to 60%.
### Page Transitions
Hero / feed cross-fade over 480ms ease-music. Album tiles fade in via `IntersectionObserver` at 80% viewport, 320ms duration with 12px translate-up. Composer persists across navigation (sticky-to-bottom).
### 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
- **`#f7f4ef` text on `#101012` bg**: 17.0:1 — AAA at all sizes.
- **`#ffffff` text on `#101012` bg**: 18.5:1 — AAA.
- **`#c2c2c1` text on `#101012` bg**: 11.0:1 — AAA at body sizes.
- **`#a3a3a3` text on `#101012` bg**: 7.5:1 — AAA at body sizes.
- **`#737373` text on `#101012` bg**: 4.6:1 — AA at body sizes.
- **`#ffffff` text on `#fd429c` brand**: 4.5:1 — AA at body sizes; safe for pink CTA.
- **`#fd429c` text on `#101012` bg**: 5.6:1 — AA at body sizes; safe for link hover.
### Focus Indicators
- Default ring: `0 0 0 2px #fd429c` with 2px offset.
- Soft ring (composer focus): `0 0 0 3px rgba(253, 66, 156, 0.30)`.
- All interactive surfaces show a visible focus state.
### ARIA Patterns
- **Navigation**: `<nav aria-label="Main">` with skip-link.
- **Composer**: `<form aria-label="Create song">` with `aria-label` on the input.
- **Album feed**: `role="feed"` on the grid; 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 controls labelled.
- **Dialog**: `role="dialog" aria-modal="true" aria-labelledby` with focus trap.
- **Live regions**: `aria-live="polite"` for "song ready" toasts.
### Keyboard Navigation
- Tab order: skip-link → masthead → composer → feed → footer.
- `Cmd/Ctrl+Enter` from anywhere submits the composer.
- Space toggles play/pause when focused on a tile.
- Arrow keys navigate within the feed grid.
- `Esc` closes modals.
### Screen Reader Hints
- Album tiles: alt text matches "<title> by <artist>".
- Now-playing state: `aria-current="true"` plus `aria-label="Now playing: <title>"`.
- Heart button: `aria-pressed` toggles between "Like" and "Liked".
- Decorative pink glow: `aria-hidden="true"`.
### Reduced Motion
Honoured globally. Looping waveforms freeze; pink glow holds static; durations halved.
## 10. Responsive Behavior
### Breakpoints
| Name | Width | Use |
|---|---|---|
| Mobile | < 640px | Single-column feed; full-screen nav |
| Tablet | 640–1024px | 2–3 column album feed |
| Desktop | 1024–1280px | 4-column album feed; full nav |
| Wide | 1280–1536px | 5-column album feed |
| Ultra | > 1536px | Page locks at 1280; gutters expand; feed up to 6 columns |
### Touch Targets
- Minimum tap target: 44×44px.
- Pill buttons: 48px minimum height on mobile (12px vertical padding).
- Album tile: tile = tap target; play overlay icon 48×48 at center.
- Composer mic / send buttons: 48×48 visual + extended tap area.
### Collapsing Strategy
- **Header**: full nav at ≥1024px; hamburger sheet below.
- **Hero**: 72px → 56px → 40px headline across desktop/tablet/mobile.
- **Composer**: full-width at mobile; max-width 720px on tablet+; remains sticky-bottom across all sizes.
- **Album grid**: 5-up → 4-up → 3-up → 2-up → 1-up across sizes.
- **Section spacing**: 96px → 64px → 48px across sizes.
### Image Behavior
- Album artwork uses `srcset` with 1x/2x/3x for crisp Retina rendering.
- Native lazy-loading on below-fold tiles.
- `aspect-ratio: 1 / 1` locked.
### Container Queries
Used inside album tiles to switch caption layout (single line vs. wrap) when tile width crosses 200px.
## 11. Content & Voice
### Tone
**Playful, music-aware, confidently casual.** Suno writes like a friend who runs a small label — full sentences, occasional warmth, no marketing exuberance but not Anthropic's literary calm either. Headlines are song-like ("Make a song about anything"); subheads explain. The voice positions Suno as a creative tool with personality.
### Microcopy Patterns
- **Button verbs**: "Make a song," "Try Suno," "Continue," "Save," "Share." Sometimes uses lowercase ("make a song") for personality.
- **Error messages**: "Couldn't generate the song. Try again, or [contact support]."
- **Success confirmations**: "Saved." "Song's ready." Brief, warm.
- **Loading states**: "Composing…" or "Mixing…" — music-aware language even on marketing.
### Empty States
- *"No songs yet. Make one above."*
- *"No matches. Try a different mood."*
- Never uses "Oops!" — empty is normal.
### CTA Verb Conventions
- Primary on hero: "Make a song," "Try Suno," "Get started"
- Secondary: "Listen to examples," "Watch the demo," "View pricing"
- Footer: "Discord," "Pricing," "API," "Support"
The voice is **invitational with a creative-tool warmth** — closer to GarageBand's friendly competence than to a research lab register.
## 12. Dark Mode & Theming
**Dark-first; light mode exists only for support pages.** The marketing surface, the album feed, and the studio are all rendered on the `#101012` booth canvas — that's the brand's defining choice.
The light-mode tokens (used at `/legal`, `/privacy`, `/terms`) flip the palette: `bg: #f7f4ef`, `text: #101012`, `text-muted: #737373`, `border: rgba(0, 0, 0, 0.05)`. The pink stays at `#fd429c` (slightly darker `#e02f8a` for AA contrast on cream). The light variant is utilitarian — it doesn't carry the brand's booth atmosphere.
The single rule: **never** show the marketing surface or the album feed in light mode. The booth is the brand.
## 13. Lineage & Influences
Suno's identity is **a recording booth dressed as a chat app**. The canvas runs `#101012` — a near-black with a faint warm tint — and the body text is `#f7f4ef`, an off-white cream that reads like the paper of a vinyl sleeve under tungsten light. **Neue Montreal** by Pangram Pangram carries the type, set at 72px/72px with `-0.96px` tracking; the medium weight (500) on a tight leading creates a chunky, song-title cadence. The single chromatic accent is a hot pink `#fd429c` — used sparingly as a cue light on records, hearts, and the now-playing row.
Suno's product surface is a long vertical feed of square album-art tiles, so the chrome stays monochromatic to let the user-generated artwork carry all the colour. The UI rounding sits at 12–20px — softer than Linear's 6–8px, harder than Apple Music's near-circles — landing at the chat-app sweet spot. The pink accent tracks back to OG SoundCloud / mid-2010s music UI, but Suno renders it cleaner. The composer-at-bottom shape borrows directly from ChatGPT and Claude's chat UI — Suno frames music creation as a chat conversation.
What it inherits: Apple Music's dark-canvas + album-tile feed pattern; SoundCloud's pink-magenta as music-context accent; ChatGPT/Claude's composer-at-bottom shape; Pangram Pangram's modern-grotesque typographic register. What it borrows from contemporaries: Spotify's headline-weight register; Discord's playful microcopy. What it rejects: Linear's monochrome cobalt accent (Suno's pink is warmer, more music-pop); Anthropic's editorial restraint (Suno is louder, more playful).
**Named influences:**
- **Apple Music** — dark-canvas + album-tile feed pattern; pink-magenta as music-context accent. *https://www.apple.com/apple-music/*
- **Pangram Pangram (Neue Montreal)** — the medium-weight modern grotesque that sets the song-title cadence. *https://pangrampangram.com/products/neue-montreal*
- **ChatGPT / Claude** — long vertical feed + composer-at-bottom shape; chat app as music studio. *https://chat.openai.com*
- **SoundCloud (legacy)** — pink-magenta cue-light accent in music UI.
- **Spotify** — headline-weight register; medium-weight display.
## 14. Do's and Don'ts
### Do
- **Do** keep the canvas at `#101012` — near-black with a faint warm tint, never absolute black.
- **Do** typeset display in Neue Montreal at **500** with tight leading; the chunky song-title cadence is the brand's voice.
- **Do** use `#f7f4ef` cream rather than pure white for body — the warm tint matters against the `#101012` ground.
- **Do** reserve `#fd429c` for music-context cues only (now-playing, hearts, primary CTA, link hover); never spread it across general UI.
- **Do** drop body weight to **300** (light); the contrast between heavy headline and light body is the brand's signature.
- **Do** keep card/album-tile radius at 20px — softer than Linear, harder than Apple Music.
- **Do** use the composer-at-bottom shape — the chat-app metaphor is the product-tying signal.
- **Do** use 10% white hairlines for borders (`rgba(255, 255, 255, 0.10)`).
- **Do** add a pink glow shadow to the now-playing tile — the only brand-tinted shadow in the system.
- **Do** loop waveforms silently with `playsinline` and freeze on `prefers-reduced-motion`.
### Don't
- **Don't** introduce a second chromatic accent on the marketing surface — the cobalt and deep teal belong to feature panels, not chrome.
- **Don't** use rounded-circle avatars on album tiles — the 20px squares are the format.
- **Don't** drop body weight below 300; below that the cream-on-near-black contrast collapses.
- **Don't** push display headlines above 96px — the brand's chunkiness lives in 72–96px territory.
- **Don't** bold display headlines (700) — Suno's signature is medium (500).
- **Don't** use the pink as a background fill beyond the 15% wash; solid pink panels collapse the brand.
- **Don't** insert gradients or meshes; the booth is flat and tonal.
- **Don't** show the marketing surface in light mode — the booth is the brand.
- **Don't** apologise in microcopy — empty states are normal.
- **Don't** mix sans display with serif body — Neue Montreal carries everything.
## 15. Agent Prompt Guide
### Quick Color Reference
```
bg: #101012
bg-alt: #1c1c1f
surface: #1c1c1f
surface-soft: rgba(255, 255, 255, 0.05)
text: #f7f4ef
text-strong: #ffffff
text-muted: #c2c2c1
text-soft: #a3a3a3
brand: #fd429c
brand-deep: #e02f8a
border: rgba(255, 255, 255, 0.10)
border-strong: rgba(255, 255, 255, 0.18)
```
### Example Component Prompts
1. **"Create a Suno-style hero — `#101012` near-black canvas with faint warm tint, 72px headline in Neue Montreal weight **500** with `-0.96px` tracking and cream `#f7f4ef` text on a 72px line-height. Below the headline, 16px body in Neue Montreal weight **300** in `#c2c2c1`. Sticky composer pill at viewport bottom: `#1c1c1f` background, `1px rgba(255, 255, 255, 0.18)` border, 9999 radius, 40px pink `#fd429c` send circle hard-right with white note glyph."**
2. **"Design a Suno album tile — 1:1 aspect, 20px radius, `#1c1c1f` placeholder ground while artwork loads, no border. Hover scales 1.02× with a 24px soft shadow at 50% black. Title and artist drop below the tile: title in Neue Montreal 500 / 14px cream, artist in 300 / 13px in `#a3a3a3`."**
3. **"Build the now-playing tile state — same as album tile, but with a pink glow shadow `0 0 24px rgba(253, 66, 156, 0.35)` and an optional 1px pink hairline ring. The glow pulses subtly between 35% and 50% opacity over 2s, paused under prefers-reduced-motion."**
4. **"Compose a Suno nav — 64px header, transparent background with 12px backdrop-blur on scroll, Suno wordmark hard-left in cream Neue Montreal 500. Link list Neue Montreal 500 / 14px cream with `#fd429c` hover. Right-side: ghost 'Sign in' + primary pink 'Try Suno' pill button."**
5. **"Render a Suno composer pill — `#1c1c1f` background, `1px rgba(255, 255, 255, 0.18)` border, 9999 radius, `14px 20px 14px 24px` padding, 16px placeholder 'Describe a song…' in `#a3a3a3`, Neue Montreal 400. 40px pink `#fd429c` circle hard-right with white note glyph. Focus expands ring to 3px at 30% pink. Sticky to viewport bottom on home."**
6. **"Create a Suno feature panel — full-bleed `#101012` canvas, 96px vertical padding, 48px Neue Montreal 500 headline in cream left-aligned with 12-col grid, 16px body in `#c2c2c1` weight **300** constrained to a 720px column. Single ghost-outline pill 'Listen to examples' CTA below."**
### Iteration Guide
1. **Start with `#101012`, not `#000000`.** If the bg is absolute black, you're in Krea's register; Suno warms the canvas slightly.
2. **Switch body to weight 300.** If body is 400, the contrast between headline and body collapses. Light body is the brand.
3. **Bump card radius to 20px.** If cards are at 8–12px, you're in Linear/Vercel territory; Suno softens to 20.
4. **Add the pink — but only once in view.** Pink `#fd429c` is the cue light: primary CTA, now-playing tile, link hover. Never as a fill.
5. **Use Neue Montreal at 500, not 700.** Bold display collapses the song-title cadence into Stripe-marketing register.
6. **Use cream `#f7f4ef`, not pure white.** The warm tint is the vinyl-sleeve signal.
7. **Position the composer at the bottom.** Sticky-to-viewport-bottom mirrors the in-product studio metaphor.
8. **Calm the verbs.** Replace "Sign up free!" with "Try Suno"; replace "Get started today!" with "Make a song."
1. Visual Theme & Atmosphere
Suno is a recording booth dressed as a chat app. The canvas drops to #101012 — a near-black with a faint warm tint — and the body text is #f7f4ef, an off-white cream that reads like the paper of a vinyl sleeve under tungsten light. The combination is the brand’s defining mood: warmer than Krea’s absolute black, more atmospheric than Vercel’s monochrome, more curated than a generic dark dashboard. The page reads as a recording studio at golden hour.
The display face is Neue Montreal by Pangram Pangram, set at 72px on a 72px line-height with -0.96px of tracking and weight 500 (medium). The medium weight on tight leading is the typographic signature: it produces a chunky, song-title cadence. “Make a house song about quitting your job” reads like a track listing on a record sleeve — not a marketing headline, not a research paper title, a song title. The choice of medium (not bold, not regular) puts Suno in Spotify’s headline-weight register rather than the SaaS-marketing register of Stripe or Vercel.
The single chromatic accent is hot-pink #fd429c — used sparingly as a cue light on records, hearts, and the now-playing row. Suno’s product surface is a long vertical feed of square album-art tiles, so the chrome stays monochromatic to let the user-generated artwork carry all the colour. The pink only appears when something is “active” — currently playing, freshly liked, the primary CTA. The discipline keeps the pink-on-near-black pairing recognisable from a thumbnail and ties the marketing surface to the product UI without breaking the metaphor.
Atmospheric vocabulary: booth-warm, vinyl-sleeve-cream, song-title-cadence, hot-pink-cue-light, composer-at-bottom, chunky-medium-weight, tungsten-undertone, album-tile-feed, chat-app-as-music-studio, Pangram-Pangram-Neue-Montreal. Card radii sit at 20px — softer than Linear’s 6–8px, harder than Apple Music’s near-circles — landing at the chat-app sweet spot. Section rhythm runs 64–96px; the feed packs tight while the chrome breathes.
Key Characteristics
- Near-black
#101012canvas — warm-tinted, not absolute black - Cream
#f7f4efbody text — warmer than pure white, vinyl-sleeve paper register - Neue Montreal (Pangram Pangram) at 72px / weight 500 / -0.96px tracking
- Hot-pink
#fd429caccent — single chromatic moment, used as cue light - Album-art tile grid — 1:1 squares at 20px radius
- Composer-at-bottom shape — chat-app metaphor for music creation
- Body weight 300 (light) — captions whisper, headlines shout
- Card radius 20px — Suno’s signature shape, softer than Linear
- 10% white hairlines — tonal stacking, no heavy shadows
- Dark-first; cream surface only on rare light contexts
2. Color Palette & Roles
Primary
- bg
#101012— near-black with faint warm tint; the booth ground. - text
#f7f4ef— cream display copy; warmer than pure white, the vinyl-sleeve register. - bg-alt
#1c1c1f— secondary panel for chrome and inset zones. - brand-cta-bg
#fd429c— hot-pink primary CTA fill.
Brand & Accent
- brand
#fd429c— hot-pink cue light. Primary CTA, link hover, “now playing” indicator, hearts. - brand-deep
#e02f8a— pressed pink. - brand-soft
rgba(253, 66, 156, 0.15)— 15% pink wash for selected rows and hovered tiles. - accent-cobalt
#3860be— secondary blue accent, used in feature panels (never on chrome). - accent-deep
#27455c— deep teal-blue accent for inset feature backgrounds. - accent-amber
#f5a623— rare amber for warnings.
Interactive
- link
#f7f4ef— links stay cream on dark; underlined for affordance. - link-hover
#fd429c— pink on hover — the cue-light moment. - selected-bg
rgba(253, 66, 156, 0.15)— selected row in feed lists. - disabled
#737373— neutral-500 disabled chrome.
Neutral Scale
- cream
#f7f4ef— primary text, the vinyl-sleeve white. - white
#ffffff— rare absolute white for primary hero emphasis only. - cream-medium
#e0ddd6— slightly muted cream. - cool-grey-300
#c2c2c1— muted UI label. - cool-grey-400
#a3a3a3— quiet metadata. - cool-grey-500
#737373— disabled. - near-black
#101012— page canvas. - panel
#1c1c1f— raised surfaces. - whisper
rgba(255, 255, 255, 0.05)— softest hover wash.
Surface & Borders
- surface-0 (page) —
#101012near-black booth. - surface-1 (panel) —
#1c1c1fraised. - surface-translucent —
rgba(28, 28, 31, 0.60)— 60% panel for floated cards on imagery. - surface-soft —
rgba(255, 255, 255, 0.05)— whisper card on hover. - surface-paper —
#f7f4efrare cream surface for paper-light contexts. - border
rgba(255, 255, 255, 0.10)— 10% white hairline (default). - border-strong
rgba(255, 255, 255, 0.18)— emphasised rule. - border-subtle
rgba(255, 255, 255, 0.05)— quietest division. - border-pink
rgba(253, 66, 156, 0.40)— brand-tinted ring.
Shadow Colors
Suno’s shadows are deep-black with rare pink-glow accents. The dark canvas absorbs cast shadows, so most surfaces lift via tonal stepping (#101012 → #1c1c1f → whisper). The brand uses an exceptional pink glow (0 0 24px rgba(253, 66, 156, 0.35)) on the now-playing tile — a single brand-tinted shadow used as a cue-light effect. This is the rare case where the brand colour bleeds into elevation.
Semantic
- success — bg
rgba(34, 197, 94, 0.12), text#86efac. Reserved for save-confirmation. - warning — bg
rgba(245, 166, 35, 0.12), text#fcd34d(amber-300). - danger — bg
rgba(239, 68, 68, 0.12), text#fca5a5(red-300). - info — bg
rgba(56, 96, 190, 0.15), text#93b8ee— borrows the cobalt accent.
Note: Suno uses Tailwind 300-step text colours for semantic on dark to maintain AA contrast while staying calm. Saturated 500s would compete with the pink cue light.
3. Typography Rules
Font Family
- Display & Body:
"Neue Montreal", ui-sans-serif, system-ui, sans-serif— Pangram Pangram’s modern grotesque, licensed and self-hosted. Closer to Helvetica Now than to Inter; relaxed terminals, tight apertures, slightly playful counters. - Mono:
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace— used only for tabular data (track durations, BPM, sample rates). - OpenType features:
kernandligaenabled.ss01for the alternate single-storeyain Neue Montreal display sizes.tnumandzeroenabled in mono.
Hierarchy
| Role | Font | Size | Weight | Line Height | Letter Spacing | OT Features | Notes |
|---|---|---|---|---|---|---|---|
| Display Hero | Neue Montreal | 96px | 500 | 1.0 | -0.013em | kern liga | Reserved for major launches |
| Display | Neue Montreal | 72px | 500 | 1.0 | -0.013em | kern liga | Homepage hero — the signature |
| H1 | Neue Montreal | 56px | 500 | 1.05 | -0.012em | liga | Page title |
| H2 | Neue Montreal | 48px | 500 | 1.05 | -0.012em | liga | Major section |
| H3 | Neue Montreal | 24px | 500 | 1.2 | normal | — | Sub-section |
| H4 | Neue Montreal | 20px | 500 | 1.3 | normal | — | Card heading |
| H5 | Neue Montreal | 16px | 500 | 1.4 | normal | — | Inline emphasis |
| Eyebrow | Neue Montreal | 12px | 500 | 1.4 | 0.06em | uppercase | Section pre-label |
| Body Large | Neue Montreal | 18px | 300 | 1.5 | normal | — | Lede paragraph |
| Body | Neue Montreal | 16px | 300 | 1.5 | normal | — | Default body — light weight is the brand |
| Body Small | Neue Montreal | 14px | 300 | 1.5 | normal | — | Compact UI body |
| Caption | Neue Montreal | 13px | 400 | 1.4 | normal | — | Image captions |
| Caption Tabular | mono | 13px | 500 | 1.4 | normal | tnum | Track duration, BPM |
| Label | Neue Montreal | 12px | 500 | 1.3 | normal | — | UI labels, chips |
| Code | mono | 13px | 400 | 1.55 | normal | tnum zero | Inline code (rare) |
| Code Micro | mono | 11px | 400 | 1.4 | normal | — | Footnote, version |
Principles
- Display weight 500 with tight leading is the signature. Neue Montreal at 72px / 500 / 1.0 line-height / -0.96px tracking produces the chunky song-title cadence. The choice of medium (not 700, not 400) defines the brand voice.
- Body weight 300 (light) is non-negotiable. The contrast between heavy 500 headlines and 300 body is the brand’s typographic signal: song titles shout, captions whisper.
- Single-family discipline. Neue Montreal carries display, body, captions, labels — everything except tabular numerals.
- Negative tracking only at display sizes. -0.013em at 72px+, -0.012em at 48–56px, normal at 24px and below.
- Body size 16/24. Slightly tighter than editorial 18/28; matches the chat-app density of Discord and Linear.
- Eyebrow uses 0.06em tracking + uppercase. Wider than Anthropic’s 0.04em, narrower than Krea’s 0.08em — the music-context register.
- No italics in display. Italics belong to lyric quotes in body copy.
- OpenType: ss01 in display — switches to the alternate
aglyph in Neue Montreal headlines for visual interest.
4. Component Stylings
Buttons
Primary (Pink Pill)
- Background:
#fd429chot-pink. Text:#ffffff, Neue Montreal 500 / 14px. - Padding:
12px 24px. Radius:9999(full pill). No border. - Hover: bg →
#e02f8aover 200ms. - Active: bg →
#cb2680(pressed beat). - Focus: 2px pink ring with 2px offset.
- Use: Primary CTA — Make a song, Sign up, Try Suno.
Secondary (Outline Pill)
- Background: transparent. Text:
#f7f4ef, Neue Montreal 500 / 14px. - Border:
1px solid rgba(255, 255, 255, 0.18). Radius:9999(pill). - Hover: bg →
rgba(255, 255, 255, 0.06). - Use: Twin to primary — Listen on Spotify, Read more.
Ghost (Quiet)
- Background: transparent. Text:
#f7f4ef, Neue Montreal 500 / 14px. - Padding:
8px 14px. Radius:12px. - Hover: bg →
rgba(255, 255, 255, 0.06). - Use: Nav links, footer, repeated inline.
Cream (Inverted)
- Background:
#f7f4efcream. Text:#101012, Neue Montreal 500 / 14px. - Padding:
12px 24px. Radius:9999. - Hover: bg →
#ffffff. - Use: Rare inverted CTA — paper button on the booth ground for press contexts.
Cards
Editorial Card
- Background:
#1c1c1f. Border:1px solid rgba(255, 255, 255, 0.10). Radius:20px. Padding:20px. - Shadow: none at rest; on hover,
rgba(0, 0, 0, 0.40) 0 4px 12px. - Use: Feature card, capability tile.
Album Tile
- Background:
#1c1c1f(placeholder while artwork loads). Border: none. Radius:20px. Aspect: 1:1. - Hover: 24px soft shadow at 50% black + 1.02× scale; play-button overlay fades in.
- Use: Album art grid — image bleeds to edge, title/artist drop below tile in cream/muted.
Now-Playing Tile
- Same as album tile, but with
pink-glowshadow (0 0 24px rgba(253, 66, 156, 0.35)). - Optional 1px pink hairline ring.
- Use: The single tile in view that’s currently playing — pink glow signals state.
Badges, Tags, Pills
Genre Tag — bg rgba(255, 255, 255, 0.08), text #c2c2c1, Neue Montreal 500 / 12px, padding 4px 12px, radius 9999. Hover deepens bg to 12% white.
Pink Pill — bg rgba(253, 66, 156, 0.15), text #fd429c, radius 9999. “Now playing”, “Hearted”, “New” badges.
Eyebrow Label — no chrome, just type. Neue Montreal 500 / 12px / uppercase / 0.06em tracking, colour #a3a3a3.
Inputs / Forms
Text Input
- Background:
#1c1c1f. Border:1px solid rgba(255, 255, 255, 0.18). Radius:12px. Padding:12px 16px. - Font: Neue Montreal 400 / 14px. Placeholder:
#a3a3a3. - Focus:
0 0 0 2px #fd429cring, border →#fd429c. - Error: border →
#ef4444, helper red below.
Prompt Composer (Hero / Studio)
- Background:
#1c1c1f. Border:1px solid rgba(255, 255, 255, 0.18). Radius:9999(full pill). Padding:14px 20px 14px 24px. - Font: Neue Montreal 400 / 16px. Placeholder:
#a3a3a3(“Describe a song…”). - Inner button: 40px pink circle hard-right, white note glyph.
- Position: sticky-to-viewport-bottom on the home feed, mirroring the in-product studio composer.
- Use: The brand’s hero shape — composer-at-bottom that ties marketing to product UI.
Navigation
- Header height
64px. Backgroundtransparentover hero (usesbackdrop-filter: blur(12px)on scroll). - Logo: Suno wordmark in cream, Neue Montreal 500.
- Nav links: Neue Montreal 500 / 14px, colour
#f7f4ef, padding8px 14px. Hover: text →#fd429c. - Right-side: ghost “Sign in” + primary pink “Try Suno” button.
- Mobile (<640px): hamburger collapses to a full-screen sheet; links stack at 24px / 500.
Optional Components
Dropdown Menu — bg #1c1c1f, border rgba(255, 255, 255, 0.10), radius 12px, shadow rgba(0, 0, 0, 0.50) 0 12px 24px -8px. Items: Neue Montreal 400 / 14px, hover bg rgba(255, 255, 255, 0.06).
Tooltip — bg #1c1c1f, text #f7f4ef, radius 8px, padding 6px 10px, font 12px / 500.
Toast — bg #1c1c1f, border rgba(255, 255, 255, 0.10), radius 12px, padding 12px 16px, shadow standard.
Modal — bg #1c1c1f, radius 20px, shadow rgba(0, 0, 0, 0.70) 0 24px 48px -12px, max-width 560px. Backdrop: 80% black.
Waveform Visualizer — translucent panel rgba(255, 255, 255, 0.05) with pink-tinted bars; animated only on actively-playing tiles.
5. Layout Principles
Spacing System
- Base unit: 4px.
- Scale: 4, 8, 12, 16, 20, 24, 32, 48, 64, 96, 128 — chat-app density.
- Density observation: Suno is medium-tight. The album feed packs at 16–24px gutters; chrome breathes at 64–96px section rhythm. The composer-at-bottom requires the feed to be navigable without competing for vertical space.
Grid & Container
- Page max width:
1280pxfor chrome; feed pages bleed to viewport. - Site gutter:
clamp(20px, 5vw, 48px). - Grid: 12 columns with 16px gutters.
- Album feed grid: 4–6 columns at 1:1 aspect ratio with 16px gutters; collapses to 3 → 2 → 1 across breakpoints.
- Hero treatment: 72px headline left-aligned, body 16px / 300 below in cream; sticky composer pill at viewport bottom.
Whitespace Philosophy
The whitespace is booth-warm. Section gutters at 64–96px; intra-section at 16–24px. The page reads tighter than Anthropic’s broadsheet but warmer than a developer dashboard — closer to a curated record-store website.
Section Cadence
- Hero (booth-dark) → Album feed (booth-dark, full-bleed grid) → Feature panels (occasional cobalt-tinted dark for contrast) → Footer (slightly lighter
#1c1c1f). - The whole site stays in dark territory; cream surfaces appear only on rare paper-light contexts (legal, terms).
- 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 |
| Standard (sm) | 4px | Compact chips (rare) |
| Comfortable (md) | 8px | Sub-controls, code blocks |
| Relaxed (lg) | 12px | Inputs, dropdowns, ghost buttons |
| Featured (xl) | 16px | Inset cards |
| Card | 20px | Cards, album tiles, modals — Suno’s signature |
| Pill | 9999px | Primary CTA, composer, tag chips, sign-in |
Suno’s signature radius is 20px on cards and album tiles — softer than Linear/Vercel, harder than Apple Music’s near-circles. Pills (9999px) are reserved for the primary CTA, the composer, and tag chips. Buttons land at 9999 (pill) for primary/secondary; 12px for ghost (quieter).
7. Depth & Elevation
| Level | Treatment | Use |
|---|---|---|
| 0 | Flat — no shadow | Default page surface, hero, body sections |
| 1 | Tonal — #1c1c1f against #101012 |
Cards, panels |
| 2 | rgba(0,0,0,0.30) 0 1px 3px |
Sticky nav on scroll |
| 3 | rgba(0,0,0,0.40) 0 4px 12px |
Hover-lifted cards |
| 4 | rgba(0,0,0,0.50) 0 16px 32px -8px |
Dropdowns, popovers |
| 5 | rgba(0,0,0,0.70) 0 24px 48px -12px |
Modals, dialogs |
| Special | 0 0 24px rgba(253, 66, 156, 0.35) |
Pink-glow on now-playing tile only |
Shadow Philosophy
Suno’s depth is tonal-first with a single brand-tinted exception. The dark canvas absorbs cast shadows, so most surfaces lift via tonal stepping. The exception: the “now-playing” album tile gets a pink-glow shadow (0 0 24px rgba(253, 66, 156, 0.35)) — the only place the brand colour bleeds into elevation. This is intentional: the glow signals currently playing without needing a separate badge or indicator.
8. Interaction & Motion
Easing Curves
ease-standard:cubic-bezier(0.4, 0, 0.2, 1)— Material default.ease-emphasized:cubic-bezier(0.2, 0, 0, 1)— punchier exit; modal enter.ease-music:cubic-bezier(0.32, 0.72, 0, 1)— slow-out, fast-settle; tile reveal, waveform animation.
Duration Buckets
- Fast (100ms) — colour transitions, focus rings, link hovers.
- Standard (200ms) — button hover, card hover, dropdown reveal.
- Slow (320ms) — modal enter/exit, composer expansion.
- Page (480ms) — route transitions, hero reveal sequences.
Per-Component Micro-States
- Button hover (primary pink): bg
#fd429c→#e02f8aover 200ms; subtle 1.02× scale on the icon glyph. - Album tile hover: scale 1.02× over 200ms + 24px shadow + play-button overlay fades in over 100ms.
- Now-playing tile: pink glow pulses subtly (
@keyframes glow-pulsefrom 35% to 50% opacity over 2s, infinite, respects reduced-motion). - Link hover: colour
#f7f4ef→#fd429cover 100ms; underline thickens 1px → 2px. - Heart toggle: empty → pink fill with 1.2× scale over 200ms ease-music (springy “boop”).
- Composer focus: ring grows from 2px to 3px at 30% pink; placeholder fades to 60%.
Page Transitions
Hero / feed cross-fade over 480ms ease-music. Album tiles fade in via IntersectionObserver at 80% viewport, 320ms duration with 12px translate-up. Composer persists across navigation (sticky-to-bottom).
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
#f7f4eftext on#101012bg: 17.0:1 — AAA at all sizes.#fffffftext on#101012bg: 18.5:1 — AAA.#c2c2c1text on#101012bg: 11.0:1 — AAA at body sizes.#a3a3a3text on#101012bg: 7.5:1 — AAA at body sizes.#737373text on#101012bg: 4.6:1 — AA at body sizes.#fffffftext on#fd429cbrand: 4.5:1 — AA at body sizes; safe for pink CTA.#fd429ctext on#101012bg: 5.6:1 — AA at body sizes; safe for link hover.
Focus Indicators
- Default ring:
0 0 0 2px #fd429cwith 2px offset. - Soft ring (composer focus):
0 0 0 3px rgba(253, 66, 156, 0.30). - All interactive surfaces show a visible focus state.
ARIA Patterns
- Navigation:
<nav aria-label="Main">with skip-link. - Composer:
<form aria-label="Create song">witharia-labelon the input. - Album feed:
role="feed"on the grid; each tile is<article>witharia-labelledbypointing at the title; the now-playing tile usesaria-current="true". - Audio player:
role="region" aria-label="Audio player"with controls labelled. - Dialog:
role="dialog" aria-modal="true" aria-labelledbywith focus trap. - Live regions:
aria-live="polite"for “song ready” toasts.
Keyboard Navigation
- Tab order: skip-link → masthead → composer → feed → footer.
Cmd/Ctrl+Enterfrom anywhere submits the composer.- Space toggles play/pause when focused on a tile.
- Arrow keys navigate within the feed grid.
Esccloses modals.
Screen Reader Hints
- Album tiles: alt text matches “
by <artist>”.</li> <li>Now-playing state: <code>aria-current="true"</code> plus <code>aria-label="Now playing: <title>"</code>.</li> <li>Heart button: <code>aria-pressed</code> toggles between “Like” and “Liked”.</li> <li>Decorative pink glow: <code>aria-hidden="true"</code>.</li> </ul> <h3 id="reduced-motion-1">Reduced Motion</h3> <p>Honoured globally. Looping waveforms freeze; pink glow holds static; durations halved.</p> <h2 id="10-responsive-behavior">10. Responsive Behavior</h2> <h3 id="breakpoints">Breakpoints</h3> <table> <thead> <tr> <th>Name</th> <th>Width</th> <th>Use</th> </tr> </thead> <tbody> <tr> <td>Mobile</td> <td>< 640px</td> <td>Single-column feed; full-screen nav</td> </tr> <tr> <td>Tablet</td> <td>640–1024px</td> <td>2–3 column album feed</td> </tr> <tr> <td>Desktop</td> <td>1024–1280px</td> <td>4-column album feed; full nav</td> </tr> <tr> <td>Wide</td> <td>1280–1536px</td> <td>5-column album feed</td> </tr> <tr> <td>Ultra</td> <td>> 1536px</td> <td>Page locks at 1280; gutters expand; feed up to 6 columns</td> </tr> </tbody> </table> <h3 id="touch-targets">Touch Targets</h3> <ul> <li>Minimum tap target: 44×44px.</li> <li>Pill buttons: 48px minimum height on mobile (12px vertical padding).</li> <li>Album tile: tile = tap target; play overlay icon 48×48 at center.</li> <li>Composer mic / send buttons: 48×48 visual + extended tap area.</li> </ul> <h3 id="collapsing-strategy">Collapsing Strategy</h3> <ul> <li><strong>Header</strong>: full nav at ≥1024px; hamburger sheet below.</li> <li><strong>Hero</strong>: 72px → 56px → 40px headline across desktop/tablet/mobile.</li> <li><strong>Composer</strong>: full-width at mobile; max-width 720px on tablet+; remains sticky-bottom across all sizes.</li> <li><strong>Album grid</strong>: 5-up → 4-up → 3-up → 2-up → 1-up across sizes.</li> <li><strong>Section spacing</strong>: 96px → 64px → 48px across sizes.</li> </ul> <h3 id="image-behavior">Image Behavior</h3> <ul> <li>Album artwork uses <code>srcset</code> with 1x/2x/3x for crisp Retina rendering.</li> <li>Native lazy-loading on below-fold tiles.</li> <li><code>aspect-ratio: 1 / 1</code> locked.</li> </ul> <h3 id="container-queries">Container Queries</h3> <p>Used inside album tiles to switch caption layout (single line vs. wrap) when tile width crosses 200px.</p> <h2 id="11-content--voice">11. Content & Voice</h2> <h3 id="tone">Tone</h3> <p><strong>Playful, music-aware, confidently casual.</strong> Suno writes like a friend who runs a small label — full sentences, occasional warmth, no marketing exuberance but not Anthropic’s literary calm either. Headlines are song-like (“Make a song about anything”); subheads explain. The voice positions Suno as a creative tool with personality.</p> <h3 id="microcopy-patterns">Microcopy Patterns</h3> <ul> <li><strong>Button verbs</strong>: “Make a song,” “Try Suno,” “Continue,” “Save,” “Share.” Sometimes uses lowercase (“make a song”) for personality.</li> <li><strong>Error messages</strong>: “Couldn’t generate the song. Try again, or [contact support].”</li> <li><strong>Success confirmations</strong>: “Saved.” “Song’s ready.” Brief, warm.</li> <li><strong>Loading states</strong>: “Composing…” or “Mixing…” — music-aware language even on marketing.</li> </ul> <h3 id="empty-states">Empty States</h3> <ul> <li><em>“No songs yet. Make one above.”</em></li> <li><em>“No matches. Try a different mood.”</em></li> <li>Never uses “Oops!” — empty is normal.</li> </ul> <h3 id="cta-verb-conventions">CTA Verb Conventions</h3> <ul> <li>Primary on hero: “Make a song,” “Try Suno,” “Get started”</li> <li>Secondary: “Listen to examples,” “Watch the demo,” “View pricing”</li> <li>Footer: “Discord,” “Pricing,” “API,” “Support”</li> </ul> <p>The voice is <strong>invitational with a creative-tool warmth</strong> — closer to GarageBand’s friendly competence than to a research lab register.</p> <h2 id="12-dark-mode--theming">12. Dark Mode & Theming</h2> <p><strong>Dark-first; light mode exists only for support pages.</strong> The marketing surface, the album feed, and the studio are all rendered on the <code>#101012</code> booth canvas — that’s the brand’s defining choice.</p> <p>The light-mode tokens (used at <code>/legal</code>, <code>/privacy</code>, <code>/terms</code>) flip the palette: <code>bg: #f7f4ef</code>, <code>text: #101012</code>, <code>text-muted: #737373</code>, <code>border: rgba(0, 0, 0, 0.05)</code>. The pink stays at <code>#fd429c</code> (slightly darker <code>#e02f8a</code> for AA contrast on cream). The light variant is utilitarian — it doesn’t carry the brand’s booth atmosphere.</p> <p>The single rule: <strong>never</strong> show the marketing surface or the album feed in light mode. The booth is the brand.</p> <h2 id="13-lineage--influences">13. Lineage & Influences</h2> <p>Suno’s identity is <strong>a recording booth dressed as a chat app</strong>. The canvas runs <code>#101012</code> — a near-black with a faint warm tint — and the body text is <code>#f7f4ef</code>, an off-white cream that reads like the paper of a vinyl sleeve under tungsten light. <strong>Neue Montreal</strong> by Pangram Pangram carries the type, set at 72px/72px with <code>-0.96px</code> tracking; the medium weight (500) on a tight leading creates a chunky, song-title cadence. The single chromatic accent is a hot pink <code>#fd429c</code> — used sparingly as a cue light on records, hearts, and the now-playing row.</p> <p>Suno’s product surface is a long vertical feed of square album-art tiles, so the chrome stays monochromatic to let the user-generated artwork carry all the colour. The UI rounding sits at 12–20px — softer than Linear’s 6–8px, harder than Apple Music’s near-circles — landing at the chat-app sweet spot. The pink accent tracks back to OG SoundCloud / mid-2010s music UI, but Suno renders it cleaner. The composer-at-bottom shape borrows directly from ChatGPT and Claude’s chat UI — Suno frames music creation as a chat conversation.</p> <p>What it inherits: Apple Music’s dark-canvas + album-tile feed pattern; SoundCloud’s pink-magenta as music-context accent; ChatGPT/Claude’s composer-at-bottom shape; Pangram Pangram’s modern-grotesque typographic register. What it borrows from contemporaries: Spotify’s headline-weight register; Discord’s playful microcopy. What it rejects: Linear’s monochrome cobalt accent (Suno’s pink is warmer, more music-pop); Anthropic’s editorial restraint (Suno is louder, more playful).</p> <p><strong>Named influences:</strong></p> <ul> <li><strong>Apple Music</strong> — dark-canvas + album-tile feed pattern; pink-magenta as music-context accent. <em><a href="https://www.apple.com/apple-music/">https://www.apple.com/apple-music/</a></em></li> <li><strong>Pangram Pangram (Neue Montreal)</strong> — the medium-weight modern grotesque that sets the song-title cadence. <em><a href="https://pangrampangram.com/products/neue-montreal">https://pangrampangram.com/products/neue-montreal</a></em></li> <li><strong>ChatGPT / Claude</strong> — long vertical feed + composer-at-bottom shape; chat app as music studio. <em><a href="https://chat.openai.com">https://chat.openai.com</a></em></li> <li><strong>SoundCloud (legacy)</strong> — pink-magenta cue-light accent in music UI.</li> <li><strong>Spotify</strong> — headline-weight register; medium-weight display.</li> </ul> <h2 id="14-dos-and-donts">14. Do’s and Don’ts</h2> <h3 id="do">Do</h3> <ul> <li><strong>Do</strong> keep the canvas at <code>#101012</code> — near-black with a faint warm tint, never absolute black.</li> <li><strong>Do</strong> typeset display in Neue Montreal at <strong>500</strong> with tight leading; the chunky song-title cadence is the brand’s voice.</li> <li><strong>Do</strong> use <code>#f7f4ef</code> cream rather than pure white for body — the warm tint matters against the <code>#101012</code> ground.</li> <li><strong>Do</strong> reserve <code>#fd429c</code> for music-context cues only (now-playing, hearts, primary CTA, link hover); never spread it across general UI.</li> <li><strong>Do</strong> drop body weight to <strong>300</strong> (light); the contrast between heavy headline and light body is the brand’s signature.</li> <li><strong>Do</strong> keep card/album-tile radius at 20px — softer than Linear, harder than Apple Music.</li> <li><strong>Do</strong> use the composer-at-bottom shape — the chat-app metaphor is the product-tying signal.</li> <li><strong>Do</strong> use 10% white hairlines for borders (<code>rgba(255, 255, 255, 0.10)</code>).</li> <li><strong>Do</strong> add a pink glow shadow to the now-playing tile — the only brand-tinted shadow in the system.</li> <li><strong>Do</strong> loop waveforms silently with <code>playsinline</code> and freeze on <code>prefers-reduced-motion</code>.</li> </ul> <h3 id="dont">Don’t</h3> <ul> <li><strong>Don’t</strong> introduce a second chromatic accent on the marketing surface — the cobalt and deep teal belong to feature panels, not chrome.</li> <li><strong>Don’t</strong> use rounded-circle avatars on album tiles — the 20px squares are the format.</li> <li><strong>Don’t</strong> drop body weight below 300; below that the cream-on-near-black contrast collapses.</li> <li><strong>Don’t</strong> push display headlines above 96px — the brand’s chunkiness lives in 72–96px territory.</li> <li><strong>Don’t</strong> bold display headlines (700) — Suno’s signature is medium (500).</li> <li><strong>Don’t</strong> use the pink as a background fill beyond the 15% wash; solid pink panels collapse the brand.</li> <li><strong>Don’t</strong> insert gradients or meshes; the booth is flat and tonal.</li> <li><strong>Don’t</strong> show the marketing surface in light mode — the booth is the brand.</li> <li><strong>Don’t</strong> apologise in microcopy — empty states are normal.</li> <li><strong>Don’t</strong> mix sans display with serif body — Neue Montreal carries everything.</li> </ul> <h2 id="15-agent-prompt-guide">15. Agent Prompt Guide</h2> <h3 id="quick-color-reference">Quick Color Reference</h3> <pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="plaintext"><code><span class="line"><span>bg: #101012</span></span> <span class="line"><span>bg-alt: #1c1c1f</span></span> <span class="line"><span>surface: #1c1c1f</span></span> <span class="line"><span>surface-soft: rgba(255, 255, 255, 0.05)</span></span> <span class="line"><span>text: #f7f4ef</span></span> <span class="line"><span>text-strong: #ffffff</span></span> <span class="line"><span>text-muted: #c2c2c1</span></span> <span class="line"><span>text-soft: #a3a3a3</span></span> <span class="line"><span>brand: #fd429c</span></span> <span class="line"><span>brand-deep: #e02f8a</span></span> <span class="line"><span>border: rgba(255, 255, 255, 0.10)</span></span> <span class="line"><span>border-strong: rgba(255, 255, 255, 0.18)</span></span></code></pre> <h3 id="example-component-prompts">Example Component Prompts</h3> <ol> <li> <p><strong>“Create a Suno-style hero — <code>#101012</code> near-black canvas with faint warm tint, 72px headline in Neue Montreal weight <strong>500</strong> with <code>-0.96px</code> tracking and cream <code>#f7f4ef</code> text on a 72px line-height. Below the headline, 16px body in Neue Montreal weight <strong>300</strong> in <code>#c2c2c1</code>. Sticky composer pill at viewport bottom: <code>#1c1c1f</code> background, <code>1px rgba(255, 255, 255, 0.18)</code> border, 9999 radius, 40px pink <code>#fd429c</code> send circle hard-right with white note glyph.”</strong></p> </li> <li> <p><strong>“Design a Suno album tile — 1:1 aspect, 20px radius, <code>#1c1c1f</code> placeholder ground while artwork loads, no border. Hover scales 1.02× with a 24px soft shadow at 50% black. Title and artist drop below the tile: title in Neue Montreal 500 / 14px cream, artist in 300 / 13px in <code>#a3a3a3</code>.”</strong></p> </li> <li> <p><strong>“Build the now-playing tile state — same as album tile, but with a pink glow shadow <code>0 0 24px rgba(253, 66, 156, 0.35)</code> and an optional 1px pink hairline ring. The glow pulses subtly between 35% and 50% opacity over 2s, paused under prefers-reduced-motion.”</strong></p> </li> <li> <p><strong>“Compose a Suno nav — 64px header, transparent background with 12px backdrop-blur on scroll, Suno wordmark hard-left in cream Neue Montreal 500. Link list Neue Montreal 500 / 14px cream with <code>#fd429c</code> hover. Right-side: ghost ‘Sign in’ + primary pink ‘Try Suno’ pill button.”</strong></p> </li> <li> <p><strong>“Render a Suno composer pill — <code>#1c1c1f</code> background, <code>1px rgba(255, 255, 255, 0.18)</code> border, 9999 radius, <code>14px 20px 14px 24px</code> padding, 16px placeholder ‘Describe a song…’ in <code>#a3a3a3</code>, Neue Montreal 400. 40px pink <code>#fd429c</code> circle hard-right with white note glyph. Focus expands ring to 3px at 30% pink. Sticky to viewport bottom on home.”</strong></p> </li> <li> <p><strong>“Create a Suno feature panel — full-bleed <code>#101012</code> canvas, 96px vertical padding, 48px Neue Montreal 500 headline in cream left-aligned with 12-col grid, 16px body in <code>#c2c2c1</code> weight <strong>300</strong> constrained to a 720px column. Single ghost-outline pill ‘Listen to examples’ CTA below.”</strong></p> </li> </ol> <h3 id="iteration-guide">Iteration Guide</h3> <ol> <li><strong>Start with <code>#101012</code>, not <code>#000000</code>.</strong> If the bg is absolute black, you’re in Krea’s register; Suno warms the canvas slightly.</li> <li><strong>Switch body to weight 300.</strong> If body is 400, the contrast between headline and body collapses. Light body is the brand.</li> <li><strong>Bump card radius to 20px.</strong> If cards are at 8–12px, you’re in Linear/Vercel territory; Suno softens to 20.</li> <li><strong>Add the pink — but only once in view.</strong> Pink <code>#fd429c</code> is the cue light: primary CTA, now-playing tile, link hover. Never as a fill.</li> <li><strong>Use Neue Montreal at 500, not 700.</strong> Bold display collapses the song-title cadence into Stripe-marketing register.</li> <li><strong>Use cream <code>#f7f4ef</code>, not pure white.</strong> The warm tint is the vinyl-sleeve signal.</li> <li><strong>Position the composer at the bottom.</strong> Sticky-to-viewport-bottom mirrors the in-product studio metaphor.</li> <li><strong>Calm the verbs.</strong> Replace “Sign up free!” with “Try Suno”; replace “Get started today!” with “Make a song.”</li> </ol> </div></section></div><section id="install" class="mt-24 rounded-[16px] border border-border-brand bg-brand/5 p-6 md:p-10" data-astro-cid-hsdqhonn><span class="label mb-4 block" data-astro-cid-hsdqhonn>Ship with this</span><h2 class="text-[28px] md:text-[36px] font-medium tracking-[-0.025em] leading-[1.1] max-w-[640px]" data-astro-cid-hsdqhonn>Drop <span class="font-mono" data-astro-cid-hsdqhonn>suno</span> into your project, then ship the actual sections in <em data-astro-cid-hsdqhonn>an afternoon</em>.</h2><div class="mt-8 grid sm:grid-cols-2 gap-3" data-astro-cid-hsdqhonn><div class="rounded-[10px] border border-border bg-bg-card p-4 font-mono text-[13px]" data-astro-cid-hsdqhonn><div class="text-[10px] uppercase tracking-[0.15em] text-text-faint mb-2" data-astro-cid-hsdqhonn>1 · install design</div><code class="text-text" data-astro-cid-hsdqhonn>npx @webdesignhot/design-md add suno</code></div><div class="rounded-[10px] border border-border bg-bg-card p-4 font-mono text-[13px]" data-astro-cid-hsdqhonn><div class="text-[10px] uppercase tracking-[0.15em] text-text-faint mb-2" data-astro-cid-hsdqhonn>2 · ship landing page</div><code class="text-text" data-astro-cid-hsdqhonn>npx agentkit init --design suno</code></div></div><a href="/products/agentkit" class="mt-6 inline-flex items-center gap-2 text-[13px] text-text-dim hover:text-brand transition-colors" data-astro-cid-hsdqhonn>How AgentKit reads DESIGN.md <span aria-hidden data-astro-cid-hsdqhonn>→</span></a></section><section id="related" class="mt-24" data-astro-cid-hsdqhonn><span class="label mb-6 block" data-astro-cid-hsdqhonn>You might also like</span><div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-5" data-astro-cid-hsdqhonn><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/openai/" class="flex flex-col flex-1 min-h-0" aria-label="View OpenAI DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #ffffff; color: #000000; font-family: "OpenAI Sans", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #0000001A; color: #000000; opacity: 0.75; font-family: "OpenAI Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">light</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #0000001A; color: #000000; opacity: 0.75; font-family: "OpenAI Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">minimal</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #000000; border-radius: 12px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "OpenAI Sans", "SF Pro Display", system-ui, -apple-system, sans-serif;">OpenAI</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #000000; opacity: 0.72; font-family: "OpenAI Sans", "SF Pro Text", system-ui, -apple-system, sans-serif;">Pure white canvas, OpenAI Sans set in calm 500-weight, and a single black pill for the o…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #000000; border-color: #00000033; font-family: "OpenAI Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #000000; color: #ffffff; font-family: "OpenAI Sans Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">OpenAI</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="openai">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #ffffff;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #000000;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #10a37f;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="openai" aria-label="Favorite openai" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/anthropic/" class="flex flex-col flex-1 min-h-0" aria-label="View Anthropic DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #faf9f5; color: #141413; font-family: "Anthropic Serif", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #1414131A; color: #141413; opacity: 0.75; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">light</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #1414131A; color: #141413; opacity: 0.75; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">editorial</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #cc785c; border-radius: 12px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "Anthropic Sans", "SF Pro Display", system-ui, -apple-system, sans-serif;">Anthropic</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #141413; opacity: 0.72; font-family: "Anthropic Serif", "SF Pro Text", system-ui, -apple-system, sans-serif;">Editorial broadsheet for AI safety — cream canvas, Anthropic Serif body, terracotta clay…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #141413; border-color: #14141333; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #cc785c; color: #faf9f5; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">Anthropic</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="anthropic">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #faf9f5;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #cc785c;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #141413;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="anthropic" aria-label="Favorite anthropic" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/claude-ai/" class="flex flex-col flex-1 min-h-0" aria-label="View Claude.ai DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #f8f8f6; color: #121212; font-family: "Anthropic Sans", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #1212121A; color: #121212; opacity: 0.75; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">light</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #1212121A; color: #121212; opacity: 0.75; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">editorial</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #cd6f47; border-radius: 12px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "Anthropic Serif", "SF Pro Display", system-ui, -apple-system, sans-serif;">Claude.ai</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #121212; opacity: 0.72; font-family: "Anthropic Sans", "SF Pro Text", system-ui, -apple-system, sans-serif;">Cream paper canvas, Anthropic Sans for body and Anthropic Serif for the headline — an AI…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #121212; border-color: #12121233; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #cd6f47; color: #f8f8f6; font-family: "Anthropic Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">Claude.ai</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="claude-ai">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #f8f8f6;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #cd6f47;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #121212;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="claude-ai" aria-label="Favorite claude-ai" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/brilliant-org/" class="flex flex-col flex-1 min-h-0" aria-label="View Brilliant DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #0c0e16; color: #ffffff; font-family: "Brilliant Sans", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #ffffff1A; color: #ffffff; opacity: 0.75; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">dark</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #ffffff1A; color: #ffffff; opacity: 0.75; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">structured</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #fc6e51; border-radius: 12px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "Brilliant Sans", "SF Pro Display", system-ui, -apple-system, sans-serif;">Brilliant</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #ffffff; opacity: 0.72; font-family: "Brilliant Sans", "SF Pro Text", system-ui, -apple-system, sans-serif;">STEM education with playful diagram-energy — warm coral CTA on near-black, custom Brilli…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #ffffff; border-color: #ffffff33; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #fc6e51; color: #0c0e16; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 8px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">Brilliant</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="brilliant-org">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #0c0e16;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #fc6e51;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #ffffff;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="brilliant-org" aria-label="Favorite brilliant-org" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/bun/" class="flex flex-col flex-1 min-h-0" aria-label="View Bun DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #fbf0df; color: #15151b; font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #15151b1A; color: #15151b; opacity: 0.75; font-family: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 6px;">light</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #15151b1A; color: #15151b; opacity: 0.75; font-family: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 6px;">playful</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #f472b6; border-radius: 12px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "CoFo Sans", "SF Pro Display", system-ui, -apple-system, sans-serif;">Bun</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #15151b; opacity: 0.72; font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;">Cream canvas with chunky pink accents and the wide-eyed mascot — a JS runtime dressed as…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #15151b; border-color: #15151b33; font-family: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 6px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #f472b6; color: #fbf0df; font-family: "Berkeley Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 6px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">Bun</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="bun">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #fbf0df;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #f472b6;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #15151b;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="bun" aria-label="Favorite bun" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/classpass/" class="flex flex-col flex-1 min-h-0" aria-label="View ClassPass DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #fffaf6; color: #1a1a1a; font-family: "GT America", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #1a1a1a1A; color: #1a1a1a; opacity: 0.75; font-family: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">light</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #1a1a1a1A; color: #1a1a1a; opacity: 0.75; font-family: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">playful</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #ec5e8a; border-radius: 16px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "GT America", "SF Pro Display", system-ui, -apple-system, sans-serif;">ClassPass</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #1a1a1a; opacity: 0.72; font-family: "GT America", "SF Pro Text", system-ui, -apple-system, sans-serif;">Wellness-marketplace energy — coral-pink CTA on warm white, GT America sans, photographe…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #1a1a1a; border-color: #1a1a1a33; font-family: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #ec5e8a; color: #fffaf6; font-family: "SFMono-Regular", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">ClassPass</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="classpass">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #fffaf6;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #ec5e8a;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #1a1a1a;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="classpass" aria-label="Favorite classpass" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/deel/" class="flex flex-col flex-1 min-h-0" aria-label="View Deel DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #0c0c0c; color: #f4f1ec; font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #f4f1ec1A; color: #f4f1ec; opacity: 0.75; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 10px;">dark</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #f4f1ec1A; color: #f4f1ec; opacity: 0.75; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 10px;">sans</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #ff4d2e; border-radius: 14px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "Inter Display", "SF Pro Display", system-ui, -apple-system, sans-serif;">Deel</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #f4f1ec; opacity: 0.72; font-family: "Inter", "SF Pro Text", system-ui, -apple-system, sans-serif;">A warm dark canvas with electric coral and orange accents — global payroll dressed as a…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #f4f1ec; border-color: #f4f1ec33; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 10px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #ff4d2e; color: #0c0c0c; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 10px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">Deel</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="deel">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #0c0c0c;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #ff4d2e;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #f4f1ec;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="deel" aria-label="Favorite deel" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article><article class="group relative overflow-hidden rounded-[14px] border transition-colors flex flex-col h-full border-border hover:border-border-strong bg-bg-card hover:bg-bg-card-hover"><a href="/design.md/discord/" class="flex flex-col flex-1 min-h-0" aria-label="View Discord DESIGN.md"><div class="relative flex flex-col p-5 flex-1 min-h-0" style="background: #5865f2; color: #ffffff; font-family: "gg sans", "SF Pro Text", system-ui, -apple-system, sans-serif;"><div class="flex flex-wrap gap-1.5 mb-3"><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #ffffff1A; color: #ffffff; opacity: 0.75; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">bright</span><span class="text-[10px] uppercase tracking-[0.12em] px-1.5 py-0.5" style="background: #ffffff1A; color: #ffffff; opacity: 0.75; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">sans</span></div><div class="flex items-center gap-2.5"><span class="block w-5 h-5 shrink-0" style="background: #5865f2; border-radius: 16px;"></span><span class="text-[15px] font-medium tracking-[-0.01em] truncate" style="font-family: "ABC Ginto Nord Discord", "SF Pro Display", system-ui, -apple-system, sans-serif;">Discord</span></div><p class="mt-2 text-[12.5px] leading-[1.45] line-clamp-3" style="color: #ffffff; opacity: 0.72; font-family: "gg sans", "SF Pro Text", system-ui, -apple-system, sans-serif;">Indigo-ground hangout — gg sans body, ABC Ginto Nord display, 12-16px tile radii, white…</p><div class="mt-auto pt-3 flex gap-2"><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5 border" style="color: #ffffff; border-color: #ffffff33; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">Docs</span><span class="text-[11px] uppercase tracking-[0.12em] px-2.5 py-1.5" style="background: #5865f2; color: #5865f2; font-family: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; border-radius: 12px;">Install</span></div></div><div class="flex items-center gap-3 px-4 py-3 border-t border-border bg-bg-card group-hover:bg-bg-card-hover transition-colors"><div class="flex-1 min-w-0"><div class="text-[15px] font-medium text-text tracking-[-0.01em] truncate">Discord</div><div class="text-[11px] font-mono text-text-faint mt-0.5 truncate">webdesignhot<span class="ml-2 text-text-faint hidden" data-install-badge data-slug="discord">· <span data-install-count>0</span> installs</span></div></div><div class="flex gap-1 shrink-0"><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #5865f2;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #ffffff;" aria-hidden></span><span class="w-3 h-3 rounded-[3px] border border-black/20" style="background: #23272a;" aria-hidden></span></div></div></a><div class="absolute top-3 right-3 z-10"><button type="button" data-fav-button data-slug="discord" aria-label="Favorite discord" aria-pressed="false" class="w-9 h-9 inline-flex items-center justify-center rounded-full bg-bg-card/85 backdrop-blur border border-border hover:border-border-strong text-text-dim hover:text-brand transition-colors"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg></button></div></article></div></section><aside class="mt-24 pt-8 border-t border-border-soft" data-astro-cid-hsdqhonn><p class="text-[12px] font-mono text-text-faint leading-[1.7] max-w-[680px]" data-astro-cid-hsdqhonn><span class="uppercase tracking-[0.15em] text-text-soft" data-astro-cid-hsdqhonn>Trademark notice</span><br data-astro-cid-hsdqhonn><span class="text-text-soft" data-astro-cid-hsdqhonn>Suno</span> and related marks are trademarks of their respective owners. This DESIGN.md is an editorial extraction of publicly observable design tokens from <a href="https://suno.com" target="_blank" rel="noopener" aria-label="Visit suno.com (opens in new tab)" class="text-text-soft hover:text-text underline-offset-2 hover:underline inline-flex items-baseline gap-1" data-astro-cid-hsdqhonn>suno.com<span aria-hidden class="text-text-faint text-[0.85em]" data-astro-cid-hsdqhonn>↗</span></a>, not affiliated with or endorsed by the trademark holder. See our <a href="/design.md/trademarks" class="text-text-soft hover:text-text underline-offset-2 hover:underline" data-astro-cid-hsdqhonn>trademark policy</a> or contact <a href="mailto:trademarks@webdesignhot.com" class="text-text-soft hover:text-text underline-offset-2 hover:underline" data-astro-cid-hsdqhonn>trademarks@webdesignhot.com</a> for takedown / correction requests.</p></aside></article><aside class="token-tweaker" data-tweaker aria-label="Live token tweaker" data-astro-cid-zywdkkkw><button type="button" class="tweaker-toggle" data-tweaker-toggle aria-expanded="false" data-astro-cid-zywdkkkw><span class="tweaker-toggle-dot" aria-hidden data-astro-cid-zywdkkkw></span><span class="tweaker-toggle-text" data-astro-cid-zywdkkkw>Tweak</span></button><div class="tweaker-panel" data-tweaker-panel hidden data-astro-cid-zywdkkkw><header class="tweaker-head" data-astro-cid-zywdkkkw><span class="text-[11px] font-mono uppercase tracking-[0.15em] text-text-faint" data-astro-cid-zywdkkkw>Live tweaker</span><div class="flex items-center gap-2" data-astro-cid-zywdkkkw><button type="button" class="tweaker-reset" data-tweaker-reset data-astro-cid-zywdkkkw>reset</button><button type="button" class="tweaker-close" data-tweaker-close aria-label="Close" data-astro-cid-zywdkkkw>×</button></div></header><p class="tweaker-hint" data-astro-cid-zywdkkkw>Drag a color, every preview re-renders. Permalink updates as you tweak.</p><div class="tweaker-rows" data-astro-cid-zywdkkkw><label class="tweaker-row" data-astro-cid-zywdkkkw><input type="color" data-tweaker-input data-role="bg" data-default="#101012" value="#101012" aria-label="Background color" data-astro-cid-zywdkkkw><span class="tweaker-label" data-astro-cid-zywdkkkw>Background</span><code class="tweaker-value" data-tweaker-value="bg" data-astro-cid-zywdkkkw>#101012</code></label><label class="tweaker-row" data-astro-cid-zywdkkkw><input type="color" data-tweaker-input data-role="surface" data-default="#1c1c1f" value="#1c1c1f" aria-label="Surface color" data-astro-cid-zywdkkkw><span class="tweaker-label" data-astro-cid-zywdkkkw>Surface</span><code class="tweaker-value" data-tweaker-value="surface" data-astro-cid-zywdkkkw>#1c1c1f</code></label><label class="tweaker-row" data-astro-cid-zywdkkkw><input type="color" data-tweaker-input data-role="text" data-default="#f7f4ef" value="#f7f4ef" aria-label="Text color" data-astro-cid-zywdkkkw><span class="tweaker-label" data-astro-cid-zywdkkkw>Text</span><code class="tweaker-value" data-tweaker-value="text" data-astro-cid-zywdkkkw>#f7f4ef</code></label><label class="tweaker-row" data-astro-cid-zywdkkkw><input type="color" data-tweaker-input data-role="textDim" data-default="#f7f4ef" value="#f7f4ef" aria-label="Text dim color" data-astro-cid-zywdkkkw><span class="tweaker-label" data-astro-cid-zywdkkkw>Text dim</span><code class="tweaker-value" data-tweaker-value="textDim" data-astro-cid-zywdkkkw>#f7f4ef</code></label><label class="tweaker-row" data-astro-cid-zywdkkkw><input type="color" data-tweaker-input data-role="border" data-default="#ffffff" value="#ffffff" aria-label="Border color" data-astro-cid-zywdkkkw><span class="tweaker-label" data-astro-cid-zywdkkkw>Border</span><code class="tweaker-value" data-tweaker-value="border" data-astro-cid-zywdkkkw>#ffffff</code></label><label class="tweaker-row" data-astro-cid-zywdkkkw><input type="color" data-tweaker-input data-role="brand" data-default="#fd429c" value="#fd429c" aria-label="Brand color" data-astro-cid-zywdkkkw><span class="tweaker-label" data-astro-cid-zywdkkkw>Brand</span><code class="tweaker-value" data-tweaker-value="brand" data-astro-cid-zywdkkkw>#fd429c</code></label><label class="tweaker-row" data-astro-cid-zywdkkkw><input type="color" data-tweaker-input data-role="onBrand" data-default="#ffffff" value="#ffffff" aria-label="On brand color" data-astro-cid-zywdkkkw><span class="tweaker-label" data-astro-cid-zywdkkkw>On brand</span><code class="tweaker-value" data-tweaker-value="onBrand" data-astro-cid-zywdkkkw>#ffffff</code></label></div></div></aside><script type="module">function e(){let e=document.querySelector(`[data-tweaker]`);if(!e)return;let t=e.querySelector(`[data-tweaker-toggle]`),n=e.querySelector(`[data-tweaker-close]`),r=e.querySelector(`[data-tweaker-reset]`),i=e.querySelector(`[data-tweaker-panel]`),a=Array.from(e.querySelectorAll(`[data-tweaker-input]`)),o=Array.from(e.querySelectorAll(`[data-tweaker-value]`)).reduce((e,t)=>{let n=t.dataset.tweakerValue;return e[n]=t,e},{});if(!t||!i)return;function s(e){t.setAttribute(`aria-expanded`,e?`true`:`false`),e?i.removeAttribute(`hidden`):i.setAttribute(`hidden`,``)}t.addEventListener(`click`,()=>s(t.getAttribute(`aria-expanded`)!==`true`)),n?.addEventListener(`click`,()=>s(!1));function c(e){document.querySelectorAll(`iframe.design-tryon-iframe`).forEach(t=>{try{t.contentWindow?.postMessage({type:`design-md/theme`,roles:e},`*`)}catch{}})}function l(){let e={};return a.forEach(t=>{let n=t.dataset.role;e[n]=t.value}),e}function u(){let e=[];a.forEach(t=>{let n=t.dataset.role;t.value!==t.dataset.default&&e.push(`${n}:${t.value.replace(`#`,``)}`)});let t=e.length?`#tweak=${e.join(`,`)}`:``;location.hash!==t&&history.replaceState(null,``,location.pathname+location.search+t)}function d(){let e=l();Object.entries(e).forEach(([e,t])=>{o[e]&&(o[e].textContent=t)}),c(e),u()}a.forEach(e=>e.addEventListener(`input`,d)),r?.addEventListener(`click`,()=>{a.forEach(e=>{e.value=e.dataset.default}),d()});function f(){let e=location.hash.match(/^#tweak=(.+)$/);if(!e)return;let t=Object.fromEntries(e[1].split(`,`).map(e=>{let[t,n]=e.split(`:`);return[t,n?`#${n}`:``]})),n=!1;a.forEach(e=>{let r=e.dataset.role;t[r]&&(e.value=t[r],n=!0)}),n&&requestAnimationFrame(d)}f()}e();</script><div id="cmdk-overlay" class="hidden fixed inset-0 z-[100] bg-bg/70 backdrop-blur-sm items-start justify-center pt-[12vh] px-4" role="dialog" aria-label="Command palette" aria-modal="true"><div class="w-full max-w-[640px] rounded-[14px] border border-border-strong bg-bg-card shadow-2xl overflow-hidden"><div class="flex items-center px-4 border-b border-border"><span class="text-[12px] font-mono text-text-faint mr-3">⌘K</span><input id="cmdk-input" type="text" placeholder="Search designs, run a command…" class="flex-1 bg-transparent border-0 outline-none py-4 text-[15px] text-text font-display placeholder:text-text-faint" autocomplete="off"><kbd class="text-[11px] font-mono text-text-faint border border-border rounded px-2 py-1">esc</kbd></div><ul id="cmdk-list" role="listbox" class="max-h-[55vh] overflow-y-auto py-2"></ul><div class="flex items-center justify-between px-4 py-3 border-t border-border text-[11px] font-mono text-text-faint"><span>Type <span class="text-text-dim">/</span> for commands · <span class="text-text-dim">↑↓</span> nav · <span class="text-text-dim">⏎</span> open</span><span>490 designs</span></div></div></div><script>window.__cmdk_data = [{"id":"agentkit","name":"AgentKit","tags":"dark light bright cool","swatch":"#c6f432"},{"id":"apple","name":"Apple","tags":"light minimal sans spacious","swatch":"#0071e3"},{"id":"linear","name":"Linear","tags":"dark minimal sans mono","swatch":"#5e6ad2"},{"id":"notion","name":"Notion","tags":"light editorial sans serif","swatch":"#0075de"},{"id":"stripe","name":"Stripe","tags":"light editorial sans cool","swatch":"#533afd"},{"id":"tailwindcss","name":"Tailwind CSS","tags":"light sans mono structured","swatch":"#06b6d4"},{"id":"vercel","name":"Vercel","tags":"light minimal sans mono","swatch":"#171717"},{"id":"webdesignhot","name":"webdesignhot","tags":"dark editorial mono serif","swatch":"#c6f432"},{"id":"aave","name":"Aave","tags":"light friendly sans crypto","swatch":"#978fff"},{"id":"accenture","name":"Accenture","tags":"dark structured sans enterprise","swatch":"#a600ff"},{"id":"accor","name":"Accor","tags":"hospitality travel hotels booking","swatch":"#1e1853"},{"id":"ada-health","name":"Ada Health","tags":"light sans health editorial","swatch":"#293754"},{"id":"adidas","name":"Adidas","tags":"dark fashion sportswear sans","swatch":"#000000"},{"id":"adobe","name":"Adobe","tags":"light structured sans dense","swatch":"#fa0f00"},{"id":"aesop","name":"Aesop","tags":"light minimal sans editorial","swatch":"#333333"},{"id":"affinity","name":"Affinity","tags":"design-tools graphics photo publishing","swatch":"#ffffff"},{"id":"affirm","name":"Affirm","tags":"dark structured sans fintech","swatch":"#4a4af4"},{"id":"airbnb","name":"Airbnb","tags":"light consumer marketplace sans","swatch":"#ff385c"},{"id":"airtable","name":"Airtable","tags":"light editorial sans warm","swatch":"#181d26"},{"id":"alibaba","name":"Alibaba","tags":"marketplace b2b dense orange","swatch":"#ff6a00"},{"id":"allbirds","name":"Allbirds","tags":"light minimal sans commerce","swatch":"#3a6b52"},{"id":"amazon","name":"Amazon","tags":"light marketplace dense sans","swatch":"#ff9900"},{"id":"aws","name":"Amazon Web Services","tags":"light dense sans structured","swatch":"#ff9900"},{"id":"amboss","name":"AMBOSS","tags":"light blue sans search","swatch":"#047a88"},{"id":"amex","name":"American Express","tags":"light structured sans fintech","swatch":"#006fcf"},{"id":"amplitude","name":"Amplitude","tags":"light sans structured data","swatch":"#1e61f0"},{"id":"anthropic","name":"Anthropic","tags":"light editorial serif sans","swatch":"#cc785c"},{"id":"anytype","name":"Anytype","tags":"dark sans minimal colorful","swatch":"#3cd9b3"},{"id":"apple-music","name":"Apple Music","tags":"dark music streaming sans","swatch":"#fa233b"},{"id":"apple-tv","name":"Apple TV+","tags":"dark minimal sans cinematic","swatch":"#ffffff"},{"id":"arbitrum","name":"Arbitrum","tags":"light structured sans cool","swatch":"#28a0f0"},{"id":"arc","name":"Arc","tags":"light warm playful sans","swatch":"#2404AA"},{"id":"are-na","name":"Are.na","tags":"light minimal sans dense","swatch":"#000000"},{"id":"asana","name":"Asana","tags":"light sans approachable purple","swatch":"#796eff"},{"id":"astro","name":"Astro","tags":"dark structured sans spacious","swatch":"#ff5d01"},{"id":"asus","name":"ASUS","tags":"dark gaming hardware asia","swatch":"#cd0000"},{"id":"atlassian","name":"Atlassian","tags":"light structured sans enterprise","swatch":"#0a0a0a"},{"id":"audi","name":"Audi","tags":"dark premium sans monochrome","swatch":"#ffffff"},{"id":"auth0","name":"Auth0","tags":"dark identity auth sans","swatch":"#7fc8ff"},{"id":"away","name":"Away","tags":"light editorial sans commerce","swatch":"#a9c4d4"},{"id":"axa","name":"AXA","tags":"light corporate sans blue","swatch":"#00008f"},{"id":"axiom","name":"Axiom","tags":"dark structured sans mono","swatch":"#1aaaff"},{"id":"axios","name":"Axios","tags":"editorial serif sans structured","swatch":"#0044a5"},{"id":"babbel","name":"Babbel","tags":"light orange sans learning","swatch":"#fe4d01"},{"id":"bain","name":"Bain & Company","tags":"light editorial red sans","swatch":"#cc0000"},{"id":"bandai-namco","name":"Bandai Namco Entertainment","tags":"gaming publisher anime franchises","swatch":"#e60012"},{"id":"bandcamp","name":"Bandcamp","tags":"light structured sans warm","swatch":"#629aa0"},{"id":"base-org","name":"Base","tags":"light sans crypto web3","swatch":"#0000ff"},{"id":"base44","name":"Base44","tags":"light structured sans ai","swatch":"#ff773c"},{"id":"baseten","name":"Baseten","tags":"light purple sans mono","swatch":"#6c5ce7"},{"id":"bazel","name":"Bazel","tags":"oss build-system monorepo cache","swatch":"#0c713a"},{"id":"bbc","name":"BBC News","tags":"editorial sans serif news","swatch":"#bb1919"},{"id":"bear-app","name":"Bear","tags":"light editorial sans soft","swatch":"#dd4c4f"},{"id":"beehiiv","name":"beehiiv","tags":"light dark sans structured","swatch":"#000000"},{"id":"best-buy","name":"Best Buy","tags":"light retail electronics sans","swatch":"#fff000"},{"id":"binance","name":"Binance","tags":"cool structured dense dark","swatch":"#fcd535"},{"id":"biome","name":"Biome","tags":"light minimal sans developer","swatch":"#0065da"},{"id":"black-forest-labs","name":"Black Forest Labs","tags":"light minimal sans monochrome","swatch":"#07130e"},{"id":"blizzard","name":"Blizzard Entertainment","tags":"gaming dark cinematic blue","swatch":"#38a8ff"},{"id":"bloomberg","name":"Bloomberg","tags":"editorial sans dense financial","swatch":"#fa7900"},{"id":"bluesky","name":"Bluesky","tags":"light dark social sans","swatch":"#0085ff"},{"id":"blur-io","name":"Blur","tags":"dark brutalist dense trader","swatch":"#ff8700"},{"id":"bmw","name":"BMW","tags":"light corporate sans blue","swatch":"#1c69d4"},{"id":"bmw-m","name":"BMW M","tags":"dark motorsport sans bold","swatch":"#1c69d4"},{"id":"bolt-new","name":"Bolt","tags":"dark bold sans ai","swatch":"#1488fc"},{"id":"booking","name":"Booking.com","tags":"light marketplace travel sans","swatch":"#003580"},{"id":"bose","name":"Bose","tags":"dark premium sans monochrome","swatch":"#ffffff"},{"id":"bcg","name":"Boston Consulting Group","tags":"light editorial serif green","swatch":"#96f878"},{"id":"brex","name":"Brex","tags":"light sans structured cool","swatch":"#a855ff"},{"id":"brilliant-org","name":"Brilliant","tags":"dark structured sans playful","swatch":"#fc6e51"},{"id":"bugatti","name":"Bugatti","tags":"luxury dark sans serif","swatch":"#ffffff"},{"id":"bun","name":"Bun","tags":"light playful retro sans","swatch":"#f472b6"},{"id":"buttondown","name":"Buttondown","tags":"light minimal sans creator","swatch":"#0069ff"},{"id":"cal-com","name":"Cal.com","tags":"light minimal sans soft","swatch":"#111111"},{"id":"calm","name":"Calm","tags":"dark wellness sans atmospheric","swatch":"#0066ff"},{"id":"canva","name":"Canva","tags":"design-tools creative templates collaboration","swatch":"#8b3dff"},{"id":"capacities","name":"Capacities","tags":"light editorial sans serif","swatch":"#1a1a1f"},{"id":"capital-one","name":"Capital One","tags":"light structured sans fintech","swatch":"#0276b1"},{"id":"captions","name":"Captions","tags":"light sans bold playful","swatch":"#6c4df7"},{"id":"caraway","name":"Caraway","tags":"light warm soft serif","swatch":"#1f3438"},{"id":"cartesia","name":"Cartesia","tags":"light minimal sans mono","swatch":"#0a0a0a"},{"id":"cash-app","name":"Cash App","tags":"dark vibrant sans mono","swatch":"#0e0e0e"},{"id":"casper","name":"Casper","tags":"light friendly sans commerce","swatch":"#012169"},{"id":"character-ai","name":"Character.AI","tags":"light sans soft structured","swatch":"#202024"},{"id":"chase","name":"Chase","tags":"light structured sans fintech","swatch":"#0060f0"},{"id":"chess-com","name":"Chess.com","tags":"gaming chess community competitive","swatch":"#ffffff"},{"id":"chevrolet","name":"Chevrolet","tags":"light american classic sans","swatch":"#cd9834"},{"id":"chime","name":"Chime","tags":"dark green banking app","swatch":"#00d27b"},{"id":"circleci","name":"CircleCI","tags":"light structured sans developer","swatch":"#00db75"},{"id":"citizenm","name":"citizenM","tags":"bold sans travel photography","swatch":"#eb0033"},{"id":"classpass","name":"ClassPass","tags":"light playful sans warm","swatch":"#ec5e8a"},{"id":"claude-ai","name":"Claude.ai","tags":"light editorial sans serif","swatch":"#cd6f47"},{"id":"clerk-com","name":"Clerk","tags":"dark auth sans technical","swatch":"#6c47ff"},{"id":"cleveland-clinic","name":"Cleveland Clinic","tags":"healthcare hospital editorial trust","swatch":"#555555"},{"id":"clickhouse","name":"ClickHouse","tags":"dark yellow mono-accent sans","swatch":"#faff69"},{"id":"cloudflare","name":"Cloudflare","tags":"light sans bright structured","swatch":"#ff5e1f"},{"id":"cloudinary","name":"Cloudinary","tags":"light blue sans technical","swatch":"#3448c5"},{"id":"cmake","name":"CMake","tags":"oss build-system cpp cross-platform","swatch":"#3eae2b"},{"id":"coda","name":"Coda","tags":"light sans structured","swatch":"#0066ff"},{"id":"codecademy","name":"Codecademy","tags":"education developer courses interactive","swatch":"#ffffff"},{"id":"coderabbit","name":"CodeRabbit","tags":"dark structured sans developer","swatch":"#ff570a"},{"id":"codesandbox","name":"CodeSandbox","tags":"dark sans developer sandbox","swatch":"#eaff96"},{"id":"cognition","name":"Cognition","tags":"light sans serif technical","swatch":"#191919"},{"id":"cohere","name":"Cohere","tags":"light editorial sans restrained","swatch":"#003c33"},{"id":"coinbase","name":"Coinbase","tags":"light minimal dense clean","swatch":"#0052ff"},{"id":"composio","name":"Composio","tags":"dark blue mono-accent sans","swatch":"#0007cd"},{"id":"convex","name":"Convex","tags":"light sans developer warm","swatch":"#1a1a1a"},{"id":"corsair","name":"Corsair","tags":"dark gaming hardware peripherals","swatch":"#ffff00"},{"id":"costco","name":"Costco","tags":"light retail marketplace sans","swatch":"#005dab"},{"id":"coursera","name":"Coursera","tags":"light education sans trustworthy","swatch":"#0056d2"},{"id":"craft","name":"Craft","tags":"light serif sans premium","swatch":"#030302"},{"id":"curl","name":"curl","tags":"oss networking cli http","swatch":"#173b5b"},{"id":"cursor","name":"Cursor","tags":"light warm sans mono","swatch":"#f54e00"},{"id":"cvs","name":"CVS Health","tags":"light structured sans healthcare","swatch":"#cc0000"},{"id":"databricks","name":"Databricks","tags":"light structured sans enterprise","swatch":"#1b3139"},{"id":"datadog","name":"Datadog","tags":"light structured sans dense","swatch":"#632ca6"},{"id":"dbt","name":"dbt Labs","tags":"light sans structured data","swatch":"#fe6703"},{"id":"deel","name":"Deel","tags":"dark sans structured warm","swatch":"#ff4d2e"},{"id":"deepseek","name":"DeepSeek","tags":"light minimal sans structured","swatch":"#4d6bfe"},{"id":"deliveroo","name":"Deliveroo","tags":"light dense sans cool","swatch":"#00ccbc"},{"id":"dell","name":"Dell","tags":"light business hardware b2b","swatch":"#007db8"},{"id":"deloitte","name":"Deloitte","tags":"light structured sans enterprise","swatch":"#86bc25"},{"id":"delta-air","name":"Delta Air Lines","tags":"light structured sans cool","swatch":"#003366"},{"id":"deno","name":"Deno","tags":"light playful sans structured","swatch":"#000000"},{"id":"descript","name":"Descript","tags":"light editorial sans serif","swatch":"#651a39"},{"id":"devolver","name":"Devolver Digital","tags":"gaming indie publisher editorial","swatch":"#f04a3a"},{"id":"discord","name":"Discord","tags":"bright sans playful dense","swatch":"#ffffff"},{"id":"disney-plus","name":"Disney+","tags":"dark navy gradient sans","swatch":"#0089ec"},{"id":"docker","name":"Docker","tags":"oss containers devops developer-tools","swatch":"#2560ff"},{"id":"doordash","name":"DoorDash","tags":"light marketplace sans red-orange","swatch":"#ff3008"},{"id":"drizzle","name":"Drizzle ORM","tags":"light sans mono developer","swatch":"#c5f74f"},{"id":"duolingo","name":"Duolingo","tags":"bright playful rounded warm","swatch":"#58cc02"},{"id":"dydx","name":"dYdX","tags":"dark structured sans crypto","swatch":"#7774ff"},{"id":"dyson","name":"Dyson","tags":"light cool sans structured","swatch":"#333333"},{"id":"edx","name":"edX","tags":"education courses teal orange","swatch":"#d64000"},{"id":"elevenlabs","name":"ElevenLabs","tags":"dark light minimal sans","swatch":"#ffffff"},{"id":"emirates","name":"Emirates","tags":"light premium serif travel","swatch":"#d71921"},{"id":"epic-games","name":"Epic Games","tags":"dark bold structured gaming","swatch":"#0078f2"},{"id":"ethereum-org","name":"Ethereum","tags":"light educational community open-source","swatch":"#1c64f2"},{"id":"etsy","name":"Etsy","tags":"light marketplace sans warm","swatch":"#f1641e"},{"id":"everlane","name":"Everlane","tags":"light minimal sans commerce","swatch":"#121212"},{"id":"excalidraw","name":"Excalidraw","tags":"light playful sans soft","swatch":"#1b1b1f"},{"id":"expedia","name":"Expedia","tags":"light marketplace travel sans","swatch":"#00255d"},{"id":"fairphone","name":"Fairphone","tags":"light bold sans product","swatch":"#00433d"},{"id":"fal","name":"fal","tags":"light minimal mono ai","swatch":"#252527"},{"id":"fantastical","name":"Fantastical","tags":"light minimal sans bright","swatch":"#408fff"},{"id":"ferrari","name":"Ferrari","tags":"luxury dark sans photography","swatch":"#da291c"},{"id":"figma","name":"Figma","tags":"light bright sans mono","swatch":"#dceeb1"},{"id":"ft","name":"Financial Times","tags":"editorial serif dense structured","swatch":"#0d7680"},{"id":"fireworks-ai","name":"Fireworks AI","tags":"light orange purple sans","swatch":"#6720ff"},{"id":"fly-io","name":"Fly.io","tags":"editorial serif sans mono","swatch":"#7c3aed"},{"id":"ford","name":"Ford","tags":"light corporate sans blue","swatch":"#003478"},{"id":"fortnite","name":"Fortnite","tags":"dark playful sans bright","swatch":"#fcfd00"},{"id":"four-seasons","name":"Four Seasons Hotels and Resorts","tags":"hospitality luxury editorial travel","swatch":"#000000"},{"id":"framer","name":"Framer","tags":"light dark bright sans","swatch":"#000000"},{"id":"frontegg","name":"Frontegg","tags":"light auth b2b identity","swatch":"#1a1a2f"},{"id":"futurelearn","name":"FutureLearn","tags":"education courses university editorial","swatch":"#de00a5"},{"id":"gameloft","name":"Gameloft","tags":"gaming mobile publisher franchises","swatch":"#0095f3"},{"id":"gamma","name":"Gamma","tags":"light editorial sans ai","swatch":"#0540ad"},{"id":"garmin","name":"Garmin","tags":"light dark structured sans","swatch":"#000000"},{"id":"gemini-google","name":"Gemini (Google)","tags":"light minimal sans soft","swatch":"#1a73e8"},{"id":"ghost","name":"Ghost","tags":"light editorial sans serif","swatch":"#15171a"},{"id":"git","name":"Git","tags":"oss version-control developer-tools distributed","swatch":"#f05033"},{"id":"github","name":"GitHub","tags":"dark sans mono dense","swatch":"#5fed83"},{"id":"copilot","name":"GitHub Copilot","tags":"light minimal sans mono","swatch":"#000000"},{"id":"gitlab","name":"GitLab","tags":"light structured sans developer","swatch":"#fc6d26"},{"id":"gitpod","name":"Gitpod","tags":"light structured sans serif","swatch":"#0a0e19"},{"id":"glean","name":"Glean","tags":"light sans enterprise","swatch":"#343ced"},{"id":"glif","name":"Glif","tags":"light playful sans ai","swatch":"#2e9e4f"},{"id":"glossier","name":"Glossier","tags":"light white sans structured","swatch":"#000000"},{"id":"gog","name":"GOG","tags":"gaming marketplace dark-header purple","swatch":"#d9d9d9"},{"id":"stitch-google","name":"Google Stitch","tags":"dark minimal sans ai","swatch":"#8b83ff"},{"id":"grafana","name":"Grafana","tags":"dark structured sans mono","swatch":"#f46800"},{"id":"granola","name":"Granola","tags":"light editorial serif sans","swatch":"#5b6f00"},{"id":"graphite-dev","name":"Graphite","tags":"dark minimal sans developer","swatch":"#3b82f6"},{"id":"graza","name":"Graza","tags":"light bold playful food","swatch":"#d1e030"},{"id":"groq","name":"Groq","tags":"light bold sans ai","swatch":"#f43e01"},{"id":"grubhub","name":"Grubhub","tags":"light marketplace sans serif-display","swatch":"#f44129"},{"id":"gumroad","name":"Gumroad","tags":"light bold sans creator","swatch":"#ff90e8"},{"id":"gymshark","name":"Gymshark","tags":"light bold sans commerce","swatch":"#000000"},{"id":"harvey","name":"Harvey","tags":"dark serif minimal warm","swatch":"#fafaf9"},{"id":"hashicorp","name":"HashiCorp","tags":"dark multi-color enterprise sans","swatch":"#7b42bc"},{"id":"hashnode","name":"Hashnode","tags":"dark sans mono cool","swatch":"#2962ff"},{"id":"hbo-max","name":"HBO Max","tags":"dark bold sans premium","swatch":"#0072ff"},{"id":"headspace","name":"Headspace","tags":"light wellness sans playful","swatch":"#ffac1d"},{"id":"headway","name":"Headway","tags":"light soft sans healthcare","swatch":"#0b663d"},{"id":"healthgrades","name":"Healthgrades","tags":"healthcare directory providers search","swatch":"#007c83"},{"id":"height","name":"Height","tags":"light pastel sans calm","swatch":"#7551dc"},{"id":"heroui","name":"HeroUI","tags":"light components sans open-source","swatch":"#006fee"},{"id":"hey-com","name":"HEY","tags":"light bold sans email","swatch":"#5522fa"},{"id":"heygen","name":"HeyGen","tags":"light sans bright","swatch":"#00c3ff"},{"id":"hilton","name":"Hilton","tags":"light structured sans cool","swatch":"#005091"},{"id":"homebrew","name":"Homebrew","tags":"oss package-manager macos linux","swatch":"#ffd79a"},{"id":"honda","name":"Honda","tags":"light sans photography editorial","swatch":"#cc0000"},{"id":"hp","name":"HP","tags":"light technology hardware mainstream","swatch":"#0096d6"},{"id":"hubspot","name":"HubSpot","tags":"light warm sans saas","swatch":"#fcfcfa"},{"id":"huggingface","name":"Hugging Face","tags":"dark sans dense playful","swatch":"#ffd21e"},{"id":"hulu","name":"Hulu","tags":"dark neon sans dense","swatch":"#1ce783"},{"id":"hume","name":"Hume AI","tags":"light warm sans ai","swatch":"#222222"},{"id":"hyatt","name":"Hyatt","tags":"light premium sans travel","swatch":"#1a1a1a"},{"id":"hyperliquid","name":"Hyperliquid","tags":"dark minimal mono crypto","swatch":"#97fce4"},{"id":"ibm","name":"IBM","tags":"enterprise light sans square","swatch":"#0f62fe"},{"id":"ideogram","name":"Ideogram","tags":"light sans spacious minimal","swatch":"#8864e4"},{"id":"ihg-hotels","name":"IHG Hotels & Resorts","tags":"hospitality travel booking hotels","swatch":"#1f4456"},{"id":"ikea","name":"IKEA","tags":"light structured sans commerce","swatch":"#ffdb00"},{"id":"inngest","name":"Inngest","tags":"dark sans developer infra","swatch":"#cbb26a"},{"id":"instacart","name":"Instacart","tags":"light sans friendly marketplace","swatch":"#0aad0a"},{"id":"intercom","name":"Intercom","tags":"light cream sans saas","swatch":"#000ce1"},{"id":"itch-io","name":"itch.io","tags":"gaming indie marketplace community","swatch":"#222222"},{"id":"jenkins","name":"Jenkins","tags":"oss ci-cd automation plugins","swatch":"#0d6efd"},{"id":"jetblue","name":"JetBlue","tags":"light playful sans cool","swatch":"#0033a0"},{"id":"jitter","name":"Jitter","tags":"light playful sans motion","swatch":"#b593ff"},{"id":"jupiter","name":"Jupiter","tags":"dark playful sans crypto","swatch":"#c7f284"},{"id":"kagi","name":"Kagi","tags":"light editorial sans serif","swatch":"#ffb87a"},{"id":"kayak","name":"KAYAK","tags":"light marketplace travel sans","swatch":"#ff690f"},{"id":"khan-academy","name":"Khan Academy","tags":"light education sans friendly","swatch":"#14bf96"},{"id":"kinde","name":"Kinde","tags":"light auth billing sans","swatch":"#0f0f0f"},{"id":"kit-com","name":"Kit","tags":"light editorial sans spacious","swatch":"#1e1e1e"},{"id":"klarna","name":"Klarna","tags":"light playful sans fintech","swatch":"#ffa8cd"},{"id":"kraken","name":"Kraken","tags":"light structured dense cool","swatch":"#7132f5"},{"id":"krea","name":"Krea","tags":"dark sans spacious minimal","swatch":"#ffffff"},{"id":"kubernetes","name":"Kubernetes","tags":"oss cloud-native orchestration containers","swatch":"#326ce5"},{"id":"lambda","name":"Lambda","tags":"dark sans mono technical","swatch":"#6236f4"},{"id":"lamborghini","name":"Lamborghini","tags":"luxury dark sans photography","swatch":"#ffc000"},{"id":"langchain","name":"LangChain","tags":"dark navy sans mono","swatch":"#1e90ff"},{"id":"ledger","name":"Ledger","tags":"light minimal clean crypto","swatch":"#ff5300"},{"id":"lego","name":"Lego","tags":"light playful sans bright","swatch":"#ffd500"},{"id":"lemonsqueezy","name":"Lemon Squeezy","tags":"light dark playful sans","swatch":"#ffc233"},{"id":"lemonade","name":"Lemonade","tags":"light pink serif illustration","swatch":"#ff0083"},{"id":"leonardo-ai","name":"Leonardo.Ai","tags":"dark bold sans ai","swatch":"#ffffff"},{"id":"liquid-death","name":"Liquid Death","tags":"dark bold brutalist heavy-metal","swatch":"#ffffff"},{"id":"livekit","name":"LiveKit","tags":"dark sans developer infra","swatch":"#1fd5f9"},{"id":"llamaindex","name":"LlamaIndex","tags":"light blue sans mono","swatch":"#1b9aff"},{"id":"llvm","name":"LLVM","tags":"oss compiler toolchain systems","swatch":"#2f7f91"},{"id":"logitech","name":"Logitech","tags":"light consumer-tech hardware peripherals","swatch":"#00b8fc"},{"id":"loom","name":"Loom","tags":"light sans friendly blue","swatch":"#1868db"},{"id":"lottiefiles","name":"LottieFiles","tags":"light sans playful","swatch":"#019d91"},{"id":"lovable-dev","name":"Lovable","tags":"light sans soft playful","swatch":"#ff66c4"},{"id":"lowes","name":"Lowe's","tags":"light retail marketplace sans","swatch":"#012169"},{"id":"lufthansa","name":"Lufthansa","tags":"light navy yellow structured","swatch":"#ffad00"},{"id":"lululemon","name":"lululemon","tags":"light warm sans structured","swatch":"#140f0f"},{"id":"luma","name":"Luma AI","tags":"dark minimal sans ai","swatch":"#000000"},{"id":"lush","name":"LUSH","tags":"retail ecommerce beauty colorful","swatch":"#111111"},{"id":"magic-dev","name":"Magic","tags":"light minimal sans research","swatch":"#0090ff"},{"id":"magiceden","name":"Magic Eden","tags":"light boutique marketplace nft","swatch":"#e42575"},{"id":"mailchimp","name":"Mailchimp","tags":"light warm serif sans","swatch":"#241c15"},{"id":"marriott","name":"Marriott","tags":"light structured serif sans","swatch":"#a4793f"},{"id":"mastercard","name":"Mastercard","tags":"light fintech payments editorial","swatch":"#141413"},{"id":"masterclass","name":"MasterClass","tags":"dark editorial premium cinema","swatch":"#ffffff"},{"id":"mayo-clinic","name":"Mayo Clinic","tags":"healthcare trust blue editorial","swatch":"#0057b8"},{"id":"mckinsey","name":"McKinsey & Company","tags":"editorial consulting serif dark","swatch":"#2251ff"},{"id":"medium","name":"Medium","tags":"light editorial serif sans","swatch":"#1a8917"},{"id":"mejuri","name":"Mejuri","tags":"light white minimal editorial","swatch":"#0a0a0a"},{"id":"mercedes-benz","name":"Mercedes-Benz","tags":"luxury dark sans photography","swatch":"#00adef"},{"id":"mercury","name":"Mercury","tags":"light editorial sans serif","swatch":"#5f6ad2"},{"id":"meta","name":"Meta","tags":"light corporate social sans","swatch":"#0467df"},{"id":"metamask","name":"MetaMask","tags":"light structured sans warm","swatch":"#f6851b"},{"id":"microsoft","name":"Microsoft","tags":"light structured sans dense","swatch":"#0067b8"},{"id":"midjourney","name":"Midjourney","tags":"dark editorial mono sans","swatch":"#2d0e36"},{"id":"mindstudio","name":"MindStudio","tags":"light dark-hero sans agents","swatch":"#0069ff"},{"id":"minecraft","name":"Minecraft","tags":"dark playful blocky green","swatch":"#3c8527"},{"id":"minimax","name":"MiniMax","tags":"light mono-then-vivid sans geometric","swatch":"#0a0a0a"},{"id":"mintlify","name":"Mintlify","tags":"light minimal sans spacious","swatch":"#0c8c5e"},{"id":"miro","name":"Miro","tags":"light playful sans warm","swatch":"#ffd02f"},{"id":"mistral","name":"Mistral","tags":"light brutalist sans bright","swatch":"#1f1f1f"},{"id":"modal","name":"Modal","tags":"dark mono bright dense","swatch":"#7fee64"},{"id":"monday-com","name":"Monday.com","tags":"light colorful poppins bold","swatch":"#ff3d57"},{"id":"mongodb","name":"MongoDB","tags":"light dual-mode sans green-cta","swatch":"#00ed64"},{"id":"monzo","name":"Monzo","tags":"light bold sans fintech","swatch":"#ff4f40"},{"id":"motion-app","name":"Motion","tags":"light ai calendar sans","swatch":"#16a34a"},{"id":"msi","name":"MSI","tags":"dark gaming hardware taiwan","swatch":"#ff0000"},{"id":"mux","name":"Mux","tags":"light sans mono developer","swatch":"#000000"},{"id":"myfitnesspal","name":"MyFitnessPal","tags":"light structured sans dense","swatch":"#0066ee"},{"id":"neon","name":"Neon","tags":"dark sans mono structured","swatch":"#34d59a"},{"id":"netflix","name":"Netflix","tags":"dark bold sans dense","swatch":"#e50914"},{"id":"netlify","name":"Netlify","tags":"light dark sans developer","swatch":"#32e6e2"},{"id":"nginx","name":"NGINX","tags":"oss web-server networking infrastructure","swatch":"#009639"},{"id":"nike","name":"Nike","tags":"light fashion sans photographic","swatch":"#111111"},{"id":"nintendo","name":"Nintendo","tags":"light playful rounded warm","swatch":"#e60012"},{"id":"nix","name":"Nix","tags":"oss package-manager reproducible declarative","swatch":"#5277c3"},{"id":"npm","name":"npm","tags":"oss package-manager javascript registry","swatch":"#cb3837"},{"id":"nubank","name":"Nubank","tags":"light dark bold sans","swatch":"#ffffff"},{"id":"nuxt","name":"Nuxt","tags":"dark sans structured cool","swatch":"#00dc82"},{"id":"nvidia","name":"NVIDIA","tags":"enterprise sans tech dense","swatch":"#76b900"},{"id":"oatly","name":"Oatly","tags":"retail food editorial playful","swatch":"#111111"},{"id":"obsidian","name":"Obsidian","tags":"dark structured sans notes","swatch":"#7c3aed"},{"id":"omnivore","name":"Omnivore","tags":"light dark sans minimal","swatch":"#1f2937"},{"id":"on-running","name":"On","tags":"light structured sans commerce","swatch":"#000000"},{"id":"onemedical","name":"One Medical","tags":"healthcare primary-care telehealth trust","swatch":"#004d49"},{"id":"onlook","name":"Onlook","tags":"dark minimal sans mono","swatch":"#ffffff"},{"id":"openai","name":"OpenAI","tags":"light minimal sans spacious","swatch":"#000000"},{"id":"openrouter","name":"OpenRouter","tags":"dark black mono sans","swatch":"#ffffff"},{"id":"opensea","name":"OpenSea","tags":"dark dense marketplace nft","swatch":"#2081e2"},{"id":"openssl","name":"OpenSSL","tags":"oss security cryptography infrastructure","swatch":"#6a1720"},{"id":"openstax","name":"OpenStax","tags":"light structured sans education","swatch":"#d4450c"},{"id":"opentable","name":"OpenTable","tags":"light booking restaurants red","swatch":"#da3743"},{"id":"opentelemetry","name":"OpenTelemetry","tags":"oss observability tracing telemetry","swatch":"#4f61ab"},{"id":"optimism-io","name":"Optimism","tags":"light infrastructure web3 layer2","swatch":"#ff0420"},{"id":"ory","name":"Ory","tags":"light identity open-source sans","swatch":"#0f172a"},{"id":"oscar-health","name":"Oscar Health","tags":"light editorial sans health","swatch":"#4f50ff"},{"id":"our-place","name":"Our Place","tags":"light warm serif commerce","swatch":"#af5a3c"},{"id":"oura","name":"Oura","tags":"dark fitness sans premium","swatch":"#d6c283"},{"id":"paddle","name":"Paddle","tags":"dark warm serif condensed","swatch":"#e4e1d1"},{"id":"paper-website","name":"Paper Website","tags":"light editorial serif spacious","swatch":"#1a1a1a"},{"id":"patagonia","name":"Patagonia","tags":"light warm sans structured","swatch":"#cd0000"},{"id":"patreon","name":"Patreon","tags":"light warm sans playful","swatch":"#ff424d"},{"id":"paypal","name":"PayPal","tags":"light corporate sans trustworthy","swatch":"#003087"},{"id":"peloton","name":"Peloton","tags":"dark fitness sans instructor-led","swatch":"#cb1e4e"},{"id":"penpot","name":"Penpot","tags":"light sans open-source mint","swatch":"#31efb8"},{"id":"perplexity","name":"Perplexity","tags":"light editorial sans spacious","swatch":"#20808d"},{"id":"phantom-app","name":"Phantom","tags":"dark structured sans cool","swatch":"#ab9ff2"},{"id":"picoko","name":"Picoko","tags":"ai ecommerce product-photography saas","swatch":"#fe1c71"},{"id":"pika","name":"Pika","tags":"light bold sans ai","swatch":"#ffd184"},{"id":"pinecone-io","name":"Pinecone","tags":"light cyan sans mono","swatch":"#1cb0d0"},{"id":"pinterest","name":"Pinterest","tags":"light minimal sans grid","swatch":"#e60023"},{"id":"pitch","name":"Pitch","tags":"dark light bold sans","swatch":"#5318eb"},{"id":"plaid","name":"Plaid","tags":"light sans structured cool","swatch":"#0a85ea"},{"id":"plain","name":"Plain","tags":"light minimal sans bright","swatch":"#1ad379"},{"id":"planetscale","name":"PlanetScale","tags":"dark mono dense structured","swatch":"#c11027"},{"id":"playstation","name":"PlayStation","tags":"dark structured sans cool","swatch":"#0070d1"},{"id":"pluralsight","name":"Pluralsight","tags":"education developer skills enterprise","swatch":"#e7005e"},{"id":"polar","name":"Polar","tags":"dark editorial serif sans","swatch":"#5b3eea"},{"id":"polygon-tech","name":"Polygon","tags":"light enterprise infrastructure web3","swatch":"#8247e5"},{"id":"porsche","name":"Porsche","tags":"luxury light sans photography","swatch":"#d5001c"},{"id":"postgresql","name":"PostgreSQL","tags":"oss database sql documentation","swatch":"#336791"},{"id":"posthog","name":"PostHog","tags":"light warm playful sans","swatch":"#cd8407"},{"id":"postmark","name":"Postmark","tags":"light playful sans warm","swatch":"#1c1d1f"},{"id":"prime-video","name":"Prime Video","tags":"dark blue sans dense","swatch":"#1399ff"},{"id":"prisma","name":"Prisma","tags":"light sans developer clean","swatch":"#14b8a6"},{"id":"progressive","name":"Progressive","tags":"light corporate sans blue","swatch":"#0077b3"},{"id":"prometheus","name":"Prometheus","tags":"oss observability monitoring metrics","swatch":"#e64a22"},{"id":"propelauth","name":"PropelAuth","tags":"light auth b2b multi-tenant","swatch":"#151531"},{"id":"protopie","name":"ProtoPie","tags":"design-tools prototyping interaction teams","swatch":"#181818"},{"id":"pypi","name":"PyPI","tags":"oss package-index python registry","swatch":"#006dad"},{"id":"python","name":"Python","tags":"oss language runtime community","swatch":"#3776ab"},{"id":"qatar-airways","name":"Qatar Airways","tags":"light premium burgundy sans","swatch":"#f2f3fa"},{"id":"quizlet","name":"Quizlet","tags":"light playful sans rounded","swatch":"#4257b2"},{"id":"qwik","name":"Qwik","tags":"dark sans structured cool","swatch":"#ac7ef4"},{"id":"railway","name":"Railway","tags":"dark editorial serif sans","swatch":"#553f83"},{"id":"rainbow","name":"Rainbow","tags":"light playful sans crypto","swatch":"#ff54bb"},{"id":"raindrop-io","name":"Raindrop.io","tags":"light minimal sans soft","swatch":"#0b7ed0"},{"id":"ramp","name":"Ramp","tags":"light editorial sans structured","swatch":"#fcfb70"},{"id":"rare-beauty","name":"Rare Beauty","tags":"light soft serif sans","swatch":"#9b6dd4"},{"id":"raycast","name":"Raycast","tags":"dark minimal sans mono","swatch":"#56c2ff"},{"id":"razer","name":"Razer","tags":"dark gaming neon bold","swatch":"#44d62c"},{"id":"readme","name":"ReadMe","tags":"light friendly sans serif","swatch":"#0e2af5"},{"id":"readwise","name":"Readwise","tags":"light warm soft serif","swatch":"#ff7a45"},{"id":"recraft","name":"Recraft","tags":"dark sans condensed bold","swatch":"#d2fc31"},{"id":"reddit","name":"Reddit","tags":"bright orange sans dense","swatch":"#ff4500"},{"id":"redis","name":"Redis","tags":"oss database cache real-time","swatch":"#ff4438"},{"id":"relume","name":"Relume","tags":"light sans monochrome editorial","swatch":"#161616"},{"id":"remarkable","name":"reMarkable","tags":"light minimal sans product","swatch":"#2559f4"},{"id":"remix-run","name":"Remix","tags":"light brutalist sans structured","swatch":"#000000"},{"id":"render","name":"Render","tags":"light sans spacious bright","swatch":"#8a05ff"},{"id":"replicate","name":"Replicate","tags":"light dark mono sans","swatch":"#202020"},{"id":"replit","name":"Replit","tags":"dark sans mono dense","swatch":"#1fe0ea"},{"id":"resend","name":"Resend","tags":"dark editorial serif sans","swatch":"#f0f0f0"},{"id":"retool","name":"Retool","tags":"light structured sans dense","swatch":"#3a55fc"},{"id":"reuters","name":"Reuters","tags":"editorial sans dense news","swatch":"#ff8000"},{"id":"revolut","name":"Revolut","tags":"dark bold sans fintech","swatch":"#191c1f"},{"id":"riot-games","name":"Riot Games","tags":"dark bold structured gaming","swatch":"#d13639"},{"id":"ritual","name":"Ritual","tags":"light editorial sans commerce","swatch":"#142b6f"},{"id":"rive-app","name":"Rive","tags":"light playful sans bright","swatch":"#1d1d1b"},{"id":"robinhood","name":"Robinhood","tags":"dark editorial serif sans","swatch":"#000000"},{"id":"roblox","name":"Roblox","tags":"light bold friendly gaming","swatch":"#ed1d24"},{"id":"runpod","name":"RunPod","tags":"dark purple sans mono","swatch":"#673ab7"},{"id":"runway-ml","name":"Runway","tags":"dark editorial sans dense","swatch":"#eef1f5"},{"id":"rust-lang","name":"Rust","tags":"oss language systems documentation","swatch":"#f74c00"},{"id":"salesforce","name":"Salesforce","tags":"light structured sans dense","swatch":"#0176d3"},{"id":"sap","name":"SAP","tags":"light enterprise sans cobalt","swatch":"#0070f2"},{"id":"scale-ai","name":"Scale AI","tags":"light big-type sans enterprise","swatch":"#5933b2"},{"id":"segment","name":"Segment","tags":"light sans navy blue","swatch":"#1866ee"},{"id":"semafor","name":"Semafor","tags":"editorial serif light paper-cream","swatch":"#3a6d78"},{"id":"sendgrid","name":"SendGrid","tags":"light sans structured cool","swatch":"#1f74ff"},{"id":"sentry","name":"Sentry","tags":"dark structured sans mono","swatch":"#7553ff"},{"id":"shadcn-ui","name":"shadcn/ui","tags":"light dark minimal mono","swatch":"#0a0a0a"},{"id":"shopify","name":"Shopify","tags":"dark sans dramatic ethereal","swatch":"#36F4A4"},{"id":"shortwave","name":"Shortwave","tags":"dark structured sans email","swatch":"#356aff"},{"id":"sierra","name":"Sierra","tags":"light minimal warm calm","swatch":"#006838"},{"id":"signal-app","name":"Signal","tags":"light dark messaging privacy","swatch":"#3a76f0"},{"id":"sketch","name":"Sketch","tags":"design-tools interface prototyping systems","swatch":"#151515"},{"id":"skillshare","name":"Skillshare","tags":"education creative classes marketplace","swatch":"#0b1215"},{"id":"skims","name":"SKIMS","tags":"light minimal sans editorial","swatch":"#2d2a26"},{"id":"slack","name":"Slack","tags":"light sans dense structured","swatch":"#611f69"},{"id":"snowflake","name":"Snowflake","tags":"light structured sans enterprise","swatch":"#249EDC"},{"id":"solana-com","name":"Solana","tags":"dark brutalist sans bright","swatch":"#9945ff"},{"id":"solid-js","name":"SolidJS","tags":"dark sans structured cool","swatch":"#2c4f7c"},{"id":"sololearn","name":"Sololearn","tags":"dark sans learning rounded","swatch":"#2493df"},{"id":"sonos","name":"Sonos","tags":"dark minimal sans photography","swatch":"#ffffff"},{"id":"soundcloud","name":"SoundCloud","tags":"light bold sans dense","swatch":"#ff5500"},{"id":"sourcegraph","name":"Sourcegraph","tags":"dark structured sans developer","swatch":"#f34e3f"},{"id":"southwest","name":"Southwest Airlines","tags":"light bold sans travel","swatch":"#ffbf27"},{"id":"spacex","name":"SpaceX","tags":"dark cinematic aerospace photographic","swatch":"#f0f0fa"},{"id":"spline","name":"Spline","tags":"dark sans playful creative","swatch":"#0062ff"},{"id":"spotify","name":"Spotify","tags":"dark bold sans dense","swatch":"#1ed760"},{"id":"sqlite","name":"SQLite","tags":"oss database sql embedded","swatch":"#0f6b8a"},{"id":"square","name":"Square","tags":"light minimal sans monochrome","swatch":"#000000"},{"id":"stability-ai","name":"Stability AI","tags":"dark sans spacious cool","swatch":"#a381ff"},{"id":"stackblitz","name":"StackBlitz","tags":"dark sans structured developer","swatch":"#1574ef"},{"id":"starbucks","name":"Starbucks","tags":"light retail coffee sans","swatch":"#006241"},{"id":"steam","name":"Steam","tags":"dark bold structured gaming","swatch":"#66c0f4"},{"id":"steelseries","name":"SteelSeries","tags":"dark gaming hardware peripherals","swatch":"#ff6900"},{"id":"storybook","name":"Storybook","tags":"light structured sans developer","swatch":"#ff4785"},{"id":"strava","name":"Strava","tags":"light fitness sans athletic","swatch":"#fc4c02"},{"id":"stytch","name":"Stytch","tags":"light auth passwordless sans","swatch":"#1d1d1d"},{"id":"substack","name":"Substack","tags":"light editorial serif sans","swatch":"#ff6719"},{"id":"suno","name":"Suno","tags":"dark sans spacious warm","swatch":"#f7f4ef"},{"id":"sunsama","name":"Sunsama","tags":"light warm cream sans","swatch":"#e07a5f"},{"id":"supabase","name":"Supabase","tags":"dark mono sans dense","swatch":"#3ecf8e"},{"id":"supercell","name":"Supercell","tags":"gaming mobile characters playful","swatch":"#0f62d6"},{"id":"superhuman","name":"Superhuman","tags":"light minimal sans spacious","swatch":"#714cb6"},{"id":"supreme","name":"Supreme","tags":"light fashion streetwear monospace","swatch":"#cc0000"},{"id":"svelte","name":"Svelte","tags":"light minimal sans structured","swatch":"#ff3e00"},{"id":"synthesia","name":"Synthesia","tags":"light sans enterprise","swatch":"#3e57da"},{"id":"t-mobile","name":"T-Mobile","tags":"light bold sans telco","swatch":"#e20074"},{"id":"tailscale","name":"Tailscale","tags":"light structured sans networking","swatch":"#d04841"},{"id":"tana-app","name":"Tana","tags":"dark editorial serif minimal","swatch":"#e1f0bd"},{"id":"target","name":"Target","tags":"light retail marketplace sans","swatch":"#cc0000"},{"id":"teladoc","name":"Teladoc Health","tags":"healthcare telehealth services trust","swatch":"#351f65"},{"id":"telegram","name":"Telegram","tags":"light blue sans clean","swatch":"#2aabee"},{"id":"temporal","name":"Temporal","tags":"dark indigo technical sans","swatch":"#444ce7"},{"id":"tesla","name":"Tesla","tags":"light minimal sans photography","swatch":"#3e6ae1"},{"id":"theatlantic","name":"The Atlantic","tags":"editorial serif magazine longform","swatch":"#fbb33b"},{"id":"theeconomist","name":"The Economist","tags":"editorial serif dense structured","swatch":"#e3120b"},{"id":"theguardian","name":"The Guardian","tags":"editorial serif slab dense","swatch":"#052962"},{"id":"home-depot","name":"The Home Depot","tags":"light retail marketplace sans","swatch":"#f96302"},{"id":"nytimes","name":"The New York Times","tags":"editorial serif dense structured","swatch":"#d0021b"},{"id":"newyorker","name":"The New Yorker","tags":"editorial serif classic magazine","swatch":"#000000"},{"id":"washingtonpost","name":"The Washington Post","tags":"editorial serif dense political","swatch":"#000000"},{"id":"things-app","name":"Things","tags":"light minimal sans soft","swatch":"#5c9cf5"},{"id":"threads-app","name":"Threads","tags":"dark sans clean spacious","swatch":"#ffffff"},{"id":"tiktok","name":"TikTok","tags":"dark neon sans playful","swatch":"#fe2c55"},{"id":"tinybird","name":"Tinybird","tags":"dark green mono-accent sans","swatch":"#27f795"},{"id":"tldraw","name":"tldraw","tags":"light playful sans soft","swatch":"#1d1d1d"},{"id":"todoist","name":"Todoist","tags":"light warm sans friendly","swatch":"#e44232"},{"id":"together-ai","name":"Together AI","tags":"light dark ai infrastructure","swatch":"#0f1f3d"},{"id":"toyota","name":"Toyota","tags":"light mainstream sans red","swatch":"#eb0a1e"},{"id":"trigger-dev","name":"Trigger.dev","tags":"dark sans developer workflow","swatch":"#a8ff53"},{"id":"tripadvisor","name":"Tripadvisor","tags":"hospitality travel reviews discovery","swatch":"#00aa6c"},{"id":"turbo","name":"Turbo","tags":"dark sans structured cool","swatch":"#ff1e56"},{"id":"turso","name":"Turso","tags":"dark sans mono structured","swatch":"#00face"},{"id":"twilio","name":"Twilio","tags":"light sans structured bright","swatch":"#f22f46"},{"id":"twitch","name":"Twitch","tags":"dark bold sans dense","swatch":"#9146ff"},{"id":"uber-eats","name":"Uber Eats","tags":"light marketplace sans monochrome","swatch":"#000000"},{"id":"ubisoft","name":"Ubisoft","tags":"gaming publisher franchises cinematic","swatch":"#006ef5"},{"id":"udacity","name":"Udacity","tags":"dark structured sans education","swatch":"#175cff"},{"id":"udemy","name":"Udemy","tags":"light education sans friendly","swatch":"#a435f0"},{"id":"udio","name":"Udio","tags":"dark bold sans ai","swatch":"#e30b5d"},{"id":"uizard","name":"Uizard","tags":"dark playful sans ai","swatch":"#a881fe"},{"id":"uniqlo","name":"Uniqlo","tags":"light fashion basics sans","swatch":"#ff0000"},{"id":"uniswap","name":"Uniswap","tags":"light playful sans rounded","swatch":"#ff007a"},{"id":"united","name":"United Airlines","tags":"light navy structured sans","swatch":"#1414d2"},{"id":"upstash","name":"Upstash","tags":"light sans developer structured","swatch":"#00bc7d"},{"id":"v0-app","name":"v0","tags":"light sans mono minimal","swatch":"#171717"},{"id":"valorant","name":"Valorant","tags":"dark brutalist sans structured","swatch":"#ff4655"},{"id":"vapi","name":"Vapi","tags":"dark sans developer","swatch":"#7ccf00"},{"id":"venmo","name":"Venmo","tags":"light social sans friendly","swatch":"#3d95ce"},{"id":"visa","name":"Visa","tags":"light fintech payments global","swatch":"#1434CB"},{"id":"vite","name":"Vite","tags":"dark minimal sans mono","swatch":"#646cff"},{"id":"vodafone","name":"Vodafone","tags":"telecom corporate light red","swatch":"#e60000"},{"id":"volkswagen","name":"Volkswagen","tags":"light friendly sans blue","swatch":"#001e50"},{"id":"vuori","name":"Vuori","tags":"light sans warm photography-led","swatch":"#333333"},{"id":"walmart","name":"Walmart","tags":"light retail marketplace sans","swatch":"#0071ce"},{"id":"warby-parker","name":"Warby Parker","tags":"light editorial serif commerce","swatch":"#1050d0"},{"id":"warp-dev","name":"Warp","tags":"dark minimal sans mono","swatch":"#c2ff00"},{"id":"wayfair","name":"Wayfair","tags":"light retail marketplace sans","swatch":"#0a0a0a"},{"id":"weaviate","name":"Weaviate","tags":"light green sans mono","swatch":"#1cdb46"},{"id":"webflow","name":"Webflow","tags":"light structured sans spacious","swatch":"#4353ff"},{"id":"whimsical","name":"Whimsical","tags":"design-tools whiteboard diagrams wireframes","swatch":"#7c5cff"},{"id":"whoop","name":"WHOOP","tags":"dark fitness sans athletic","swatch":"#a0d10b"},{"id":"wikipedia","name":"Wikipedia","tags":"light structured serif minimal","swatch":"#3366cc"},{"id":"windsurf","name":"Windsurf","tags":"light warm sans developer","swatch":"#34e8bb"},{"id":"wired","name":"WIRED","tags":"editorial magazine sharp light","swatch":"#000000"},{"id":"wireguard","name":"WireGuard","tags":"oss vpn networking security","swatch":"#88171a"},{"id":"wise","name":"Wise","tags":"light minimal sans structured","swatch":"#9fe870"},{"id":"wispr-flow","name":"Wispr Flow","tags":"light editorial serif sans","swatch":"#f0d7ff"},{"id":"workday","name":"Workday","tags":"light enterprise sans orange","swatch":"#f37721"},{"id":"workos","name":"WorkOS","tags":"light identity auth sans","swatch":"#29363d"},{"id":"wyndham","name":"Wyndham Hotels & Resorts","tags":"hospitality travel hotels booking","swatch":"#0065ab"},{"id":"twitter-x","name":"X","tags":"dark mono-accent sans dense","swatch":"#ffffff"},{"id":"xai","name":"xAI","tags":"light minimal mono sans","swatch":"#0a0a0a"},{"id":"xbox","name":"Xbox","tags":"dark structured sans bright","swatch":"#107c10"},{"id":"ycombinator","name":"Y Combinator","tags":"light brutalist sans bright","swatch":"#f26625"},{"id":"you-com","name":"You.com","tags":"light sans structured cool","swatch":"#5368ee"},{"id":"youtube","name":"YouTube","tags":"video dense dark-default sans","swatch":"#ffffff"},{"id":"zed","name":"Zed","tags":"light minimal serif editor","swatch":"#004edb"},{"id":"zeplin","name":"Zeplin","tags":"design-tools handoff tokens collaboration","swatch":"#419bf9"},{"id":"zocdoc","name":"Zocdoc","tags":"light yellow structured sans","swatch":"#3a2b71"},{"id":"zoom","name":"Zoom","tags":"light structured sans communication","swatch":"#0b5cff"},{"id":"zora","name":"Zora","tags":"light creator vibrant web3","swatch":"#5a3eff"}];</script><script> ;(() => { const overlay = document.getElementById('cmdk-overlay') const input = document.getElementById('cmdk-input') const list = document.getElementById('cmdk-list') if (!overlay || !input || !list) return const designs = window.__cmdk_data || [] const COMMANDS = [ { kind: 'cmd', name: 'Extract from URL', hint: 'paste any URL', href: '/design.md/extract' }, { kind: 'cmd', name: 'Create with chat', hint: 'AI generator', href: '/design.md/create' }, { kind: 'cmd', name: 'Favorites', hint: 'starred designs', href: '/design.md/favorites' }, { kind: 'cmd', name: 'CLI docs', hint: 'design-md npm package', href: '/design.md/cli' }, { kind: 'cmd', name: 'Spec', hint: 'webdesignhot 0.2', href: '/design.md/spec' }, { kind: 'cmd', name: 'About', hint: 'what is DESIGN.md', href: '/design.md/about' }, { kind: 'cmd', name: 'Submit a design', hint: 'add yours', href: '/design.md/submit' }, ] let idx = 0 let visible = [] function fuzzy(needle, hay) { let i = 0 const n = needle.toLowerCase() const h = hay.toLowerCase() for (const c of n) { const f = h.indexOf(c, i) if (f === -1) return false i = f + 1 } return true } function render(q) { const isCmd = q.startsWith('/') const needle = isCmd ? q.slice(1).trim() : q.trim() visible = [] if (isCmd || !needle) { for (const c of COMMANDS) { if (!needle || fuzzy(needle, c.name)) visible.push(c) } } if (!isCmd) { for (const d of designs) { if (!needle || fuzzy(needle, d.name) || fuzzy(needle, d.id) || fuzzy(needle, d.tags)) { visible.push({ kind: 'design', name: d.name, hint: d.tags, href: '/design.md/' + d.id, swatch: d.swatch }) } if (visible.length > 80) break } } idx = Math.min(idx, Math.max(0, visible.length - 1)) paint() } function el(tag, props) { const e = document.createElement(tag) if (props) for (const k of Object.keys(props)) { if (k === 'text') e.textContent = props[k] else if (k === 'style') e.setAttribute('style', props[k]) else if (k === 'class') e.className = props[k] else if (k.startsWith('data-')) e.setAttribute(k, props[k]) else e[k] = props[k] } return e } function paint() { list.replaceChildren() visible.forEach((item, i) => { const li = el('li', { role: 'option', 'data-idx': String(i), class: 'flex items-center gap-3 px-4 py-2.5 cursor-pointer text-[13px] ' + (i === idx ? 'bg-bg-card-hover' : 'hover:bg-bg-card-hover'), }) if (item.kind === 'design') { const swatchSafe = /^#[0-9a-fA-F]{3,8}$/.test(item.swatch || '') ? item.swatch : '#888' li.append( el('span', { class: 'size-4 rounded-[4px] shrink-0', style: 'background:' + swatchSafe }), el('span', { class: 'text-text', text: item.name }), el('span', { class: 'text-text-faint font-mono text-[11px] ml-auto', text: item.hint || '' }), ) } else { li.append( el('span', { class: 'text-text-dim font-mono text-[11px] uppercase', text: 'cmd' }), el('span', { class: 'text-text', text: item.name }), el('span', { class: 'text-text-faint text-[11px] ml-auto', text: item.hint }), ) } li.addEventListener('click', () => go(item)) list.append(li) }) } function go(item) { if (item && item.href) location.href = item.href } function open() { overlay.classList.remove('hidden') overlay.classList.add('flex') input.value = '' idx = 0 render('') requestAnimationFrame(() => input.focus()) } function close() { overlay.classList.add('hidden') overlay.classList.remove('flex') } document.addEventListener('keydown', (e) => { if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault() overlay.classList.contains('hidden') ? open() : close() return } if (overlay.classList.contains('hidden')) return if (e.key === 'Escape') { e.preventDefault() close() } else if (e.key === 'ArrowDown') { e.preventDefault() idx = Math.min(idx + 1, visible.length - 1) paint() } else if (e.key === 'ArrowUp') { e.preventDefault() idx = Math.max(idx - 1, 0) paint() } else if (e.key === 'Enter') { e.preventDefault() go(visible[idx]) } }) overlay.addEventListener('click', (e) => { if (e.target === overlay) close() }) input.addEventListener('input', (e) => { idx = 0 render(e.target.value) }) window.openCmdK = open })() </script></main><footer class="border-t border-border mt-32 mb-[var(--nav-pill-clearance)] sm:mb-0"><div class="max-w-[1200px] mx-auto px-6 py-10 grid grid-cols-1 md:grid-cols-5 gap-10"><div class="md:col-span-2"><a href="/" class="font-medium tracking-tight text-[15px]">webdesignhot<span class="text-brand">.</span></a><p class="mt-3 text-[13px] text-text-dim max-w-sm leading-relaxed">AI-native landing page kits for builders of AI agents, dev tools, and SaaS. One site. Five kits. Ship in a weekend.</p></div><div><span class="label">Products</span><ul class="mt-4 space-y-2.5 text-[13px]"><li><a href="/products/agentkit" class="text-text-dim hover:text-text transition-colors">AgentKit</a></li><li><span class="text-text-faint">DevToolKit · soon</span></li><li><span class="text-text-faint">ChatbotKit · soon</span></li><li><span class="text-text-faint">GenerativeKit · soon</span></li><li><span class="text-text-faint">B2BKit · soon</span></li></ul></div><div><span class="label">Designs.md</span><ul class="mt-4 space-y-2.5 text-[13px]"><li><a href="/design.md/" class="text-text-dim hover:text-text transition-colors">Directory</a></li><li><a href="/design.md/cli" class="text-text-dim hover:text-text transition-colors">CLI</a></li><li><a href="/design.md/spec" class="text-text-dim hover:text-text transition-colors">Spec extensions</a></li><li><a href="/design.md/create" class="text-text-dim hover:text-text transition-colors">Create</a></li><li><a href="/design.md/extract" class="text-text-dim hover:text-text transition-colors">Extract</a></li><li><a href="/design.md/favorites" class="text-text-dim hover:text-text transition-colors">Favorites</a></li><li><a href="/design.md/submit" class="text-text-dim hover:text-text transition-colors">Submit</a></li><li><a href="/design.md/feed.xml" class="text-text-dim hover:text-text transition-colors inline-flex items-center gap-1.5">RSS<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 11a9 9 0 0 1 9 9"></path><path d="M4 4a16 16 0 0 1 16 16"></path><circle cx="5" cy="19" r="1"></circle></svg></a></li></ul></div><div><span class="label">Site</span><ul class="mt-4 space-y-2.5 text-[13px]"><li><a href="/changelog" class="text-text-dim hover:text-text transition-colors">Changelog</a></li><li><a href="/about" class="text-text-dim hover:text-text transition-colors">About</a></li><li><a href="/terms" class="text-text-dim hover:text-text transition-colors">Terms</a></li><li><a href="/privacy" class="text-text-dim hover:text-text transition-colors">Privacy</a></li></ul></div></div><div class="border-t border-border"><div class="max-w-[1200px] mx-auto px-6 py-6 flex justify-between items-center"><span class="text-[11px] text-text-faint font-mono tracking-wider">© 2026 webdesignhot.com</span><span class="text-[11px] text-text-faint font-mono tracking-wider">Made for <em>AI builders</em></span></div></div></footer></div></body></html><script type="module">function e(){document.querySelectorAll(`[data-copy]`).forEach(e=>{e.addEventListener(`click`,async()=>{let t=e.dataset.copy||``;if(t)try{await navigator.clipboard.writeText(t);let n=e.innerText;e.innerText=`copied`,setTimeout(()=>{e.innerText=n},1500)}catch{}})})}e();</script>