Skip to main content


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.

Token types


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

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.

Usage guidelines

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.


Global token

1: Type of token

2: Color name

Alias token

1: Type of token

2: Context

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

2: Unit

Border radius

All radius tokens are global tokens

1: Type of radius

2: Value name (optional)


All effect tokens are global tokens

Dop shadow

1: Index (bigger number, higher index)