Tokens

Token hierarchy

In Quantum Design, tokens are organized into three levels or layers:

• Global Tokens

• System or Alias Tokens

• Component Tokens

This structure, represented as a pyramid, establishes that tokens from a lower level are referenced by the levels above. This approach creates a solid symmetry that ensures the consistency and scalability of the entire design system. Proper management of this hierarchy enables the construction of consistent and flexible user interfaces (UI), simplifying design evolution and maintenance as the product grows.

Global Tokens

This level serves as the foundation of the system, housing all element and value options available. These tokens represent the most fundamental configurations that can be used throughout the design system.

System or Alias Tokens

At this level, a specific collection of tokens is organized and selected from the options defined in the Global Tokens. Each token in this layer is given a unique name that identifies it and integrates it into the design system, ensuring reuse and consistency.

Components Tokens

This level consists of tokens tailored for each component, whether it’s an atom, molecule, or organism. Component Tokens allow for applying specific styles while ensuring that each element maintains a logical connection with the higher levels of the hierarchy.

---

Naming Tokens

Each token must have a name and a value, which vary depending on the token layer

Global Tokens

In the Global Tokens layer, names are derived from a generic source, and the value corresponds exactly to the specified measurement. The name can be anything, but the goal is always to base it on universal rules to ensure the standardization of the system.

System Tokens

In the System Tokens layer, the name must be unique to identify and integrate the token into the design system, making it easier to reuse and maintain consistency. The value should reference a token from the Global layer.

Component Tokens

Component Tokens have a unique naming requirement, as explained below. Nonetheless, their structure remains the same: the name must be unique and irreplaceable, as it references a specific component. The value must come from a token in the System layer.

Rule for naming Component Tokens

To maintain consistency, having a clear naming system is crucial. In Quantum, we follow this rule to name component tokens: