Design System
Building a cohesive design system for a large financial institution to streamline B2B and B2C digital products across multiple teams.
This project focused on building a cohesive design system for a large financial institution that needed to streamline its B2B and B2C digital products. As the organization scaled, multiple teams had developed their own patterns and visual styles, leading to fragmented user experiences and design inconsistencies across tools.
The goal was to create a shared system that could bring alignment, improve usability, and support product scalability. The design system was intended to serve as a foundation for both designers and developers, enabling faster collaboration, reducing redundant work, and maintaining brand consistency across internal platforms.
All visuals and details have been anonymized to comply with NDA, but the design logic, structure, and challenges reflect the actual work delivered.
I was responsible for leading the creation of foundational components and defining visual patterns that would work across multiple enterprise platforms. I collaborated closely with other design teams to audit existing interfaces, consolidate variations, and ensure accessibility and responsiveness in every component.
I worked with front-end developers to define and apply design tokens while ensuring consistency between the Figma library and production environments. I also helped guide adoption by documenting usage guidelines and supporting implementation across different product teams.
Regular design reviews, stakeholder syncs, and working sessions helped ensure the system stayed aligned with both business goals and practical use cases.
Foundations
📐 Grid Layout System
To ensure consistency and responsive scalability across our B2C web platform, we defined a structured layout grid system optimized for desktop, tablet, and mobile frames. This grid system serves as the foundation for page layouts, content alignment, and the placement of modular components.
Desktop designed for large screens (1440px and above), supporting multi-column layouts and complex information hierarchy. Tablet optimized for mid-sized devices, maintaining structure while simplifying content presentation for readability. Mobile streamlined for mobile-first design, focusing on single-column or simple multi-column layouts for maximum clarity.
Foundations · Styles
🎨 Colour Palette
Defines the core visual language of our B2C platform, striking a balance between brand identity and accessibility. Structured into Brand, Neutral, and Functional colours, all meeting WCAG AA/AAA contrast standards. Brand colours highlight key actions, neutrals support backgrounds, and functional colours communicate status. This ensures a consistent, accessible, and trustworthy visual identity across devices.
Brand Colours
Built around Navy and Teal tones, representing trust, professionalism, and digital innovation. Core brand shades are optimized for WCAG AAA accessibility to ensure maximum readability.
Neutrals & Texts
A balanced grey scale for backgrounds, surfaces, and typography. Supports a clean, professional UI without visual clutter.
Function Colours
Dedicated colours for Success, Warning, Error, and Information states. Each functional colour has variations (stroke, background, icon) for use in different UI contexts.
Accessibility
All primary brand colours meet WCAG AA or AAA contrast standards for normal and large text. Contrast ratios are documented alongside each colour for reference.
Foundation
Text Styles
The typography system is designed for both B2C responsive interfaces and B2B fixed platforms, striking a balance between readability, scalability, and brand presence to support content-rich layouts and consistent digital experiences.
Inter is the primary typeface, chosen for its clarity, versatility, and accessibility in online environments. The system employs fixed line heights to preserve a consistent vertical rhythm across devices, ensuring uniformity in both dense data views and spacious content layouts.
Letter spacing is carefully tuned, with minimal spacing for body text to enhance reading flow, and slightly tightened for large headings to create a refined, compact appearance. Combined with responsive scaling, these adjustments ensure that typography adapts seamlessly to different screen sizes while maintaining legibility.
Typography ensures clarity, hierarchy, and brand consistency across platforms. All type styles meet WCAG AA accessibility standards for contrast, making the system inclusive and reliable for diverse audiences.
Foundation
Icon & Pictogram
Both icons and pictograms support B2B, B2C, and responsive web contexts, and follow accessibility standards for contrast, sizing, and semantic alignment. A unified iconography framework ensures clarity, consistency, and accessibility across all digital experiences.
Icons
Sourced and customized using the Material Design Icons Figma plugin. Organized into five core categories: Interface, Status, Finance, User, and Actions, supporting both 24x24px and 16x16px sizes for flexible application in responsive layouts (e.g., forms, tables, buttons).
Pictograms
Sourced from the IconScout Figma plugin, designed at 96x96px for illustrative and expressive use in marketing banners, onboarding, and feature highlights. Each pictogram aligns with key financial use cases such as transfers, payments, and account security.
Component
CTA Buttons & Links
Each button supports consistent interaction feedback across states: Default, Hover, Focus, Pressed, and Disabled. All states meet WCAG AA accessibility standards for contrast and usability. Use one Primary Button for the main action on a screen, Secondary or Tertiary Buttons for supporting actions, and Links for navigation.
Primary Button
Used for the main action on a page or modal. Styled with solid brand colours to draw attention.
Secondary Button
Supports the primary action, typically used for alternate or supporting actions. Outlined style maintains a lighter visual weight.
Tertiary Button
Lowest priority action, often styled as a text button or subtle outline, ensuring minimal distraction.
Link
Inline or standalone navigational links styled for clarity and accessibility.
Component
Header & Footer
The header and footer are designed as consistent navigational anchors across all screen sizes, ensuring accessibility, clarity, and ease of use in both desktop and mobile contexts.
Header
Responsive navigation with dropdown menus for Banking, Products, and Offers. Includes quick access to account profile, sign-out, and personalized welcome message. Desktop features a mega menu; tablet and mobile use expandable menus.
Footer
Comprehensive site-wide navigation organized into clear categories: About Us, Privacy and Protection, Support, and Help. Provides direct access to legal policies, contact support, account information, and social media links.
Component
Input Fields
The input library includes a range of field types designed for clarity, consistency, and accessibility across devices. Text fields handle short freeform entries. Password fields provide secure input with strength validation and toggle visibility. Comments fields support multiline input with character limits. Grouped inputs pair related fields such as amount and currency selectors.
Dropdown components include single-select lists with search, placeholders, and validation. Date pickers enable both calendar selection and manual entry. All components follow consistent interaction states: default, hover, focus, filled, and error.
Password
A secure input field that hides characters by default and validates password strength as the user types.
View on Figma 🔗
Comments
A multiline text area for users to leave feedback, reviews, or open-ended input, with support for character limits and validation.
View on Figma 🔗
Group
A grouped input field that combines amount and currency selectors to support multi-field entries like money transfers.
View on Figma 🔗
Date Picker
An input field that lets users select a date using a calendar or by typing in a specific format.
View on Figma 🔗
Dropdown
A select input that lets users choose one option from a predefined list, with support for placeholders, validation, and disabled states.
View on Figma 🔗Component
Table, Selectors, Filters
This table system supports both B2C and B2B use cases, ensuring data is clear, scannable, and actionable. It features responsive layouts, consistent spacing, and full accessibility support, with reusable cell components for text, tags, links, inputs, and actions.
B2C Tables (Data/Index)
Designed for presenting essential information in a clear, scannable format, with index tables offering additional capabilities such as filtering, sorting, and quick actions for streamlined interaction.
B2B Tables (Data/Index)
Optimized for displaying large, detailed datasets with support for bulk actions and file links. Zebra striping is applied to enhance readability in dense or data-heavy layouts.
Action Groups
Configurable as icon + label for clarity (B2C) or icon-only for efficiency (B2B), with colours adapted to match visual hierarchy and emphasize key interactions.
Adaptive Layout
Auto-adjusts row height based on density and column width based on screen size, ensuring usability across devices. On smaller screens, tables display only key information, with rows clickable to reveal full details.
Use Cases
B2C Data Table
Presents users' transfer records for easy comparison and tracking, focusing on readable details and clear status/fulfilment indicators.
B2C Index Table
Enables users to search, filter, and take quick actions on individual transfers with prominent status tags and action buttons.
B2B Data Table
Provides operations teams with comprehensive transaction metrics, sortable columns, and performance indicators for analysis and decision-making.
B2B Index Table
Supports admin workflows with powerful filtering, compact row actions, and status tracking to manage multiple clients or records efficiently.
Guideline
Documenting & Informing
After establishing the design system, I ensured designers and developers could access and apply it efficiently. Weekly syncs alone weren't enough to cover every detail, so I set up clear, asynchronous documentation directly within Figma.
I used a combination of Figma notes, walkthroughs for complex flows, and embedded visual guides. Each new component release was linked directly to relevant screens, allowing teams to access the source of truth without hunting through extra files. This approach streamlined onboarding, reduced repetitive questions, and kept the entire product team aligned.
