Get started
Get started
Design tokens
Semantic CSS variables power every component. Map these once in your app and stop hardcoding visual values.
Usage in Tailwind v4
Tokens are exposed via
@theme as utilities like bg-background, text-muted-foreground, and border-border. Prefer semantic names over raw hues.Snippet: root tokens
Minimal set to bootstrap a product theme.
Light + dark semantic pairs keep contrast stable.
bg
primary
muted
card
Color
- --background
- --foreground
- --card
- --primary
- --muted
- --border
- --destructive
- --success
- --warning
Radius
- --radius-xs
- --radius-sm
- --radius-md
- --radius-lg
- --radius-xl
- --radius-2xl
Motion
- --motion-micro
- --motion-quick
- --motion-fast
- --motion-medium
- --motion-slow
- --ease-smooth
Elevation
- --elevation-xs
- --elevation-sm
- --elevation-md
- --elevation-lg