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.
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
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)
Available Design Tokens
For the Migros brand, we provide a comprehensive overview of the system tokens in detail here. You can look up specific tokens to understand the token structure thoroughly.
Border radius
Border width
Colour
MDX Colours
Motion
under construction
Opacity
Shadow
Sizing
Spacing
under construction
Typography Design Tokens