Knapsack brand graphic

Building a Sustainable and Scalable Workflow Around Design Tokens

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}}

Get started

See how Knapsack helps you reach your design system goals.

Get started

See how Knapsack makes design system management easy.