Skip to main content
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.

​
Tokens

Last modified on October 27, 2026