What is design token?

Basically, design tokens are atoms of the design system's visual styles. Think of them as values stored as predefined styles for predefined purposes, elements, and components.

Token sets

There are base and semantic token sets in our design system.

Base tokens represent the theme's global palette. Changing their values will affect semantic tokens. Therefore, by changing the palette, you can create new themes. For creating new palette and meet accessibility guidelines, use tools like Huetone.

Semantic (alias) tokens relate to a specific component or context of usage. They refer to the base tokens.

Semantic tokens include tokens for:

• colors
• typography
• sizing
• spacings
• box-shadows
• border-radius

Token naming structure

Token name is the same in both Figma and code, except for the theme/project prefix which is added to the token in the code.

For example, compare token for primary neutral background:

• in Figma: bg/primary/neutral
• in code: --intergalactic-bg-primary-neutral

TIP

The token name doesn't have to contain all the elements of the naming structure. The naming structure creates a system so you can name the new token, and it will fit into the design system.

Tokens usage

Semantic tokens are context-specific, so they're used according to the intentions implied by their names:

• bg token group for backgrounds
• text token group for text color
• border token group for strokes and borders
• overlay token group for overlays and faders
• control token group for all button-like controls
• icon token group for icons
• chart token group for chart components and grids
• date-picker token group for DatePicker
• table token group for tables
• tag token group for tags
• etc.

When building something custom, we recommend using semantic tokens whenever possible. As a fallback, use base tokens. And if you feel like some semantic token is missing, let us know.