CSS Token Themes
Swap palettes with a single CSS import. Each theme re-colors the primary and secondary accents and re-tints the neutral chassis — so surfaces, text and borders share the accent's temperature instead of staying cool grey.
Cool blue-teal palette with deeper saturation. Chassis tuned cool to match.
Buttons
Badges
Form Elements
Usage
Create Your Own Theme
Create a CSS file with a @theme block that
overrides three ramps: primary and secondary (the accents) plus --color-neutral-* (the chassis).
Surfaces, text and borders all derive from the neutral ramp, so re-tinting it to your accent's temperature
keeps the whole UI coherent — without it, a warm brand color ends up on cold grey surfaces. All
components pick up the new palette through the semantic token layer.
Custom theme file
Use the Theme Builder to interactively generate OKLCH values for your brand color.