May-Jun 2024 • Silver Icing
Building a Design System to Unify Scattered UI
I created the organization’s first Design System from the ground up, defining foundational tokens and codifying the full set of reusable components used across web, mobile, and internal tools. Beyond the visual foundations, I documented consistent interaction patterns, state behaviours, and best practices to reduce inconsistencies and rework. This became the shared language for designers and developers, supporting scalable product development.
The Problem
Brand Guidelines Without a System
When I joined, the team had brand guidelines and a UI kit that documented fonts, colours, button styles, and visual UI examples.
However, it functioned as a static style reference rather than a scalable design system.
While it defined how the UI looked, it lacked:
Clear hierarchy and usage rules across components and layouts
Spacing, layout, and responsiveness foundations
Defined interaction and validation states (error, success, loading, disabled)
Component behaviours that mapped to real product scenarios
As the product grew, designers and developers were forced to make ad-hoc UI decisions, leading to inconsistencies and slower development.
The team needed to evolve the existing UI kit into a true design system—one that could support real interactions, edge cases, and scale across devices.
Early UI guidelines documenting visual styles and component examples.
The Approach
Turning Patterns Into a System
I started by reviewing existing UI across products to see where patterns repeated, broke, or were being improvised. This helped me identify what actually needed to be standardized.
I used Atomic Design principles to structure the system:
Defined foundations and basic components first
Identified reusable patterns before designing more complex components
Built higher-level patterns only after the building blocks were stable
I worked closely with front-end developers and stakeholders throughout the process to ensure components were feasible and scalable across devices.
Documentation was treated as part of the system, with clear guidance for both designers and developers.
The goal was not to follow a framework perfectly, but to create a system that was easy to adopt, extend, and maintain.
Example of how a single input component scales from foundations to real product usage.
The Solution
A Shared System Teams Could Actually Use
The result was the company’s first Design System, used across web, mobile, and internal tools. It standardized core interactions and visual foundations while remaining flexible enough for real product needs.
Brand Foundations
A unified visual foundation ensured consistency across surfaces and platforms.
Core Inputs
Core input components defined consistent interaction patterns for data entry, validation, and feedback across the product.
Navigation Patterns
Navigation components established predictable patterns for moving between content and actions.
System Feedback
Feedback components provided clear, consistent system responses for success, error, and in-progress states.
Utility Elements
Utility components supported labeling, filtering, and secondary interactions without competing with primary actions.
Components followed consistent interaction patterns and states (error, success, loading, disabled), reducing ad-hoc decisions, rework, and implementation ambiguity.
The system became a shared language for designers, developers, and stakeholders, helping teams move faster and stay consistent.
