Brand Color Tokens — Defining Primary, Secondary, and Accent Colors

Building Brand Color Tokens

Brand color tokens translate your brand identity into code-level decisions. Unlike generic color palettes, brand tokens carry semantic meaning tied to your organization's visual language.

Naming Strategy

A good naming strategy avoids encoding specific colors into token names. Instead of --blue-500, use role-based names:

:root {
  /* Brand colors */
  --colors-brand-primary: #2563eb;
  --colors-brand-secondary: #7c3aed;
  --colors-brand-accent: #f59e0b;

  /* Extended palette */
  --colors-brand-primary-light: #60a5fa;
  --colors-brand-primary-dark: #1d4ed8;
  --colors-brand-secondary-light: #a78bfa;
  --colors-brand-secondary-dark: #5b21b6;
}

Light and Dark Variants

Each brand color should have light and dark variants for use in different contexts (hover states, backgrounds, text on colored surfaces):

{
  "colors": {
    "brand-primary": "#2563eb",
    "brand-primary-light": "#60a5fa",
    "brand-primary-dark": "#1d4ed8",
    "brand-primary-contrast": "#ffffff"
  }
}

Contrast Tokens

For accessibility, pair each brand color with a contrast token that defines the text color to use on top of it. This ensures your brand colors always meet WCAG contrast requirements.

Multi-brand Support

If your organization manages multiple brands, structure tokens hierarchically:

// Brand A
$colors-brand-primary: #2563eb;

// Brand B
$colors-brand-primary: #dc2626;

Each brand overrides the same token names, allowing shared component code to work across brands without modification.