Tokens
We use design tokens to create a consistent and scalable foundation for our design system. Design tokens are named entities that store visual design attributes such as colors, typography, spacing, and more. By referencing tokens instead of hard-coded values, we ensure that our products remain visually coherent and easy to update across platforms and technologies.
The three layers of design tokens
When we talk about tokens, we refer to three distinct layers that structure our design language at Shoptet:
-
Scales Layer
The foundational layer consists of raw values organized into scales, such as color palettes, spacing steps, font sizes, and border radii. These scales provide the basic building blocks for all visual decisions. -
Design Language Layer
The second layer maps the scales to semantic roles, states, attention and relationships in the user interface. For example, assigning a specific color from the color scale as a "controls intent" color or a spacing step as "siblings gap". This layer bridges raw values and their intended meaning in the interface while still being abstract. -
Components Layer
The third layer maps exceptional cases, tokens that are unique, tokens that are never used more than once across the product scoped to properties of a specific UI component.
Prefer to use second-layer tokens from the design language layer at all times unless you have a very specific use case that cannot be achieved through second-layer tokens.
Color Tokens
Color tokens define unified structure of backgrounds, text, icons used throughout the interface.
Typography Tokens
Typography tokens establish a consistent typographic system, including font families, sizes, weights, line heights, and letter spacing.
Spacing Tokens
Spacing tokens define consistent spacing values used for margins, paddings, gaps, and other layout-related properties.