Enterprise · Design System · 2022

Global Component Library

One logical framework underneath eight distinct brand expressions — operable by local teams across 83 countries who had never worked in a design system.

Scroll to explore

← Drag or scroll →
01

Problem

8 Brands, 0 System

Hundred-year global coatings leader with no shared design language.

8Sub-brands unified
02

System

Multi-Brand Tokens

Semantic layer supporting brand variation without duplication.

83Countries served
03

Process

Local Team Enablement

Built for teams who had never used a component library.

22Weeks to launch
04

Outcome

One System

Single framework, eight brand expressions, global consistency.

100Years of heritage
Client
Hempel Group
Engagement
Design Systems Lead
Duration
22 Weeks
Primary Outcome
8 Brands · 1 System
Stack / Tags
Tokens · Figma · Multi-brand

Artifacts from this engagement

Industrial / Global System / B2B

Global
Component
Library.

Hempel Group is a 100-year-old global leader in protective coatings — ships, infrastructure, wind turbines, buildings. Eight distinct sub-brands. Eighty-three countries. One company with no shared design language between any of them. This engagement built the component library that changed that: a single logical framework underneath eight distinct brand expressions, operable by local teams who had never worked in a design system before.

0
Sub-brands Unified
83
Countries Operating
52%
Faster Campaign Deployment
2021
Year Completed
Client
Hempel Group
Role
Design Systems Lead
Timeline
22 Weeks
Outcome
8 Brands · 1 System
03
Section 01
The
Problem.
Eight brand identities, none of them related. One company trying to operate like eight.
One Company.
Eight Design Languages.
Zero in Common.

Hempel's growth had been acquisitive — eight sub-brands built or bought over a century of operations, each with its own identity, its own digital infrastructure, and its own design approach. From a distance, this looked like diversity. From inside, it looked like eight separate companies that happened to share a parent organisation and a supply chain.

The cost was concrete. A campaign that needed to reach ship operators in Rotterdam, infrastructure project managers in Dubai, and wind farm developers in Denmark required eight separate design efforts even when the message was identical. Local marketing teams in each country were building from scratch every time. The design variance between what Hempel looked like in Germany versus what it looked like in South Korea was not a brand strategy — it was organisational entropy that had accumulated undisturbed for decades.

01
No shared component foundation — every sub-brand's digital presence was built independently. Buttons, forms, navigation patterns, card structures, and typographic systems had no commonality. A UI component built for Hempel Marine was incompatible with Hempel Infrastructure in every meaningful sense.
02
Campaign deployment took weeks, not days — global campaigns required each regional team to re-implement the same assets in their own stack. A product launch that should have taken five days of design work was taking four to six weeks because the same work was being done eight times independently.
03
Brand consistency was aspirational, not operational — brand guidelines existed as PDF documents. They described what Hempel should look like but provided no mechanism to actually make it look that way. Local teams with no design resource defaulted to whatever they could execute, which was rarely what the guidelines specified.
04
B2B buyer journey was fragmented across sub-brands — a buyer procuring coatings for a mixed-use development — marine sections, structural sections, and interior spaces — had to navigate three separate brand environments with three separate contact points, three separate forms, and three separate pricing conversations. The customer experience was a direct reflection of the internal organisational fragmentation.
04
Section 02
The
Process.
22 weeks. Audit-first. Every component decision justified by usage data, not opinion.

Audit Before
Architecture.

Global design systems fail when they're designed from abstraction — when an architect invents a logical structure without first understanding what actually exists. The Hempel audit catalogued every component in active use across eight brands before a single design decision was made.

Key Insight · Week 4 · Cross-brand Audit Complete
Eighty-three percent of all UI components in use across eight brands were functionally identical — only visually different. The unification work was not design invention. It was design recognition of what already existed.
01
Cross-Brand Component Audit
Weeks 1–5

Catalogued every UI component across eight sub-brand digital properties — 340+ unique components identified, mapped to functional categories, and analysed for structural similarity. The audit revealed that 83% of all components served identical functions across brands; only their visual expression differed. This finding reframed the entire engagement: the system needed to separate structure from skin at the component level.

02
Token Architecture Design
Weeks 6–10

Designed the three-tier token system: primitive tokens (raw values — colours, spacing, radii), semantic tokens (purpose-assigned — primary-action, surface-default, text-secondary), and brand tokens (the per-brand layer that overrides semantic tokens to produce each sub-brand's distinct appearance from a shared structural base). This architecture meant a single component could serve all eight brands simultaneously by swapping only the brand token layer.

03
Core Component Build
Weeks 11–17

Built 47 core components covering 94% of all identified use cases across the eight brands. Each component built at the structural level with full brand token coverage — meaning every component shipped simultaneously in eight brand variants. Accessibility compliance (WCAG AA) built into the component specification, not retrofitted. Documentation written for local marketing teams with no design background, not for design system engineers.

04
Regional Rollout + Governance
Weeks 18–22

Phased rollout across eight brands with regional adoption support — working sessions with local teams in Copenhagen, Hamburg, Dubai, and Singapore to transition from existing systems. Established the design system governance model: a central system team owning the core library, brand leads owning brand token layers, and regional teams operating within the component framework with a structured contribution protocol for edge cases.

05
Section 03
The
Solution.
Four architectural decisions that made one system serve eight brands without flattening any of them.
01
01
Structure / Skin Separation

Every component built at the structural level — layout, spacing, interaction states, accessibility behaviour — with brand expression entirely managed by the token layer above it. Changing a brand's visual identity requires changing its token set, not rebuilding its components. The system supports brand evolution without component reconstruction.

02
02
Three-Tier Token System

Primitive → Semantic → Brand. Primitives hold raw values. Semantics assign purpose. Brand tokens override semantics per sub-brand. A single change at the primitive level propagates correctly across all 47 components in all eight brands simultaneously. Brand changes are localised. System-wide changes are atomic.

03
03
Non-Designer Documentation

Documentation written for the actual users of the system — regional marketing coordinators in 83 countries, most without design backgrounds. Every component page includes a usage decision tree ("when to use this / when not to"), a brand variant switcher, and explicit do/don't examples. The system is usable without a designer in the loop.

04
04
Federated Governance Model

Central ownership of the core component library. Brand leads own their token layers. Regional teams operate within the framework with a structured contribution protocol. No single team is a bottleneck. The system grows through contribution, not through central committee approval of every edge case. Governance designed to stay lightweight as the organisation scales.

Hempel Component Library · Token Architecture + Brand Coverage
Tier 01 · Primitive Tokens · Raw Values
color-blue-600
color-red-500
space-4
space-8
radius-0
radius-2
weight-300
weight-700
size-14
size-16
size-24
Tier 02 · Semantic Tokens · Purpose Assigned
color-primary-action
color-surface-default
color-text-primary
color-text-secondary
space-component-padding
space-section-gap
radius-interactive
type-heading-lg
type-body-sm
Tier 03 · Brand Tokens · Per-Brand Overrides
hempel-marine.primary
hempel-infra.primary
hempel-protective.primary
hempel-wind.primary
hempel-decorative.primary
hempel-yacht.primary
hempel-industrial.primary
hempel-group.primary
Marine
Infra
Protective
Wind
Decorative
Yacht
Industrial
Group
Fig. 01 — Three-tier token architecture. 47 core components serving all 8 brands through brand token layer. One structural truth, eight visual expressions.
06
Section 04
The
Outcome.
What changed — in deployment speed, brand consistency, and the cost of operating at global scale.
8
0
Brands Unified
All 8 sub-brands operating from one component library
52
0%
Campaign Speed ↑
Faster global campaign deployment vs. previous approach
47
0
Core Components
Covering 94% of all identified use cases across all 8 brands
83
0
Countries Served
Regional teams operating the system without central design dependency
Global campaign deployment time dropped from 4–6 weeks to under 2 weeks — the single biggest operational cost of the fragmented system was time. When regional teams stopped rebuilding shared assets from scratch, that time collapsed. The first campaign deployed after system launch reached all 83 countries in 11 days.
Brand consistency scores increased 40 points on internal audit — the annual brand consistency audit, which had flagged systemic variance for three consecutive years, showed 40-point improvement in the first post-launch assessment. The improvement was structural — the system made consistency the path of least resistance for regional teams.
Regional teams became self-sufficient without losing brand integrity — the non-designer documentation removed the dependency on central design resource for routine market activities. Regional teams in 14 markets were executing independently within 90 days of rollout, with no brand violations flagged in the first quarterly review.
The system was extended to three additional Hempel acquisitions within 12 months — the federated governance model and brand token architecture made onboarding new brands a structured 4-week process rather than a multi-month design project. The system proved its durability through the acquisitions it was never designed for.
"

We had tried to build a shared design language twice before and failed both times. The system always collapsed under the weight of eight brands trying to protect their own identity. Raghvendra solved that problem architecturally — by separating the structural layer from the brand layer, he made it technically impossible for one brand to compromise another. That architectural insight is why this system survived and the previous attempts did not.

Global Digital Director
Hempel Group · 2021
07
Section 05
Key
Learnings.
What multi-brand design systems at industrial scale permanently changed about how unification work gets approached.
01
01
Unification is Recognition.

The instinct in multi-brand system work is to invent — to design the ideal shared component from principles. The audit finding at Hempel inverted that: 83% of what existed already was functionally shared. The work was not creation but recognition — seeing the shared structure underneath the visual divergence and naming it. Auditing before architecting is not a phase to compress. It is the work.

02
02
Architecture Resolves Politics.

The two previous attempts at a Hempel shared system failed because brand managers vetoed components that felt like compromises to their brand identity. The structure/skin separation resolved this politically by making it architecturally true: no brand ever shares visual expression with another. Brand identity is preserved at the token layer. When the architecture makes compromise unnecessary, the resistance disappears.

03
03
Document for the Actual User.

Design system documentation is almost always written by designers, for designers. At Hempel, the actual system users were regional marketing coordinators in 83 countries who had never opened Figma. Documentation written for them — with decision trees, plain language, and explicit examples — delivered three times the adoption of the previous system's technical documentation within the same timeframe.

04
04
Governance Before Completion.

Design systems die in the gap between "the core system is built" and "the org knows how to maintain it." At Hempel, governance was designed and communicated from week six — before the components were finished. Every stakeholder knew their role before the system launched. The federated model meant no single team became a bottleneck, which is why the system survived three acquisitions it was never designed for.

← Previous Case Study
Design
Practice
Nagarro · DesignOps · 0 → 60 Designers
Next Case Study →
Design
Framework
IIAD
IIAD · Academic Curriculum · AI + Design Thinking

Multi-Brand
Design System?

DesignOps 360 covers multi-brand system architecture — token systems, component libraries, governance models, and the documentation that makes them survive in organisations that don't have designers on every team. Transparent pricing from ₹8L.

Initiate Inquiry ↗

Explore More
Work.

Seven more case studies across enterprise logistics, fintech, urban mobility, practice building, and AI strategy — all built on the same structural rigour applied here.

View Selected Work ↗