Today the product ships four competing design languages across the console, playbook, and content studio. This is the single source of truth that replaces them — one neutral-zinc palette, one type system, tokenized spacing and radii, and a shared component set that works identically in light and dark. Toggle the theme above; every value on this page adapts from the same tokens.
Four findings, each traced to real values in the codebase, each with the fix this standard applies.
Seven distinct hexes all claim to be “brand green,” scattered between the console, playbook, and studio stylesheets. Buttons, links, and status dots don’t match from screen to screen.
The same idea is named four different ways depending on the file.
Inter, Fraunces, JetBrains Mono, IBM Plex Sans/Serif/Mono and Barlow all load; sizes are hand-tuned per component.
Cards use 8, 10, 11, 12, 13, 14 and 16px radii within the same views; three separate radius token sets exist (--wf-r-*, --r-sm/md/lg, and raw literals). Padding is eyeballed everywhere.
Semantic, not literal. Every swatch below is var(--token) — toggle the theme and watch the same tokens remap. Components never reference a hex directly.
Two families do all the work. Inter for interface and prose; JetBrains Mono for data, IDs, labels and code. An 8-step scale replaces the ~20 ad-hoc sizes.
A 4px spacing base and a five-stop radius ramp. Padding, gaps and corners all snap to these — no more 11px-here, 13px-there.
One button, one badge, one card, one table — built only from the tokens above. These replace the divergent versions currently living in each stylesheet.
The Playbook page today forks its own --d-*/--l-* palettes, a bespoke green, and its own radius scale. Here it is rebuilt from the shared tokens only — the exact same section header, run rail, key-value table and stat cards, now consistent with every other surface and theme-correct in one toggle.