Design tokens are the named values that define Anvil’s visual language — colors, spacing, typography, and more. They create a shared vocabulary between design and code, so decisions made in Figma reflect accurately in production. Use this page to browse and reference available tokens by category.
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
Tokens
Last modified on April 21, 2026
