Sainsbury's
Design System
Building a unified, token-based component library for one of the UK's largest retail groups — powering five brands at scale.
Sainsbury's Group needed a single, scalable design system capable of serving five distinct brands — without each team rebuilding the same components from scratch every sprint.
The challenge
Sainsbury's Group operates five digital brands — Sainsbury's, Argos, Habitat, Tu Clothing, and Nectar — each with their own product teams building interfaces independently. Without a shared foundation, components were rebuilt from scratch across teams, accessibility was inconsistently applied, and the design-to-engineering handoff was slow and error-prone.
The group needed a system flexible enough to adapt to multiple brand identities, robust enough to meet accessibility standards, and practical enough that designers and engineers would actually adopt it.
Our approach
Embedded within the Design Ops team alongside accessibility specialists, engineers, product designers, and CX leads, we took an inventory-first approach. Rather than designing components in isolation, we audited the existing digital estate to identify patterns, duplication, and gaps across brands.
We then built a token-based component architecture in Figma — separating global decisions (colour, spacing, typography) from component-level choices — enabling brand-level theming without duplicating components. Every decision was made alongside engineering to ensure Figma and code stayed in sync.
A complete, token-based component library in Figma — with 30+ core component types, hundreds of variants, and comprehensive foundation documentation covering colour, states, and layouts.
The Project
The component library was built with real-world usage patterns in mind. Each component — from date pickers and data tables to product cards and steppers — was designed with a full variant set covering interactive states, error handling, and edge cases. Accessibility annotations and usage guidelines were embedded directly in Figma, making every component self-documenting for the teams using it.
Foundation documentation covered colour guidance, component states, and layout patterns across 40+ detailed guidance slides — creating a single source of truth that product designers, engineers, and QA teams across the Sainsbury's Group could reference with confidence. Components were built to scale across web responsive, iOS, and Android, reducing the duplication that had slowed delivery across the estate.
Component Guidelines Site
Alongside the Figma library, we contributed to building the Sainsbury's Design System component guidelines site — a publicly accessible resource that documents how every component in the system should be used, written, and implemented across the group's digital products.
The site acts as the single source of truth for designers, engineers, and content teams across Sainsbury's Group — covering usage principles, do/don't guidance, accessibility requirements, and content standards for each component. Having documentation live alongside the code and Figma library closes the loop between design intent and production implementation, giving teams the confidence to build consistently at scale. Explore the guidelines site →
Components
Outcomes
Projects shown include live work, pitch deliverables, and design produced as part of embedded or collaborative engagements. Some work was completed as part of a wider team. Deliverables reflect the scope and direction at the time of engagement — the live experience may have since changed, launched in a different form, or not proceeded to production. All brand assets and trademarks shown remain the property of their respective owners and are displayed here for portfolio reference only.
