Design System – Color Design Tokens (Bharat Matrimony)

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​