tokens

Colors

Color palette tokens used across the design system. The palette is organised into primary brand colors, neutrals for text and surfaces, utility colors for interactive states, and semantic colors that communicate meaning such as success, warning, and error.

Usage Guidance

When to use

  • +Reference specific color values when implementing UI.
  • +Map semantic meanings to specific color tokens.
  • +Use CSS custom properties (--brz-color-*) in custom styles.

When not to use

  • −Don't hardcode hex values — use token references.
  • −Don't use tokens from one semantic group for another purpose (e.g. error red for a brand accent).

Examples

Code Samples

Primary

Brand primary colors used for key actions, active states, and interactive elements.

<div style="display: flex; gap: 8px; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #EBF0FF;"></div>
    <span style="font-size: 11px; color: #6B7280;">50</span>
    <span style="font-size: 10px; color: #9CA3AF;">#EBF0FF</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #C2D4FF;"></div>
    <span style="font-size: 11px; color: #6B7280;">100</span>
    <span style="font-size: 10px; color: #9CA3AF;">#C2D4FF</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #85A9FF;"></div>
    <span style="font-size: 11px; color: #6B7280;">200</span>
    <span style="font-size: 10px; color: #9CA3AF;">#85A9FF</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #4D7EF7;"></div>
    <span style="font-size: 11px; color: #6B7280;">300</span>
    <span style="font-size: 10px; color: #9CA3AF;">#4D7EF7</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #2563EB;"></div>
    <span style="font-size: 11px; color: #6B7280;">400</span>
    <span style="font-size: 10px; color: #9CA3AF;">#2563EB</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #1D4ED8;"></div>
    <span style="font-size: 11px; color: #6B7280;">500</span>
    <span style="font-size: 10px; color: #9CA3AF;">#1D4ED8</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #1E40AF;"></div>
    <span style="font-size: 11px; color: #6B7280;">600</span>
    <span style="font-size: 10px; color: #9CA3AF;">#1E40AF</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #1E3A8A;"></div>
    <span style="font-size: 11px; color: #6B7280;">700</span>
    <span style="font-size: 10px; color: #9CA3AF;">#1E3A8A</span>
  </div>
</div>

Neutrals

Neutral tones for text, borders, backgrounds, and surface hierarchy.

<div style="display: flex; gap: 8px; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #FFFFFF; border: 1px solid #E5E7EB;"></div>
    <span style="font-size: 11px; color: #6B7280;">White</span>
    <span style="font-size: 10px; color: #9CA3AF;">#FFFFFF</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #F9FAFB;"></div>
    <span style="font-size: 11px; color: #6B7280;">50</span>
    <span style="font-size: 10px; color: #9CA3AF;">#F9FAFB</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #F3F4F6;"></div>
    <span style="font-size: 11px; color: #6B7280;">100</span>
    <span style="font-size: 10px; color: #9CA3AF;">#F3F4F6</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #E5E7EB;"></div>
    <span style="font-size: 11px; color: #6B7280;">200</span>
    <span style="font-size: 10px; color: #9CA3AF;">#E5E7EB</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #D1D5DB;"></div>
    <span style="font-size: 11px; color: #6B7280;">300</span>
    <span style="font-size: 10px; color: #9CA3AF;">#D1D5DB</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #9CA3AF;"></div>
    <span style="font-size: 11px; color: #6B7280;">400</span>
    <span style="font-size: 10px; color: #9CA3AF;">#9CA3AF</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #6B7280;"></div>
    <span style="font-size: 11px; color: #6B7280;">500</span>
    <span style="font-size: 10px; color: #9CA3AF;">#6B7280</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #4B5563;"></div>
    <span style="font-size: 11px; color: #6B7280;">600</span>
    <span style="font-size: 10px; color: #9CA3AF;">#4B5563</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #374151;"></div>
    <span style="font-size: 11px; color: #6B7280;">700</span>
    <span style="font-size: 10px; color: #9CA3AF;">#374151</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #1F2937;"></div>
    <span style="font-size: 11px; color: #6B7280;">800</span>
    <span style="font-size: 10px; color: #9CA3AF;">#1F2937</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #111827;"></div>
    <span style="font-size: 11px; color: #6B7280;">900</span>
    <span style="font-size: 10px; color: #9CA3AF;">#111827</span>
  </div>
</div>

Utility

Utility colors for focus rings, link text, hover states, and selection highlights.

<div style="display: flex; gap: 16px; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #2563EB;"></div>
    <span style="font-size: 11px; color: #6B7280;">Focus Ring</span>
    <span style="font-size: 10px; color: #9CA3AF;">#2563EB</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #1D4ED8;"></div>
    <span style="font-size: 11px; color: #6B7280;">Link</span>
    <span style="font-size: 10px; color: #9CA3AF;">#1D4ED8</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #DBEAFE;"></div>
    <span style="font-size: 11px; color: #6B7280;">Selection</span>
    <span style="font-size: 10px; color: #9CA3AF;">#DBEAFE</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #F3F4F6;"></div>
    <span style="font-size: 11px; color: #6B7280;">Hover</span>
    <span style="font-size: 10px; color: #9CA3AF;">#F3F4F6</span>
  </div>
  <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
    <div style="width: 64px; height: 64px; border-radius: 8px; background: #E5E7EB;"></div>
    <span style="font-size: 11px; color: #6B7280;">Disabled</span>
    <span style="font-size: 10px; color: #9CA3AF;">#E5E7EB</span>
  </div>
</div>

Semantic

Semantic colors that communicate status and meaning: success, warning, error, and info.

<div style="display: flex; gap: 24px; flex-wrap: wrap;">
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <span style="font-size: 12px; font-weight: 600; color: #374151;">Success</span>
    <div style="display: flex; gap: 8px;">
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #F0FDF4;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#F0FDF4</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #22C55E;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#22C55E</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #15803D;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#15803D</span>
      </div>
    </div>
  </div>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <span style="font-size: 12px; font-weight: 600; color: #374151;">Warning</span>
    <div style="display: flex; gap: 8px;">
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #FFFBEB;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#FFFBEB</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #F59E0B;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#F59E0B</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #B45309;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#B45309</span>
      </div>
    </div>
  </div>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <span style="font-size: 12px; font-weight: 600; color: #374151;">Error</span>
    <div style="display: flex; gap: 8px;">
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #FEF2F2;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#FEF2F2</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #EF4444;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#EF4444</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #B91C1C;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#B91C1C</span>
      </div>
    </div>
  </div>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <span style="font-size: 12px; font-weight: 600; color: #374151;">Info</span>
    <div style="display: flex; gap: 8px;">
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #EFF6FF;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#EFF6FF</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #3B82F6;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#3B82F6</span>
      </div>
      <div style="display: flex; flex-direction: column; align-items: center; gap: 4px;">
        <div style="width: 48px; height: 48px; border-radius: 8px; background: #1D4ED8;"></div>
        <span style="font-size: 10px; color: #9CA3AF;">#1D4ED8</span>
      </div>
    </div>
  </div>
</div>

Guidelines

Do

  • ✓Use color tokens via CSS custom properties for themability.
  • ✓Reference the neutral scale for text and background colors.
  • ✓Use the semantic palette (blue, green, red, yellow) for status states.

Don't

  • ✗Don't create new color values outside the token system.
  • ✗Don't use opacity/alpha on token colors — use the provided shade variants.