Skip to content

Design Tokens

Understanding Design Tokens

Traits
Traits are inherent to tokens given their technical nature in which they are used. Traits describe their behavior as well as their stimulating triggers (principals) and the nerves (agents) who transport those signals.

Features
Features encode user preferences (e.g. color scheme or color contrast) and provide customization options for a delightful user experience.

Internals
Tokens not only have a name and a value, they carry on a lot more data, which when given proper meaning is a knowledgeable resource.

Using Tokens

Modeling & Communication
Design system architecture with focus on design tokens, that form the vocabulary of your visual design language, helping to streamline the communication amongst stakeholders. Modeling the system with boundaries to ensure clear purpose and predictability for design tokens and stability guarantees with fine control for theme authors.

The Three Class Token Society
Design tokens are often grouped based on their phenomenal reference sequence. From basic, over semantic to component tokens. This article compares this organization with a model based architecture and figures out the advantages and disadvantages.

Put Your Tokens on a Scale
Ever worked with a set of design tokens that are super inconsistent and hardly distinguishable? Perhaps a wrong scale? This article explains the available scales, their problems and what to use them for.

Token Specification
Design tokens become scalable when they are replicable. A token specification is a formula for achieving design tokens scalability and tools interoperability.

Naming
Naming design tokens can sometimes be considered its own discipline. Naming is surprisingly straight forward, and if it isn't then it solves the wrong problem.

Theming
Theming in Design Systems is a de-facto standard way to exchange the look-and-feel of your product. There is a high divergence of what is a theme? What does it consist of? Which constraints exists when building a theme? When and what to use a theme for?

Best Practices

Awesome Design Tokens
Things proven suitable and beneficial when working with design tokens.

Awful Design Tokens
The NOT-TODO-LIST when working with design tokens.

Appendix

Glossary
Defined terms and vocabulary for a streamlined communication amongst all actors within a design system.

Literature
Articles, talkes and other resources for design tokens.