One system, five brands.
89% less effort to ship.

One system, five brands.
89% less effort to ship.

Atom is the multi-brand design system I built at DragonPass, a token-driven foundation that themes an entire product for any partner brand, and ships in days instead of months, wired end-to-end with AI.

Atom is the multi-brand design system I built at DragonPass, a token-driven foundation that themes an entire product for any partner brand, and ships in days instead of months, wired end-to-end with AI.

12.5

MD

To launch a channel

115

MD

The old way

89%

Effort saved

5

Brands, one system

Context
Context

Every partner channel was rebuilt from scratch.

Every partner channel was rebuilt from scratch.

The problem

The problem

DragonPass ships products through many partner brands — eSIM, transport and other non-lounge services. Each new channel was developed chimney-style: the full product re-built at ~100% effort, separately, across iOS, Android and web. The result was high coupling, low reuse and siloed work.

DragonPass ships products through many partner brands — eSIM, transport and other non-lounge services. Each new channel was developed chimney-style: the full product re-built at ~100% effort, separately, across iOS, Android and web. The result was high coupling, low reuse and siloed work.

The brief

The brief

With a $50m non-lounge revenue target riding on how fast new partners could go live, duplication wasn’t a tidiness problem — it was the bottleneck on revenue. The brief I set myself: separate what changes between brands from what stays the same, so a channel becomes a configuration, not a rebuild.

With a $50m non-lounge revenue target riding on how fast new partners could go live, duplication wasn’t a tidiness problem — it was the bottleneck on revenue. The brief I set myself: separate what changes between brands from what stays the same, so a channel becomes a configuration, not a rebuild.

Architecture
Architecture

Three files, one system

Three files, one system

Three Figma files, three token tiers, one attribute to switch brand. Primitives library owns raw values — the full palette, type and spacing scales. Brand Switcher maps intent per brand. Core Component Library consumes semantics only, never primitives.

Three Figma files, three token tiers, one attribute to switch brand. Primitives library owns raw values — the full palette, type and spacing scales. Brand Switcher maps intent per brand. Core Component Library consumes semantics only, never primitives.

How it works

How it works

Brand switches on a single [data-brand] attribute. Dark mode is an orthogonal axis — [data-brand][data-theme] — so themes multiply without multiplying components. Adding a brand means mapping tokens, not writing code.

Brand switches on a single [data-brand] attribute. Dark mode is an orthogonal axis — [data-brand][data-theme] — so themes multiply without multiplying components. Adding a brand means mapping tokens, not writing code.

File 01 · Primitives

Primitive Library

Raw values — the full palette, type and spacing scales. Brand-agnostic; the base every brand draws from.

File 02 · Semantics

Brand Switcher

Intent, mapped per brand. atom.foreground, atom.background, atom.border resolve primitives into meaning — five times over.

File 03 · Components

Core Component Library

The Atom design system — Button, Input, the Atom badge. Consume semantics only, never primitives.

Signature — try it

Switch the brand. Watch the system re-theme itself.

This panel uses the same data-brand token-swap the real system uses. The components below are unchanged between brands — only the resolved tokens move.

3 real Atom components · live from the Core Component Library
Steps
Purchase
eSIM
2
Activate
In progress
3
Ready
Pending
Switch
Auto-renew data plan
Tabs
Resolved tokens — DragonPass
Action / --bprgb(10, 35, 51)
Hover / --bsrgb(4, 84, 119)
Ink / --binkrgb(10, 35, 51)
Border / --bborderrgb(205, 203, 203)

Steps, Switch and Tabs are real components from the Atom library...

Foundation
Foundation

A primitives library that components can’t break

A primitives library that components can’t break

Primitives are the atomic layer — the smallest components every screen is built from. The rule that makes the whole system hold: a primitive never hard-codes a value. It reads a semantic token, which resolves from the active brand’s primitives. That single constraint is why six brands can stay visually distinct and still behave identically.

Primitives are the atomic layer — the smallest components every screen is built from. The rule that makes the whole system hold: a primitive never hard-codes a value. It reads a semantic token, which resolves from the active brand’s primitives. That single constraint is why six brands can stay visually distinct and still behave identically.

Core constraint
Core constraint

Behaviour, not pixels — Interaction and accessibility live in the primitive; brand lives in the token. The two never tangle.

Accessible by default — WCAG AA contrast is validated automatically, so no brand combination can ship an unreadable state.

Proven across the matrix — Every brand × every component is checked, so a change in one place can’t silently break another.

Behaviour, not pixels — Interaction and accessibility live in the primitive; brand lives in the token. The two never tangle.

Accessible by default — WCAG AA contrast is validated automatically, so no brand combination can ship an unreadable state.

Proven across the matrix — Every brand × every component is checked, so a change in one place can’t silently break another.

One source of truth

One source of truth

That single constraint is why six brands can stay visually distinct and still behave identically. Change a brand and nothing in the component layer moves — the tokens underneath do.

That single constraint is why six brands can stay visually distinct and still behave identically. Change a brand and nothing in the component layer moves — the tokens underneath do.

Live, read-only access

Live, read-only access

Token and variable audits across all six brand collections, component gap analysis, and design-to-code straight from the live files — no manual exports, no stale snapshots. The source of truth stays in Figma.

Token and variable audits across all six brand collections, component gap analysis, and design-to-code straight from the live files — no manual exports, no stale snapshots. The source of truth stays in Figma.

Closing the loop

Closing the loop

A REST-based plugin pushes generated documentation frames back onto the Figma canvas — so audits, docs and handoff all start and end in the same place designers already work.

A REST-based plugin pushes generated documentation frames back onto the Figma canvas — so audits, docs and handoff all start and end in the same place designers already work.

AI
AI

I wired the system to an AI layer

I wired the system to an AI layer

A live bridge between Figma and Claude turns the design system into something queryable, auditable and self-documenting from the source of truth. I had Claude Code generate the component documentation one component at a time from the live files — anatomy, spec, usage, token references per brand, and accessibility — so the docs stay grounded in reality.

A live bridge between Figma and Claude turns the design system into something queryable, auditable and self-documenting from the source of truth. I had Claude Code generate the component documentation one component at a time from the live files — anatomy, spec, usage, token references per brand, and accessibility — so the docs stay grounded in reality.

Proof in production
Proof in production

GA started three months late — and launched first.

Two channels, same destination. Investec was a traditional bespoke build at 115 man-days. GA ran on Atom’s reuse model at 12.5 man-days — launched first despite starting three months later. The gap is the case for standardisation.

GA launched 11 Dec. Investec launched 11 Dec + 6 days — despite GA starting roughly three months later. Investec: 115 man-days (traditional build — Backend 55 · Android 21 · iOS 21 · HS 18). GA with Atom: 12.5 man-days (frontend integration 6 · backend support 6.5). That’s 89% less effort.

GA launched 11 Dec. Investec launched 11 Dec + 6 days — despite GA starting roughly three months later. Investec: 115 man-days (traditional build — Backend 55 · Android 21 · iOS 21 · HS 18). GA with Atom: 12.5 man-days (frontend integration 6 · backend support 6.5). That’s 89% less effort.

89% less effort

89% less effort

Investec: 115 man-days (traditional build). GA: 12.5 man-days using Atom’s reuse model. Mastercard: 13 man-days, high-customisation channel, still lean.

Investec: 115 man-days (traditional build). GA: 12.5 man-days using Atom’s reuse model. Mastercard: 13 man-days, high-customisation channel, still lean.

Team impact
Team impact

Adoption was the real design problem. I solved it with people, not mandates.

A system only works if the team trusts and uses it. I ran one-to-one sessions with every designer to show Atom in practice, then led a group share-and-learn tying it back to the business goal. I worked shoulder-to-shoulder with engineering — responding to real constraints and adjusting where it needed to flex, rather than defending it rigidly.

A system only works if the team trusts and uses it. I ran one-to-one sessions with every designer to show Atom in practice, then led a group share-and-learn tying it back to the business goal. I worked shoulder-to-shoulder with engineering — responding to real constraints and adjusting where it needed to flex, rather than defending it rigidly.

And I led with evidence. Documenting impact clearly turned Atom from a design initiative into a proven business tool — leadership came to see it as a smarter way to deliver across the organisation.

That shift in perception, more than any single component, is the result I’m proudest of this year.

Problem Solver

Jumped into a live call with the GA team to solve the icon issue and avoid rework for everyone.

— Jay George
Awesome

Kudos for the work on Atom. High five all round.

— Catherine Thomas
Team Player

Thanks for jumping on a million design-system requests and bringing new components to life.

— Daniel Kenyon
Leadership

The data clearly shows improved efficiency and cost reduction — a new way of delivering great work.

— Recognised across DP leadership
Outcomes
Outcomes

What the system delivered.

89%

effort saved on a channel launch (12.5 vs 115 man-days)

60%+

expected reduction in duplicated code across channels

5

brands themed from one source of truth

Months → Days

time-to-market for a new partner channel

$50m

non-lounge revenue target the speed-up directly supports

100%

of designers onboarded to Atom hands-on

Make adding a brand a form, not a project

Make adding a brand a form, not a project

Maturing the semantic-token layer, baselining impact metrics earlier, and turning brand onboarding into something a non-technical contributor can do by filling in values — so the system scales well beyond six brands without an engineer in the loop.

Maturing the semantic-token layer, baselining impact metrics earlier, and turning brand onboarding into something a non-technical contributor can do by filling in values — so the system scales well beyond six brands without an engineer in the loop.