A podcast platform with the calm of public radio. Soft pearl off-white surfaces, Inter Display 700 for episode titles, Geist Mono for timestamps and chapter marks, a single deep burgundy accent reserved for the now-playing waveform. The light counterpart to a late-night studio — built for podcast networks, audio publishers, and editorial radio brands.
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: "Broadcast Pearl"3description: "A podcast platform with the calm of public radio. Soft pearl off-white surfaces, Inter Display 700 for episode titles, Geist Mono for timestamps and chapter marks, a single deep burgundy accent reserved for the now-playing waveform. The light counterpart to a late-night studio — built for podcast networks, audio publishers, and editorial radio brands."4tags: [audio, editorial, minimal, premium, modern]5colors:6 primary: "#1c1916"7 secondary: "#6b665e"8 tertiary: "#1c1916"9 neutral: "#ebe7df"10 surface: "#f6f3ec"11typography:12 display: Inter13 body: Inter14 mono: "Geist Mono"15 scale:16 hero: "4.5rem / 1.02 / 700 / -0.035em"17 h1: "2.875rem / 1.1 / 700 / -0.025em"18 h2: "1.75rem / 1.22 / 600 / -0.015em"19 body: "1.0625rem / 1.65 / 400 / -0.005em"20radius:21 sm: 4px22 md: 8px23 lg: 14px24 pill: 9999px25shadows:26 card: "rgba(28,25,22,0.04) 0 1px 2px"27 button: none28borders:29 card: "1px solid rgba(28,25,22,0.08)"30 divider: rgba(28,25,22,0.10)31buttons:32 primary:33 background: #1c191634 color: #f6f3ec35 border: none36 shape: pill37 padding: 11px 22px38 font: 600 / 0.8125rem39 secondary:40 background: #ebe7df41 color: #1c191642 border: 1px solid rgba(28,25,22,0.10)43 shape: pill44 padding: 11px 22px45 font: 600 / 0.8125rem46 outline:47 background: transparent48 color: #1c191649 border: 1px solid rgba(28,25,22,0.18)50 shape: pill51 padding: 11px 22px52 font: 600 / 0.8125rem53 ghost:54 background: transparent55 color: #6b665e56 border: none57 shape: pill58 padding: 11px 16px59 font: 600 / 0.8125rem60charts:61 variant: "thin-bars"62 stroke_width: 1.563 fill_opacity: 0.0864 gridlines: false65 bar_gap: 4px66 highlight: single67 dot_marker: true68fonts_url: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap"69dependencies: ["lucide-react"]70---71 72# Broadcast Pearl73 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 **Broadcast Pearl** 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 `#1c1916`, text `#f6f3ec`, padding `11px 22px`, weight `600`.110- **Secondary** — pill shape, bg `#ebe7df`, text `#1c1916`, border `1px solid rgba(28,25,22,0.10)`, padding `11px 22px`, weight `600`.111- **Outline** — pill shape, text `#1c1916`, border `1px solid rgba(28,25,22,0.18)`, padding `11px 22px`, weight `600`.112- **Ghost** — pill shape, text `#6b665e`, padding `11px 16px`, weight `600`.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: `#f6f3ec`121- Border: `1px solid rgba(28,25,22,0.08)`122- Shadow: `rgba(28,25,22,0.04) 0 1px 2px`123- Radius: `radius.lg` (`14px`)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 (`Inter`)** — h1, h2, hero headlines, brand wordmarks.139- **Body (`Inter`)** — paragraphs, labels, button text, form inputs.140- **Mono (`Geist 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 167Broadcast Pearl is a podcast platform with the calm of public radio. The page surface is soft pearl off-white `#f6f3ec` — closer to a printed program guide than to white. Episode titles run in Inter at 700 weight, 72px, with -0.035em tracking — disciplined and authoritative without ever shouting. Body sits in Inter at 17px on a 1.65 leading. Timestamps, chapter marks, and durations switch to Geist Mono with tabular-nums. The single accent is deep burgundy `#7a1f2e` that appears only on the now-playing waveform, the active episode row left border, and the play-button when an episode is queued.168 169The discipline is in the warm pearl light: never bright white, never cool grey. The burgundy reads as the deep red of a microphone's "ON AIR" light through frosted glass — present, never neon.170 171**Signature moves**172- Inter 700 at 72px for episode titles — calm authority, never display-serif drama173- Soft pearl off-white `#f6f3ec` — never white, never cream174- Burgundy `#7a1f2e` only on now-playing waveform + active episode left border + queued play button175- Geist Mono with tabular-nums for every timestamp, chapter mark, duration176- Pill buttons (radio-mic-tag voice) on the warm pearl stage177 178## 2. Palette179 180### Surfaces181- **Pearl** `#f6f3ec` — page background (warm program-guide stock)182- **Pearl Lift** `#ebe7df` — secondary surfaces, secondary button183- **Hairline** `rgba(28,25,22,0.08)` — every divider184 185### Ink186- **Ink** `#1c1916` — text, headings, primary CTA fill187- **Ink 50** `#6b665e` — secondary text, mono labels188 189### Accent190- **Burgundy** `#7a1f2e` — now-playing waveform, active episode left border, queued play button191- **Burgundy Soft** `rgba(122,31,46,0.10)` — focus ring, hovered episode row background192 193## 3. Typography194 195| Role | Font | Size | Weight | Leading | Tracking |196|------|------|------|--------|---------|----------|197| Episode Title (Hero) | Inter | 72px | 700 | 1.02 | -0.035em |198| H1 | Inter | 46px | 700 | 1.1 | -0.025em |199| H2 | Inter | 28px | 600 | 1.22 | -0.015em |200| Body | Inter | 17px | 400 | 1.65 | -0.005em |201| UI / Button | Inter | 13px | 600 | 1.4 | 0 |202| Timestamp / Duration | Geist Mono | 13px | 500 | 1.0 | 0 tabular-nums |203| Chapter Mark | Geist Mono | 12px | 500 | 1.0 | 0 tabular-nums |204| Show Label | Geist Mono | 11px | 500 | 1.0 | 0.10em uppercase |205 206Geist Mono carries the audio-time voice — every duration, chapter timestamp, episode runtime. The tabular-nums variant is what makes a podcast queue read as serious editorial vs. a streaming app.207 208## 4. Buttons209 210### Primary (Ink Pill)211```css212background: #1c1916;213color: #f6f3ec;214padding: 11px 22px;215border-radius: 9999px;216font-weight: 600;217```218 219Pill shape on the warm pearl reads as a radio-mic name tag — the voice of the platform.220 221### Secondary (Pearl Lift Pill)222- `#ebe7df` background, 1px hairline at 10% ink, ink text — same pill shape223 224### Outline & Ghost225- Outline: transparent, 1px hairline at 18% ink226- Ghost: no border, ink-50, hover lifts to ink227 228## 5. Cards229 230```css231background: #f6f3ec;232border: 1px solid rgba(28,25,22,0.08);233border-radius: 14px;234box-shadow: rgba(28,25,22,0.04) 0 1px 2px;235```236 237The single 1px shadow is the maximum lift. The currently-playing episode row gets a 2px burgundy left border — the only place burgundy appears as a card edge.238 239## 6. Charts240 241Thin precise bars (3px wide, 4px gap) — used as the now-playing waveform. The active bar (current playhead) is burgundy, others in 22% ink. Line charts at 1.5px ink with an 8% burgundy fill, ending in a burgundy dot marker. NO gridlines. Y-axis labels in Geist Mono uppercase 11px.242 243## 7. Tabs244 245Underline 1.5px in burgundy for the active state. Inactive tabs are ink-50 in Inter 600. Hover = burgundy-soft background wash. Tabs sit on a 1px hairline baseline.246 247## 8. Spacing248 249- Base 4px250- Scale: `4, 8, 12, 16, 20, 24, 32, 48, 64, 96`251- Section padding: 96px desktop, 48px mobile252 253## 9. Do's & don'ts254 255✅ **Do**256- Use Inter 700 at 72px for episode titles — calm authority, never display-serif drama257- Hold the soft pearl off-white — bright white reads as Spotify, cream reads as wedding stationery258- Reserve burgundy for now-playing waveform + active episode left border + queued play button259- Put every timestamp, chapter mark, duration in Geist Mono with tabular-nums260 261❌ **Don't**262- Use bright red for the now-playing — burgundy `#7a1f2e` is muted "ON AIR" light, not safety cone263- Use a second accent — burgundy alone, on three specific surfaces264- Use sharp 0px corners — soft 8-14px is the program-guide voice265- Use display-serif for episode titles — calm Inter sans is the public-radio register266 267---268 269## Tokens270 271> Generated from the same source the live preview renders from.272> Treat the values below as the contract — never substitute approximations.273 274### Colors275 276| Role | Value |277|-----------|-------|278| primary | `#1c1916` |279| secondary | `#6b665e` |280| tertiary | `#1c1916` |281| neutral | `#ebe7df` |282| surface | `#f6f3ec` |283 284### Typography285 286- **Display:** Inter287- **Body:** Inter288- **Mono:** Geist Mono289 290| Role | size / leading / weight / tracking |291|------|------------------------------------|292| Hero | 4.5rem / 1.02 / 700 / -0.035em |293| H1 | 2.875rem / 1.1 / 700 / -0.025em |294| H2 | 1.75rem / 1.22 / 600 / -0.015em |295| Body | 1.0625rem / 1.65 / 400 / -0.005em |296 297### Radius298 299- sm: `4px`300- md: `8px`301- lg: `14px`302- pill: `9999px`303 304### Shadows305 306- **card:** `rgba(28,25,22,0.04) 0 1px 2px`307- **button:** `none`308 309### Borders310 311- **card:** `1px solid rgba(28,25,22,0.08)`312- **divider:** `rgba(28,25,22,0.10)`313 314### Buttons315 316Four variants, each fully tokenized. The preview renders from these exact values.317 318#### Primary319 320| Property | Value |321|----------|-------|322| shape | `pill` |323| background | `#1c1916` |324| color | `#f6f3ec` |325| border | `none` |326| padding | `11px 22px` |327| fontWeight | `600` |328| fontSize | `0.8125rem` |329 330#### Secondary331 332| Property | Value |333|----------|-------|334| shape | `pill` |335| background | `#ebe7df` |336| color | `#1c1916` |337| border | `1px solid rgba(28,25,22,0.10)` |338| padding | `11px 22px` |339| fontWeight | `600` |340| fontSize | `0.8125rem` |341 342#### Outline343 344| Property | Value |345|----------|-------|346| shape | `pill` |347| background | `transparent` |348| color | `#1c1916` |349| border | `1px solid rgba(28,25,22,0.18)` |350| padding | `11px 22px` |351| fontWeight | `600` |352| fontSize | `0.8125rem` |353 354#### Ghost355 356| Property | Value |357|----------|-------|358| shape | `pill` |359| background | `transparent` |360| color | `#6b665e` |361| border | `none` |362| padding | `11px 16px` |363| fontWeight | `600` |364| fontSize | `0.8125rem` |365 366### Charts367 368| Property | Value |369|----------|-------|370| variant | `thin-bars` |371| strokeWidth | `1.5` |372| fillOpacity | `0.08` |373| gridlines | `false` |374| barGap | `4px` |375| highlight | `single` |376| dotMarker | `true` |377 # 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=Inter:wght@400;500;600;700&family=Geist+Mono:wght@400;500&display=swap" />npm install lucide-react// tailwind.config.jsexport default { theme: { extend: { fontFamily: { display: ['"Inter"', 'serif'], sans: ['"Inter"', 'sans-serif'], mono: ['"Geist Mono"', 'monospace'], }, colors: { primary: '#1c1916', secondary: '#6b665e', accent: '#1c1916', neutral: '#ebe7df', surface: '#f6f3ec', }, borderRadius: { sm: '4px', md: '8px', lg: '14px', }, }, },};A government document made beautiful. Source Serif 4 hero, 3px black borders that read as legal-page rules, IBM Plex Mono for clause numbers and timestamps, a single mustard-stamp accent that lives only on the approval seal and the active filing tab. Built for legal tech, civic, and document-heavy products.
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.
A training platform with the discipline of a stopwatch. Near-black surfaces with a single chartreuse PB indicator, Archivo Black for split times at oversized scale, Inter for prose, JetBrains Mono with tabular-nums for every pace and heart-rate. Built for endurance training apps, gym programming, and athlete-facing dashboards where the only thing that matters is the next interval.
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.