Design Tokens
Definition
Named, platform-agnostic values that encode design decisions — colors, spacing, typography, shadows, motion — as structured data instead of hardcoded values. The W3C Design Tokens Community Group published the first stable specification (2025.10) on October 28, 2025, defining a vendor-neutral JSON format with $value, $type, $description properties. Design tokens follow a three-layer hierarchy: Option Tokens (WHAT — available palette), Decision Tokens (HOW — contextual application, e.g., 'grey-900 is default text color'), and Component Tokens (WHERE — specific UI mappings, e.g., button.primary.background). Tokens are the atomic unit of design system consistency.
Builder Context
Design tokens are the single most effective tool for preventing design drift in agentic builds. The critical distinction: primitive tokens (blue-500) undermine AI effectiveness, while semantic tokens (color-button-background-brand) enable it. This 'semantic token gap' is the largest failure point in AI-generated UIs — not tool limitations but upstream design system structure. For AI coding: store tokens in JSON (W3C format), transform with Style Dictionary, consume as CSS variables. The token file becomes the contract your agent reads. If a value isn't in the token file, it doesn't ship. Tools: Style Dictionary (transform), Tokens Studio (Figma sync), Supernova (management platform).