All Projects
LiveArchitecture

Unified Design System @ Scale

Architected and shipped a comprehensive design system serving 40+ product teams across Razorpay, reducing UI inconsistencies by 87% and cutting new feature development time by 40%.

View Source Live Demo
CompanyRazorpay
RoleLead Frontend Architect
Year2023

Tech Stack

Vue 3StorybookTailwind CSSTypeScriptViteChromatic

Impact

impact40+ teams
reduction87% fewer inconsistencies
speed40% faster dev

The Problem

With 40+ product teams building independently, UI consistency had deteriorated to the point where the same button component existed in 23 different variations across the product suite.

The Solution

Built a token-based design system with a headless component library, automated visual regression testing via Chromatic, and a living documentation site that served as the single source of truth.

Architecture

Monorepo with separate packages for tokens, headless components, Vue implementations, React implementations, and documentation.

Key Challenges

  • Achieving backward compatibility for 200+ existing components
  • Getting buy-in from 40 teams with different workflows
  • Building for accessibility from day one (WCAG AA compliance)

Results & Impact

87% reduction in UI inconsistencies
40% faster feature development
100% WCAG AA compliant
23 component variants reduced to 1
Adopted by all 40 teams within 6 months