Creating a multi-themed, tokenised modern design system

I led the design of a multi-brand, multi-audience design system, working day to day with a small team of designers and engineers: tokens, UX patterns, skeleton structures, audience theming and white-labelling, built so that anyone could pick it up.

This wasn’t just about designing a new system, it was about driving the adoption and alignment behind it. We defined our own token naming conventions, architecture and system rules completely from scratch to fit our exact workflows, and I ran workshops and stress-tests to make sure the team understood not just how to use it, but why we were building it.

As the business expanded, it became critical to move beyond a static UI kit toward a scalable, multi-tenant ecosystem that could maintain consistency while accommodating the varying functional needs of students, universities and employers.

The value proposition. I positioned the system as a strategic source of truth designed to bridge the gap between design and engineering. By standardising the foundational elements, we shifted the team’s focus from the “what” to the “how”, letting designers and developers spend less time debating component selection and more time solving complex user experience challenges.

Stakeholder buy-in and AI readiness. Securing cross-functional buy-in was driven by the system’s ability to act as a force multiplier. I architected the framework to be machine-readable, enabling stakeholders to use our tokenised library inside AI tools for rapid, on-brand concept generation. The system was an investment in future-proofing rather than just a visual cleanup.

After benchmarking industry leaders like Google and Atlassian, I led the transition toward a functional-contextual token architecture. The goal was to move beyond a simple colour palette and create an instructional playbook that allowed designers and developers to move with accuracy across our multi-product ecosystem.

Pairing and accessibility. At the core of the system I implemented a Surface/On-Surface pairing logic. Every foreground element is programmatically tied to its container, baking WCAG AA contrast into the foundations of our code. Because these pairings are semantically linked, we can swap entire themes or modes without manual intervention, so accessibility is a constant, not an afterthought.

Luminance and density modes. To address our diverse user base, I moved away from traditional light and dark naming in favour of luminance-based modes, Brightest and Dimmer, and architected density tokens for compact and spacious layouts. Professional operators get high-density, complex data views while the student experience stays spacious, simplified and focused on discovery.

Transitioning a legacy environment to a tokenised system is a significant cultural shift. To mitigate risk, I led a siloed rollout using our AI MVP as a test environment, a real-world proving ground that let us stress-test the scalability of the tokens before full-scale deployment.

Cross-functional synergy and educational governance. Success in a design system is measured by engineering adoption, so I established a strategic partnership with the front-end tech lead. While my team architected components in Figma, we worked in tight feedback loops as developers mirrored them in Storybook. To internalise the logic, I facilitated workshops where engineers and designers mapped tokens to low-fidelity layouts with pencil and paper, resulting in immediate fluency and a drastic reduction in support requests.

Velocity, systemic cohesion and the AI guardrail. Developers can now independently spin up high-fidelity pages from the standardised library, leaving designers free to focus on complex problems. Visual discrepancies have been virtually eliminated, and the machine-readable tokens act as a strict guardrail when stakeholders iterate in generative AI tools, keeping every concept on-brand.

The most significant outcome of this initiative wasn’t the library itself, but the fundamental shift in our organisational culture. We moved from a fragmented, handoff-heavy workflow to a model of shared ownership. By treating the design system as a living product, with its own roadmap, versioning and stakeholder feedback loops, we built an infrastructure that doesn’t just support our current products but is architected for the next decade of AI-driven expansion.

This project proved that the success of a design system is measured by the silence of the team’s messages: when designers and developers have the autonomy to build with confidence and speed, the system is working. Our next phase will focus on codifying our motion language and micro-interactions, further closing the gap between static design and high-fidelity reality.