Theme Playground
Tune the live theme and watch every token respond. Adjust the primary font, corner style, motion, and any color, then read the result across type, components, and surfaces on the right. Changes are previewed locally only — they never save to the CMS.
In context
Build once, ship to every brand.
A single component library, re-themed through tokens. This panel renders with the settings on the left, so any change you make appears here first.
Composable
Mix blocks into any layout without touching the component code.
Learn more →Token-driven
Color, type, shape, and motion all flow from one variable set.
Learn more →Accessible
Contrast and focus states hold up in both light and dark modes.
Learn more →Color tokens
Brand & accent (constant across modes)
Brand
oklch(55% 0.18 195)
Brand hover
oklch(38% 0.16 195)
Accent
oklch(82% 0.19 145)
Accent hover
oklch(68% 0.17 145)
Grounds & text (dark mode)
Canvas
oklch(12% 0.012 195)
Surface
oklch(20% 0.022 195)
Foreground
oklch(97% 0.005 195)
Foreground muted
oklch(68% 0.06 195)
Typography
Display · 800
Adapts to any brand.
Headline · 700
Precision at every level.
Title · 600 · Body · 400
A considered type system
The quick brown fox jumps over the lazy dog. Body copy holds a comfortable measure and the weight ladder keeps a clear step between every level of the hierarchy.
Label · 600 · uppercase
300 Light
400 Regular
500 Medium
600 SemiBold
700 Bold
800 ExtraBold
Header effects
Aa
Gradient
Aa
3D Depth
Aa
Neon
Aa
Glow
Accent typography.
Syne — fixed accent font for select areas; not affected by the primary-font control.
Form elements
Spacing scale
Motion
Hover a tile — the transition duration reads --ot-dur-base, which scales with Motion Intensity. Your OS “reduce motion” setting always wins.