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, using MCP so Claude Code could read designs directly, Storybook to build and document components, and Code Connect to keep design and code 1:1.
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
Getting here took alignment on two fronts: with our PM on why this was worth prioritizing against two products' feature roadmaps, and with engineering on what a shared token pipeline could realistically support technically. The real architecture question was scope: was this a Resware system, or something bigger? I'd already been working alongside another designer on Qualia's shared foundation, establishing the three core token tiers (greys, brand, and interstitial/status colors) and building them out into atoms and molecules, atomic-design style, refactoring older code into proper components and tokens as we went.
So when the Resware AI Assistant started shipping every two weeks and it was time to figure out where Resware's own system should start, the answer was already there: since we're one company, Resware should speak the same token language as everyone else: the same greys, the same status and interstitial colors, with only the brand color changing, like theming. I validated that approach with the other designers on the team before committing to it, and everyone agreed it was the right call. 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, pulled into a shared GitHub repo: 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 toolchain is what makes this hold together day to day. Claude Code connects to Figma through Figma's MCP server, so it can read live design files, tokens, and component specs directly instead of working from a static export or a spec someone typed up by hand. Storybook is where every component actually lives: built, documented, and tested in isolation, so engineers and I are always working from the same source instead of a component that only exists in a Figma file. Code Connect then keeps each one linked 1:1 to its real production code, so what a designer sees in Figma and what's actually shipped never drift apart.
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. Those same components are what AI Assistant and Admin Tool are actually built from, not just similar-looking screens, but the literal same building blocks.
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.
Establishing the system was only half the work. The other half is getting everyone to actually use it. Like most organizations, we had years of tech debt: hardcoded colors and spacing values, one-off components built before there was a shared library to pull from. A dedicated Production Hardcodes section tracks where those still live in the codebase, and the Migration Guide walks engineers (new or long-tenured) through replacing them with real tokens and components instead of guessing or reaching for another one-off.
Outcome
Once the system was in place, shipping new products and features got 35% faster, since there was 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.
Claude Code is what made that compound. Reading tokens and components straight out of Figma through its MCP connection, Claude Code could generate front-end work that was reusable and on-brand by default, for engineers, and for me prototyping directly as a designer. That mattered more as the engineering team grew, not less: without a shared foundation, more engineers usually means more one-off tech debt, not fewer. Instead, the design system became a guide that Claude and engineers both followed, which meant I could build UI myself and get it right the first time, taking real front-end work off engineers' plates instead of just handing them a spec to interpret.
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.
None of it happened all at once, either. We approached it in bits and pieces, one token tier, one component at a time, so we could validate and get feedback early, and push working code faster, instead of trying to design the whole system up front. And components got built and tested in Figma and in production together, in sync, not handed off one after the other, which is exactly what Code Connect was for.
