Token Naming and Tiered Token Architecture
Structure your design tokens into a scalable tiered architecture - primitive, semantic, and component tokens - with naming that survives change.
Why Token Architecture Matters
A flat list of color tokens works at first, then collapses as the system grows. A tiered token architecture keeps tokens scalable and meaningful.
This lesson builds on implementing tokens by structuring and naming them well.
Tier 1: Primitive Tokens
Primitive (or global) tokens are raw values: blue-500 = #3b82f6, space-4 = 16px.
They are the full palette of available values, named by what they are, with no opinion about where they are used.
All lessons in this course
- What Are Design Tokens?
- Implementing Design Tokens
- Automating Design-to-Code Workflows
- Token Naming and Tiered Token Architecture