Design system
A radio station for tech.
Dark-first ink surfaces, one amber Signal accent (a tuner-dial glow), Space Grotesk for display, Inter for UI, JetBrains Mono for the machinery (dates, durations, frequencies). Every screen ships from these parts. Flip the theme to check both modes:
Brand
The lockup in its three sizes. The FM plate never recolors.
Color
Semantic tokens only; components never hardcode a hex. Values flip per theme.
surface
page background
surface-2
cards, panels
surface-3
raised, hover, wells
signal
brand amber, fills
signal-soft
amber-tinted wells
heading
headings, emphasis
text
body copy
muted
captions, secondary
border
hairlines
live
ON AIR, urgent
positive
success
negative
errors, danger
Typography
Display for headlines, sans for reading, mono for data. Kickers introduce sections.
Kicker · overline
Display / Space Grotesk 36-60
Body / Inter 16. Yesterday OpenAI shipped a new reasoning model, Cloudflare had a rough Tuesday, and the EU's AI Act grew teeth. Here is what it means for your week.
Secondary / Inter 14 muted, for supporting copy and captions.
Mono / JetBrains 14 · 07:00 · 6 min · WK 32 · 88.1 FM
Buttons
One primary per view. Soft for secondary, ghost for tertiary, danger only for destructive confirms.
Topic chips
Each of the twelve frequencies owns a hue; chips tint themselves from it in both themes.
Playback
The play control glows while active; the equalizer is the universal "now playing" mark.
Forms
Uppercase mono labels, quiet fields, loud focus.
Pick a country from the list.
Tables
Mono headers, hairline rows. Data cells stay sans.
| Broadcast | Topic | Aired | Length |
|---|---|---|---|
| The GPU squeeze, explained | AI Tools | 2026-08-07 | 06:12 |
| Postgres 19 lands | SWE | 2026-08-07 | 05:48 |
Voice
Sound like a great host: warm, precise, zero hype.
Radio vocabulary: broadcasts air, listeners tune in, topics are frequencies.
Numbers are mono: dates, durations and prices render in the mono face.