May-Jul 2025 • Silver Icing
Turned scattered UI into a unified system with a 0→1 Design System built from scratch
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, we had brand guidelines, but not a real design system.
We had:
A font
Two button styles (filled and outline)
Two brand colours (black and pink)
These worked as brand guidelines, but they weren’t enough to support a growing product.
There were no foundations for spacing, typography scale, responsiveness, or UI states like error, success, or loading. Because of this, developers often had to improvise UI decisions, which created inconsistencies and slowed down development as the product grew.
We needed a proper design system that could handle real scenarios and scale across devices, not just a few shared styles.
Previous sign-up experience and key pain points.
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.
Included:
Brand Foundations: colour, typography
Core inputs: buttons, inputs, checkboxes, links
Navigation: tabs, dropdowns, search
Feedback: alerts, tooltips, modals
Utilities: tags, chips, scrollbar
Components followed consistent interaction patterns and states (error, success, loading, disabled), reducing ad-hoc decisions and rework.
The system became a shared language for designers, developers, and stakeholders, helping teams move faster and stay consistent.
