The role of design tokens and assets in a design system

Design tokens and assets are two critical parts of a design system. In this post, we will explore the role of design tokens and assets in a design system. As we all know, design systems are an essential part of modern software development. They help teams create consistent, reusable, and scalable user interfaces. Mostly consisting of a collection of reusable design tokens, components, guidelines, and assets it defines the visual language of a product.

So, what are Design Tokens?

Design tokens are a set of pre-defined variables that represent design decisions. They are the building blocks of a design system. Design tokens define the visual language of a product. They include colors, typography, spacing, and other design elements. Design tokens are used to create a consistent look and feel across different platforms and devices. They help designers and developers work together more efficiently by providing a shared vocabulary for design decisions.

Design tokens are stored in a central repository and can be accessed by designers and developers. They are used to define the visual properties of a product. For example, a design token can define the primary color of a product. This color can be used across different platforms and devices. Design tokens help teams maintain consistency across different products and applications.

And what are assets?

Assets are visual elements that are used in a product. They include images, icons, and other graphical elements. Assets are an essential part of a design system. They help teams create a consistent look and feel across different platforms and devices. Assets are used to create a visual language for a product. They help designers and developers work together more efficiently by providing a shared vocabulary for visual elements.

SVG’s are a popular type of asset used in design systems. SVG stands for Scalable Vector Graphics. SVG’s are vector-based graphics that can be scaled to any size without losing quality. They are ideal for creating icons and other graphical elements. SVG’s are lightweight and can be easily integrated into a product. They are supported by all modern browsers and devices.

The role of design tokens and assets in a design system

Design tokens and assets are essential parts of a design system. They help teams create a consistent look and feel across different platforms and devices. Design tokens define the visual properties of a product. They provide a shared vocabulary for design decisions. Assets are used to create a visual language for a product. They help teams create a consistent look and feel across different platforms and devices.

In his article “Foundations of a Design System”, Ben Callahan explains that a design system is a set of patterns, principles, and guidelines to enable design at scale. He breaks down the design system into four layers:

• Foundations

• Tokens

• Core Systems

• Components

Ben Callahan: “Design System Maturity” — LPC 2022 Paris

• The Foundations layer defines a subset of the organization’s brand to be used in the design and development of digital interfaces.

• The Tokens layer takes the design concepts expressed in the Foundations layer and codifies them for use in constructing digital interfaces.

• The Core Systems layer aims to provide an answer to typical interface problems. To address these issues, core systems - reusable “building-block” systems - are employed. The majority of the time, essential systems are constructed using design tokens.

• The Components layer specifies and makes accessible the reusable components of a digital interface. Components can range from simple (a button or text input) to complicated (a header or navigation). When created properly, they are constructed from foundations, tokens, and core systems.

Design tokens and assets and design decisions

Design tokens and assets help teams work together more efficiently. They provide a shared vocabulary for design decisions. They help designers and developers communicate more effectively. Design tokens and assets help teams maintain consistency across different products and applications. They help teams create a scalable and reusable design system.

Having said all this, it is possible to create a design system without design tokens and assets. In such a system, designers and developers would need to rely on other methods to maintain consistency across different platforms and devices. For example, they could use a style guide or a pattern library to define the visual language of a product. These methods can be effective, but they may not be as scalable or reusable as a design system that includes design tokens and assets.

Tips and tricks for using design tokens in your design system

1. Choose tokens based on meaning where applicable, not specific values: Design tokens should be named and described in a way that fits your specific situation. Avoid using a token just because the colors appear to match. This can break the experience in other themes.

2. Use descriptive names and descriptions: Use design tokens with names and descriptions that fit your specific situation. This will help you find the right token faster when working in designs and in code.

3. Create themes: A theme is a collection of token values designed to achieve a certain look or style. Themes are how you switch color schemes and styles everywhere using a single set of tokens. Light mode, dark mode, and high-contrast mode are all examples of theming. Non-color themes are also possible: think cozy/comfortable/compact views, reduced motion, or custom typography styles.

4. Keep your design tokens up-to-date: As your design system evolves, make sure to update your design tokens to reflect any changes. This will ensure that your product experiences are consistent and on-brand.

   
   

Tips and tricks for using assets in your design system

1. Create a library of reusable assets: A library of reusable assets can help ensure that your product experiences are visually consistent and on-brand. By creating a library of assets, you can save time and effort by reusing existing assets instead of creating new ones.

2. Organize your assets: Organizing your assets can help you find the right asset faster when working in designs and in code. Consider organizing your assets by type, theme, or usage.

3. Use descriptive names and descriptions: Use descriptive names and descriptions for your assets. This will help you find the right asset faster when working in designs and in code.

4. Keep your assets up-to-date: As your design system evolves, make sure to update your assets to reflect any changes. This will ensure that your product experiences are consistent and on-brand.

Conclusion

Design tokens and assets are essential components of a design system. If you built your design token system well, you have a healthy bases to scale your design system. However, you might be able to create a design system without using design tokens, but keep in mind that they certainly help in maintaining your system and making it more scalable. Design tokens define the visual properties of a product. They provide a shared vocabulary for design decisions and assets are used to create a visual language for a product. Design tokens and assets help teams work together more efficiently. In short: they help you to create a scalable and reusable design system.