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, surfaces, and both themes — try the light/dark toggle in the header while a brand colour is applied. Leaving the page puts everything back.
Actions
Every action component draws from the brand ramp your colour pick rebuilds — solid fills, hover and pressed states, and focus rings all move together. The radius lever decides whether these stay pills.
Forms & inputs
Focused borders, selected states, and checked fills all follow the action colour — focus any field to see it. The radius lever reshapes every input at once.
Focus me — the active border follows the brand colour.
Navigation
Active indicators, current-page markers, and hover states all derive from the same action tokens as the buttons above — one colour pick keeps wayfinding consistent.
Data display
Surfaces, borders, and text all sit on the neutral scale — switch on the neutral tint to watch every container in this section wash toward your seed colour.
| Component | Category | Status |
|---|---|---|
Button | Actions | Stable |
Combobox | Forms | Stable |
Carousel | Data display | Beta |
Charts
Both charts colour their series from the action colour, so data visualisation stays on brand as you re-theme.
Weekly views
Bars follow the action colour
Growth
Both series derive from the action colour
Overlays
Panels, menus, and tips share the container surfaces and radius scale — open any of these while a tint or radius change is active and the overlay matches the page beneath it.
Feedback & status
These are the one deliberate exception: status colours are a separate token set that keeps its meaning regardless of branding, so the brand lever doesn't move them. Info stays blue, errors stay red — while radius, tint, and typeface changes still apply.
Status colours are stable by design
Re-brand all you like — warnings stay orange so users always recognise them.
Copy the CSS
Paste this after importing @robr0/design-system/tokens/tokens.css and your app matches this page — both themes included. The install steps live on Get started.
/* Everything is at its shipped default — move a lever to generate CSS. */