Token tiers
- Primitives — raw values (specific hex colors, pixel sizes). Not intended for direct use in product code.
- Semantic tokens — values with purpose (e.g.
background.color.primary). Use these in most cases. - Component tokens — values scoped to a single component (e.g.
button.primary.background.color). Use when customizing one component.
Token categories
The table below is organized into the following categories:- Color — Background, Foreground, Border, Status, Focus, Overlay, Shadow
- Typography
- Spacing (size)
- Radius
- Duration / Transition
- Breakpoint
- Opacity
- Gradient