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 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.
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.