Design Decisions Systematised
From visual hierarchy to design system abstractions
As we face the challenge of maintaining consistency and good UI standards at scale through our Quartz design system, we had to allow design options while guaranteeing the visual hierarchy between all elements of the system. We also wanted to reduce the learning curve and reduce the reliability of documentation as much as possible. This is how we translated global visual patterns into design abstractions.
Using semantic design tokens
Design tokens are the keystone of a design system as they represent the single source of truth on which the design system is built.
Tokens are names that are given instead of relying on bear values. For example, we don’t use a HEX color value, we call it Primary Brand Color.
This provides a common layer in the internal design system structure that allows for easy replacement of one value by another and pushes the change through the system without breaking its structure.
In their primitive form, semantic design tokens are the inventory of all the possible style options in the design system.
Semantic is the meaning or concept attached to something. In the context of a design system, it is the name given to a token that signifies how the token is used. For example, “Ultra Green” replaces a hex color value, and “h1, h2, h3” combines font attributes like style, size, and line height under a more global concept.
While the word “semantic” expresses the intention to materialize design decisions tangibly, the primal level of semantic design token remains vague in most design systems.
When building an application screen, designers have to remember or go back to guidelines to know where to use the “Ultra Green” color or the “h4” style.
From working on hundreds of screens shared by the design community we were able to define a list of our initial design token that covers 99% of the layouts and possibilities.
Finding design token patterns
Because we didn’t want our users to rely on lengthy guidelines to know where to use what, we ran extensive testing and explorations to figure out a solution to further improve the affordance of our design token. Continuing our exploration from our pool of screens, we extracted common patterns from these tokens.
As a result, we ended up with three levels of design tokens.
On top of the initial layer which remains an inventory of colors, sizes, fonts, radii, borders, and elevations, that became private, we introduced two additional layers. A component layer with attributes specific to component groups and a semantic one that supports design decisions.
First, this allowed us to reduce the number of options to choose from as we defined transversal abstractions that can be combined and span across different elements of the design system.
Then, we could name these tokens specifically to become answers to UX questions: How important is this element? What is the status of this information? Where is this title in the page architecture? Are these content blocks related or not?
Our Abstractions
Here is how we rationalized different types of style hierarchies to simple abstractions.
Separate component sizing hierarchy becomes “Sizes”.
This allows a unified sizing scale across components.
Component states and interactions become “Interactivity”.
This guarantees the same behavior across all interactive elements.
Elevation and background hierarchy become “Layers”
Elevations and background colors define the relative depth in the parts of screen containers.
Spacing hierarchy becomes “Relationship”.
The spacing is defined by the relative relation between elements of the screen.
Component hierarchy becomes “Importance”.
The relative hierarchy between instances of the same element becomes transversal.
Radius and padding hierarchy becomes “Nesting”.
This supports the hierarchy between all containers and components of the screen.
Heading hierarchy becomes “Titles”.
With predefined title blocks adapted to the different types of containers.
Color hierarchy becomes “Feedback”.
Each color conveys a specific meaning and is associated with a status icon.
Brand elements become “Signature”.
Signature elements refer to the high-level transversal visual elements that are specific to the brand.
Common semantics
In addition, extensive work has been done to align the name of all of these design tokens also be understood by developers thus further improving communication between developers and designers to speed up handoff.
The result is a system that integrates all the variables necessary to accommodate a multitude of screen layouts while keeping it simple and clear with global abstractions that support UX decisions. Not relying on extensive guidelines frees designers time to focus on real design challenges that will bring value to their users and the company.
