
Design System – Color Design Tokens (Bharat Matrimony)
UI Case Study
This project focused on building a robust color design token system for Bharat Matrimony’s user interface. The purpose was to create a single source of truth for all color usage in the product, which would serve as a foundation for an evolving design system. In the user journey, consistent use of colors (for buttons, backgrounds, text, etc.) greatly affects usability and brand recognition. By implementing design tokens, the goal was to ensure every part of the UI – from the dashboard to forms and modals – uses colors consistently and can be easily updated. This design system initiative plays a behind-the-scenes yet critical role: it streamlines design-development workflow and guarantees that users experience a cohesive visual language across the app. In short, the project’s role was to lay down scalable design foundations that improve both user experience and development efficiency
Role
UI Designer
Team
Collaborated with UX Designer, Product Manager, and Developers
Industries
Matchmaking
Duration
3 weeks

Problem Statement
The Bharat Matrimony platform was facing increasing design inconsistency and maintenance challenges. Without a structured system for managing colors, designers and developers often used ad-hoc values, leading to slight mismatches in UI elements. This resulted in a fragmented visual experience across different parts of the app – buttons might appear in varying shades or states, and introducing a new theme or feature was laborious due to the lack of a centralized style reference
In essence, the absence of a unified color token framework led to scalability issues and made it hard to ensure a cohesive look and feel. The problem statement was clear: establish a comprehensive, future-proof color design token system (leveraging Figma’s variables) to enforce consistency, improve scalability, and simplify the design update process

Competitor Benchmarking
To tackle this, we looked at how leading companies manage their design tokens and design systems. We researched well-known design systems like Atlassian’s, eBay’s, Adobe’s Spectrum, and Uber’s Base UI for inspiration
Atlassian’s design system demonstrated a very structured approach to tokens, separating them by purpose (e.g., background, text, accent) which informed our strategy. eBay’s focus on semantic tokens (meaningful names like “success-color” or “error-color”) highlighted the importance of naming conventions for usability. Adobe’s system showed how to scale tokens for a global product (with themes and dynamic switching), reinforcing our need for future-proofing. Uber’s approach to intuitively mapping tokens to components underscored how tokens directly drive UI consistency
By benchmarking these, we identified best practices: use primitive tokens for raw values, semantic tokens for roles, and component tokens for specific UI elements. We also noted the importance of documentation and developer tooling from competitors, which guided us to plan thorough guidelines for our token system. This competitor analysis gave us confidence that our design token framework would be on par with industry standards and perhaps even easier to maintain.
Problem
Bharat Matrimony's design system faced challenges with inconsistent color usage, lack of a unified framework, and difficulties in maintaining design scalability. These issues led to inefficiencies in the design process and a fragmented user experience.
Task
Develop a robust design token framework focused on color management. Standardize colors across components and interaction states using Figma’s variable concept, ensuring consistency and enhancing collaboration between design and development teams.
Solution
Implemented a centralized color library using Figma variables, enabling standardized color application throughout the design system. This revamp improved design consistency, streamlined workflows, and elevated the overall user experience to align with the brand's visual and usability goals.
I performed a complete UI audit of the Bharat Matrimony app, sorted all colors, and developed a structured color palette. I assigned new, consistent color names and categorized them by use case, enhancing design consistency, scalability, and alignment between design and development teams.
Orange
400
Default
#FF9800
Green
400
Default
#03A03B
Red
400
Default
#03A03B
Mint
400
#03A03B
Wine
Prime
Button ,Background
#4E1A55
Default
600
#F7E3FA
Light
#FEF5FF
Lightest
400
Salmon
Prime
Button ,Background
#EB5858
Default
600
#F7B9B9
Light
#FFF5F5
Lightest
400
Corn
Candyhappy
Card
#F9EBB5
Dark
#F5F2E8
Default
Rose
Candydesire
Card
#F9B5C0
Dark
#FBE3E7
Default
Mauve
Candyroyal
Card
#B5BEF9
Dark
#E6E9FC
Default
Mauve
Candyroyal
Card
#B5F3F9
Dark
700
#EEF9FA
Default
600
Flesh
Candypassion
Card
#F9BBB5
Dark
700
#F7E2E0
Default
600
Pink
Candylove
Card
#F9B5E2
Dark
700
#FAEEF6
Default
600
Peach
Accentstrawberry
Illustration
#F9BCC3
Dark
700
Mud
Accentbrownie
Illustration
#CE7A63
Dark
700
#FBB791
Default
600
Teal
Accentmint
Illustration
#6ABFD4
Dark
700
Mint
Accentpista
Illustration
#0E796E
Dark
700
#35B8A9
Default
600
#02B69B
Light
500
Charcoal
Accentgrape
Illustration
#2F2E41
Dark
700
#3F3D56
Default
600
Perl
Accentvanilla
Illustration
#F0F2F4
Default
700
Orange
Primary
CTA
#C24D00
DARK
700
#E06506
Default
600
#FF9800
Light
400
#FFE7D4
Lighter
#FFF5EF
Lightest
Green
Secondary
Icon
#0A653A
DARKER
700
#478A80
Dark
600
#00A03A
Default
400
#A5DFD6
Light
#D7F3E8
Lighter
Grey
Tertiary
Text,Border
#000000
BLACK
800
#777777
Default
600
#DDDDDD
Light
#CCCCCC
Lighter
#F1F1F1
Lightest
Blue
Focus
Icons,Tag,Tooltip,Unreadcolor
#253252
Dark
800
#0070E0
Default
600
#5E77D8
Light
500
#F2F7FB
Lighter
Maroon
Highlight
Payment badge
#D73281
Dark
800
Red
Alert
Error ,Badge
#E12B10
Default
600
#FEEEEC
Light
100
Yellow
Attention
Payment badge,Tag
#C89310
Dark
700
#D0C133
Default
600
#F9FD2A
Light
500
#FBBF24
Lighter
400
#F3F3D7
Lightest
300
Wine
Prime
Button ,Background
#4E1A55
Default
600
#F7E3FA
Light
500
#FEF5FF
Lightest
400
Salmon
Prime
Button ,Background
#EB5858
Default
600
#F7B9B9
Light
500
#FFF5F5
Lightest
400
Corn
Candyhappy
Card
#F9EBB5
Dark
600
#F5F2E8
Default
600
Rose
Candydesire
Card
#F9B5C0
Dark
700
#FBE3E7
Default
600
Mauve
Candyroyal
Card
#B5BEF9
Dark
700
#E6E9FC
Default
600
Mauve
Candyroyal
Card
#B5F3F9
Dark
700
#EEF9FA
Default
600
Flesh
Candypassion
Card
#F9BBB5
Dark
700
#F7E2E0
Default
600
Pink
Candylove
Card
#F9B5E2
Dark
700
#FAEEF6
Default
600
Peach
Accentstrawberry
Illustration
#F9BCC3
Dark
700
Mud
Accentbrownie
Illustration
#CE7A63
Dark
700
#FBB791
Default
600
Teal
Accentmint
Illustration
#6ABFD4
Dark
700
Mint
Accentpista
Illustration
#0E796E
Dark
700
#35B8A9
Default
600
#02B69B
Light
500
Charcoal
Accentgrape
Illustration
#2F2E41
Dark
700
#3F3D56
Default
600
Perl
Accentvanilla
Illustration
#F0F2F4
Default
700
A well-structured color token system incorporates four key dimensions: Scope, Intent, Intensity, and State. Scope defines the area of application for colors, encompassing elements such as surfaces, text, and borders. Intent highlights the purpose behind each color choice, guiding its use as primary, secondary, or tertiary within the design system. Intensity introduces shade variations to ensure flexibility and depth, offering options like light, lighter, lightest, and darker tones. Lastly, State captures the dynamic nature of user interactions, reflecting conditions such as default, selected, and focused. Together, these dimensions create a robust and adaptable color framework that enhances both visual consistency and user experience.
I implemented a three-tier token structure in the design system using Primitive, Semantic, and Component tokens, leveraging Figma's variable and aliasing capabilities. Primitive tokens serve as raw design values like colors, typography, and spacing, remaining context-agnostic for maximum reusability. Semantic tokens add meaning by mapping primitives to design intentions, using roles like primary-background
or text-muted
to simplify updates across themes. Finally, Component tokens connect semantic tokens directly to UI elements, ensuring consistency in component-specific states such as button-hover-background
and input-focus-border
. This approach establishes a clear hierarchy, enhancing maintainability, scalability, and design-to-development efficiency.
Design tokens
Applied component

Design Token Process
Understanding Requirements:
We gathered all stakeholders – designers, front-end developers, and brand managers – to understand their needs. Designers wanted a system that’s easy to apply in Figma, while developers needed tokens that could be consumed in code. We also catalogued all the contexts where colors were used (primary buttons, links, headers, backgrounds, alerts, etc.). The requirement was not just to catalog colors, but to establish relationships (which colors are variants of which, and where to use them). Essentially, we needed a taxonomy for color usage.
Research & Planning:
Based on the competitor research, we decided on a three-tier token structure: Primitive, Semantic, and Component tokens. Primitives are the raw color values (like a palette of blues, greens, etc.), semantics are context-based names (like successBackground, highlightText mapping to those primitives), and component tokens tie those semantics to specific UI elements (like ButtonPrimaryBackground)
We planned out an initial palette covering all required colors and mapped out how many semantic roles we needed (for example, info, warning, success states, neutrals for backgrounds and borders, etc.). This planning stage also involved defining naming conventions (e.g., use of numerical scales for color variants such as 100, 200, 300 for light to dark).
UI Audit & Color Inventory:
Next, we performed a comprehensive UI audit. We went through the existing Bharat Matrimony app screens and extracted every color in use, listing duplicates and near-duplicates. We then rationalized these into a concise set of base colors. This audit revealed redundant shades of grey and inconsistencies in primary button colors, which we addressed by consolidating them. We sorted all these colors into a structured palette, assigning new standardized names and removing unused or redundant ones
This step ensured that the token system would be built on an accurate understanding of the current state and would directly tackle existing inconsistencies.
Token Creation in Figma: With the audited palette, we created color styles and Figma variables for each token category. Primitive tokens were made for raw color values (e.g., a base purple, a shade of gray). Then we set up semantic tokens by aliasing those primitives – for instance, a semantic token “Primary Color” might alias the primitive color Purple500 for brand primary usage
Lastly, we defined component-specific tokens in Figma for key UI components: for example, ButtonSurfacePrimary for a primary button’s background which links to a semantic primary color
Each component token was linked to the corresponding semantic token, which in turn was linked to a primitive. This tiered approach in Figma ensured changes at a lower level cascade properly (change the primitive and all semantics/components depending on it update). We iterated within Figma, testing a few sample screens to verify that swapping themes or tweaking a base color would correctly update across the UI.
Visual Design & Documentation:
While the main focus was on structure, we also refreshed some color choices to improve accessibility. We adjusted contrast ratios for text vs background where needed (especially for light grays and secondary text) to meet WCAG standards. The visual design team approved slight tweaks to the brand colors for digital use (for consistency across different displays). We compiled a style guide documenting every token with examples. For each color token, we provided usage guidelines (e.g., “Use SuccessGreen for success messages background and icons”). The documentation also included a reference chart (showing all color swatches with their token names and values), which serves as a quick reference for designers
Collaboration with Development: Throughout the process, we kept the front-end developers in the loop. We coordinated how these Figma tokens would translate into CSS variables or code constants. A JSON export of the design tokens was prepared to integrate with the development pipeline. We also planned for version control of tokens – for example, if the brand team updates a color in the future, how that update flows into the product with minimal effort. This close collaboration ensured that the token system was not only a theoretical exercise in Figma but also practically implementable in the codebase, smoothing the handoff from design to development
The design token system for Bharat Matrimony represents a significant advancement in achieving a cohesive, scalable, and efficient design framework. By leveraging industry insights and modern tools like Figma variables, the system addresses key pain points while laying the groundwork for future innovation. The tangible improvements in efficiency, consistency, and user satisfaction underscore the value of a robust tokenized design approach.