Introduction
Design tokens are name-value pairings representing various design attributes such as color, font size, size unit, transition time, and more. They are the foundation of our design system and serve us to standardize and manage the visual properties and ensure their consistent application across all our products and touchpoints. They also allow us aply different themes across our products, platforms and touchpoints.
Benefits of using design tokens
- Visual style comes from one source of truth which ensures all our products look and feel coherent.
- Any changes to design language attributes can be automatically applied across all products and touchpoints. This eliminates the need for manually finding and replacing values in multiple locations, reducing the risk errors and saving time.
- They enable easy and fast creation of modes and themes, allowing us to adjust visual style to unique character of our individual products and delivering better experience for users with specific needs.
Token hierarchy
It is important to understand the hierarchy of our tokens, what each level is used for and how they relate to each other, in order to implement them correctly across your design or in code.
- Primitive token is a named raw value. This level serves for easier referencing of raw values and allows for changes at a global level. In principle, primitive tokens should not be applied directly to components. Alternative names: global tokens, base tokens, optional tokens
- Semantic tokens are created for a specific purpose within the system, represented by their name. They allow for consistent use of design language patterns across different components. They always reference a primitive token instead of a raw value. This is called aliasing. Alternative names: decision tokens, reference tokens
- Component tokens are more specific and tailored to individual UI components. They inherit values from either primitive or semantic tokens. Currently, in Mews Design System we only use component tokens to accommodate mapping from old to new design language and a proper theming, with the intention to deprecate them in the future.
Token naming structure
Understanding how the token name structure works, will enable you to use the correct ones in your designs or code.
- Category: type of visual design attribute such as color, font, spacing, sizing, elevation,
- Property: the UI element to which the token is being applied to, such as a border, background, shadow,
- Concept: represents if the token has either semantic or functional application like interactive, static or alert.
- Variant: help to distinguish between multiple similar tokens, by deifning importance, emphasis, semantic role such as primary, secondary, tertiary, danger, subtle, bold.
- State: in which interaction state the token should be used: default, hover, active, disabled
Tokens' names follow a strict naming convention that communicates when and where this token is supposed to be used, detaching it from its underlying value. Please note not all the tokens will always contain all 5 levels in their name.
Themes and modes
By leveraging tokens, we have the ability to generate distinct brand themes and visual styles for our products, all while utilizing a shared collection of components.
Themes encompass a branded experience characterized by their distinctive style. Although they draw foundational elements from a common design language, themes exhibit notable variations in appearance. These themes can be applied across different brands and product categories, such as PMS, GX, and Marketing websites. Furthermore, a theme can comprise multiple modes, enhancing its versatility and adaptability.
Modes represent a curated set of token values aimed at achieving a specific visual style. While certain tokens may share values across modes, others will vary. Examples of modes include light and dark mode, high contrast mode, condensed and spacious modes, as well as reduced motion. Each mode offers distinct design characteristics tailored to different user preferences and accessibility needs.
Token Usage
This example should help you to get a better understanding of how tokens work.
Using tokens in design
All MDS components are styled using tokens and come with all available color variations. If you need to apply design attributes to elements that are currently not yet turned into components, or you are contributing a new design you can use color, effects (for shadows), and font styles from the MDS Tokens library, which are consistent with corresponding tokens. Unfortunately, spacing, sizing, and border attributes are currently not supported by Figma styles, so you need to apply values manually. The MDS Tokens library should be enabled by default in your design file.