Design System
A centralized repository of reusable components, guidelines, and principles to establish visual consistency.
A centralized repository of reusable components, guidelines, and principles to establish visual consistency.
This project focuses on building a unified, scalable design system from the ground up to bridge the gap between design and development. By establishing foundational design tokens (typography, color, and elevation) alongside robust, scalable components, we transformed a fragmented product ecosystem into an efficient workflow. The resulting system successfully accelerated team onboarding, minimized design-to-production mismatches, and significantly decreased overall design-to-development turnaround time.
YEAR
2024, 3 months
ROLE
Lead Designer
TEAM
4 Designers
TOOLS
Figma
To set a clear path for Design System V1, I mapped our three biggest product bottlenecks directly to our core project objectives:
🚧 The Challenge: To speed up the MVP, we let developers use standard Angular library components (like the input field). However, because our initial designs weren't updated to match, it created a gap between Figma and the live site, making future updates confusing.
🎯 The Objective — Align Design with Live Code: Sync Figma assets directly with production components. Matching the live site ensures visual consistency and prevents QA from flagging false bugs during staging tests, keeping our release timeline on track.
🚧 The Challenge: Rules for component behavior and styling were never documented; they only existed in the team's heads. This lack of a shared guide created a constant threat of visual and functional inconsistency.
🎯 The Objective — Create a Single Source of Truth in Figma: Build a centralized component library directly in Figma for both designers and developers to follow. This keeps the team aligned and simplifies future onboarding.
🚧 The Challenge: Components were built for specific, isolated screen layouts rather than a flexible system. This made it incredibly difficult to reuse or adapt them for different screen sizes and mobile views.
🎯 The Objective — Design Flexibly for Mobile and Growth: Move away from fixed-size layouts and build modular UI elements. By designing components that automatically stretch and shrink, we ensure the system scales smoothly across all devices.
Before onboarding other designers, I audited the MVP design files to list necessary components for the new library. To ensure readiness for Phase 2, I limited the scope to a solid, highly achievable component set deliverable before kickoff.
Crucially, the process integrated continuous collaboration and a dedicated engineering review. This allowed us to align our design system guidelines directly with developer constraints and technical requirements before finalizing the version.
We started the project once the MVP design was completed. The goal was to finish before the Phase 2 kickoff so we would have solid components to start designing with for Phase 2.
The structure is based on the Atomic Design model, which assembles small, reusable components into a scalable system.
Our typography system relies on two brand typefaces: Air India Sans for headings and Nunito Sans for body copy and general text.
This section outlines our core brand colors, gradients, and comprehensive global scales. We map these to a functional semantic color system to assign a clear meaning and purpose to every token.
Our typography system relies on two brand typefaces: Air India Sans for headings and Nunito Sans for body copy and general text.
Elevation in a design system refers to the perceived depth or layering of elements within the design.
Components are built with custom properties, allowing designers to easily tweak and customize specific instances from the design panel.
Components are built with custom properties, allowing designers to easily tweak and customize specific instances from the design panel. copy and general text..
This core button component supports 215 unique layout and state variants.
Easily toggle states, labels, and helper text parameters.
Control the state of the file upload.
We created comprehensive guidelines to standardize layout grids, spacing rules, and component behaviors. These specifications ensure design and development consistency across the entire product
Shortly after launching the system, new designers joined our team. Walking them through the design system documentation as a core part of their onboarding drastically reduced their ramp-up time, allowing them to jump straight into active project designing with total confidence.
Advanced Figma features like Auto Layout and Component Properties (Variants) were entirely new to some of our team members. To bridge this gap, we turned the library building process into a collaborative learning experience. Through peer mentorship, open feedback loops, and shared best practices, we leveled up our technical execution as a unified design team.