What Are Design Tokens and Why They Matter

Design tokens are the atomic decisions of a design system expressed as named, reusable values. Instead of hardcoding #3b82f6 in a stylesheet, you define color-primary-500: #3b82f6 and reference that name everywhere. The name carries meaning; the value can change without updating every reference.

Tokens span every visual property: color tokens (color-primary-500: #3b82f6), spacing tokens (spacing-4: 16px), typography tokens (font-size-lg: 18px, font-weight-bold: 700), border radius tokens (radius-md: 8px), shadow tokens, and animation duration tokens. Together they encode the complete visual language.

Tokens create a single source of truth shared between design and engineering. Designers define the values in Figma, engineers consume them in code. When the brand color changes, you update one token value and every component using that token automatically reflects the change — no grep-and-replace across thousands of files.

Without tokens, color and spacing values are hardcoded across stylesheets, component files, and utility classes. A blue color might appear as #3b82f6, rgb(59, 130, 246), and blue-500 in different files. Changing the brand color requires finding and replacing every instance, with high risk of missing some.

Design tokens are the foundation of multi-theme systems. For dark mode, semantic tokens like color-background and color-text point to different primitive values depending on the active theme. You change one mapping, not every component. Light and dark themes share component code but differ only in token values.

For a SaaS platform serving multiple brands, tokens enable brand customization without code duplication. Brand A uses blue as primary, Brand B uses green — only their semantic token mappings differ. The button component code is identical; it reads color-action-primary which resolves to a different color per brand.

Tokens are organized in tiers. Primitive tokens are raw values: color-blue-500: #3b82f6. Semantic tokens express meaning: color-action-primary: {color-blue-500}. Component tokens are the most specific: button-primary-background: {color-action-primary}. This hierarchy separates the "what" from the "where it is used."

Semantic tokens are the key to multi-theme support. In the light theme, color-background: {color-white}. In the dark theme, color-background: {color-gray-900}. Components reference color-background, not a specific color. Changing the theme swaps the semantic token mappings — components need no changes.

Figma Variables (introduced 2023) are design tokens inside Figma. Designers define the same token hierarchy in Figma as engineers implement in code. Tools like Tokens Studio for Figma or the official Figma Tokens plugin export Figma variables to JSON, which Style Dictionary then compiles into CSS variables or JS objects.

The W3C Design Tokens Community Group is developing a standard JSON format for design tokens. The goal is interoperability: a token file that works with any design tool (Figma, Sketch) and any build tool (Style Dictionary, Theo, Panda CSS). Adopting the spec format future-proofs your token system.

Design tokens require governance decisions: who can add new tokens (design, engineering, or both), how tokens are versioned, how deprecated tokens are retired, and how token changes are communicated to consuming teams. Without governance, token systems drift — new hardcoded values appear alongside the token system, defeating its purpose.

In the design token tier hierarchy, what do semantic tokens represent?

Design tokens are named atomic values (colors, spacing, typography) that form the vocabulary of a design system. They create a single source of truth between design and code. The three-tier hierarchy — primitive (raw values), semantic (meaning), component (specific usage) — enables multi-theme and multi-brand support. Figma Variables and the W3C Design Tokens spec are driving design-engineering synchronization. Token governance ensures the system stays consistent over time.