Design
tokens
Goals
How can we define design decisions centrally and make them automatically available across all platforms?Our aim was to establish a shared language between design and development that reduces errors, enables consistent user experiences, and measurably accelerates development processes.
context
In many projects, there’s an invisible gap between the creative and technical worlds. Designers create layouts in Figma, developers interpret specifications, last-minute changes occur — and the final result often deviates from the original design.
Methods
- Analysis of existing design and development processes
- Development of the system architecture
- Tool integration
- Training for design and development teams
Migros
Design System Lead
Learnings
- A shared language between design and development saves enormous time and significantly increases project consistency.
- A well-thought-out naming convention is critical for long-term maintainability.
- Targeted training on design tokens is essential for smooth adoption and effective use.
- Design tokens can support creativity by shifting focus away from endless detail alignments toward actual design work.
Design Tokens at Migros
For the Migros Group, we built a token-based multi-brand design system that significantly accelerates our digital product development. Design tokens act as the bridge between design and code — eliminating translation errors, ensuring consistency, and reducing coordination efforts between design, development, product management, and external agencies.
What Are Design Tokens?
Design tokens are a W3C-recommended standard for storing design decisions in a platform-independent, machine-readable format (JSON) and applying them consistently across all digital products. Examples include:
- Colors: primary color, background color, status colors
- Typography: font families, font sizes, line heights
- Spacing: margins, paddings, grid spacing
- Animations: duration, delay, easing curves
Our Design Token Process
The diagram illustrates the workflow—from creation to implementation in code:
- All design decisions are stored centrally in GitLab—our single source of truth.
- Through Tokens Studio, tokens can be pulled directly from Figma or written back into Figma variables, keeping design and code in sync at all times.
- A pipeline automatically converts tokens into various formats such as CSS or Tailwind.
- The generated tokens power the UI library, which can be integrated into Angular, React, or Vue3 via wrappers.
- In Supernova, tokens are visualized and documented, serving as an always up-to-date, easily accessible reference for design and development teams.
Design Token Architecture
Our architecture follows a hierarchical structure:
- Base Tokens – Contain the raw values for all design decisions (e.g., colors, spacing, fonts) without context.Example: mdx.base.color.orange.600 = #FF6600
- System Tokens – Reference base tokens and give them semantic meaning (e.g., “Primary Color”). They define system-wide decisions that can be adapted for themes, screen sizes, or brands.
- Component Tokens – Reference system tokens and define the appearance of individual components, ensuring consistent design even when brand colors or themes change.
Results
- Around 30% faster development
- Clear, machine-readable design decisions with no room for interpretation
- Easy scalability to new brands, themes, or platforms
- Reduced feedback loops and faster time-to-market
NEXT PROJECT
BACK TO MY PROJECTS
HOME
MY STORY
MY PROJECTS
CONTACT ME
Design
tokens
Goals
How can we define design decisions centrally and make them automatically available across all platforms?Our aim was to establish a shared language between design and development that reduces errors, enables consistent user experiences, and measurably accelerates development processes.
context
In many projects, there’s an invisible gap between the creative and technical worlds. Designers create layouts in Figma, developers interpret specifications, last-minute changes occur — and the final result often deviates from the original design.
Methods
- Analysis of existing design and development processes
- Development of the system architecture
- Tool integration
- Training for design and development teams
Migros
Design System Lead
Learnings
- A shared language between design and development saves enormous time and significantly increases project consistency.
- A well-thought-out naming convention is critical for long-term maintainability.
- Targeted training on design tokens is essential for smooth adoption and effective use.
- Design tokens can support creativity by shifting focus away from endless detail alignments toward actual design work.
Design Tokens at Migros
For the Migros Group, we built a token-based multi-brand design system that significantly accelerates our digital product development. Design tokens act as the bridge between design and code — eliminating translation errors, ensuring consistency, and reducing coordination efforts between design, development, product management, and external agencies.
What Are Design Tokens?
Design tokens are a W3C-recommended standard for storing design decisions in a platform-independent, machine-readable format (JSON) and applying them consistently across all digital products. Examples include:
- Colors: primary color, background color, status colors
- Typography: font families, font sizes, line heights
- Spacing: margins, paddings, grid spacing
- Animations: duration, delay, easing curves
Our Design Token Process
The diagram illustrates the workflow—from creation to implementation in code:
- All design decisions are stored centrally in GitLab—our single source of truth.
- Through Tokens Studio, tokens can be pulled directly from Figma or written back into Figma variables, keeping design and code in sync at all times.
- A pipeline automatically converts tokens into various formats such as CSS or Tailwind.
- The generated tokens power the UI library, which can be integrated into Angular, React, or Vue3 via wrappers.
- In Supernova, tokens are visualized and documented, serving as an always up-to-date, easily accessible reference for design and development teams.
Design Token Architecture
Our architecture follows a hierarchical structure:
- Base Tokens – Contain the raw values for all design decisions (e.g., colors, spacing, fonts) without context.Example: mdx.base.color.orange.600 = #FF6600
- System Tokens – Reference base tokens and give them semantic meaning (e.g., “Primary Color”). They define system-wide decisions that can be adapted for themes, screen sizes, or brands.
- Component Tokens – Reference system tokens and define the appearance of individual components, ensuring consistent design even when brand colors or themes change.
Results
- Around 30% faster development
- Clear, machine-readable design decisions with no room for interpretation
- Easy scalability to new brands, themes, or platforms
- Reduced feedback loops and faster time-to-market
BACK TO MY PROJECTS
NEXT PROJECT