Mastering Design Tokens

A Designer’s Guide Inspired by Henry Daggett’s Approach

This article explores Henry Daggett’s approach to design tokens, offering a clear methodology for creating and implementing these essential components in a design system. Inspired by his masterclass “Design Tokens: powering Your Design System”, I highlight Henry’s approach on the hierarchical structure for managing design tokens effectively.

This is Henry Daggett

What are Design Tokens?

Let’s start with the basics. Design tokens are the fundamental building blocks of a design system, representing the smallest reusable elements of design that can be consistently applied across a product. Or, how Henry Daggett puts it:

Design tokens are visual design decisions stored as key/value pairs.

What he means is that design tokens translate into variables that store visual design attributes such as colors, typography, spacing, shadows, and other style properties. They serve as a bridge between design and development, ensuring that design decisions are implemented consistently across various solutions.

As a designer, mastering the creation and management of Design Tokens can significantly improve my workflow, enhance collaboration with developers, and ensure scalability and consistency across the design system elements. Here are some of the benefits while using design tokens:

• Consistency across platforms: Design tokens ensure that the same visual elements are used across different platforms (iOS, Android, web), providing a cohesive user experience.
• Scalability: As the product grows and evolves, design tokens allow for easy updates and maintenance of the design system. Changing a token value will automatically update all instances where the token is used.
• Improved collaboration: Design tokens act as a shared language between designers and developers, ensuring that the design vision is accurately translated into the product.
• Efficient handoff: A well-documented design token system simplifies the handoff process, enabling developers to implement designs more accurately and efficiently.

How to Create and Manage Design Tokens

Step 1: Identify Core Visual Attributes

Begin by identifying the key visual attributes of all primary elements that must remain consistent throughout your product. First, understand what aspects can be tokenized:

• Background color, text color, border color
• Font family, font size, font weight, line height, letter spacing
• Margin, padding, grid size, spacing scales
• Animation duration, animation easing
• Contrast ratio, ARIA labels
• Breakpoints, device size, responsive grid
• Border width, border style, border radius
• Box shadow, text shadow
• Container size, aspect ratio
• Image, blending mode
• Icon name, icon color, icon size

For instance, the structure of visual elements proposed by Henry Daggett typically include:

• Color Tokens: Define your color palette, including primary, secondary, and accent colors, as well as variations like shades and tints.
• Typography Tokens: Define font families, sizes, line heights, and weights.
• Spacing Tokens: Define the spacing system, including margins, padding, and grid spacing.
• Sizing & Border Radius Tokens: Define consistent sizing for elements like buttons, icons, and inputs, and define the corner radius used across components.
• Shadow Tokens: Define the shadow styles used across components.

👉 Always begin by tokenizing colors! Next, focus on typography, spacing, and layout. Finally, if necessary, tokenize your design system components (such as event cards and list items).

Always start with colors! Next, focus on type, spacing and layout attributes.

Step 2: Organize Your Tokens

Organize your tokens into a hierarchical structure to make them easy to manage and understand. While I share Henry Daggett’s approach to organizing design tokens, it’s crucial to recognize that their structure and use can vary across different companies and teams.

Here’s a visual comparison between the design token structures used by different companies

Daggett’s methodology introduces two key concepts: core tokens and semantic tokens. These elements play distinct yet interconnected roles in a design system.

• Core Tokens: These are the fundamental blocks that define raw values for visual properties, such as colors, typography, and spacing. These tokens are typically neutral and not tied to any specific context or meaning. For example, a core token might define a color value like --color-blue-500: #3498db; or a spacing value like --spacing-small: 8px;.
• Semantic Tokens: These apply meaning or context to the core tokens, defining how they are used in specific UI elements or scenarios. For instance, a semantic token might define a primary button’s background color as --button-primary-background: var(--color-blue-500); or a heading's text color as --heading-color: var(--color-gray-900);.

As you can see, the semantic tokens reference the core tokens, providing a layer of meaning that makes it clear how and where the design values should be used in the product.

The picture below portraits this relationship between the core token in red (gray100) and the semantic tokens in blue:

Each core token can be associated with one or more semantic tokens

This means that changing the value of a core token (for instance, --color-blue-500) will automatically update all associated semantic tokens (for instance, --button-primary-background), ensuring consistency across the entire product. This relationship allows for a more flexible and maintainable design system.

For the semantic tokens, Henry Daggett suggests a hierarchical structure breakdown coming from the most abstract to the most concrete (left to right). Here’s how it looks like:

The design token structure breakdown by Henry Daggett

This approach is similar to the one used in programming languages, where tokens are organized hierarchically to represent different levels of abstraction — from general categories like “variable” or “function” to more specific modifiers such as “static,” “private,” or “async”.

For the semantic tokens, Henry proposes a structure that starts off with the context (category, concept, property) to the most specific (variant and state). Here’s an example of how to write a semantic token that describes the color of a selected element:

The design token breakdown and its relationship with core token

You can also use math operations to describe the % of opacity a semantic token, for example. This means that you keep the design scalable and consistent because the token is still referring to the same core token:

This hierarchical organization makes it easier for designers and developers to create and update design elements by modifying higher-level tokens that propagate changes down to more specific instances.

But don’t forget: When implementing tokens in your own projects, tailor your descriptions and categories to resonate with your specific team members. Choose an approach that aligns with your team’s needs and workflow, ensuring the system is both intuitive and effective for those who’ll be using it daily.

Step 3: Document Your Design Tokens

Last but not least, build a comprehensive database or documentation of all your design tokens as this serves as a single source of truth for both designers and developers.

Here’s a database I’ve created in Notion to document and manage design tokens for my projects. It covers colors, typography, spacing, and shadow effects. Feel free to copy and use it!

I’ve created a design tokens database template in Notion, which you’re welcome to copy and use!

This database offers several benefits:

• Easy filtering: You can filter tokens by tags (category, concept, and properties) for quick access.
• Multiple views: Create different views to organize and access information efficiently.
• Figma integration: Most tokens are linked to Figma, streamlining the design process.
• Visual reference: Key color tokens are also added to Figma for easy visual reference.

Bonus: Managing your tokens with Figma’s “Variants”

Leverage design tools like Figma to create and manage your design tokens. Figma’s “Variants” feature is particularly useful for creating and managing design tokens in prototypes because:

• It enables the creation of different states or variations of a component (e.g., button styles, color themes) while keeping them organized and easily accessible.
• It simplifies the process of switching between different versions of a component, making it easier to test and visualize different design options.
• It helps maintain consistency across a design system by centralizing variations of components in one place.
• It leads to more efficient workflows and better organization of design elements, ultimately resulting in more consistent and scalable design systems.

Source: Figma Learn

Source: Figma Learn

The structured approach of core and semantic tokens, coupled with practical tools like Figma’s variants feature, empowers teams to create more efficient, maintainable, and cohesive design ecosystems. As the digital landscape evolves, mastering the use of design tokens will be crucial for creating seamless, consistent user experiences across various platforms and devices.

Practical examples

I’ll show now a practical example of how design tokens are used in code — applying Daggett’s structure to the design token names.

Can you see the difference between manually coding each button parameter and using design tokens for each value?

Here’s an example of how I declare core tokens for colors. For instance, the core token “primary100” is defined by the color value “#EFF8FF”.

.primary100 : "#EFF8FF" ;
.primary200 : "#B4DAFF" ;
.primary300 : "#84CAFF" ;
.primary400 : "#53B1FD" ;
.primary500 : "#2E90FA" ;
.primary600 : "#1570EF" ;
.primary700 : "#175CD3" ;
.primary800 : "#1849A9" ;
.primary900 : "#189B7F" ;
.red100 : "#FFCCCB" ;
.red900 : "#8B0000" ;
.green100 : "#90EE90" ;
.green900 : "#006400" ;

This color is then associated with one or more semantic tokens, each representing a specific application of the same color. For instance, the core token “primary100” can be linked to three specific usages, while “red100” is associated with two others.

.primary100 = color.button.background.primary.default
              color.button.border.primary.default
              color.button.text.primary
              
.red100 =     color.input.border.error
              color.button.background.destructive.default

The visual representation of this hierarchical structure — starting from the raw value and evolving into semantic tokens that describe specific usages — is nicely summarized by Henry Daggett in this slide:

Notice the difference between manually coding each button parameter and using design tokens.

When developers use tokens instead of raw values for style parameters, it ensures easier maintenance and scalability by providing a single source of truth. Tokens act as output values, behaving like instances that replicate the value of a master component.

The same principle applies to typography, for instance. Design tokens define heading and body text styles, maintaining consistency in font sizes and weights across the application.

Here’s an example of how to use raw values to define font size, weight, and line height:

{
    "typography": {
        "heading": {
            "fontSize": "27px",
            "fontWeight": "500",
            "lineHeight": "32px"
        },
        "body": {
            "fontSize": "15px",
            "fontWeight": "200",
            "lineHeight": "24px"
        }
    }
}

With design tokens, we would use the semantic token instead — replacing the raw values that used to describe each attributes individually.

• for fontSize, “27px” becomes “{typography.heading.fontSize.large}”
• for fontWeight, “500” becomes “{typography.heading.fontWeight.bold}”
• for lineHeight, “32px” becomes “{typography.heading.lineHeight.large}”

and so on and so forth!

Best Practices for Design Token Management

• Maintain clear and consistent naming conventions for your tokens;
• Regularly review and update your design tokens to ensure they remain relevant and effective;
• Collaborate closely with developers to ensure that the implementation of design tokens aligns with the design intent;
• Consider accessibility when defining color and typography tokens to ensure your design system is inclusive;
• And always start by tokenizing colors!

By mastering the implementation and management of design tokens, we designers can significantly improve the consistency, scalability, and efficiency of our design systems. This approach not only good for the quality of the final product but also enables more efficient design iterations.

Remember, the key to successful design token implementation lies in clear communication, comprehensive documentation, and a collaborative approach between designers and developers. With these practices in place, you’ll be well on your way to creating more cohesive, scalable, and maintainable design systems.

References

• Henry Daggett’s masterclass: https://www.interaction-design.org/master-classes/design-tokens-powering-your-design-system
• Style Dictionary Documentation on design tokens: https://amzn.github.io/style-dictionary/#/tokens
• Figma Learn: https://help.figma.com/hc/en-us/articles/360056440594-Create-and-use-variants