Design systems have become an essential tool for building consistent, scalable, and maintainable digital products. They provide a common language and a set of guidelines for designers and developers to follow, ensuring that every component, layout, and interaction is cohesive and works well together. At the heart of every design system are the building blocks, also known as design tokens, that define the visual and functional properties of the user interface. In this article, we will explore why tokens are the most valuable artifact a design system can provide and how they can help you design better products.
What's below "atoms"
At the introduction of design systems and Atomic Design, Atoms were the lowest level components of the user interface, such as buttons, headings, and links. As Atomic Design evolved, designers and developers realized they needed a more fundamental concept to capture the “lower level” specs of things like colors, typography, and spacing. These concepts are used everywhere within the design system to assemble more complex components, such as buttons, forms, and cards. While Atoms provided a solid foundation for building a design system, they were not enough to achieve consistency and scalability across all platforms and devices. That's where tokens come in.
Design tokens are a higher level of abstraction that define the characteristics of the UI components, such as their color, size, shape, and behavior. Tokens encapsulate the values of the basic parts of the design system, as well as any design decisions, such as the number of columns in a grid or the spacing between elements. By defining these values in a central place, you can easily update and propagate them across all components, reducing the risk of inconsistencies and reducing the maintenance burden.
Tokens come in many forms, depending on the needs of your design system. Some common examples include:
- Color tokens: defining the colors used throughout the UI, such as primary, secondary, and accent colors.
- Typography tokens: defining the font sizes, weights, and styles used for headings, paragraphs, and other text elements.
- Spacing tokens: defining the margins, padding, and grid layout used to structure the UI.
- Border tokens: defining the border styles and sizes used for UI elements such as buttons, cards, and forms.
- Shadow tokens: defining the box shadows used to create depth and hierarchy in the UI.
By defining these tokens, you can create a consistent and cohesive design system that can be easily adapted and customized for different platforms, devices, and use cases.
How to share rules across technologies
One of the challenges of building a design system is ensuring that the same rules and values are applied consistently across different technologies and platforms. For example, you might have a set of color tokens defined in CSS, but you also need to use the same colors in your iOS or Android app. To achieve this, you need to find a way to share your tokens across all your development environments.
In the early days of design systems, these design tokens were stored in less than ideal ways. We’ve probably all worked in a codebase that had a single Sass file called something like variables.scss. This worked great to share things like colors or font names across our CSS styles, but things became untenable quickly when we needed to share these values in all the other technologies of the project like JavaScript or a backend templating language like Twig or Blade.
We finally have a better way: a token management tool (part of Knapsack’s robust offerings) that allows you to centralize your tokens and distribute them to different platforms and technologies. These tools provide a way to define your tokens in a universal format like JSON or XML that can be easily consumed by different platforms. This way, you can define your tokens once and use them across all your development environments, ensuring consistency and reducing duplication.
Conclusion
Design Tokens are the most valuable artifact a design system can provide because they define the lowest-level characteristics of the user interface in a central, reusable, and scalable way. By leveraging tokens, the rules of your design system can be shared across technologies, bringing consistency and ease of development to your project.