Case study · Design system · Product

The Universal Design Engine

Architecting a platform-agnostic ecosystem for multi-brand scalability.

How do you support seven high-growth products, run continuous funnel experiments, and maintain design-to-code parity without scaling team overhead?

You do not build a bigger UI kit. You build a reusable system architecture.

Over multiple years, I designed and scaled a platform-agnostic design system based on Atomic Design and JSON tokens, creating a reliable bridge between Figma and production code.

Role: Lead Product Designer and Design Systems Architect
Scope: Token foundations, component structure, versioning model, and design-to-code sync, across 200+ active funnel files in a 50+ person product org.
Timeline: Beta in 3 months, v1 by month 6. Refactored 5 times until the token core stabilized into the modular v4.0.1 foundation still in use today.
Collaboration: Product, Engineering, and Marketing across 6–7 active products.

Executive summary

The organization needed to scale multiple product brands quickly while reducing handoff friction and system drift between design and code.

I built a token-driven design system architecture with a Figma-to-GitHub sync loop, versioned component packages, and reusable foundations for multi-brand rollout.

The result: a 60% faster design-to-code feedback loop, safer updates across 200+ active funnels, and a portable design core that can outlive any single tool.

Central flow diagram

System map

This map shows the real product flow, from the first touchpoint through onboarding, feature interaction, and outcome states. Instead of a single central hub, it explains how decisions, data, and handoffs move across the journey so teams can see where experience quality is created, measured, and improved.

The challenge: multi-brand complexity at speed

The team was launching ventures rapidly while supporting 6–7 active products, each with distinct user flows and growth priorities.

Manual updates to color, spacing, and radius decisions across brands became unsustainable. Design and code drifted out of sync, creating handoff friction and "zombie" components no one trusted.

At the same time, we needed to preserve historical funnels for learning while keeping live experiences stable.

The architecture: design as structured data

I moved the source of truth out of isolated design files into a platform-agnostic JSON token model, with Tokens Studio acting as the bridge between design and development.

The ecosystem used software-style versioning (v4.0.1): global foundations in one repository and independently versioned component packages, so updates in one area did not destabilize legacy funnels.

We established a GitHub ↔ Tokens Studio loop: update atomic values in Figma, sync JSON to a branch, and pull tokens into code to maintain consistent UI behavior across products. It also kept the core token assets portable as raw JSON, which reduced vendor lock-in.

Workflow demo · synchronized source of truth

Figma
Tokens Studio
JSON
GitHub
Code

How tokens move from Figma through Tokens Studio into JSON and toward production code.

Token snippet · Tokens Studio atoms example

JSON token example and UI output

How one token file drives the same CTA in Figma and in code.

The same token JSON powers this live CTA preview, including variants, states, and resolved values through a lightweight iframe implementation.

Real token sample from the system showing how a single CTA pattern remains consistent from Figma to production.

The JSON preview needs JavaScript. Use the download button below to see the full file.

Download full .json example Prepared for the Tokens Studio plugin. Import the file directly into Tokens Studio to use it.

The plug-and-play rollout framework

A stable atomic foundation (spacing, color, typography) allowed new ventures to plug into the same system with minimal setup.

Designers could sync the latest branch and launch production-ready themed UI in hours, not weeks. Template-level support kept older funnels archived yet runnable for A/B learning without slowing current delivery.

Component anatomy

Atomic breakdown: component to token mapping

Breakdown of a single button into token layers for spacing, color, radius, and typography.

Impact: delivery velocity and system resilience

7+distinct product brands from one architecture
60%faster design-to-code feedback loop
JSONcore system DNA, portable beyond one tool
v4.0.1versioned ecosystem, safer component updates

Results view: multi-brand output from one core

Multi-brand output from one core: side-by-side products themed from the same token architecture.

Growth and performance: the value loop

I did not build the Design Engine for visual consistency alone. I built it for business velocity. The architecture enabled rapid funnel iteration, scalable A/B testing, and subscription-focused optimization across 6–7 active products.

Winning paywall and onboarding patterns from one product could be ported to another in hours, not weeks, allowing us to test more hypotheses with less implementation overhead.

+15–20%reported conversion uplift from reused patterns
Day 1stronger value clarity driving retention

The value loop

How system decisions turn into growth

The diagram maps how system decisions convert into faster experimentation and measurable growth outcomes.

Collaborative integration: human middleware

No design system survives in isolation. I led the communication loop between Engineering, Marketing, and Product, ensuring growth experiments stayed technically feasible while token architecture remained flexible. This operating rhythm reduced the handoff friction that typically slows cross-functional teams.

Outcome recap

Operationally, one versioned token architecture aligned design, engineering, and growth teams around a shared source of truth.
For the business, faster experimentation cycles turned proven UX patterns into reusable growth assets across products.
Long term, the JSON-first foundation keeps the design engine portable, resilient, and ready to evolve beyond any single tool.

Reflection: system thinking as a product advantage

This was not a side project; it became core product infrastructure. The main lesson: a strong design system is not a static library, it is a living, versioned product that helps teams ship faster, reduce risk, and make better decisions with confidence.

Have a project in mind?

I'm currently taking on select freelance projects and open to full-time opportunities. Let's build something great together.

Get in touch