Imperial Brands
Breeze DS
A unified design system spanning multiple brands and markets — enabling consistent experiences while respecting each portfolio identity.
OVERVIEW
Breeze DS anchors digital product teams across Imperial’s NGP portfolio with shared tokens, components, and governance so squads ship faster without fragmenting UX.
CHALLENGE
Scale without sameness
Each brand needed distinct voice and visuals, yet engineering demanded one codebase and predictable release cadence.
Stakeholders ranged from regulated-market compliance to agile product triads — documentation and contribution models had to be crystal clear.
THE APPROACH
DISCOVERY & INSIGHTS
Teams kept reinventing patterns that already existed three squads away — we needed visibility and reuse, not another one-off hero.
Research synthesis — design–engineering workshops
INFORMATION ARCHITECTURE
Mapped core journeys (browse, educate, verify age, subscribe) across brands and consolidated shared steps into modular flows with brand-specific skins.
DESIGN SYSTEM & PROTOTYPING
- #0d3d3a
- #1a7a73
- #24a89e
- #4ac8e8
- #f5f5f5
Established token tiers (color, spacing, elevation) plus React implementations with lint rules and accessibility checks baked into CI.