Design Systems: Understanding Design Tokens and their use in Style Dictionary

A design system is a collection of reusable design components, guidelines, and design tokens that are used to create a consistent look and feel across a website or application. Implementing a design system can improve the overall user experience by providing consistent visual language and simplifying the design and development process.

Design Tokens

Design tokens are the atomic, design-driven pieces of a design system that represent the design’s visual language. They are used to store values such as colors, typography, spacing, and layout, and are used to create a consistent look and feel across all the components of the design system. Because design tokens are atomic, they can be easily maintained and updated in a centralized location, making it simple to ensure consistency across the design system. Design tokens can be implemented in different formats, such as variables in CSS or JSON data. They can also be used to generate multiple outputs, such as CSS custom properties, iOS, and Android XML resource files, etc.

Photo by Balázs Kétyi on Unsplash

Design tokens can be classified into two types:

• Structural design tokens: they provide the basic building blocks of the design system, such as typography, spacing, layout, and other layout-related properties.
• Thematic design tokens: they provide the color and visual elements that represent the visual identity of the design system, such as brand colors, gradients, and shadows.

Once defined, these design tokens can be used throughout the design and development process, from wireframes and mockups to the final product. For example, during the design process, designers can use design tokens to ensure consistency in typography, spacing, and color, and during development, developers can use design tokens to ensure consistency in the final product by using pre-defined values for layout, typography, and color.

Adopting design tokens in your design system also makes it easy to update and maintain the look and feel of your website or application. If you need to make a change to a specific design element, such as updating a brand color, you can make the change in one place and the update will propagate throughout the design system, ensuring consistency and reducing the risk of errors.

Photo by NordWood Themes on Unsplash

Style Dictionary

Style Dictionary is a tool that helps to create, manage, and transform design tokens into different platforms and CSS preprocessors. It allows you to define your design tokens in a centralized location and then transform them into different formats, such as CSS, iOS, and Android. With Style Dictionary, you can easily manage, transform, and keep your design tokens consistent across all your design and development processes and multiple platforms, giving you a powerful tool for maintaining and scaling your design system.

An example of a design token in Style Dictionary could be a color, for example, a brand color used throughout your website or application. Here’s an example of how you might define a design token for a brand color in Style Dictionary using a JSON file:

{
  "properties": {
    "color": {
      "brandPrimary": "#4caf50"
    }
  }
}

In this example, the design token is a color called “brandPrimary” with the hex value of “#4caf50”. Once this token is defined, it can be used throughout the design and development process. During the design process, designers can use this design token to ensure consistency in the use of the brand color, and during development, developers can use this design token to generate CSS code for the final product.

With style dictionary, you can apply the transformation to your tokens like the following:

"transforms": [
    "attribute/cti",
    "name/cti/kebab",
    "color/css"
  ]

The above example shows how to transform your design token, “brandPrimary” from the JSON file, into a CSS variable --brand-primary: #4caf50; this way you can use it on your CSS files.

By using Style Dictionary you can easily manage, transform and keep your design tokens consistent across all your design and development process and multiple platforms, giving you a powerful tool for maintaining and scaling your design system.

Photo by Balázs Kétyi on Unsplash

Conclusion

Overall, implementing a design system with design tokens and using a tool like Style Dictionary can greatly improve the consistency and efficiency of your website or application’s design and development process. With well-defined design tokens, you can ensure consistency across the design system and make updates easily and efficiently. By using a tool like Style Dictionary, you can also make sure that your design tokens are transformed and accessible in the correct format for different platforms, making it easy for designers and developers to access and use them.

By understanding the benefits of design tokens and using them in conjunction with a tool like Style Dictionary, you can take your design system to the next level and improve the user experience of your website or application.