CMX Design System
Building a scalable design system and component library to unify UI across multiple products and teams.
About the project
CMX is an internal design system built to unify and scale product design across multiple applications and teams. The project focused on establishing a single source of truth for UI components, design tokens, and patterns - enabling faster, more consistent product development across the organisation.
What I Worked On
Led the design and documentation of a scalable component library and design system from the ground up. The focus was on creating a robust, well-documented foundation that both designers and developers could rely on daily.
Auditing existing UI across multiple products to identify inconsistencies and establish a baseline
Defining and documenting design tokens - colour, typography, spacing, elevation, and motion
Building a scalable component library in Figma covering all core UI patterns
Creating detailed component documentation including usage guidelines, do's and don'ts, and accessibility notes
Establishing naming conventions and file structure to support team collaboration at scale
Working closely with designer and developers to ensure accurate, efficient implementation across products
Challenge
Multiple products were being built in parallel with no shared design foundation - leading to visual inconsistencies, duplicated effort, and slow designer-to-developer handoff. Teams needed a reliable, scalable system that could grow with the product without becoming a bottleneck.
Solution
Built CMX from the ground up - a fully documented design system covering tokens, components, and usage patterns. Delivered a Figma library that gave designers instant access to production-ready components, paired with clear documentation that reduced ambiguity during development. The system was designed to be extensible, allowing new components and patterns to be added without breaking existing ones.
Impact
Reduced design inconsistency across products by establishing a single shared component library
Accelerated designer-to-developer handoff through clear documentation and token-based specs
Saved significant time on repetitive UI decisions by providing ready-to-use, reusable components
Enabled faster onboarding for new designers joining the team
Created a scalable foundation that continues to grow with the product
What You're Seeing
A production-ready design system - component library, token structure, and documentation built to scale across multiple products and teams.
