Design tokens are the single source of truth for visual design values ÔÇö colours, spacing, typography, shadows. They are named variables that exist in both your design tool and your codebase.
The Problem They Solve
Without tokens, colour values are maintained in two places: design files and CSS. A brand colour that lives in both places will eventually drift. Token systems prevent this.
Tools and Workflow
Figma Variables plus Style Dictionary is currently the most common production pipeline. Variables store token values in Figma; Style Dictionary transforms them into CSS custom properties and platform-specific formats.
