Case Study · Design Systems · Multi-Brand Platform

Proteus

A token-first design system that reduced multi-brand UI inconsistency from ~60–65% to <20%, and cut full reskins from 3–4 weeks to <4 hours.

100+ brands
Shared product core
Tokens → Components
Semantic architecture
Governance
Intake → Review → Release
80%+ adoption
System as default path
Proteus system overview — one product core, many brands, one consistent language
System at scale: one product core, many brands, one consistent language.
My role
Senior Product Designer
Design systems lead — tokens, components, governance, documentation
Scope
Multi-brand platform
100+ brands sharing one product core across casino, sports, and content verticals
Outcome
System became the default
Adoption grew from <15% to 80%+, reskins shifted from rebuilds to configuration

Context

What was broken

Multiple brands shared the same product core, but the UI had drifted: inconsistent spacing, typography, components, and behaviour. Rebrands became rebuilds, and quality depended on who touched the UI last.

Before: UI drift evidence across spacing, typography, components, and patterns
Before: drift evidence — spacing, type, components, patterns.

Impact

Proof

Tracked using delivery timelines, component audits, and repeatable UI variance checks.

Consistency
~60% → <20%
UI inconsistency reduced across spacing, typography, and behaviour
Speed
3–4 wks → <4 hrs
Full brand reskin time — rebuilds became configuration
Adoption
<15% → 80%+
Component adoption — system became the default path
Quality
~12 → ~4 bugs
UI regressions per release dropped 67%
Adoption and coverage data
Adoption: the system became the default path.
Reskin speed timeline comparison
Speed: reskins shifted from rebuilds to configuration.

Architecture

Stable structure, flexible brand layer

Semantic tokens capture intent. Brand tokens map intent to each brand’s look. Components consume semantic tokens — structure stays stable even when branding changes.

Token flow diagram showing intent staying stable while brand expression swaps
Token flow: intent stays stable, brand expression swaps safely.
System architecture — tokens to components to products
Architecture: tokens → components → products/brands, governed to prevent drift.
Token naming and structure
Token naming: rules that scale across design and code.
Brand token mapping
Brand mapping: swap values without breaking components.
Theming proof across multiple brands
Theming proof: same UI, different brands — consistent behaviour remains.

Before → After

Proof in the UI

Same patterns, same behaviour — brand expression comes from tokens, not one-off component clones.

Before: inconsistent UI patterns across forms, cards, banners
Before: forms, cards, banners — pattern breaks and drift.
After: consistent patterns with brand expression via tokens
After: consistent patterns, brand expression via tokens.

Components

QA-ready by default

Components shipped with states and behavioural rules — quality didn’t depend on memory or luck.

Component spec sheet showing anatomy, variants, states, spacing, and do/don't rules
Spec sheet: anatomy, variants, states, spacing, and do/don’t rules.
Core component library grid
Core library: the components that power most screens.
Interaction patterns — hover, focus, error, loading, disabled
Interaction patterns: hover, focus, error, loading, disabled.

Governance

A system that stays clean

Clear intake, review gates, and predictable releases — preventing design system entropy.

01
Intake
Capture request, triage, scope
02
Review
Design, a11y, impact, approve
03
Build
Figma, code, docs, QA
04
Release
Version, changelog, rollout

Takeaways

Design system principles

Tokens are the contract
They encode intent so design and code stay aligned — even across 100+ brands.
Components are the delivery layer
Variants + states reduce one-off UI decisions and ship quality by default.
Governance is a guardrail
It protects speed by preventing drift and duplicates — not by slowing teams down.

Thanks for reading

Discover more from thepace.me

Subscribe now to keep reading and get access to the full archive.

Continue reading