Design System Transformation

The Challenge

Zuno's frontend teams needed a shared component library to support consistent development across 3 brands. With roughly 30 engineers working across separate projects, there was no unified approach to UI components, which meant inconsistent interfaces, repeated accessibility work, and a growing maintenance overhead. With white-label partnerships on the horizon, the team needed a scalable, accessible design system that could support multiple brands without fragmenting the codebase.

Approach

I built a 56-component design system using React 19, TypeScript, and Storybook, organised into a three-tier architecture: 6 primitives, 37 core components, and 13 patterns. I used CVA for variant management, compound components for composability, and polymorphic forwardRef for flexible rendering. Every component was built with WCAG AA compliance from day one, covering keyboard navigation, screen reader support, and focus management. I delivered a multi-tenant theming system using DaisyUI design tokens on top of Tailwind CSS, enabling 3 brand variants (BOXT, E.ON Next, Zuno) to ship with consistent UI. Across 62 merged PRs I wrote 81 test suites, created 68 Storybook story files, authored 74 MDX documentation pages, and integrated a 141-icon library. I also worked closely with the design team to bridge the gap between Figma designs and production-ready accessible implementations.

Tech Stack

React 19, TypeScript, Storybook, Tailwind CSS, WCAG 2.2, Chromatic, CVA, DaisyUI

Role

Senior Front-End Engineer at Zuno (Jan 2025 - Present)

Impact

• 56 composable units shipped across 540 files and 214k+ lines of code, giving ~30 engineers a shared, documented source of truth
• 100% WCAG AA compliance across all non-colour-contrast criteria
• 3 brand variants (BOXT, E.ON Next, Zuno) powered by multi-tenant theming via DaisyUI tokens
• 81 test suites, 68 story files, and 74 MDX documentation pages delivered across 62 merged PRs