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.

It is a color style in Figma, extended to everything. You never fill a frame with a raw hex; you apply “Background / Primary”, and updating the style updates every screen that uses it. Tokens do the same job, except the named value also drives the React app, the iOS app, and anything else that ships.

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)