Should tokens change across different screens?
My answer is: “No.”
I have always been a fan of the Single-responsibility principle, the computer programming principle that states:
”A module should be responsible to one, and only one, actor”
In our case, the “module” is a token name, and the “actor” is his value.
This means a design token should have a single, unchanging value representing a specific design attribute, such as a color, typography setting, or spacing measurement.
How else could we obtain a single source of truth?
How to approach Responsive Design
While the principle of "one token, one value" can offer many advantages, it's essential to consider how this approach aligns with the challenges of responsive design:
1. Establish a Hierarchy
To maintain the principle of "one value per token, consider creating a hierarchical system of design tokens.
This objective can be achieved by organizing tokens into groups and assigning each group a degree of responsibility.
The hypothetical groups are:
a collection of core (or global) tokens, the raw values that should never be directly assigned to elements or components, and never change;
a collection of semantic (or alias) tokens, that should communicate the purpose in their names; as it’s unique, like the core tokens these ones should be the same;
a collection of component (or specific) tokens, as their name suggests, these tokens are created to meet the very precise needs of each component; unlike the other groups, this is the level at which you can act in a responsive way, reassigning values depending on how the design changes in responsive mode.
2- Device-Agnostic Values
Ensure that the values assigned to the core and semantic tokens are device-agnostic.
For instance, a font size token might represent a size that works well on all devices, avoiding the need for device-specific adjustments.
Similarly, you can establish a standard spacing token with a device-agnostic value. Changing the internal padding of an element should be managed at a specific level.
Take a look at this code:
.button {
padding: --var(spacing-sm);
}
@media screen and (min-width: 768px) {
.button {
padding: --var(spacing-md);
}
}
Or this:
.button {
--button-spacing-inset: --var(spacing-sm);
}
@media screen and (min-width: 768px) {
.button {
--button-spacing-inset: --var(spacing-md);
}
}
In the first example, the internal padding changes by using the two core tokens —spacing-sm
and —spacing-md
within a media query.
In the second, the value of the component token —button-spacing-inset
has been reassigned.
Whatever technical solution you decide to adopt, the important thing is that the basic values to be used everywhere in the interface do not change.
In conclusion
"One token, one value" is a powerful guiding principle in the world of design tokens, emphasizing consistency, clarity, and maintainability.
While responsive design introduces challenges related to varying screen sizes and orientations, adhering to this principle can help you strike a balance between consistency and adaptability.
By carefully managing your design tokens and adopting a device-agnostic approach, you can create a responsive design system that embodies the essence of "one token, one value" while delivering a seamless user experience across all devices.