I focused on building a system that could scale across both design and engineering.

Establishing Foundations

I rebuilt the colour system using primitive and semantic tokens, enabling light and dark mode support while keeping components theme-agnostic.

Typography was standardised through shared variables for size, weight, line height, and font family. Working closely with engineering, we aligned the system with Tailwind conventions rather than introducing unnecessary custom scales.

To create a single source of truth, I introduced a unified icon library using Tabler Icons and consolidated all illustrations into a standardised asset library.

Building the Component Library

With the foundations in place, I adapted 46 DaisyUI components and built 5 custom components from scratch. Components were built using an atomic approach, allowing reusable building blocks to be combined into more complex patterns.

The most complex challenge was the chat experience.

Because learning happens through conversation, the chat system needed to support AI responses, MCQs, answer states, video content, and feedback actions. Rather than creating separate variants for each scenario, I designed modular building blocks that could evolve alongside the product.

Every component was documented with usage examples to help the team understand not only what existed, but how it should be applied.