UX/UI DESIGN · DESIGN SYSTEM
The design system was built to unify 12+ product teams across web and mobile. It established consistent design patterns, reduced redundancy, and cut development time by 40%, becoming the foundation for all new product work.
Comprehensive token system covering colors, typography, spacing, and motion
200+ production-ready components with full accessibility compliance
Interactive documentation site
Automated design-to-code workflow reducing handoff friction by 60%
The Problem
Whenever we started a new project or updated an existing one, we kept relying on components that weren’t scalable or accessible. With no clear ownership of the Design System, one-off components with inconsistent naming were continually added, making an already messy system worse.
As a result, the Design System became cluttered, and we often had to work with broken or unreliable components.
To resolve this, we needed to:
Rebuild outdated components
Audit and consolidate existing use cases
Define consistent, reusable use cases for each component
Redesigned Design System
Accessibility
Although brand guidelines were in place, we identified font sizing issues while building the design system. The brand’s 16px font rendered much smaller than expected—meeting minimum requirements on paper but failing real-world legibility.
We increased font sizes across the system to improve readability.
We also conducted colour contrast and screen reader testing to ensure all brand colours met accessibility standards and performed well across use cases.
Modes
I set up mode variables to support both light and dark themes in the design system.
Using design tokens for colours, text, and elevation, components automatically adapt to the active mode. This approach kept the system scalable, consistent, and easy to maintain across themes.
Documentation
The Design System has been clearly documented in Zeroheight, which is accessed internally only, providing a consistent and user-friendly reference for designers and developers. This includes:
A clear description of each component, outlining what it is and how it’s typically used, often supported by helpful dos and don’ts for added clarity.
Visual examples, ensuring teams can quickly understand the component at a glance.
Usage guidelines, detailing when and how to use each component to maintain consistency and best practices.