Hands-on Design Tokens
Learn by Making with Toolabs DSM
“Design tokens are a limited set of discrete options, just like a scale of musical notes is drawn from the spectrum of all possible frequencies. Or like the presets on a car radio — not every option, just a specific selection.”
Design Tokens are atomic, reusable building blocks of a design system, such as colors, typographic elements, motion, and even sounds and microcopy.
In design systems, tokens are used in place of hard-coded values of visual primitives to ensure flexibility and cohesiveness across all products.
With Toolabs Design System Manager, all token types can be visually managed from a single panel where you can define, edit and organize them with visual editors.
Naming Tokens
Every token must have a name and the name must be unique for that token type. That means, there can be a color token named Primary and a shadow token Primary but DSM does not allow to have one more color or shadow token with the name Primary.
Grouping Tokens
Colors
“Every part of the interface in any possible state (hover, disabled, etc.) is mapped to one of the tints and shades defined in Spectrum. Constraining the interface to a set number of colors ensures a high level of consistency between products while providing flexibility and context for use of color. It also ensures accessible contrast when colors are used correctly.”
— Spectrum, Adobe’s Design System
Color tokens can be solid or gradient fills.
You can also define tinted and shaded variants of solid filled tokens. Updating the main color will automatically recalculate and update the tint and shade variants.
Suggested further reading:
Modular Scales
“A modular scale, like a musical scale, is a prearranged set of harmonious proportions.”
— Robert Bringhurst, The Elements of Typographic Style
Toolabs DSM lets you set up your text, spacing, and animation duration tokens based on modular scales, which generates structured and harmonious effects.
To create modular scales, you need a base value and a ratio. Then, each time you multiply or divide the base value with the power of ratio, you obtain a new value in the scale which is in resonance with the rest of the values in the scale.
You can define the base value and the scale for text, spacing, and duration tokens on the DSM tokens panel. Changing either the base value or the scale ratio will re-calculate the values of the font size, spacing, and duration patterns in this token set.
Then, for each token, you can set which value from the scale to be used by giving the order in the scale.
- Order 0 will be equal to the base value
- Orders smaller than 0 will divide the base value, and
- Orders bigger than 0 will multiple the base value
If you want a token to have a value with a ratio different than the global scale ratio, then you can use a custom one. You can also fine-tune the scaled value by giving a constant value to be added/subtracted.
➥ Themeable Scales: It is possible to define different base value and scale ratio for each theme, like all other tokens in the DSM.
Suggested further reading:
Typography
Typography is more than typing in a pretty font and calling it a day. It’s a strategic arrangement that takes into account the following elements: Typefaces, Fonts, Hierarchy, Consistency, Alignment, Whitespace, Color.
A designer unites all of the above elements to create remarkable designs for a variety of mediums and purposes.
— creative27, The Importance of Typography in Design
Typography section of Toolabs DSM lets you define Fonts, Typescale, and Spacings, which are then used to construct Text Patterns, which are styles to be applied to text elements in designs.
➥Remember that all of these elements are themeable. For example, you can use different fonts and/or typescales for mobile, light or dark themes, or any other theme you define in your design system.
Fonts
You can choose typefaces from these sources :
- Web Safe Fonts: These are the fonts that you can expect to already be installed on most devices and browsers. Using a web safe font will remove the loading impact of using a custom font for your web page.
- Google Fonts: These web fonts are provided and hosted by Google free of charge. Toolabs DSM provides a similar interface for filtering, searching, and previewing fonts as with Google Fonts web page.
- Custom Font Files: You can upload .woff, .woff2, .ttf font files which are not larger than 10MB!
➥ In case of a problem with loading the font you chose, you should define a font stack for each font token. Font stacks tell the browser to use an alternative font that is available in the system and is similar to the font you requested. You can check cssfontstack.com to find the suitable font stack for your font family.
Typescale and Spacing
By default, your design system is initialized with a base font size of 16px and a typescale ratio of 1.2 (Minor Third). Check the section for Modular Scales to see how to customize your typescale definition.
Line height, letter spacing, and word spacing properties can be defined globally for all text patterns or they can be overridden for each individual text pattern.
Text Patterns
Suggested further reading:
Spacing
“The real meaning of form is made clearer by its opposite. We would not recognise day as day if night did not exist. The ways to achieve contrast are endless: the simplest are large/small, light/dark, horizontal/vertical, square/round, smooth/rough, closed/open, colored/plain; close/distant, all offer many possibilities of effective design.”
— Jan Tschichold
Space is one of the most important elements of visual design but it also has the potential to break the visual consistency and hierarchy of design because of ad-hoc values.
Using spacing tokens is the best way to remove guess working and stay away from inconsistent, ad-hoc spacing.
With Toolabs DSM, you can create a predictable and harmonious spacing with modular scales. Check the section for Modular Scales to see how scales are generated.
Suggested further reading:
Motion System
According to Val Head (Senior Design Advocate at Adobe, author, and web animation expert), the reason why motion is generally left out of design systems is not knowing or being sure how to include it.
With Toolabs DSM’s motion panel, it is very easy to set up your motion system and then document it or export to code.
The animation building blocks you can manage are :
- Durations: You can either generate a modular timing scale or define durations manually. Check the section for Modular Scales to see how scales are generated.
- Easing: You can either use the presets or manually define the bezier curves using the drag handles of the ease editor.
- Named effects (Transitions)
Suggested further reading:
Sounds
“Sound communicates information in ways that improve the user experience.”
— Google Material Design
“Sound is used to communicate in the animal kingdom and in the experiences that humans have constructed throughout society. Sound shouldn’t go overlooked as designers create experiences in the digital space.”
— Leo Fouraux
Toolabs DSM provides a collection of interaction sounds from Facebook Sound Kit as built-in. When defining sound tokens, you can either browser and select from this collection or you can upload your custom sound files.
Then, you can add sound widgets to your design system documents and let users download sound files to their systems.
➥ When Toolabs Component Designer is released, it will be possible to use these sound tokens in your prototypes for interactions.
Suggested further reading:
Semantic Design Tokens
Token aliases let you relate a semantic token to a base token for a specific context or to get a level of abstraction. It helps you communicate the intended purpose of a token independent of the actual/primitive value of the token.
➥ We can think of semantic tokens as Design Decisions on style primitives.
The example below shows how to create semantic tokens that link to different tokens for dark and light themes, where :
- White and Black are primitive tokens storing actual color values and are fixed for all themes.
- Background Color and Text Color are semantic tokens.
In the default theme (the light theme in this example), Background Color semantic token is defined as an alias to White , and Text Color semantic token is an alias for Black token.
For the dark theme state, instead of changing the actual values of our primitive tokens ( Black and White tokens), we just edit our semantic tokens and switch the aliased tokens. This results in the Background Color semantic token to use the value of Black and Text Color semantic token to use the value of the White color token.
Suggested further reading:
