Theme & Design Tokens
The editor's visual system and how to restyle it.
The variables every surface in the editor is built from.
app/globals.css is the single source of truth for colour, spacing, sizing, type and motion. Components reference them through var(--…), either inline or through the primitives layer.
| Family | Tokens | Notes |
|---|---|---|
| Surfaces | --bg-app, --bg-sunken, --bg-panel, --bg-raised, --bg-overlay | Neutral graphite, barely cool. Steps are deliberately small — separation comes from hairline borders, not contrast jumps. |
| Lines | --line, --line-strong | Hairlines do the structural work. |
| Ink | --ink, --ink-dim, --ink-mute, --ink-invert | Three levels of foreground plus an inverted one. |
| Accent | --accent, --accent-hover, --accent-press, --accent-weak | Selection, focus, active tab. |
| Status | --onair, --preview, --armed, --danger, each with a -weak variant | Red on air, green preview, amber armed. |
| Radius | --r-xs, --r-sm, --r-md, --r-pill | 3–5 px; nothing is round except pills. |
| Space | --sp-1 … --sp-8 | 2, 4, 6, 8, 12, 16, 20, 24 px. |
| Heights | --h-sm, --h, --h-lg | 20, 26, 30 px control heights. |
| Type | --font-ui, --font-mono, --fs-11 … --fs-14 | System UI stack; 11–14 px. |
| Motion | --dur (120 ms), --ease | One duration, one curve. |
| Elevation | --shadow-pop | One soft shadow, for floating layers only. Panels get none. |