A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Prose-first token file — decisions live next to their reasoning.
Fine micro-scale (1–5px) for pills, editorial scale (12–21px) for the grid.
The system's own radius tokens — sm for chips and inputs, md for buttons, lg for cards, pill for fully-rounded CTAs.
1---2name: "Vinyl Noir"3description: "A music platform that sounds like late-night radio looks. Deep charcoal surfaces with a faint vertical warmth, Instrument Serif italic for album titles, Inter for everything else, a single burnt-amber accent reserved for the now-playing state. Built for music streaming, label sites, and audio products that want warmth in the dark without leaning on neon."4tags: [music, dark, editorial, premium, modern]5colors:6 primary: "#ece6dc"7 secondary: "#8a8278"8 tertiary: "#ece6dc"9 neutral: "#1c1815"10 surface: "#15110e"11typography:12 display: "Instrument Serif"13 body: Inter14 mono: "JetBrains Mono"15 scale:16 hero: "6rem / 0.96 / 400 / -0.025em"17 h1: "3.5rem / 1.04 / 400 / -0.02em"18 h2: "1.875rem / 1.18 / 400 / -0.012em"19 body: "1rem / 1.6 / 400 / -0.005em"20radius:21 sm: 3px22 md: 6px23 lg: 10px24 pill: 9999px25shadows:26 card: "rgba(0,0,0,0.4) 0 1px 0 inset, rgba(0,0,0,0.5) 0 8px 24px -12px"27 button: "rgba(0,0,0,0.3) 0 1px 2px"28borders:29 card: "1px solid rgba(236,230,220,0.08)"30 divider: rgba(236,230,220,0.10)31buttons:32 primary:33 background: #ece6dc34 color: #15110e35 border: none36 shape: pill37 padding: 11px 22px38 font: 600 / 0.8125rem39 secondary:40 background: #26222041 color: #ece6dc42 border: 1px solid rgba(236,230,220,0.10)43 shape: pill44 padding: 11px 22px45 font: 500 / 0.8125rem46 outline:47 background: transparent48 color: #ece6dc49 border: 1px solid rgba(236,230,220,0.18)50 shape: pill51 padding: 11px 22px52 font: 500 / 0.8125rem53 ghost:54 background: transparent55 color: #8a827856 border: none57 shape: pill58 padding: 11px 16px59 font: 500 / 0.8125rem60charts:61 variant: "thin-bars"62 stroke_width: 1.563 fill_opacity: 0.164 gridlines: false65 bar_gap: 6px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap"69dependencies: ["lucide-react"]70---71 72# Vinyl Noir73 74## AI Build Instructions75 76> **Read this section before writing any code.** The rules below77> are non-negotiable. Every value used in the UI must come from this78> file's frontmatter — never substitute, approximate, or invent new79> colors, fonts, radii, or shadows. If a value is missing, ask the80> user before adding one.81 82### 1 · Your role83 84You are building UI for a project that has adopted **Vinyl Noir** as its85design system. Treat `DESIGN.md` as the single source of truth.86Your job is to translate the user's product requirements into87components and pages that look like they were designed by the same88person who authored this file.89 90### 2 · Token compliance91 92- Pull every color, font family, radius, shadow, and spacing value93 from the frontmatter at the top of this file.94- Use semantic roles (e.g. `primary`, `accent`, `muted`) — never95 hard-code hex values that bypass the system.96- When a token can be expressed as a CSS variable, declare it once97 in your global stylesheet and reference it everywhere downstream.98- The Google Fonts `<link>` is provided in the Typography section.99 Add it to `<head>` before any component renders.100 101### 3 · Component recipes102 103Use these recipes verbatim when building the corresponding component.104 105#### Buttons106 107Four variants are defined. Pick one — never blend variants or invent a fifth.108 109- **Primary** — pill shape, bg `#ece6dc`, text `#15110e`, padding `11px 22px`, weight `600`.110- **Secondary** — pill shape, bg `#262220`, text `#ece6dc`, border `1px solid rgba(236,230,220,0.10)`, padding `11px 22px`, weight `500`.111- **Outline** — pill shape, text `#ece6dc`, border `1px solid rgba(236,230,220,0.18)`, padding `11px 22px`, weight `500`.112- **Ghost** — pill shape, text `#8a8278`, padding `11px 16px`, weight `500`.113 114Reach for **primary** as the single dominant CTA per screen.115**Secondary** for the supporting action. **Outline** for tertiary116actions in toolbars. **Ghost** for inline links and table actions.117 118#### Cards119 120- Background: `#15110e`121- Border: `1px solid rgba(236,230,220,0.08)`122- Shadow: `rgba(0,0,0,0.4) 0 1px 0 inset, rgba(0,0,0,0.5) 0 8px 24px -12px`123- Radius: `radius.lg` (`10px`)124- Internal padding: `20px` for compact cards, `24–28px` for content cards.125 126#### Tabs127 128Variant: `underline`. Flat row of labels. Active tab gets a 2px underline in the accent color — no fill.129 130#### Charts131 132- Bar/line variant: `thin-bars`133- No gridlines — let the bars/lines carry the data.134- Highlight strategy: `single` — emphasize a single bar/point per chart.135 136#### Typography pairings137 138- **Display (`Instrument Serif`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.140- **Mono (`JetBrains Mono`)** — code, eyebrows, metadata, numerals in tables.141 142### 4 · Hard constraints143 144Never do any of the following without explicit instruction from the user:145 146- Introduce a new color, font, radius, or shadow that isn't declared above.147- Mix this system with another (e.g. don't paste in Material or Bootstrap defaults).148- Use generic gradient defaults (purple→blue, peach→pink) — they break the system's voice.149- Reach for emoji icons. Use a consistent icon library and size icons in line with body type.150- Add motion that exceeds the system's restraint — keep transitions short (≤200ms) and subtle.151 152### 5 · Before you finish — verify153 154Run through this checklist for every screen you produce:155 156- [ ] Every color used appears in the Colors table above.157- [ ] Headlines use the display font; body copy uses the body font.158- [ ] Buttons match one of the declared variants exactly (shape, padding, weight).159- [ ] Border-radius values come from `radius.sm` / `radius.md` / `radius.lg` / `radius.pill`.160- [ ] Cards and dividers use the declared border + shadow tokens.161- [ ] No values were invented; if you needed something missing, you stopped and asked.162 163---164 165## 1. Atmosphere166 167Vinyl Noir is a music platform that sounds like late-night radio looks. The page surface is deep warm charcoal `#15110e` — never pure black, never grey, with a faint warmth pulled from sepia rather than blue. Album titles run in Instrument Serif italic at 96px, weight 400 — the high-contrast italic glyphs giving each title the gestural sweep of a handwritten label. Body sits in Inter at 16px, bone-warm `#ece6dc`. The single accent is burnt amber `#d97a2c` that appears only as the now-playing waveform, the active track row's left border, and the play button when a track is queued.168 169The discipline is in the warm dark: charcoal-sepia, not black; bone-warm light text, not pure white; burnt amber, not neon orange. Italic display, upright body — the typographic split mirrors the difference between a song title and a description.170 171**Signature moves**172- Instrument Serif italic 400 at 96px for album titles — high-contrast italic IS the brand173- Warm charcoal-sepia surface `#15110e` — never pure black, never cool grey174- Burnt amber `#d97a2c` only on now-playing waveform + active track row border + queued play button175- Bone-warm text `#ece6dc` — never pure white, never grey176- Pill-shape buttons (record-label badge voice) on the dark stage177 178## 2. Palette179 180### Surfaces181- **Stage** `#15110e` — page background (warm charcoal-sepia)182- **Stage Lift** `#1c1815` — section bands, primary card183- **Card** `#262220` — secondary surfaces, secondary button184- **Hairline** `rgba(236,230,220,0.08)` — every divider185 186### Ink (light on dark)187- **Bone Warm** `#ece6dc` — text, headings (warm ivory, never white)188- **Bone 50** `#8a8278` — secondary text, ghost buttons189 190### Accent191- **Amber** `#d97a2c` — now-playing waveform, active track row left border, queued play button192- **Amber Soft** `rgba(217,122,44,0.14)` — focus ring, hovered track row background193 194## 3. Typography195 196| Role | Font | Size | Weight | Leading | Tracking |197|------|------|------|--------|---------|----------|198| Album Title (Hero) | Instrument Serif (italic) | 96px | 400 | 0.96 | -0.025em |199| H1 | Instrument Serif | 56px | 400 | 1.04 | -0.02em |200| H2 | Instrument Serif (italic) | 30px | 400 | 1.18 | -0.012em |201| Body | Inter | 16px | 400 | 1.6 | -0.005em |202| UI / Button | Inter | 13px | 600 | 1.4 | 0 |203| Track Time / Mono | JetBrains Mono | 12px | 500 | 1.0 | 0 tabular-nums |204| Label | JetBrains Mono | 10px | 500 | 1.0 | 0.10em uppercase |205 206Instrument Serif appears at 400 only — the high-contrast strokes earn drama from scale. Italic for album titles and pull quotes; upright for everything else display.207 208## 4. Buttons209 210### Primary (Bone Warm Pill)211```css212background: #ece6dc;213color: #15110e;214padding: 11px 22px;215border-radius: 9999px;216font-weight: 600;217box-shadow: rgba(0,0,0,0.3) 0 1px 2px;218```219 220The bone-warm fill on charcoal reads as a vinyl-label sticker. Inverted from the usual dark-mode dark-button move.221 222### Secondary (Card Pill)223- `#262220` background, 1px hairline at 10% bone, bone text — same pill shape224 225### Outline & Ghost226- Outline: transparent, 1px hairline at 18% bone227- Ghost: no border, bone-50, hover lifts to bone-warm228 229## 5. Cards230 231```css232background: #1c1815;233border: 1px solid rgba(236,230,220,0.08);234border-radius: 10px;235box-shadow:236 rgba(0,0,0,0.4) 0 1px 0 inset,237 rgba(0,0,0,0.5) 0 8px 24px -12px;238```239 240The 1px black inset highlight at the top is the dark catch-light — without it the card reads as flat brown. The 24px ambient shadow gives the card a stage-lit float.241 242The currently-playing track row gets a 2px amber left border — the only place amber appears as a card edge.243 244## 6. Charts245 246Thin precise bars (3px wide, 6px gap) — used as the now-playing waveform. The active bar (current playhead) is amber, others in 22% bone-warm. Line charts at 1.5px bone-warm with a 10% amber fill, ending in an amber dot marker. NO gridlines. Y-axis labels in JetBrains Mono uppercase 10px.247 248## 7. Tabs249 250Underline 1.5px in amber for the active state. Inactive tabs are bone-50 in Inter 500. Hover = amber-soft background wash.251 252## 8. Spacing253 254- Base 4px255- Scale: `4, 8, 12, 16, 24, 32, 48, 64, 96, 128`256- Section padding: 96px desktop, 48px mobile257 258## 9. Do's & don'ts259 260✅ **Do**261- Use Instrument Serif italic 400 at 96px for album titles — italic IS the handwritten-label voice262- Hold the warm charcoal-sepia surface `#15110e` — pure black reads as terminal, cool grey kills the warmth263- Reserve amber for now-playing waveform + active track left border + queued play button264- Use bone-warm text `#ece6dc` — pure white kills the radio-warm atmosphere265 266❌ **Don't**267- Use neon orange — burnt amber `#d97a2c` is muted vinyl-label warmth, not safety cone268- Use Instrument Serif at any other weight — 400 only, italic for album titles269- Add a second accent — amber alone, on three specific surfaces270- Use sharp 0px corners — soft 6-10px is the record-sleeve voice271 272---273 274## Tokens275 276> Generated from the same source the live preview renders from.277> Treat the values below as the contract — never substitute approximations.278 279### Colors280 281| Role | Value |282|-----------|-------|283| primary | `#ece6dc` |284| secondary | `#8a8278` |285| tertiary | `#ece6dc` |286| neutral | `#1c1815` |287| surface | `#15110e` |288 289### Typography290 291- **Display:** Instrument Serif292- **Body:** Inter293- **Mono:** JetBrains Mono294 295| Role | size / leading / weight / tracking |296|------|------------------------------------|297| Hero | 6rem / 0.96 / 400 / -0.025em |298| H1 | 3.5rem / 1.04 / 400 / -0.02em |299| H2 | 1.875rem / 1.18 / 400 / -0.012em |300| Body | 1rem / 1.6 / 400 / -0.005em |301 302### Radius303 304- sm: `3px`305- md: `6px`306- lg: `10px`307- pill: `9999px`308 309### Shadows310 311- **card:** `rgba(0,0,0,0.4) 0 1px 0 inset, rgba(0,0,0,0.5) 0 8px 24px -12px`312- **button:** `rgba(0,0,0,0.3) 0 1px 2px`313 314### Borders315 316- **card:** `1px solid rgba(236,230,220,0.08)`317- **divider:** `rgba(236,230,220,0.10)`318 319### Buttons320 321Four variants, each fully tokenized. The preview renders from these exact values.322 323#### Primary324 325| Property | Value |326|----------|-------|327| shape | `pill` |328| background | `#ece6dc` |329| color | `#15110e` |330| border | `none` |331| padding | `11px 22px` |332| fontWeight | `600` |333| fontSize | `0.8125rem` |334 335#### Secondary336 337| Property | Value |338|----------|-------|339| shape | `pill` |340| background | `#262220` |341| color | `#ece6dc` |342| border | `1px solid rgba(236,230,220,0.10)` |343| padding | `11px 22px` |344| fontWeight | `500` |345| fontSize | `0.8125rem` |346 347#### Outline348 349| Property | Value |350|----------|-------|351| shape | `pill` |352| background | `transparent` |353| color | `#ece6dc` |354| border | `1px solid rgba(236,230,220,0.18)` |355| padding | `11px 22px` |356| fontWeight | `500` |357| fontSize | `0.8125rem` |358 359#### Ghost360 361| Property | Value |362|----------|-------|363| shape | `pill` |364| background | `transparent` |365| color | `#8a8278` |366| border | `none` |367| padding | `11px 16px` |368| fontWeight | `500` |369| fontSize | `0.8125rem` |370 371### Charts372 373| Property | Value |374|----------|-------|375| variant | `thin-bars` |376| strokeWidth | `1.5` |377| fillOpacity | `0.1` |378| gridlines | `false` |379| barGap | `6px` |380| highlight | `single` |381| dotMarker | `true` |382 # CLAUDE.md Reference @DESIGN.md for all styling decisions. Apply tokens strictly — do not introduce colors, fonts, or radii outside the system. When in doubt, prefer the values declared in DESIGN.md frontmatter.<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Serif:ital,wght@0,400;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Instrument Serif"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"JetBrains Mono"', 'monospace'], }, colors: { primary: '#ece6dc', secondary: '#8a8278', accent: '#ece6dc', neutral: '#1c1815', surface: '#15110e', }, borderRadius: { sm: '3px', md: '6px', lg: '10px', }, }, },};A low-sun grainy gradient that runs deep ember to marigold with real fractal-noise grain. Cream surface, Inter Tight display in heavy 800, generous slabs of negative space, and the gradient burns through exactly the primary CTA, the featured tile, and the active chart bar. A warm, restrained bloom — never sunset cliché.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.
Hairline-thin product workspace. Cool off-white surfaces, Inter Display with tight tracking, a single indigo accent, every divider 1px at 6% ink. Engineered calm.
A complete design system, ready for your AI coding agent. Every primitive, token, and pattern below is generated straight from DESIGN.md — drop the file in your project and ship matching UI in minutes.