Skip to main content

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:

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

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

  3. Components Layer
    The top layer applies the design language to specific UI components. Here, tokens define the appearance and behavior of elements like buttons, cards, or inputs, ensuring consistency and clarity across the product. By structuring tokens in these layers, we enable extra flexibility, maintainability, and clear communication between design and development.

When to use third-layer tokens?

Unless you are not facing user-customizable components or themes, always prefer using second-layer tokens from the design language layer. These tokens provide sufficient abstraction to ensure consistency across the product while still being flexible enough to adapt to various contexts and use cases.

Color Tokens

Color tokens define unified structure of backgrounds, text, icons used throughout the interface.

Color Tokens ->

Typography Tokens

Typography tokens establish a consistent typographic system, including font families, sizes, weights, line heights, and letter spacing.

Typography Tokens ->

Spacing Tokens

Spacing tokens define consistent spacing values used for margins, paddings, gaps, and other layout-related properties.

Spacing Tokens ->