UI Collective on YouTube · Open on YouTube
Systems and research depth · Proficient · Lesson 73 of 99 · 50 min video, then about 2 hours of practice
Token architecture: primitives, semantics, components and modes
After this you can design a tiered token architecture that supports theming and multiple brands, and explain each tier to an engineer.
Why it matters
At scale, tokens are the contract between design and code, and their structure decides how expensive every future change is. The standard architecture has primitive tokens (raw values), semantic tokens (meaning: 'surface', 'danger', 'text-subtle'), and sometimes component tokens, with modes for themes, brands or density. Focus on naming, on which tier a design decision belongs in, and on how tokens flow into code. Trap: over-engineering (four tiers and a thousand tokens for a product with one theme). The right architecture is the smallest one that absorbs the changes you can foresee.
How to use this resource
A fifty-minute, current walkthrough of token tiers, naming and modes, built in Figma variables. The most complete free treatment on the current tool.