Design Tokens: The Foundation of Scalable Design Systems

Design systems fail in one of two ways: they're too rigid (no flexibility for product teams) or too loose (every team does their own thing anyway). Design tokens are the architectural pattern that threads this needle — a single source of truth for design decisions that scales across platforms, themes, and teams.

What Design Tokens Actually Are

Design tokens are name-value pairs that represent design decisions: colors, typography scales, spacing values, border radii, shadow depths, animation durations. The key insight is that naming matters as much as values. A token named `--color-brand-primary` is consumed correctly regardless of its value. A token named `--blue-500` bakes its value into its name, breaking when the brand color changes.

The Three-Tier Token Hierarchy

Mature design systems use three token tiers: Primitive tokens define the raw palette (`--color-indigo-600: #4f46e5`). Semantic tokens map primitives to roles (`--color-action-primary: var(--color-indigo-600)`). Component tokens scope semantic tokens to specific components (`--button-background: var(--color-action-primary)`). This hierarchy enables global theme changes (swap `--color-indigo-600`) that cascade through the entire system automatically.

Style Dictionary: Transforming Tokens to Platforms

Style Dictionary (by Amazon) transforms a JSON token definition into CSS custom properties, iOS Swift constants, Android XML values, JavaScript objects, and Sass variables in a single build step. Your design team edits token values in Figma (using the Tokens Studio plugin), exports JSON, and your CI pipeline transforms that JSON into platform-specific code. Design changes propagate to all platforms simultaneously.

W3C Design Token Spec: The Emerging Standard

The W3C Design Token Community Group is standardizing the token format. Major tools — Tokens Studio, Theo, and Style Dictionary — are aligning with the spec. Adopting the standard now avoids future migration pain. The spec defines composites (typography tokens that bundle font-size, line-height, and font-weight), references ($value: '{color.brand.primary}'), and type annotations for validation.