Skip to main content

Tokens

Last updated on

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

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

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?

Consistency

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.

Scalability

Design tokens are reusable and not hard-coding, they help scale our products by separating design decisions from specific platforms & technologies.

Flexibility

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

Specs

General

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.

Colors

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..

Font

All font tokens are global tokens

1: Font property

2: Value name

Space

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)

Effects

All effect tokens are global tokens

Dop shadow

1: Index (bigger number, higher index)