Design System Leadership · Imperial Brands PLC

Breeze DS —
NGP Digital

Architecting and delivering a true multi-brand whitelabel design system for Imperial Brands' Next Generation Products digital pillar — serving three consumer product lines from a single, token-driven component library across global markets.

Director of Digital Experience Design System Architecture Imperial Brands PLC 3 Brands · 1 System Nov 2024 – Present Figma · Token Studio · Heroicons

01 — The Brief

Problem, Scope & Team

Role

Director of Digital Experience

Imperial Brands PLC · NGP Digital Pillar · Jan 2021–Present

System scope

3 brands · 1 master library

NGP Whitelabel · blu (EVP) · Pulze (HTP) · global markets

Team assembled

Systems Design Lead + Sr. FE Dev

Hired Lucien as Systems Design Lead, Nov 2024. Managed dedicated senior front-end engineer for implementation.

External partnership

Publicis Sapient

PS × NGP Digital strategy workshops to define governance model and validate whitelabel architecture approach.

Problem Statement

A UI kit masquerading as a design system

An audit of the existing NGP Figma libraries exposed a system that could not scale. There was no whitelabel setup, no documentation, and no true components — only inconsistent UI files with no structural logic. The organisation had three distinct product lines with independent brand identities, but zero shared infrastructure to build from. Every new market launch meant rebuilding from scratch.

⚠ What the audit found

No whitelabel setup — brands were completely siloed
No documentation — no component specs, no usage rules
Typography missing a type scale — no systematic hierarchy
Icons had no component structure or consistent sizing
Colours lacked naming conventions and step scales
Breakpoints and grid had no defined system (no 8pt grid)
Components missing nested properties — not true components
Inconsistencies spread across brand instantiations

→ What was needed

Whitelabel architecture — one system, multiple brand expressions
Six-layer token model — core through component, brand-switchable
Naming convention — agreed across design and engineering before anything else
8pt-based foundations — spacing, sizing, radius, typography scale
Documented components — anatomy, properties, token map, playground per component
Governance model — from solitary to federated community
Engineering alignment — Token Studio pipeline, retro inputs incorporated

"Not only a component library but a whole system around our components — a single source of truth that improves developer handoff and encourages adoption."

NGP Digital Design Systems Strategy · Publicis Sapient Workshops

02 — The System

Architecture, Brands & Foundations

Breeze is a House of Brands design system — the same structural model used by Unilever and the VW Group. One shared component and token library. Three distinct brand identities. Zero structural fragmentation.

How a colour becomes a decision — the six-layer token model

Layer	Token Type	Role in the System	Example
1 — Primitives	Core token	Raw values only. No meaning, no brand identity — pure design primitives. The hex is the output, not the decision.	core.color.clementine.600
2 — Identity	Brand token	Maps semantic roles to brand-specific palettes. Same structural role, different brand colour. Identity enters here.	brand.action.primary.idle.bg
3 — Context	Color mode token	Light/dark adapt output without changing meaning. Contrast and accessibility maintained automatically across modes.	colorMode.action.primary.idle.bg
4 — Viewport	Breakpoint token	Layout adapts to viewport context without fragmenting system structure. Spacing, sizing, and type scale respond here.	Not applicable for colour
5 — Meaning	Semantic token	Roles defined independently from visual output. Meaning is protected from styling changes — structure persists through rebrands.	alias.action.primary.idle.bg
6 — Contract	Component token	The contract between design and code. UI consumes only these. All resolution happens in layers below — invisibly.	brds.button.primary.bg.idle

The Core Insight

The UI consumes component tokens. The system resolves everything else.

By separating identity from meaning, and meaning from implementation, the system allows components to remain completely stable even when brand values change. A full rebrand propagates through token updates alone — no component is touched. This is the structural guarantee that makes true whitelabelling commercially viable.

Three brands. One library.

Master / Whitelabel base

NGP Whitelabel

core.ngpCore.* · Lato typeface

The structural master layer. Lato selected for its balance of professional clarity and approachability — semi-rounded letterforms, warm tone, classical structure. Suitable for neutral B2B and B2C contexts.

LatoClementineSan JuanSand Dune

Electronic Vapour Products

blu

core.bluCore.* · Antarctica Beta VAR

Variable-axis typeface with geometric restraint and cool neutrality. Adapts from dense UI to bold branding across its variable axis — quiet confidence, contemporary edge. Full Midnight Blue colour system.

Antarctica Beta VARMidnight BlueAzure Radiance

Heated Tobacco Products

Pulze

core.pulzeCore.* · DIN Next W1G

Mechanical structure, narrow proportions, utilitarian precision. Originally developed for signage and technical applications — strong vertical rhythm, uniform stroke width. Built for environments where precision matters.

DIN Next W1GTealCopperDim Gray

Foundations built

🎨

Colour

10-step scales (100–1000) per palette across all three brand cores
Sunset Spark, Violet Eggplant, Amaranth, Salem, Orient for NGP extended palette
Full Midnight Blue, Azure Radiance, Blizzard Blue, French Grey for blu
Teal, Copper, Dim Gray for Pulze

📐

Spacing & Sizing

8pt-based scale — 0px to 96px with intermediate steps (50, 150)
Core radius tokens — 15 steps from 0px to 96px
Token IDs: core.sizing.N and core.border.radius.N
Applied consistently across spacing, sizing, and radius systems

🔤

Typography

11-level type scale — 8px to 76px on 1.250 ratio, 16px base
11 line-height steps — 100% to 200% in 10% increments
Per-brand font weights: Light 300, Regular 400, Bold 700
Letter spacing specifications per brand (Pulze: ±4%, Blu: –0.5% to +4.5%)

🧩

Components

Button — 4 variants, 2 sizes, 5 states, inverted + standard, full token mapping
Icon — 4 sizes (xs–lg), swap property, 44px touch target enforcement
Heroicons v2.1.5 as shared icon foundation across all brands
Component matrix used for prioritisation and cross-team progress communication

03 — The Process

Strategy, Governance & Collaboration

The Breeze system was not inherited — it was built from a deliberate strategy, with the right team assembled specifically for the work, and a governance model designed to scale beyond the core team.

🎯

Strategic direction

Publicis Sapient workshops — PS × NGP Digital sessions validated the House of Brands model and whitelabel architecture approach
Governance model — defined the progression from solitary to Central Core Team to Federated Community, benchmarked against Unilever and VW Group
Component matrix — established to provide a clear overview, speed up onboarding, and communicate status across product and engineering

👥

Team & hiring

Systems Design Lead hired November 2024 — recruited specifically for the role; expertise in whitelabel systems, token architecture, and Figma governance
Senior Front-End Engineer — managed directly; responsible for code implementation, Storybook, and design-code parity via Figma Code Connect
Product Owner — identified to write user stories and EPICs, drive PI Planning, and facilitate engineering conversations

🔗

Engineering alignment

Retro inputs incorporated — information from previous BVI rollout retrospectives fed directly into naming convention, data layers, and atomic structuring decisions
Token Studio integration — centralised design token management, sync between design and code, scalable across file formats
Naming convention — agreed across design and engineering before any component work began; the critical path dependency for the entire system

Governance model — the intended journey

Current state (pre-Breeze)

Solitary

Single team, no governance, no contribution model. Ungoverned, undocumented, unable to scale to the organisation.

Phase 1 target

Central Core Team

Dedicated team owns and governs the system. Clear contribution rules. Component matrix drives prioritisation and visibility.

Phase 2 target

Federated

Product squads contribute components following published guidelines. Core team governs quality and token integrity.

Long-term vision

Community

Cross-pillar adoption. New brand onboarding via playbook. Living documentation. System as platform, not product.

Product Triad Model

Ownership model: Systems Lead + PO + FE Dev

The system required a dedicated ownership structure rather than being absorbed into existing squad work. The Systems Design Lead (Lucien) drives foundations and component architecture. A Product Owner writes user stories, EPICs, and handles PI Planning conversations. The senior front-end engineer owns implementation. I manage the overall delivery, stakeholder alignment, and commercial prioritisation — ensuring the system is always connected to measurable product outcomes rather than existing as infrastructure for its own sake.

04 — Roadmap

Phased Delivery

A six-phase delivery plan anchored to the November 2024 team hire. Each phase has a clear entry dependency — the most common cause of design system failure is skipping the token naming convention lock before building components.

Q4 '24

Audit &
Team

Q4–Q1

Token
Architecture

Q1 '25

PoC
Validation

Q1–Q2

Foundation
Scale

Q2–Q3

Component
Phases

Q3–Q4

FE
Implementation

Phase 0 Q4 2024 Audit & Team Assembly

Foundations and team in place

Hired Systems Design Lead (Lucien, November 2024). Audit of existing NGP Figma libraries — documented all gaps including missing whitelabel setup, type scale, icon component, and naming convention. Publicis Sapient collaboration workshops. Folder and file structure consolidated. Naming convention kick-off. Component matrix established. Tentative roadmap defined and socialised for approval.

Lucien hiredAudit completePS workshopsMatrix established

Phase 1 Q4 '24 – Q1 '25 Token Architecture

The critical path — naming convention and token pipeline

Six-layer token model defined and agreed (core → brand → colorMode → breakpoint → semantic → component). Token Studio integration established. Core colour scales built for NGP, blu, and Pulze (10-step, 100–1000). 8pt spacing and radius systems documented. Typography scale (11 levels, 1.250 ratio, 16px base). Brand font stacks per product. Engineering retro inputs incorporated into naming and atomic structure decisions.

Gate: Naming convention sign-off from design and engineering before component work begins.

Token StudioNaming conventionColour scalesType system

Phase 2 Q1 2025 PoC Validation

Stress-test the whitelabel hypothesis with one component

Button component built across all three brands (NGP, blu, Pulze) via token switching alone — no structural changes. Validates the entire six-layer resolution model end-to-end. Confirms inverted variants, two sizes, and all five states (default, hover, pressed, focus, disabled) render correctly per brand. Figma playground frame with live brand and device switches proves the architecture before scaling.

Gate: Brand switch produces correct output via tokens only. Zero custom overrides required.

Button PoC3-brand validationFigma playground

Phase 3 Q1–Q2 2025 Foundation Scale

Scale foundations to the full component structure

Icon system built on Heroicons v2.1.5 (4 sizes, swap property, 44px touch target enforcement). Shared core Figma library published and made available to internal and external design partners. Component matrix updated with priority ordering and status. Roadmap refinement with PO. User stories and EPICs written for PI Planning. Documentation standards established — each component ships with overview, anatomy, property table, and full token reference.

Core library publishedHeroiconsPI PlanningDocs standard

Phase 4 Q2–Q3 2025 Component Phases

Phased component delivery against the matrix

Phase A — Primitives: Button, Input, Select, Checkbox, Radio, Toggle — high-frequency interactive components first.

Phase B — Navigation: Nav, Tabs, Breadcrumb, Pagination — structural wayfinding patterns.

Phase C — Feedback: Alert, Toast, Badge, Progress — status and communication components.

Phase D — Composites: Card, Modal, Drawer, Table — layout and container patterns. Each component ships with playground, overview, anatomy, property table, and complete token mapping for all variants, states, and brands.

4 delivery phasesFull token coverage3-brand testing

Phase 5 Q3–Q4 2025 Front-End Implementation

Code implementation — managed delivery with senior FE engineer

Senior front-end developer (managed by me) implements the component library in code, consuming Breeze tokens via Style Dictionary pipeline. Design-code parity validation via Figma Code Connect. Storybook documentation with live brand switching across NGP, blu, and Pulze. WCAG 2.1 AA accessibility audit across all components and brand expressions. Integration handoff packages prepared for product squads.

Gate: Full brand switch in Storybook with zero custom overrides. Storybook accepted by Engineering as implementation reference.

Style DictionaryStorybookCode ConnectWCAG 2.1 AA

05 — Outcomes

What This Delivers

The business case for Breeze is not theoretical — it maps directly to documented industry outcomes for organisations that have committed to whitelabel design systems at this scale.

3→1

Brands served
from one codebase

40%

Faster dev velocity
from unified component library

80%

Cost reduction
per new brand instantiation

0

Custom overrides
required at brand switch

01

Brand without rebuild

Token-layer theming means a full rebrand propagates across every component via token value updates alone. No component is structurally touched. NGP, blu, and Pulze can evolve their identities independently without fracturing the shared library.

02

Design-to-code parity

Token Studio + Style Dictionary + Figma Code Connect closes the drift gap between design and engineering that historically consumed sprint cycles. Design decisions propagate as code automatically — no manual handoff for colour, spacing, or typography changes.

03

Scalable governance

The federated model means the system can grow beyond the core team. New brands, new markets, and new product lines can be onboarded via the token and brand layer without re-architecting the system — the structural guarantee that makes Breeze a platform, not a project.

Leadership contribution

Orchestrated from strategy to delivery

As Director of Digital Experience, I identified the need, built the business case, and hired the specialist capability that didn't exist in the organisation (Systems Design Lead, November 2024). I established the governance model through Publicis Sapient workshops, defined the Product Triad ownership structure, and managed the dedicated senior front-end engineer through to implementation. The Breeze system represents end-to-end design leadership — from audit and architecture through team assembly, roadmap governance, and measurable delivery outcomes.

06 — Industry Context

Whitelabel DS — Market Evidence

Breeze is not an isolated experiment. The decisions made in its architecture reflect documented best practice across the industry — and the outcomes it targets have been proven at comparable scale.

Insurance · B2B whitelabel

Huckleberry

Reduced time to onboard new brand partners by 8× after implementing a whitelabel design system. Validates the Breeze model's claim that each additional brand after the first costs a fraction of the initial investment.

8× faster onboarding

Banking · Multi-brand mobile

Caja Rural

Saved 80% in time and cost adapting their mobile banking product for each new partner bank using a token-driven whitelabel approach — then licensed the product as a B2B commercial offering to partner banks.

80% cost reduction

Enterprise · Digital rollout

Toyota

Eliminated 80% of visual inconsistencies across digital properties in under six months with a committed design system rollout — delivering a 23% improvement in user satisfaction scores alongside it.

80% fewer inconsistencies · +23% satisfaction

Impact Area	Outcome	Relevance to Breeze
Engineering velocity	+40% development velocity from unified component library	Breeze targets the same gain — one tested component library replacing per-brand rebuilds
Design team efficiency	34–50% time saved — reclaimed from repetitive component work	NGP design team redirects capacity from UI maintenance to product experience innovation
Time to market	40% faster product launches for teams with mature design systems	New brand expressions and market launches require only token layer updates, not full rebuilds
AI multiplier	Figma Make + AI code generation tools work best against structured, token-based systems	Breeze's token architecture makes every AI generation tool more effective — system becomes an AI output multiplier
New business models	A whitelabel system converts B2C infrastructure into a licensable B2B commercial asset	Breeze positions NGP Digital to extend the system model to new product categories or licensing partnerships

Breeze DS —NGP Digital