Globalfair Design System
Tokens, primitives, and patterns that scaled across 4 product lines and 60+ engineers.
Before a single pixel.
Discovery, framing, structure and validation — the work that decided what the screens had to be.
- 01Audit
Count everything
Catalogued 1,200 components across four products to see where the languages had drifted.
Component auditRedundancy mapColour/spacing inventory - 02Define
38 primitives, 92% coverage
Set the scope line: the smallest primitive set that covers almost everything teams actually ship.
Coverage analysisScope contractNaming conventions - 03Structure
Semantics over hex
Built an intent-based token layer (surface, intent, density) so components never reference raw values.
Token architectureTheming modelA11y contrast matrix - 04Ideate
Docs as a product
Prototyped the documentation site itself — live previews, copy-paste code, migration guides.
Doc-site wireframesContent modelCode examples - 05Validate
Adoption as the metric
Tracked reuse and doc-site analytics; embedded with each team for two weeks during rollout.
Adoption pulse surveysConsumer interviewsUsage analytics
Straight from the source.
Live captures of the shipped product and the design files behind it.
The brief.
Four product teams. Three accidental design languages. Globalfair DS unified them under one tokens layer — semantic, themable, and engineered so a button is a button is a button.
Every team had shipped their own primitives. Buttons varied by 4px of padding and seven shades of blue. We needed a system that respected speed without sacrificing coherence.
Talking to real users.
- ✦Component audit
- ✦Consumer interviews (devs + designers)
- ✦Adoption pulse surveys
- ✦Doc-site analytics
12 engineers · 6 designers · 3 PMs across 4 product lines
8 weeks audit + rolling adoption research
"I copy-paste from the last PR. That's my design system."
"I want tokens I can trust — not a Figma of best-effort ghosts."
How the study actually ran — four frames from field to evidence.
Audit four products
Catalogued every component, token and one-off across the shipped surfaces.
Ask the builders
Engineers and designers described where the system helped and where they detoured.
Token architecture
Restructured colour, type and spacing into a layered, themable token model.
Adoption, tracked
Measured component coverage per release until the system became the default path.
- Insight 01
Docs are the product
Adoption rose sharply once docs shipped runnable code, not just anatomy diagrams.
- Insight 02
Migration needs a partner
Embedded designer for two weeks unblocked more than any Loom could.
- Insight 03
Semantic tokens win
Teams stopped asking for new colors once intent tokens (danger/success/info) existed.
How it came together.
- 01
Audited 1,200 components across four products; landed on 38 primitives that covered 92%.
- 02
Defined semantic tokens (intent, surface, density) — never raw hex in components.
- 03
Shipped docs as a product: live previews, copy-paste code, a11y notes, and migration guides.
- 04
Embedded with each product team for two weeks during rollout to unblock in real time.