Tokens
Last updated
Last updated
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.
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.
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.
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.
Each token must have a name and a value, which vary depending on the token layer
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.
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 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.
To maintain consistency, having a clear naming system is crucial. In Quantum, we follow this rule to name component tokens:
