Every value Roadie ships, as CSS variables and Tailwind classes. Learn the five layers, then search for the one you need.
Each layer reads the one above it. Change the intent and every layer follows, because intent only sets variables and the rest inherit them.
Fourteen OKLCH steps per palette, from the lightest surface to the strongest text. Dark mode swaps the values, never the step numbers.
--color-danger-0 … 13Color scalesPicks the scale. It sets variables and nothing else, and children inherit them.
intent-dangerIntentsOne property each, named by role rather than step: bg-*, text-* and border-*.
Payment failed
Check your card and try again.
bg-subtle text-normal border-subtleIntentsBackground, text, border and shadow in one class, for anything that needs to stand out by a set amount.
emphasis-strongEmphasis and statesHover, press, focus ring and disabled, coloured by the same intent.
is-interactiveEmphasis and statesPresets carry hover, press and dark mode with them. Raw steps carry nothing.
<div className='intent-danger emphasis-subtle'>
Do
Set the intent, then pick an emphasis.
<div className='bg-danger-3 text-danger-11'>
Don’t
Hand-pick scale steps for a surface.
Components inherit the intent around them, so the role resolves to the right scale.
color: var(--intent-text-subtle);
Do
Use an --intent-* role in custom CSS.
color: var(--color-neutral-11);
Don’t
Pin a --color-* step inside a component.
The .dark class on <html> swaps every scale's values, so no dark: variants are needed. The accent scale follows --accent-hue and --accent-chroma, which ThemeProvider sets at runtime. Theming covers both.