Design tokens
Platform-agnostic named variables that encode design decisions (color, typography, spacing, motion, radius) in a DTCG JSON format transformable to CSS, Sass, iOS Swift, Android XML, Flutter Dart, Tailwind. Design tokens are the formal contract between design, code, and AI agents.
Strengths
- Formal multi-platform contract, one DTCG JSON transforms into CSS / iOS / Android / Flutter
- Readable by AI agents when exposed via MCP or referenced in CLAUDE.md, drastically reduces fabrication of invented colors/spacings
- Three-tier architecture (primitives → semantics → components) that scales across 4-6 sibling DS with DTCG mode×brand×theme resolvers
Limitations
- Naming is the #1 pain point reported by teams, 'global', 'semantic', 'primitive', 'alias' overlap and confuse people
- Without DTCG `$description` field, LLMs misapply tokens (e.g. `color-error` used as `accent`)
Best for
- Multi-brand / multi-device design system that must avoid drift across teams and AI agents
- Teams exposing their DS to agents (Claude Code, Cursor) via MCP or DESIGN.md