Reconstructing Nimbus Design System
Timeline
2 Years
Year
2024-2025
Role
Lead Design Engineer
Company
TLDR;
Reduction in Code Debt: Pruned 120k+ lines of redundant custom CSS across 14 micro-apps.
84%
Core challenge
Console Connect built "Nimbus"—a shared component library intended to support rapid product growth. However, it quickly devolved into a fragmented collection of disjointed assets, drifting documentation, and loose governance.
Solution
I transformed Nimbus into a true, scalable design system. By unifying Design and Engineering, establishing strict code-aligned standards, and building in solid defaults, we restored consistency and streamlined delivery.
As the Console Connect platform scaled, our shared component library, Nimbus, started falling apart under the weight of rapid product growth.
What was supposed to be a single source of truth had mutated into a fragmented mess.
Design assets didn't match production, documentation was drifting, and developers were relying on tribal knowledge or just rewriting custom CSS to get feature work out the door.
My contribution
I stepped into the Lead Design Engineer role to own the entire transformation process from the ground up.
Research
Rather than making assumptions, we conducted workshops and interviews with designers and developers across multiple teams to understand the underlying issues and identify the root causes.
Lack of Standardisation
Teams lacked clarity around what constituted a core Nimbus component, when new components should be added, and how they should be structured and documented. This led to inconsistent implementations and reduced confidence in reusing existing patterns.
Poor alignment from Design to Development
Figma UI Kit components did not consistently align with Storybook or production implementations, creating multiple sources of truth. This inconsistency caused developers to waste time during implementation searching for components.
Governance
Figma UI Kit components did not consistently align with Storybook or production implementations, creating multiple sources of truth. This inconsistency caused developers to waste time during implementation searching for components.
How do we fix this?
Nimbus needed stronger technical foundations and to build trust back within it's system. Through workshops with developers and designers we curate a core set of components to create a true design system built on shared ownership, clear governance and a modern, accessible technical foundation.
Choosing a library was a challenge…
Everything in Nimbus was custom-built so we needed to move faster. We decided to leverage a third-party library.
We rejected rigid off-the-shelf libraries like Chakra UI and Mantine in favour of the flexibility to evolve our own components and documentation, while using headless React Aria as our foundation to avoid reinventing complex accessibility behaviours and meet WCAG AA standards.
I personally developed every component in the system, continuously evolving its architecture as React Aria introduced new patterns and capabilities.
Results
Rebuilding collaboratively & with AI assistance
A significant challenge was resourcing. Engineering capacity was focused on feature delivery, meaning dedicated engineering resources were not available for design system development. The only possible way forward was to resource the implementation work within the Design team.
I was tasked with the bulk of the implementation, with necessary design and engineering support from the respective teams. The Developers also picked up components to build when they had capacity. This setup cultivated shared ownership, while also allowing the system to progress despite limited dedicated engineering capacity.
Accelerating development through dedicated focus and AI
With only a single dedicated resource implementing the design system, AI tooling became an important accelerator.
Rather than manually managing component syncs and boilerplate, I would leverage model context protocols, repo-level AI skills, and AI-native component architecture to scale the design system across the entire business:
Figma MCP & Token Sync: Connect Figma directly to local IDEs using Model Context Protocol (MCP) servers. An AI agent can read live Figma node structures and Design Token files directly, auto-generating exact React component code and keeping Figma variants and React props in 1:1 sync without manual overhead.
Organization-Wide Design System "Skills": Standardize a dedicated
SKILL.mdfile across all company repositories. By embedding Nimbus design rules, token usage guidelines, and component import paths into this skill file, every engineer using AI coding assistants (like Claude Code) across the business automatically generates 100% Nimbus-compliant UI code.Agentic Boilerplate & Auto-Docs: Use Gemini code assist to translate complex
react-ariabehavioural hooks into fully tokenized Nimbus components in seconds. Point an LLM directly at typed React props to auto-generate complete Storybook documentation, accessibility usage guides, and interactive examples with zero manual writing.
Reflection
Over two years, this project taught me that building a design system is just as much about organisational politics and momentum as it is about writing clean code. By stepping into that gap—writing the foundational code, enforcing strict Figma-to-React parity, and personally driving the PRs through engineering—we turned a failing library into a trusted, widely adopted system.