Design Tokens are the single source of truth to name and store a design decision, distributed so teams can use it across design tools and coding languages.
Design tokens explained simply
Watch this short video to understand MDX and design tokens in general.
MDX and design tokens (10 minutes video) → start from 8m30s (it's in german and you need a Migros AD account to watch it)
Benefits of design tokens
- Use of the same language: Improved communication between teams.
- Synced files: One source of truth, consistency on all platforms.
- Solid foundations: Steady design system brings value.
- Easy maintenance: Edit in one place, update all at once.
- Less design and technical debt: Fewer resources are spent.
- Brand consistency: Creating new products, maintaining uniformity, and managing a brand are becoming more accessible, faster, and cheaper with a transparent visual hierarchy system.
Source: https://thedesignsystem.guide/design-tokens
Token types
Base Tokens: Base tokens are like the building blocks of our design. They have context-agnostic names, like "color.orange.600," and store raw values for colours, fonts, spacing, and more. These tokens are reusable on a system level and are the basis for all other tokens we create. By using base tokens, we make sure that our design stays consistent and everything looks and feels cohesive.
System Tokens: System tokens establish a connection to base tokens while also providing context-specific references. For example, instead of using "color.orange.600," we would utilise "color.primary.default". System tokens define system-wide decisions with a semantic background.
Component Tokens: Component or component-specific tokens provide a comprehensive representation of all values associated with a particular component. They always reference system tokens.