A Modern Design System Built for Scalability & Consistency
Overview
Before the 5centsCDN redesign, the product had no consistency. I built a comprehensive design system that includes color tokens, typography scales, grids, spacing guidelines, components, templates, and best practices, creating a unified design foundation for both design & dev teams.
Challenge
The challenge demanded building a unified visual language across the entire product. I looked into the following issues:
Outdated system
No reusable components
Inconsistent spacing, icons, and colors
Longer development cycles
Objective & Goal
To create a scalable design language that speeds up design & development while maintaining consistency.
Process
I audited existing UI patterns and inconsistencies, then built a unified system of colors, typography, grids, semantic tokens, icons, and reusable components. By creating templates and documentation, I ensured the design system was scalable, developer-friendly, and ready to support rapid creation of new pages and features. I made sure the following elements were included, which are :
Color palette + semantic tokens
Typography scale (H1–H6, labels, UI text)
Grid + spacing system
Icon system
Components (buttons, inputs, cards, tables, banners)
Section templates for fast page building
Documentation: do’s & don’ts
Result
Redesigned the onboarding experience for a global CDN SaaS platform to improve user activation and retention. By simplifying the flow, refining plan categorization, and integrating customer segmentation, the redesign achieved 84% more direct purchases, 33% fewer inactive users, and a 78% boost in monthly revenue — proving the power of data-driven UX design in SaaS environments.
Learnings
Atomic design principles, consistency rules, and accessibility considerations shaped the design system's foundation. Having semantic naming and clear documentation proved crucial for developer adoption and long-term scalability.
Additional Learnings:
Design systems reduce decision fatigue and improve delivery speed.
Well-documented tokens ensure uniformity across teams.
Systems thinking creates sustainable product evolution.
Tools That Shaped This Project
You’ve seen the results now see