With a rapidly growing portfolio of coffee brands worldwide, Jacobs Douwe Egberts (JDE) needed a scalable design solution to unify their digital presence while preserving each brand's unique identity. Many of the brands lacked formal design guidelines, leading to inconsistent user experiences and inefficient development cycles.

I was brought in as a product designer to lead the creation and implementation of a white-label design system — one that can be easily adapted across 40+ brands, streamline collaboration between design and development, and support rapid onboarding of new brands into their ecosystem.

• Design system architecture
• Component library & tokens
• Interaction & motion design
• Accessibility & performance
• Front-end implementation

Laying the groundwork

Before defining new styles or components, I conducted a thorough audit of JDE's partially built design system to understand what existed, what could be reused, and where gaps remained.

From there, we set up foundational styles using design tokens, which let us store core design decisions like colours, typography, spacing, and more. By giving each token a clear role, we can create themes—sets of token values that define the look and feel of a brand. And applying different themes to the same components allows each brand to express their unique visual identity while keeping a shared structure.

Balancing Brand Identity and Accessibility

A major challenge was keeping accessibility consistent across multiple brands. Most brand books we received were designed for print or packaging—not digital—so their colours often failed accessibility standards.

To solve this, we used palette generators to build accessible colour sets using each brand's primary colour as the base. We worked closely with the brands to ensure these adjustments maintain proper contrast while still preserving each brand's visual identity.

We still used the brand's primary colour in other ways—accents, highlights, or secondary moments.

Beyond the White-Label

Even with a flexible white-label system, some brands still need a few tweaks. In those cases, we introduce a small number of custom components that reuse as many of the system's building blocks as possible—keeping the system efficient while giving the brand room to express itself.

Dev-Design Alignment

The dev team was already using tokens, but we needed to align on a structure that was logical for developers, intuitive for designers, and scalable for the entire system.