Toolabs DSM : Learn Design Tokens

Learn

Design Tokens

"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 design decisions, represented as data, that ensure systematically unified and cohesive product experiences."

— Spectrum, Adobe’s Design System

Design Tokens are atomic, reusable building blocks of a design system, such as colors, typographic elements, motion, and even sounds and copy text.

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 DSM, all token types can be visually managed from a single panel where you can define, edit and organize them with visual editors.

Descripn of Toolabs Design Systems panel to manage your design tokens

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

Here are some good articles on naming design tokens :

Naming Tokens in Design Systems

by Nathan Curtis

Component and Token Naming in Design Systems

by Nate Baldwin

Grouping Tokens

Here are some good articles on design tokens :

Design Tokens 101

by Mae Capozzi, has other posts on design systems.

Design Tokens: An Introduction

A brief overview of design tokens, what they can do, and why you should be using them in your projects

Design tokens for dummies

by Louis Chenais

Getting Started with Toolabs DSM

Creating Themes with System States