Reading progress of “Design token architecture”: 0%
Advanced · The advanced practice
Design token architecture
A token is a decision with a name. The architecture is deciding what deserves a name: intent over appearance, scale over one-offs, and the audit that proves no hex survived the review.
Advanced1 min read (computed · recorded 4)updated 2026-09-14design tokensarchitecturethemingadvanced
by Motif Editors
revised 2026-09-14 — First publication in the bank completeness pass.
— Name tokens for intent, not appearance: --surface-2 remaps across themes, --gray-200 is a colour with amnesia.
— A scale is a language: spacing, type and radius steps let a page compose instead of improvise.
— The theme toggle is the proof — if flipping light to dark changes every surface, the tokens are doing their job.
Intent over appearance
A token is a decision with a name, and the name decides whether the decision survives. `--surface-2` is an intent: it remaps when the theme changes, and every component that uses it follows for free. `--gray-200` is a colour with amnesia — it looks specific and means nothing when the brand shifts.
The toggle is the proof
A design-system showcase that flips light to dark and remaps the whole card in one click is not a demo, it is the audit: if every surface follows the tokens, the architecture works. The same habit applies to scales — spacing, type and radius steps compose pages instead of improvising them.