How to create variable themes for complex multi platform products
1. Context
Why the company talks about Design Systems
REWE digital builds internal products for one of the largest retail groups in Europe.
Their Design System supports business to employee applications used in stores, warehouses, logistics centers and offices.
The Design System must work across web and Android. It must support different brands, light and dark modes and very different device sizes.
This makes theming and scalability a core Design System concern.
2. The problem
What becomes difficult at scale
Multi brand and multi platform theming quickly becomes unmanageable. Hard coded values break consistency. Duplicated tokens increase maintenance cost.
Designers need to switch brands and modes independently. Light, dark and brand must not be coupled.
Different devices require different sizing, spacing and touch targets. Small handheld devices and large terminal screens cannot share the same scale.
3. Their approach
Principles decisions mindset
The team designed the Figma variable system for flexibility first. Not for visual branding.
Core values stay shared. Brands do not live in core palettes.
Semantic variables reference core values. Modes decide which values are active.
Brand and mode are separated intentionally. This allows independent switching without combinatorial explosion.
Variables are treated as a design tool. Not as direct implementation tokens.
The system is designed to evolve. Experimentation is allowed when clearly labeled.
4. What worked
Concrete learnings
A shared foundation file holds all core variables. Web and Android UI kits consume the same foundations.
Brands are implemented through a dedicated brand mode. Designers can switch brand without touching components.
Components react to brand changes through bound variables. Logos, colors, content and variants update automatically.
A bold color mode was introduced to solve mixed light dark scenarios. Both light and dark modes reference the same core values when needed.
Layout modes scale sizing, spacing and radius independently. Large terminal screens reuse the same components with different scale logic.
Android introduced a single global touch target variable. Switching from 48 to 56 pixels updates all interactive components instantly.
Internal user testing validated these decisions quickly. Designers and product teams provided fast feedback.
5. What others can learn
Transferable patterns
Coupling them creates long term pain
Spacing and sizing behave differently
Core values should change rarely
Prototyping value matters
Give teams room to test before standardizing
6. Source
Where this use case comes from
Franziska Haaf
she/her
Design System Designer at REWE digital
Vincent Schlothauer
he/him
UX Designer at REWE digital
This session is part of Into Design Systems Conference 2025.
Get access to all sessions, recordings, slides, templates, certificate and networking opportunities.
