🔗 Design Tokens
Design tokens are the single source of truth for naming, managing and preserving design decisions.
What are design tokens?
Design tokens are essentially pairs of names and values that capture discrete design elements. These elements could range from colors and typography to spacing and animation timing.
For instance, a token might standardize a color used across multiple screens or products, like bg-card.
Why use design tokens?
Design tokens allow for advanced features like global theming, responsive design, and user customization. They streamline the design-to-development workflow, ensuring a cohesive handover and simplifying decision-making.
As our visual language evolves, updates made to design tokens propagate across all products, eliminating the need to manually update hard-coded values. Plus, our automated tools make adopting and implementing tokens more efficient for both designers and developers.
Implementing our latest visual guidelines through tokens ensures consistency across our UI and facilitates future improvements.
Design token names
The token names are derived from Tailwind (opens in a new tab) syntax. Tailwind is a css framework that has been used for styling components and will be used by developers to implement frontend screens. For this reason, aligning the naming of design tokens with that used by developers during their workflow is crucial to optimize everyone's work and limit errors.
This part of the documentation is under construction
Use design tokens
Our design system houses a comprehensive list of available tokens, complete with descriptions and use cases.