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', }, }, },};Swiss-poster discipline at web scale. Inter Tight 900 headlines that fill the column, ink on bone, a visible 12-column grid as 1px hairlines, and a single vermillion accent that lives only on the underline of the active nav item. Built for design studios, agencies, and brands that earn authority through restraint.
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.
Mid-tone soft glass. Warm dusty-sand canvas with a peach-and-rose aurora behind; cards float as cream-tinted frosted panes with 26px backdrop-blur and a faint inset top highlight. The mid-tone is the system.
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.