REWE digital: Variable themes for complex multi-platform products

Learn how to create variable themes for complex multi-platform products. Real-world case study from REWE digital on Figma Variables, multi-brand theming, layout modes and Design System scaling across web and Android.

Authors: Franziska Haaf, Vincent Schlothauer.

Tags: Design Systems, Figma Variables, REWE digital, Case Study, Theming.

Key Learnings

  • How to use Figma Variables for multi-platform theming
  • Separating brand from mode in Design Systems
  • Managing brands and modes with Figma Variables
  • Scaling Design System theming across platforms
  • Multi-brand Design System architecture

Full case study at intodesignsystems.com/use-cases. More Design System use cases at intodesignsystems.com/use-cases.

We'll be live in:0d 0h 0m 0s·15 live sessions·Only 94/1,000 tickets left
Join now
REWE digital

How to create variable themes for complex multi platform products

VariablesDesign Systems

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.

Shared core values

Core values stay shared. Brands do not live in core palettes.

Semantic variables

Semantic variables reference core values. Modes decide which values are active.

Separated brand and mode

Brand and mode are separated intentionally. This allows independent switching without combinatorial explosion.

Variables as design tool

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

Shared foundation file

A shared foundation file holds all core variables. Web and Android UI kits consume the same foundations.

Brand mode implementation

Brands are implemented through a dedicated brand mode. Designers can switch brand without touching components.

Component reactivity

Components react to brand changes through bound variables. Logos, colors, content and variants update automatically.

Bold color mode

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

Layout modes scale sizing, spacing and radius independently. Large terminal screens reuse the same components with different scale logic.

Global touch target variable

Android introduced a single global touch target variable. Switching from 48 to 56 pixels updates all interactive components instantly.

Fast validation

Internal user testing validated these decisions quickly. Designers and product teams provided fast feedback.

5. What others can learn

Transferable patterns

Separate brand from mode early

Coupling them creates long term pain

Do not scale everything by the same factor

Spacing and sizing behave differently

Use semantic variables to protect components from complexity

Core values should change rarely

Design variables can exist without code parity

Prototyping value matters

Label experiments clearly

Give teams room to test before standardizing

6. Source

Where this use case comes from

Conference Recording
How to create variable themes for multi-platform
Franziska Haaf, Design System Designer at REWE digital, Design Systems expert and speaker presenting at Into Design Systems Conference 2025

Franziska Haaf

she/her

Design System Designer at REWE digital

Vincent Schlothauer, UX Designer at REWE digital, Design Systems expert and speaker presenting at Into Design Systems Conference 2025

Vincent Schlothauer

he/him

UX Designer at REWE digital

Get full access to the recording
Get access to this session and all sessions from Into Design Systems Conference 2025

This session is part of Into Design Systems Conference 2025.

Get access to all sessions, recordings, slides, templates, certificate and networking opportunities.

Get Access Now
Back to Use Cases