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.

RESEARCH &

PLANNING

RESEARCH &

PLANNING

RESEARCH &

PLANNING

Leading design systems like Atlassian, eBay, Adobe, and Uber set benchmarks for design token implementation. Atlassian offers a structured framework for token management, while eBay emphasizes semantic token best practices for enhanced usability. Adobe demonstrates scalability for global applications, and Uber excels in mapping tokens to components intuitively. These systems provide valuable insights into creating robust and adaptable token strategies.

Leading design systems like Atlassian, eBay, Adobe, and Uber set benchmarks for design token implementation. Atlassian offers a structured framework for token management, while eBay emphasizes semantic token best practices for enhanced usability. Adobe demonstrates scalability for global applications, and Uber excels in mapping tokens to components intuitively. These systems provide valuable insights into creating robust and adaptable token strategies.

Leading design systems like Atlassian, eBay, Adobe, and Uber set benchmarks for design token implementation. Atlassian offers a structured framework for token management, while eBay emphasizes semantic token best practices for enhanced usability. Adobe demonstrates scalability for global applications, and Uber excels in mapping tokens to components intuitively. These systems provide valuable insights into creating robust and adaptable token strategies.

UI Audit & Sort

UI Audit & Sort

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

Default

#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

Token Structure Design

Primitive Semantic Component Token

Primitive

Semantic

Component

Token

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.

Primitive, Semantic, Component Token

Primitive, Semantic, Component Token

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​

Conclusion

Problem Statement

Problem Statement

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.