In this webinar, we discuss building a sustainable and scalable workflow around design tokens with the Knapsack team. Our speakers include:
Evan Lovely, Head of Product and Engineering and cofounder
Jake Love, Solutions Architect
& Mark Reynolds, Design Systems Expert
We are thrilled to explore the importance of design tokens in creating a consistent and unified brand experience across multiple platforms.
What are Design Tokens?
Design tokens are a fundamental approach for delivering consistency across different platforms and applications.
They are design decisions, such as typography, size, spacing, border, elevation and color, built as reusable, modular pieces of code.
The modern understanding of design tokens went mainstream by then Salesforce’s Sönke Rohde back in 2014 when he shared the now famous medium post Living Design System.
Design tokens enable designers to focus on what matters most, the user experience, and know that the UI they create is consistent across all platforms.
Design tokens can be organized into a simple cascading structure that starts with theme tokens, fed into brand expression tokens, before finishing its cascade into component specific tokens. With semantic meaning, this ensures that changes can be made at the theme level and not result in breaking changes across the different platforms and spaces.
It’s fair to say that design tokens are a fundamental change in how we deliver design and are an essential part of modern design systems.
Theming with Tokens
Theming with design tokens is an essential process for building a sustainable and scalable Design System workflow. In essence, it’s the process of assigning stylistic decisions (design tokens) to a curated component library.
Theming with design tokens enables teams to generate new themes (brands, segments, etc) through the use of tokens and a mapping layer.
In our experience, there are three main approaches to theming with design tokens:
Static theming
- Common with SCSS/LESS projects
- Results in a self-contained CSS artifact
Root level theming
- Common with CSS or “Hybrid” approaches
- Usually contains three or more “levels” in the cascade (tokens, mapping layer, global/component styles)
Component level theming
- For dynamic frameworks, such as React, Vue, etc.
Each approach has its own unique characteristics and considerations. For a deep dive into theming, explore this webinar dedicated solely to this topic!
Design Tokens Standards
Using the W3C Tokens Spec as a standard allows teams, tools, and frameworks to communicate and collaborate more effectively. Design tokens are the building blocks of these standards, which represent brand decisions such as color and dimension, and are used across different tools and frameworks. Standards for design tokens are aimed at creating sustainable and scalable workflows that can be easily translated between different tools and platforms.
Manage Tokens Using Knapsack
During this webinar, we showcased how to manage design tokens effectively using Knapsack demonstrating how themes can be easily switched by creating a new asset set and mapping layer for a new theme. Through the use of design tokens and theming, teams can focus on innovation and adding new value while relying on the brand consistency already built into the stack.
Design tokens are an essential aspect of building a consistent and unified brand experience across multiple platforms. Managing design tokens effectively through theming is crucial for creating a sustainable and scalable workflow. By using design tokens, teams can work together confidently, focus on innovation, and add new value to the brand experience.
Join us on the last Wednesday of every month for our webinars. Next up: Accessibility in Design Systems on Sunday, March 29!
{{form-component}}
.jpeg)
