Design System
Two products, shipping every two weeks, both needed a shared foundation — and Resware is just one brand under a much bigger platform, Qualia. We built Resware's own component library on a token system that's roughly 90% shared with Qualia, connected end-to-end from Figma variables to production code, with nothing lost in translation.
Surfaces
Two products were shipping every two weeks, and Resware is just one of several brands under Qualia — without a shared foundation, every screen risked becoming its own inconsistent one-off.
Proposed and built a token-based design system connected end-to-end through Figma — variables, Code Connect, and a documented component library — so design and code never drift apart.
Shipped new products and features 35% faster, with 90% UI consistency and far less redundant, one-off code across the org.
Problem
Design System started because two products needed to ship fast without falling apart at the seams — and Resware is just one brand living under a much bigger platform, Qualia. Nobody asked for this; I proposed it once I could see where things were headed.
No shared foundation — every new screen risked reinventing its own spacing, color, and component patterns from scratch.
One-off components — without documentation, engineers occasionally built their own version of something that already existed.
Resware isn't alone — as one of several Qualia brands, anything built just for Resware risked drifting from what every other brand needed too.
Research
The real architecture question was scope — was this a Resware system, or something bigger? Looking at how Qualia's other brands were already styled made the answer clear: a shared foundation everyone could stand on, with room for Resware's own identity on top. That split in scope matched how the work actually got done — I'm the lead and sole contributor on Resware's layer of the system, and I contribute alongside one other designer on the shared Qualia foundation underneath it.
A 3-tier token system, ~90% shared
Universal Qualia tokens make up about 90% of what Resware uses, with a handful of Resware-specific brand tokens on top and legacy aliases kept only for backward compatibility. Components themselves are still built separately for each brand — it's the tokens that are shared, not the components.
One source of truth, in Figma
Tokens live as Figma variables and export to a single JSON file — change a value once, and it updates everywhere, in every brand.
Code Connect, not a static handoff
Every component in Figma links directly to its real production code, so what a designer sees in Figma and what's actually shipped are the same thing.
Design
Token → component usage
The system documents everything a component needs: tokens for surfaces, text, spacing, border radius, and elevation; 17 Resware-specific components from Accordion to Tooltip, built on MUI rather than reused from Qualia's own component set; and adoption guidance — architecture, theming, a migration guide, and a pattern handoff — so anyone in the org can look up how something should be built instead of guessing.
Every token page shows exactly where it's used in the real codebase — the actual component file and the real CSS — so there's no ambiguity about what a token like --surface-primary actually does or where it shows up. And because Resware's tokens are roughly 90% shared with Qualia's, anything Resware-specific is marked clearly, with legacy aliases struck through so nobody builds new work on a token that's already being phased out.
Outcome
Once the system was in place, shipping new products and features got 35% faster — no more building foundational pieces from scratch on every screen. UI consistency across every product reached 90%, and the amount of redundant, one-off code teams had to maintain and support dropped sharply, since there was finally one clear source of truth to build from instead of everyone improvising their own version.
What we learned
The biggest shift wasn't the tokens or the components — it was proposing this in the first place. Nobody asked for a design system; I suggested it because I could see two products about to run into the same problems Qualia's other brands had probably already solved. Building it once, for every brand instead of just Resware, took longer up front — but it's exactly what let AI Assistant and Admin Tool ship on a two-week cadence without falling apart.
