Playground
Move a lever — the whole site re-themes, live
These controls override --primitive-* tokens on the page root, exactly the way a consumer of the package would in their own CSS. Because every semantic token chains to a primitive, one override cascades through buttons, focus rings, status colours, and both themes — try the light/dark toggle in the header while a brand colour is applied. Leaving the page puts everything back.
Theme preset
Start from a saved look — any lever you touch turns it back into Custom.
Product name
Renames the preview's title as you type.
Action colour
Rebuilds the whole teal ramp around your pick — hover and pressed states included.
Neutral tint
Washes the neutral scale — page, containers, text — toward a seed colour.
Corner radius
Scales the radius scale; pills can become rectangles.
Typeface
One token drives the entire type scale. Fonts load from Google Fonts on demand.
Your product
Focus me — the active border follows the brand colour.
Weekly views
Bars follow the action colour
Growth
Both series derive from the action colour
Copy the CSS
Paste this after importing @robr0/design-system/tokens/tokens.css and your app matches this preview — both themes included. The install steps live on Get started.
/* Everything is at its shipped default — move a lever to generate CSS. */