01 / 20Design systems & a11y
Token Studio
A live design-token editor that themes a whole component kit and audits its own contrast.
- Design tokens
- CSS custom properties
- OKLCH color
- WCAG contrast
- Theming
stirling.lab/token-studio Live demo
Loading demo…
What to notice
- Primitive → semantic → component token layers, edited live
- Generated OKLCH color ramps with perceptually even steps
- Every text/background pair is contrast-checked against WCAG 2.2 in real time
- Exports tokens as CSS variables, JSON (DTCG format) and Tailwind theme
How it's built
- Tokens are a typed tree: components read component tokens, which point at semantic tokens, so no component hard-codes a color.
- Contrast uses the WCAG relative-luminance formula, recomputed only for changed pairs.
Hand-built in React 19 + TypeScript, with no UI or chart libraries.