A full design system built from the ground up — tokens, components, documentation, and a Storybook repository. From fragmented PDFs to a single living source of truth.
When I joined, our design and development workflow had a fundamental disconnect. Designers were working in Adobe Illustrator and handing over annotated PDFs — which meant no shared source of truth, no documented standards, and a process that relied heavily on interpretation.
Developers were colour-picking from PDFs and filling in gaps as best they could. Across our different line of business teams, consistency was impossible because everyone was starting from scratch every time.
Before touching a single component I started with conversations — specifically with our front end developers, to understand how they actually consumed design assets and what would work for them downstream.
I audited existing systems and identified that MUI was the right structural foundation for our use case, then researched how other systems were built before setting direction.
We were already using Ant Design but it wasn't working for us — components were drifting, and whenever developers made independent decisions they naturally gravitated toward MUI. Rather than fight that instinct I paid attention to it. If MUI was where the team defaulted under pressure, it made sense to make it the official foundation.
I also had a practical constraint: we needed a fully working system within a year. Starting from nothing in Figma wasn't an option. MUI gave us a strong, well-documented foundation to build on, with enough flexibility to layer significant bespoke components on top.
MUI as the structural backbone, with Infinity's own component and molecular layer built on top.
Token management in Figma meant a choice between native functionality or a paid plugin. The business didn't want to invest in tooling at that stage, so I designed a system that worked within Figma's native constraints — which forced a clarity of thinking that made the architecture better.
Changing brand is a palette swap, not a redesign.
The Storybook repository was the engineering team's domain — and I was deliberate about respecting that boundary. My role was to ensure that what I built in Figma was specific enough, documented enough, and consistent enough that translation into Storybook was unambiguous.
In practice this meant an ongoing approval process — components were built in Storybook, I reviewed them against the Figma source, and we iterated until they matched. Less a formal handoff, more a continuous conversation.
Vague designs don't survive contact with engineering. Infinity had to be exact so the devs could build with confidence.
Documentation in Infinity is ongoing — which is the honest reality of any living design system. The approach combines visual examples with annotations, giving designers and developers enough context to use components correctly without needing to ask. Good documentation is what turns a component library into something a team can actually be self-sufficient with.
Infinity didn't just improve design and development speed — it changed how the business builds products. It became the foundation for everything that followed.