Establishing A Design System To Enable Platform Scale
Establishing A Design System To Enable Platform Scale
Built a systematic design foundation from scratch—transforming brand colors and typography into a scalable system with 50+ components that enabled consistent, rapid feature development.
Built a systematic design foundation from scratch, transforming brand colors and typography into a scalable system with 50+ components that enabled consistent, rapid feature development.
MVP
Accessibility
Scalable design system
Scalable design system
Figma
Accessibility
MVP
MVP
Scalable design system
Figma
Figma
Establishing A Design System To Enable Platform Scale
Built a systematic design foundation from scratch—transforming brand colors and typography into a scalable system with 50+ components that enabled consistent, rapid feature development.
MVP
Accessibility
Scalable design system
Scalable design system
Figma
Accessibility
MVP
MVP
Scalable design system
Figma
Figma
Role
Role
Product Designer
Product Designer
Year
Year
2024-25
2024-25
My Impact
My Impact
Component Library Rebuilt
Component Library Rebuilt
Boosted UI Consistency
Boosted UI Consistency
Enabled Rapid Scaling
Enabled Rapid Scaling
Overview
Legacy app did not have a Design System, It created Visual Inconsistency and fragmented User experience across the platform.
Legacy app did not have a Design System, It created Visual Inconsistency and fragmented User experience across the platform.
With the platform undergoing a complete redesign, I saw an opportunity to establish a proper design system.
With the platform undergoing a complete redesign, I saw an opportunity to establish a proper design system.
Problem
The existing design system had fundamental issues preventing platform growth
The existing design system had fundamental issues preventing platform growth
The platform had brand colors and typography defined, but lacked any systematic approach to design, creating inconsistency and slowing development.
The platform had brand colors and typography defined, but lacked any systematic approach to design, creating inconsistency and slowing development.
No Component Library
Inconsistent Colors
No Hierarchy Critical Data
Every feature required designing buttons, inputs from scratch
Every feature required designing buttons, inputs from scratch
No Component Library
Brand colors used as-is without tints or systematic application, so there was not way to create heirarchy.
Brand colors used as-is without tints or systematic application, so there was not way to create heirarchy.
Inconsistent Colors
Single black was used for majority of text. The lighter text was not meeting accessibility contrast .
Single black was used for majority of text. The lighter text was not meeting accessibility contrast .
No Hierarchy Critical Data
What we had
Brand colors
Typography
Buttons
What was missing
Hue-based tints/shades
Text hierarchy system with newfont
Component library
Standardized spacing and layout patterns
Token-based system for implementation
Systematic approach to color application
Text fields
Banner, models and toasts.
What we had
Brand colors
Typography
Buttons
What was missing
Hue-based tints/shades
Text hierarchy system with newfont
Component library
Standardized spacing and layout patterns
Token-based system for implementation
Systematic approach to color application
Text fields
Banner, models and toasts.
APPROACH
Figuring Out Where to Start
Figuring Out Where to Start
Building a design system from scratch while shipping features required a pragmatic approach. Rather than waiting for perfect conditions, I used Google Material Design principles as reference and started with atomic foundations, the building blocks everything else would depend on.
Building a design system from scratch while shipping features required a pragmatic approach. Rather than waiting for perfect conditions, I used Google Material Design principles as reference and started with atomic foundations, the building blocks everything else would depend on.
Strategy
Strategy
Separate merchant colors and customers colors to provide visual differentiation.
Separate merchant colors and customers colors to provide visual differentiation.
Transform brand colors into hue-based tokens (50 to 950 tints)
Transform brand colors into hue-based tokens (50 to 950 tints)
Establish typography system (migrated to Inter only from Montserrat)
Establish typography system (migrated to Inter only from Montserrat)
Start with basics like buttons, text fields, banners, models etc.
Start with basics like buttons, text fields, banners, models etc.
Color System
Color System
Since we were working with an existing color pallet and didn’t plan to change it, I separated the customer and merchant color schemes and introduced a structured, token-based color system using multiple tints of our brand colors using tints.dev, to ensure consistency and flexibility across the UI. This softened the visual experience, reduce harsh contrasts, and resulted in a more refined and trustworthy interface.
Since we were working with an existing color pallet and didn’t plan to change it, I separated the customer and merchant color schemes and introduced a structured, token-based color system using multiple tints of our brand colors using tints.dev, to ensure consistency and flexibility across the UI. This softened the visual experience, reduce harsh contrasts, and resulted in a more refined and trustworthy interface.
Benefits
Benefits
Consistent color application across features
Consistent color application across features
Systematic Pressed/focus/disabled states
Systematic Pressed/focus/disabled states
Clear visual hierarchy through color weight
Clear visual hierarchy through color weight
Softer, more refined visual experience
Softer, more refined visual experience
Easy for developers to implement with clear token names
Easy for developers to implement with clear token names
Neutral Pallet for Text
Problem
A single standard black (#000000) was used for almost all text, headings, buttons and body copy.
Issues
No visual hierarchy
Harsh readability (pure black is too strong)
Difficulty establishing information architecture
Limited ability to de-emphasize secondary content
Neutral Pallet for Text
Added a neutral palette (grays) to the system, with multiple weights (Gray 50 to Gray 950). This gave us a solid base for:
Impact of neutral pallet
Clear visual hierarchy guiding user attention
Improved readability and reduced eye strain
Better accessibility with appropriate contrast ratios
Reduced visual noise, color used only when meaningful
More refined, trustworthy interface tone
Replaced overuse of pure black with neutral-based typography
Neutral Pallet for Text
Problem
A single standard black (#000000) was used for almost all text, headings, buttons and body copy.
Issues
No visual hierarchy
Harsh readability (pure black is too strong)
Difficulty establishing information architecture
Limited ability to de-emphasize secondary content
Neutral Pallet for Text
Added a neutral palette (grays) to the system, with multiple weights (Gray 50 to Gray 950). This gave us a solid base for:
Impact of neutral pallet
Clear visual hierarchy guiding user attention
Improved readability and reduced eye strain
Better accessibility with appropriate contrast ratios
Reduced visual noise, color used only when meaningful
More refined, trustworthy interface tone
Replaced overuse of pure black with neutral-based typography
Typography System
Standardized font sizes and weights to support visual hierarchy, readability, and scalability.
Standardized font sizes and weights to support visual hierarchy, readability, and scalability.
I simplified the system by removing Montserrat and standardizing on Inter, a modern, legible font with better responsiveness. I also created a new responsive type scale aligned to mobile-first design principles.
I simplified the system by removing Montserrat and standardizing on Inter, a modern, legible font with better responsiveness. I also created a new responsive type scale aligned to mobile-first design principles.
Contextual Guidance With Tool Tips
Standardized font sizes and weights to support visual hierarchy, readability, and scalability.
I simplified the system by removing Montserrat and standardizing on Inter, a modern, legible font with better responsiveness. I also created a new responsive type scale aligned to mobile-first design principles.
Typography & Contrast
Typography & Contrast
Typography & Contrast
Improved contrast with the neutral grey background providing better depth
Varied text weights - notice how "New coupon!" stands out as the main message
Better readability through improved background contrast
Improved contrast with the neutral grey background providing better depth
Varied text weights - notice how "New coupon!" stands out as the main message
Better readability through improved background contrast
Buttons & States
Buttons & States
Created primary, secondary, and disabled button variants with clear hover, focus, and disabled states to support various interaction needs. I included an icon which helps to identify and understand the context for the user.
Created primary, secondary, and disabled button variants with clear hover, focus, and disabled states to support various interaction needs. I included an icon which helps to identify and understand the context for the user.
Accessibility Improvement
Accessibility Improvement
Updated button colors from failing contrast ratio to WCAG-compliant high contrast , ensuring text readability meets accessibility standards for all users.
Updated button colors from failing contrast ratio to WCAG-compliant high contrast , ensuring text readability meets accessibility standards for all users.
Text Fields & Inputs
Text Fields & Inputs
Text Fields & Inputs
Defined text box styles with consistent corner radius, spacing, focus states, and validations—establishing a frictionless form interaction experience.
Defined text box styles with consistent corner radius, spacing, focus states, and validations—establishing a frictionless form interaction experience.
Toasts, Snackbars and Tool tips
Toasts, Snackbars and Tool tips
Toasts, Snackbars and Tool tips
I incorporated snack bars, toasts, and contextual tooltips into the design system to guide users effectively and provide consistent, timely feedback across the product.
I incorporated snack bars, toasts, and contextual tooltips into the design system to guide users effectively and provide consistent, timely feedback across the product.
Feature-Specific Components
Feature-Specific Components
Feature-Specific Components
Grouped unique UI elements used in core product features (like explore cards, stamp cards, QR interactions, etc.) into their own library sections for clarity.
Grouped unique UI elements used in core product features (like explore cards, stamp cards, QR interactions, etc.) into their own library sections for clarity.
Handover
Handover
Each component in the design system was supported by clear documentation outlining design specifications, usage rules, and implementation guidance, ensuring smooth collaboration between designers, developers, and future contributors.
Each component in the design system was supported by clear documentation outlining design specifications, usage rules, and implementation guidance, ensuring smooth collaboration between designers, developers, and future contributors.
Building the system while shipping features
Building the system while shipping features
Limited developer capacity meant full Storybook integration wasn't immediately feasible. I needed to build the system while features were actively being designed and shipped. The UI and design system evolved side-by-side, informing each other.
Validated implementation through preview app testing
Worked closely with developers to align on spacing, layout, tokens
Established shared naming: "Iris-500" in Figma = "Iris-500" in code
Created usage documentation as patterns emerged
Iterated based on technical constraints
This kept the system grounded in real use cases, and helped avoid subjective debates about visuals by anchoring discussions in usability and consistency.
Limited developer capacity meant full Storybook integration wasn't immediately feasible. I needed to build the system while features were actively being designed and shipped. The UI and design system evolved side-by-side, informing each other.
Validated implementation through preview app testing
Worked closely with developers to align on spacing, layout, tokens
Established shared naming: "Iris-500" in Figma = "Iris-500" in code
Created usage documentation as patterns emerged
Iterated based on technical constraints
This kept the system grounded in real use cases, and helped avoid subjective debates about visuals by anchoring discussions in usability and consistency.
OUtcome
Established Scalable Design Foundation For Rapid Development
Established Scalable Design Foundation For Rapid Development
Although Storybook implementation was postponed due to limited dev resources, the design system served as a core collaboration.
Although Storybook implementation was postponed due to limited dev resources, the design system served as a core collaboration.
System Impact
System Impact
Enabled faster feature delivery through reusable patterns
Reduced inconsistencies and implementation bugs through clear token naming
Elevated perceived quality through visual refinement (subtle tints, shadows, spacing)
Improved UX clarity through validation elements (banners, toasts)
Created learnable interface through consistent patterns across features