Hands-on Design Tokens

Learn by Making with Toolabs DSM

Namık Özgür Aydın
May 15 · 11 min read

“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.”

— US Web Design System

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.

Toolabs DSM — Common Features of Panel

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.

Naming Tokens

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:

Toolabs

Design System Manager

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Start a blog

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store