Akzentfarben

Akzentfarben ergänzen das Orange-Grau-Farbsystem für Visualisierungen, Diagramme, Tags und andere Unterscheidungsmerkmale. Sie wurden bewusst gewählt, um die Primärfarbe Orange zu komplementieren — nicht zu überlagern.

Farbpalette

Blue
#2563EB

Teal
#0D9488

Amber
#D97706

Indigo
#6366F1

Name	HEX	OKLCH	Vorschau	Anwendung
Blue	#2563EB	oklch(58% 0.20 255)		Links, Trust-Signale (Banking, Compliance), interaktive Elemente, Diagramme
Teal	#0D9488	oklch(60% 0.13 195)		Sekundäre Marker, Checkpoints in Process-Flows, Alternative Kategorie
Amber	#D97706	oklch(68% 0.18 60)		Reserviert (NICHT mit Brand-Orange verwechseln) — siehe Warnhinweis
Indigo	#6366F1	oklch(58% 0.21 285)		Premium-Marker, Enterprise-Features, kreative Akzente

Hinweis

Slate (#475569) wurde aus der Akzentpalette entfernt. Für neutrale Töne die Warm-Gray-Skala verwenden.

Zusammenspiel mit Orange

Orange (Primär)

Blue

Teal

Amber

Indigo

Warum diese Farben?

Farbe	Begründung
Blue	Komplementär zu Orange — maximaler Kontrast bei harmonischer Wirkung
Teal	Kühle Brücke zwischen Blau und Grün — technisch, frisch
Amber	Warme Erweiterung der Orange-Familie — natürlicher Farbfluss
Indigo	Kräftiger Blauton für kreative Akzente und Highlights

Diagramm-Reihenfolge

1. Orange

2. Blue

3. Teal

4. Amber

5. Indigo

Anwendungsregeln

Akzentfarben sind tertiär in der BAUER GROUP Hierarchie. Sie kommen NUR zum Einsatz, wenn Brand-Orange dominanten Charakter hätte (Multi-Color-Vergleichs-Tabellen, mehrfarbige Diagramme, Status-Differenzierung jenseits Success/Warning/Error/Info). Im Standard-Layout kommt eine Seite ohne Akzentfarben aus.

1. Akzentfarben sind nie die dominante Farbe — sie ergänzen Orange
2. Maximal 2 Akzentfarben pro Ansicht verwenden
3. Akzentfarben werden primär in Datenvisualisierungen eingesetzt
4. Blue ist die bevorzugte Akzentfarbe für interaktive Elemente und Trust-Signale (Banking, Compliance)
5. Amber nur einsetzen, wenn genug visueller Abstand zu Orange besteht — siehe Warnhinweis unten

Amber vs. Brand-Orange

Amber (#D97706) liegt perzeptiv sehr nah an Brand-Orange (#FF8500) — in OKLCH unterscheiden sich die Hues nur um ~13° (60° vs. 47°). In schmalen Diagramm-Streifen oder kleinen Badges ist der Unterschied für viele Betrachter nicht eindeutig zu erkennen. Empfehlung: Amber nur in großen Flächen mit deutlicher räumlicher Trennung zu Brand-Orange einsetzen. In Datenvisualisierungen mit Brand-Orange als Primär-Serie: Amber meiden, stattdessen Teal oder Indigo wählen.

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);
}