Design tokens abstract design decisions—colors, spacing, typography—into platform-agnostic data. This abstraction enables consistent styling across web, iOS, Android, and design tools from a single source of truth. Changes propagate automatically, ensuring design consistency at scale.
Token Architecture
Effective token systems use layers of abstraction. Primitive tokens define raw values—specific hex colors, pixel values. Semantic tokens reference primitives with meaningful names—primary-color, spacing-medium. Component tokens combine semantic tokens for specific UI elements.
- Define primitives as the foundational layer of raw design values
- Create semantic tokens mapping primitives to design intent
- Use component tokens for specific UI element styling
- Support theming by swapping semantic token values
- Generate platform-specific outputs from single token definitions
Tooling and Workflow
Style Dictionary transforms token definitions into platform outputs—CSS custom properties, iOS Swift code, Android XML. Figma plugins sync tokens with design files. Automated pipelines ensure token changes deploy across all platforms consistently.