Design Tokens

The smallest units of a design system. Named values that store visual design decisions like colors, spacing, typography, and shadows.

All Dictionary

What they are

Design tokens are the smallest units of a design system. They store visual design decisions (colors, spacing, typography, shadows) as named values that can be shared between design tools and code.

Examples

color.background.primary → #FFFFFF
color.text.body → #3F3F3A
spacing.md → 16px
font.size.body → 14px
shadow.card → 0 1px 3px rgba(0,0,0,0.1)

Why they matter

Tokens create a single source of truth. Change color.background.primary once and it updates everywhere: Figma, React, iOS, Android. Without tokens, you have hardcoded hex values scattered across hundreds of files.

The three layers

  1. Primitive tokens: Raw values (blue-500 = #3B82F6)
  2. Semantic tokens: Named by purpose (color.background.primary = blue-500)
  3. Component tokens: Scoped to a component (button.background.default = color.background.primary)