Themes

Build your own preset

Pick a colour and be told whether text can be read on it — checked with the same conversion that gates CI.

Tokens come in two tiers. Raw scales — a cool-tinted OKLCH neutral ramp, a radius ladder, a 15px-base type scale — and semantic aliases on top of them. Components reference only the semantic layer, so re-skinning the system touches no component file.

Presets

Pick one. This changes the whole site, not a preview pane.

Create project

Project name

DefaultDeployedFailed

Semantic tokens

primary

secondary

muted

accent

destructive

success

warning

info

One knob for every corner

Radius tokens are all multiples of --radius-scale, so a single custom property re-proportions the whole system. Drag it and watch the cards above.

Radius scale1.00

Your own theme

init writes the tokens into your stylesheet, so they are yours to edit. A theme is a handful of semantic values — no build step, no configuration file.

app/globals.css

:root {
  --primary: oklch(0.545 0.196 275);
  --primary-foreground: oklch(0.985 0.002 265);
  --background: oklch(1 0 0);
  --foreground: oklch(0.212 0.011 265);
  --radius-scale: 1;
}

.dark {
  --primary: oklch(0.645 0.17 275);
  --background: oklch(0.145 0.01 265);
}

Colours are OKLCH because its lightness is perceptually even, which makes ramps predictable to generate and contrast tractable to audit. The monochrome preset exists partly as a standing test: if a component becomes unusable without colour, colour was carrying meaning it should not have been.

In Figma

Every preset is available as a W3C design-tokens file, generated at build time from the same CSS the components use. Import one with Tokens Studio for Figma and you get three sets — core for the raw scale, light and dark for the semantic colours, resolved to sRGB hex — that mirror exactly how the CSS composes. A preset built in the Theme Studio downloads the same file.