Case Study: John Lewis

Tokens for Theming

Introduction

Illustration – Introduction

Introduction

Evolving the John Lewis Design System to be Brand Agnostic.

Challenge 1

Why Change Was Needed

Illustration – Why Change Was Needed

Challenge 1

Why Change Was Needed

A rebrand exposed the limits of our existing design system

As we prepared for a major brand refresh, it became clear that the system wasn’t flexible enough to handle theming, accessibility, or future brand needs. We needed a more robust, scalable foundation.

  • Deadlines were fixed around the Joyfully Bold rebrand
  • The system couldn’t support theming or dark mode
  • Multiple brands (Waitrose, JL Money) would need shared foundations, with JL Money being the priority with a new team in place relying on our guidance to deliver.

Challenge 2

Our Constraints

Illustration – Our Constraints

Challenge 2

Our Constraints

Independent teams, inconsistent structures, and technical debt

We inherited a system with no shared token structure, inconsistent colour usage, and hard-coded values across components. Teams were solving the same problems in different ways.

  • No semantic or layered token architecture existed
  • Multiple simultaneous NDA’d Projects to deliver, with independent timelines and dependencies
  • Each business team had its own completely independent visual language

Transition 1

Setting a Clear Approach

Illustration – Setting a Clear Approach

Transition 1

Setting a Clear Approach

Start small, build for scale

We knew we had to deliver meaningful progress fast without creating fragile systems. That meant focusing on colour first and building semantic flexibility from the start.

  • Focused on high-impact areas like colour and interaction states
  • Introduced semantic tokens to separate intent from value
  • Prioritised clarity, accessibility, and developer adoption

Process Step 1

Building the Token Structure

Illustration – Building the Token Structure

Process Step 1

Building the Token Structure

From fixed colours to a flexible semantic system

We introduced a layered token architecture: global values, semantic aliases, and component-level application. This gave us power to theme at scale without rewriting components.

  • Created tokens for brand, interaction, feedback, surface, and text
  • Introduced variables across design and code environments
  • I initiated the tokenisation work and began aligning JL Money, Waitrose, and JL Partnership

Process Step 2

Making It Work in Practice

Illustration – Making It Work in Practice

Process Step 2

Making It Work in Practice

Cross-functional collaboration was key to adoption

We worked closely with engineering to ensure each component was verified in Storybook. On the design side, we created a comprehensive system site with guidance, usage, and component anatomy.

  • Designers and developers collaborated from day one
  • Used Style Dictionary to ensure consistent output across platforms
  • Built robust design documentation in Figma and online

Transition 2

From System to Solution

Illustration – From System to Solution

Transition 2

From System to Solution

Laying the foundation for multi-brand flexibility

With strong infrastructure in place, we expanded usage, embedded governance, and began enabling theming across the wider partnership.

  • Focus shifted from core tokenisation to application at scale
  • Governance and contribution models were defined
  • We actively supported cross-brand rollout

Solution Step 1

What We Delivered

Illustration – What We Delivered

Solution Step 1

What We Delivered

Tokens that enable scalability, accessibility, and consistency

We delivered a semantic token system that can support multiple brands, theming contexts, and accessibility standards — with clear documentation for adoption.

  • Tokens are centralised, semantic, and brand-ready
  • The system enables theme switching without component rewrites
  • Accessibility is embedded, not retrofitted

Solution Step 2

System-Wide Benefits

Illustration – System-Wide Benefits

Solution Step 2

System-Wide Benefits

A scalable foundation across the JL Partnership

Our work enabled teams across John Lewis, Waitrose, and JL Money to build with shared standards. With strong governance, the system can now evolve cleanly.

  • Token structure reduces tech debt and duplication
  • Built for rebrand, dark mode, seasonal and campaign theming
  • Foundation now used across key JL digital properties

Key Learning

Illustration – Key Learning

Key Learning

Understand the Anatomy of Components & semantic abstraction

  • Start with tokens, not components: By creating a semantic layer before tweaking core components, we enabled theme switching and future‑ proofed the system from the outset
  • Collaborate deeply between design and engineering: Working hand‑ in‑ hand (e.g. jointly verifying Storybook components, refining naming conventions) helped us align intention with implementation and resolve constraints early. Find that common language.
  • Document and govern consistently: Building a dedicated design system website with guidance, anatomy, and governance rules enabled multiple teams to adopt and contribute safely and sustainably
  • Embed accessibility into tokens from day one: Designing everything with WCAG contrast and inclusive requirements built broad potential into the system and avoided retrofitting challenges later

With many thanks to all the Design System Team: Mohamed Kherroubi, Sam Hoh, Lewis Jones, Katherine Lattaway, Bradley Nicholls, and James Ault

And in the wider business for essential insights into the other businesses’ Design Systems

Rob (JL Partnership), John (JL Money) & Dara (Waitrose)

For more info read:

Sam's Medium article