What are design tokens?
Design tokens are the shared language between designers and developers. All the visual styles that are being used across all platforms or products such as colors, font, spacing etc... are organized into a system of small pieces of data called design tokens. They're not only represent all the visual decisions but also reflect their relationships.
Global tokens are the first layer of the design tokens, they represent all the fundamental visual decisions in our design system, including colors, typography, spacing, effects, etc.
Alias tokens communicate the contexts, usages or purposes when using them. Alias tokens are inherited from Global tokens.
Component specific tokens are the values of elements that comprise a component. Component specific tokens are inherited from Alias tokens whenever possible, but not a must.
Why using tokens?
Design tokens help make the design system become the single source of truth across all products or all platforms. Moreover, design tokens make maintenance and update easier.
Design tokens are reusable and not hard-coding, they help scale our products by separating design decisions from specific platforms & technologies.
Tokens can point to different values based on different contexts such as theme, brand, level of contrast, etc... So they help make our design system flexible.
Don't use component specific tokens interchangeably with other components
Use alias tokens with their associated contexts whenever possible.
Use global tokens when there're no alias tokens available
1: Visual elements. The design building blocks that the token regulates, e.g., color, space, font.
2: Token's description. Token's description is various, depending on type of token.
1: Type of token
2: Color name
1: Type of token
Component specific token
1: Component name
2: Component's properties. Component's properties include: type, hierarchy, attributes, states, etc..
All font tokens are global tokens
1: Font property
2: Value name
All space tokens are global tokens
1: Type of spacing
All radius tokens are global tokens
1: Type of radius
2: Value name (optional)
All effect tokens are global tokens
1: Index (bigger number, higher index)