Let's talk about design tokens and layers.
Design tokens are design decisions as data. They serve as a single source of truth for design and engineering. Stored as name-value pairs, design tokens can represent colours, font families and sizes, units of space, and more.
To ensure scalability, tokens are typically organized into layers—each adding a different level of meaning and specificity. Some commonly used token layers are:
1. Primitive tokens
These are the foundational building blocks of a design system, like a single font size or weight, a particular tint or shade, etc.
2. Semantic tokens
Semantic tokens add meaning by communicating their role within the design system: primary/secondary colors, various heading level sizes, etc.
3. Component tokens
These tokens belong to individual components, like primary button background color, font size/weight, border radius, etc.
