Project Overview
Designed a banking design system to reduce complexity in digital banking and create a consistent, reliable experience for users, system supports everyday financial tasks while enabling teams to scale new products with ease.
The goal was simple:
Help users complete financial tasks with confidence and help teams design and build faster with fewer decisions.
Responsibilities
Defined the design system structure and principles
Designed core components, tokens, and patterns
ocumented usage, anatomy, and behavior
Aligned design decisions with real banking use cases
Outcome: Web and Mobile responsive
Objective
Create a clear visual language for digital banking through reusable, well-defined components. Improve accessibility, usability and consistency while reducing design and development effort and support both desktop and responsive layouts for long-term scalability.
Design Approach
Start with real user tasks
Grounded in everyday banking actions such as checking balances, paying bills, managing cards and viewing statements. Components were designed around real user interactions.
Build once, scale everywhere
Each component was designed to be reusable, predictable and adaptable across different screens and journeys.
Accessibility by default
Color contrast, typography scale, touch targets, and states were defined early to ensure accessibility was not an afterthought.
Design Tokens
Design tokens form the foundation of the system and ensure consistency across UI and code.
Tokens defined:
Colors (brand, neutral, alert, background)
Typography (font family, size, weight, line height)
Spacing and layout units
Border radius and elevation
Interaction states (hover, focus, disabled)
This allowed teams to update styles centrally without breaking layouts or components.
Design Tokens
Design tokens form the foundation of the system and ensure consistency across UI and code.
Tokens defined:
Colors (brand, neutral, alert, background)
Typography (font family, size, weight, line height)
Spacing and layout units
Border radius and elevation
Interaction states (hover, focus, disabled)
This allowed teams to update styles centrally without breaking layouts or components.
Foundations- Color, Typos, Icons
Color System
Defined consistent and accessible use of brand, neutral and alert colors, mapped to UI roles such as actions, backgrounds, borders, and status states.
Typography Tokens
Defined a clear type scale for headings and body text, with font size, weight, line height, and spacing tokenized for consistency across layouts.
Icon Tokens
Sizes, stroke and alignment are standardized. Tokens ensure consistent use of icons for navigation, actions and system states across the interface.
Buttons & Anatomy
Buttons support primary and secondary actions with clear states and a consistent structure. Standardized sizes and spacing ensure clear hierarchy across layouts.
Cards & Anatomy
Cards are modular containers for banking content and actions. A defined anatomy and configurable properties ensure consistent hierarchy, flexibility and reuse across layouts.
Web Layout & Grid
The web layout uses a structured grid to organize banking content for easy scanning and clear prioritization. Consistent spacing and alignment ensure predictable behavior across desktop and responsive layouts.
Outcomes & Impact
The design system accelerated design and development, delivered a consistent and accessible banking experience, and simplified onboarding for new team members. It established a scalable foundation to support future products and long-term growth.
Reflection
This design system is not just a UI library. It is a shared language between design, engineering, and product teams. By focusing on real user needs and clear rules, the system supports both speed and quality without sacrificing trust.