Amanoba Logo
Back to Course

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

  1. Write token naming schema (base/semantic/component).
  2. Create 10 sample tokens (color, space, radius, motion, z-index).
  3. 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