Back

Back

Unified Design System for India's Leading Private Sector Bank
Unified Design System for India's Leading Private Sector Bank

Built a scalable design system that enabled multiple designers and developers to work in parallel. By aligning early, prioritizing core components, and documenting key interactions, reducing UI inconsistencies and accelerated product delivery.

Built a scalable design system that enabled multiple designers and developers to work in parallel. By aligning early, prioritizing core components, and documenting key interactions, reducing UI inconsistencies and accelerated product delivery.

B2C

Fintech

Platform:

Mobile and Net Banking App

Platform:

Mobile and Net Banking App

Team:

5 Designers

Team:

5 Designers

Role:

Design System Co-owner

Role:

Design System Co-owner

Problem

As multiple design pods were planned to work in parallel, there was a high risk of visual inconsistencies emerging across screens without a shared design system. In the absence of standardized components and foundations, designers would likely recreate similar UI elements in local files, leading to duplicated effort, reduced efficiency, and increased design debt.

Key Constraints

  • The design system needed to be designed and ready within 20 days

  • High-fidelity design work was scheduled to begin immediately after wireframes

  • Any delay in system readiness would block multiple designers and cascade into downstream timelines

Problem

As multiple design pods were planned to work in parallel, there was a high risk of visual inconsistencies emerging across screens without a shared design system. In the absence of standardized components and foundations, designers would likely recreate similar UI elements in local files, leading to duplicated effort, reduced efficiency, and increased design debt.

Key Constraints

  • The design system needed to be designed and ready within 20 days

  • High-fidelity design work was scheduled to begin immediately after wireframes

  • Any delay in system readiness would block multiple designers and cascade into downstream timelines

Problem

As multiple design pods were planned to work in parallel, there was a high risk of visual inconsistencies emerging across screens without a shared design system. In the absence of standardized components and foundations, designers would likely recreate similar UI elements in local files, leading to duplicated effort, reduced efficiency, and increased design debt.

Key Constraints

  • The design system needed to be designed and ready within 20 days

  • High-fidelity design work was scheduled to begin immediately after wireframes

  • Any delay in system readiness would block multiple designers and cascade into downstream timelines

Approach

  • Define foundations first (colors, typography, spacing)

  • Prioritize core components required for early flows

  • Enable parallel work by splitting component ownership across designers

  • Ship a practical v1, for designers to start with High Fidelity designs

Approach

  • Define foundations first (colors, typography, spacing)

  • Prioritize core components required for early flows

  • Enable parallel work by splitting component ownership across designers

  • Ship a practical v1, for designers to start with High Fidelity designs

"Before designing anything, we aligned with developers to decide the system foundation. We evaluated existing open-source design systems with a focus on scalability, community support, and ease of implementation."

"Before designing anything, we aligned with developers to decide the system foundation. We evaluated existing open-source design systems with a focus on scalability, community support, and ease of implementation."

Decision

  • Choose Material Design as base design library

    • Widely adopted

    • Strong documentation

    • Large developer ecosystem

    • Reduced implementation ambiguity

Decision

  • Choose Material Design as base design library

    • Widely adopted

    • Strong documentation

    • Large developer ecosystem

    • Reduced implementation ambiguity

Execution

  • Onboarded 4 more designers to reduce work load

  • Planned timelines accordingly and started with parallel component creation

  • Broke down components into clear deliverables

  • Maintained consistency through shared rules and reviews

Design Tokens & Variables

"To ensure the design system scaled beyond static screens, we implemented design variables (tokens) as the single source of truth for core UI properties.

"To ensure the design system scaled beyond static screens, we implemented design variables (tokens) as the single source of truth for core UI properties.

Color variables

  • Brand colors

  • Semantic colors

  • Neutral scales

Variable Implementation

When a variable changes, everything updates automatically.

  • Removes ambiguity

  • Speeds up reviews

  • Improves handoff quality

Instead of:

“Use the darker shade red from the dashboard”

Teams say:

Use "primary-burgandy”

Property
Variable Name
Value
Primary
primary-burgundy
#97262A
Error state
dark-red-800
#C2102D
Medium spacing
space-md
18px

.button-primary {

background-color: var(--primary-burgundy);

padding: var(--space-12) var(--space-16);

font-family: var(--font-body);

font-size: var(--font-size-body);

}

Variables allow designers and developers to support:

  • Dark mode

  • Brand themes

  • Future redesigns

System Foundation

  1. Color System

    Brand colors were provided by the bank’s guidelines. We extended these into a semantic color system to support scalable UI use cases.

  • Primary & secondary brand colors

  • Semantic colors

  • Neutral scale for backgrounds, text, borders.

  1. Color System

    Brand colors were provided by the bank’s guidelines. We extended these into a semantic color system to support scalable UI use cases.

  • Primary & secondary brand colors

  • Semantic colors

  • Neutral scale for backgrounds, text, borders.

  1. Typography

    The product needed to support multiple Indian languages, including Devanagari scripts.

    Typography choices

  • Poppins (Selected by the bank)

  • Noto Sans

Why this mattered

  • Neutral and modern tone follows brand language

  • Accessibility

  • Strong Devanagari support

  1. Typography

    The product needed to support multiple Indian languages, including Devanagari scripts.

    Typography choices

  • Poppins (Selected by the bank)

  • Noto Sans

Why this mattered

  • Neutral and modern tone follows brand language

  • Accessibility

  • Strong Devanagari support

  1. Spacing and Layout grids

  • We established a 4-point spacing and sizing system to create consistency and precision across the product.

  • While the full range of 4-point increments is available, designers primarily rely on five archetypal spacing sizes, which address nearly 90% of layout needs.

  • This approach balances flexibility with simplicity—reducing decision fatigue, speeding up design execution, and ensuring consistent spacing between elements across the product experience.

  1. Corner Radius

Larger components that contain other components can have a greater corner radius. Each Base component comes with the appropriate corner radius already applied.

  • A 16px corner radius is used on large vessel-like containers, such as sheets and dialogs.

  • A 12px corner radius is used on medium-sized components like cards, message cards, snack bars.

  • An 8px radius is used for elements often nested inside others, like buttons.

  • The radius value of 4 is primarily used on small components like badges.

Documentation & Interaction Annotation

To ensure smooth handoff and avoid implementation gaps, we complemented the design system with clear documentation and interaction annotations, especially for components with complex behaviors.

What we documented

  • Component usage guidelines

  • Variants and state definitions

  • Interaction behavior (e.g. focus, error, disabled)

  • Edge cases for forms and inputs

  • Layout rules and spacing references

Annotations were added for

  • Form validation and error states

  • Button states and loading behavior

  • Tab interactions and content switching

  • Input focus, helper text, and error messaging

This reduced back-and-forth during development and helped developers implement components accurately without repeated clarifications.

Note: We created a reference guide of some components to start with for the designers to follow in v1. The usage and guides were to be added as and when we progressed with the design system

Documentation & Interaction Annotation

To ensure smooth handoff and avoid implementation gaps, we complemented the design system with clear documentation and interaction annotations, especially for components with complex behaviors.

What we documented

  • Component usage guidelines

  • Variants and state definitions

  • Interaction behavior (e.g. focus, error, disabled)

  • Edge cases for forms and inputs

  • Layout rules and spacing references

Annotations were added for

  • Form validation and error states

  • Button states and loading behavior

  • Tab interactions and content switching

  • Input focus, helper text, and error messaging

This reduced back-and-forth during development and helped developers implement components accurately without repeated clarifications.

Note: We created a reference guide for the designers to follow in v1. The usage and guides were to be added as and when we progressed with the Design system

TLDR:

Challenges

Building the design system required balancing speed, scale, and accuracy under strict delivery constraints.

  • Tight timelines: The system had to be completed within ~20 days to avoid blocking high-fidelity design and downstream development.

  • Parallel execution: Multiple designers were working simultaneously, increasing the risk of inconsistencies and duplicated effort.

  • Interaction complexity: Banking workflows demanded precise handling of variants, states and validation

  • Downstream dependency: Any delay in system readiness would have cascaded into design, development, and QA timelines.

Strategic Response

To address these constraints without slowing delivery, we focused on clarity and early alignment.

  • Aligned designers and developers early using Material Design as a shared foundation.

  • Prioritized core foundations and components required for early product flows.

  • Distributed component ownership to enable parallel work across designers.

  • Added detailed documentation and interaction-level annotations to minimize ambiguity during development.

TLDR:
Challenges

Building the design system required balancing speed, scale, and accuracy under strict delivery constraints.

  • Tight timelines: The system had to be completed within ~20 days to avoid blocking high-fidelity design and downstream development.

  • Parallel execution: Multiple designers were working simultaneously, increasing the risk of inconsistencies and duplicated effort.

  • Interaction complexity: Banking workflows demanded precise handling of variants, states and validation

  • Downstream dependency: Any delay in system readiness would have cascaded into design, development, and QA timelines.

Strategic Response

To address these constraints without slowing delivery, we focused on clarity and early alignment.

  • Aligned designers and developers early using Material Design as a shared foundation.

  • Prioritized core foundations and components required for early product flows.

  • Distributed component ownership to enable parallel work across designers.

  • Added detailed documentation and interaction-level annotations to minimize ambiguity during development.

This ensured the design system accelerated execution instead of becoming a bottleneck.

"This ensured the design system accelerated execution instead of becoming a bottleneck."

"This ensured the design system accelerated execution instead of becoming a bottleneck."

Impact

Platform:

  • Faster screen creation

  • Reduced duplicate work

  • Consistent UI across flows

Team:

  • Predictable component usage

  • Fewer clarification cycles

  • Smoother handoff

Product

  • Consistent banking experience

  • Scalable foundation for future features

Within ~20 days, we delivered a functional v1 design system covering core atoms and molecules — enabling other designers to immediately start high-fidelity designs without inconsistencies.

Within 20 days, we delivered a functional v1 design system covering core atoms and molecules — enabling other designers to immediately start high-fidelity designs without inconsistencies.

Final Takeaway

Final Takeaway

By investing early in a scalable design system under tight timelines, we reduced delivery risk, improved cross-team efficiency, and created a foundation that enabled the product to scale faster with consistency and confidence.

By investing early in a scalable design system under tight timelines, we reduced delivery risk, improved cross-team efficiency, and created a foundation that enabled the product to scale faster with consistency and confidence.

Conclusion

Conclusion

This is one of my favourite projects where I co-owned the design system from the very start of the project. We created and managed the component. It was highly collaborative - not only with the designers but also with the developers and senior stakeholders

The experience helped me build strong ownership, planning, and execution capabilities, and elevated my visibility within the organization by enabling consistent engagement with senior stakeholders

Playground
Drag to play around with the components

CTA

Button

Color

Documentaton

Aa

Typography

Spacing

Cards

Playground
Drag to play around with the components

CTA

Button

Color

Documentaton

Aa

Typography

Spacing

Cards

Playground
Drag to play around with the components

CTA

Button

Color

Documentaton

Aa

Typography

Spacing

Cards