Accent Colors

Accent colors complement the orange-gray system for visualizations, charts, tags, and other distinguishing markers. They were chosen deliberately to complement the primary color orange — not to compete with it.

Color palette

Blue
#2563EB

Teal
#0D9488

Amber
#D97706

Indigo
#6366F1

Name	HEX	OKLCH	Preview	Usage
Blue	#2563EB	oklch(58% 0.20 255)		Links, trust signals (banking, compliance), interactive elements, charts
Teal	#0D9488	oklch(60% 0.13 195)		Secondary markers, checkpoints in process flows, alternative category
Amber	#D97706	oklch(68% 0.18 60)		Reserved (do NOT confuse with Brand Orange) — see warning
Indigo	#6366F1	oklch(58% 0.21 285)		Premium markers, enterprise features, creative accents

Note

Slate (#475569) has been removed from the accent palette. For neutral tones, use the Warm Gray scale instead.

Interaction with orange

Orange (primary)

Blue

Teal

Amber

Indigo

Why these colors?

Color	Reasoning
Blue	Complementary to orange — maximum contrast with harmonious effect
Teal	Cool bridge between blue and green — technical, fresh
Amber	Warm extension of the orange family — natural color flow
Indigo	Strong blue tone for creative accents and highlights

Chart ordering

1. Orange

2. Blue

3. Teal

4. Amber

5. Indigo

Application rules

Accent colors are tertiary in the BAUER GROUP hierarchy. They only appear when Brand Orange would have a dominant character (multi-color comparison tables, multi-series charts, status differentiation beyond Success/Warning/Error/Info). In standard layout, a page works without accent colors.

1. Accent colors are never the dominant color — they complement orange
2. Use a maximum of 2 accent colors per view
3. Accent colors are primarily used in data visualizations
4. Blue is the preferred accent for interactive elements and trust signals (banking, compliance)
5. Amber only when there's enough visual distance from orange — see warning below

Amber vs. Brand Orange

Amber (#D97706) sits perceptually very close to Brand Orange (#FF8500) — in OKLCH the hues differ by only ~13° (60° vs. 47°). In narrow chart strips or small badges, the difference isn't unambiguous to many viewers. Recommendation: use Amber only in large surfaces with clear spatial separation from Brand Orange. In data visualizations with Brand Orange as the primary series: avoid Amber, choose Teal or Indigo instead.

CSS Custom Properties

:root {
  /* HEX (print authority, tooling fallback) */
  --accent-blue:   #2563EB;
  --accent-teal:   #0D9488;
  --accent-amber:  #D97706;
  --accent-indigo: #6366F1;

  /* OKLCH (web/display authority) */
  --accent-blue-oklch:   oklch(58% 0.20 255);
  --accent-teal-oklch:   oklch(60% 0.13 195);
  --accent-amber-oklch:  oklch(68% 0.18 60);
  --accent-indigo-oklch: oklch(58% 0.21 285);
}