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.
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: faster iteration cycles, safer updates across active funnels, and a portable design core that can outlive any single tool.
Role & Scope
Role: Lead Product Designer and Design Systems Architect
Scope: Defined token foundations, component structure, versioning model, and design-to-code synchronization workflow.
Collaboration: Worked across Product, Engineering, and Marketing to keep experimentation fast, feasible, and measurable across 6-7 active products.
Central Flow Diagram
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.
02. 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.
03. 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.
This loop preserved design-to-code parity and accelerated component iteration. It also kept the core token assets portable as raw JSON, which reduced vendor lock-in and made future migration to other token-management tools realistic.
Workflow Demo: Source-of-Truth Sync Loop
Looped clip — how tokens move from Figma through Tokens Studio into JSON and toward production code.
JSON Token Example and UI Output
Loading JSON…
Real token sample from the system showing how a single CTA pattern remains consistent from Figma to production.
Download full .json exampleThis example is prepared for the Tokens Studio plugin. Import the downloaded file directly into Tokens Studio to use it.
The same token JSON powers this live CTA preview, including variants, states, and resolved values through a lightweight iframe implementation.
04. 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.
Atomic Breakdown: Component to Token Mapping
05. Impact: Delivery Velocity and System Resilience
Results View: Multi-Brand Output from One Core
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.
One shared token architecture turned cross-team experimentation into a reusable growth engine.
Flow map: teams feed one shared token core, then winning patterns are distributed into CRO, A/B testing, and subscription growth loops.
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.
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.
- From a business perspective, faster experimentation cycles turned proven UX patterns into reusable growth assets across products.
- Long term, the JSON-first system foundation keeps the design engine portable, resilient, and ready to evolve beyond any single tool.
06. 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.