Token Architecture
Day 17 of 30 · The Playbook 2026 – Masterclass for Designers
Introduce token layers: base → semantic → component; multi-platform outputs.
Learning Goal
- Token layers: base (primitive), semantic, component.
- Naming: color.brand.primary, space.md, radius.sm.
- Export to web/ios/android (e.g., Style Dictionary).
- Document pipeline and bans (UI should not use base directly).
- Apply consistently across courses.
Why This Matters
- Tokens are the single source of truth.
- Cross-platform consistency.
- Fast change: one token update propagates.
Explanation
- Base: raw value (#FAB908, 8px).
- Semantic: role (color.semantic.success.bg).
- Component: usage (button.primary.bg).
- Pipeline: JSON → build → platform outputs.
Examples
Bad: Hard-coded hex in CSS.
Good: color.brand.primary token referenced everywhere.
Guided Exercise
- Write token naming schema (base/semantic/component).
- Create 10 sample tokens (color, space, radius, motion, z-index).
- Define the ban: UI uses semantic/component only.
Independent Exercise
Replace hard-coded values with tokens on one screen.
Self-Check
- Layers defined.
- Naming set.
- Base → semantic → component chain works.
Optional Deepening
- Style Dictionary: https://amzn.github.io/style-dictionary/#/