Themes · 13 presets
Find the visual language for your product.
Two tiers of OKLCH tokens: raw scales, and the semantic aliases components actually use. A preset reassigns a handful of them; every component follows, and no component file changes.
default
data-theme="default"
ocean
data-theme="ocean"
emerald
data-theme="emerald"
violet
data-theme="violet"
rose
data-theme="rose"
amber
data-theme="amber"
monochrome
data-theme="monochrome"
candy
data-theme="candy"
indigo
data-theme="indigo"
blue
data-theme="blue"
red
data-theme="red"
orange
data-theme="orange"
green
data-theme="green"
- primary
- secondary
- muted
- accent
- destructive
- success
- warning
- info
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.
:root { --primary: oklch(0.54 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);}In Figma
Every preset is 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, light and dark — that mirror how the CSS composes. A preset built in the Theme Studio downloads the same file.