Zum Inhalt springen
Für KI: llms.txt

Kapitel 03

Farben

Drei Flächenfarben, ein Signalton, zwei Statusfarben – mit Bedeutung und geprüften Kontrasten.

Als Markdown für KI

Die Palette trägt die Marke durch drei Flächenfarben – Wald, Flieder, Creme – und einen Signalton, Minze, der Wichtiges markiert. Koralle und Amber gibt es nur als Status.

Verhältnis

Einsatz Anteil
Creme / Karte / Weiß ca. 60 %
Wald ca. 25 %
Flieder ca. 10 %
Minze ca. 5 %

Marketing (Website, Folien, Druck) steht auf Creme. Die App ist heller: App-Grund mit weißen Karten und einer Wald-Karte als Anker (siehe Produkt-UI).

Palette

Creme 11,2:1
Wald#183D2FRGB 24, 61, 47 · --farbe-waldMarkenfarbe. Dunkle Flächen (Titel- und Schlussfolien, Navigation), Headlines und Primär-Buttons auf creme. Text darauf: creme.
Creme 7,8:1
Wald hover#24573FRGB 36, 87, 63 · --farbe-wald-hoverHover- und Pressed-Zustand für Wald-Flächen; Balken zweiter Ordnung in Diagrammen.
Tinte 11,9:1
Minze#BDEACBRGB 189, 234, 203 · --farbe-minzeKlar-Markierung auf creme und karte, positive Status-Hintergründe, Akzent auf wald (9:1). Text darauf: wald oder tinte. Dekorativ – die Information trägt immer der Text.
Tinte 13,6:1
Minze hell#D2F7DCRGB 210, 247, 220 · --farbe-minze-hellKlar-Markierung und aktive Optionen auf flieder – heller als minze, damit die Markierung auf Flieder sichtbar bleibt. Text darauf: wald (10,3:1).
Tinte 7,6:1
Minze kräftig#6CC690RGB 108, 198, 144 · --farbe-minze-kraeftigBuchrücken des Logos und grafische Akzente auf hellen Gründen (1,9:1 zu creme, 5,8:1 zu wald). Kein Text.
Creme 4,7:1
Guthaben#2E7D52RGB 46, 125, 82 · --farbe-guthabenPositive Beträge und Guthaben als Text auf creme oder karte (4,7:1).
Tinte 10,5:1
Flieder#D8CCF6RGB 216, 204, 246 · --farbe-fliederZweite Markenfläche: Kennzahlen-Panels, Illustrationsgründe, eine Fokusfolie pro Deck. Text darauf: tinte (10,5:1), wald (7,9:1) oder tinte-2 (6,1:1). Markierungen darauf in minze-hell.
Tinte 13,3:1
Flieder hell#EEE9FCRGB 238, 233, 252 · --farbe-flieder-hellRuhige Hinterlegung von Diagrammflächen und Info-Boxen.
Tinte 14,8:1
Creme#FBF7EERGB 251, 247, 238 · --farbe-cremeSeitengrund für Web, Produkt und Content-Folien.
Tinte 15,6:1
Karte#FFFDF8RGB 255, 253, 248 · --farbe-karteKarten und Eingabeflächen auf creme.
Creme 14,8:1
Tinte#14261ERGB 20, 38, 30 · --farbe-tinteFließtext und Zahlen auf creme, karte, minze und flieder.
Creme 8,6:1
Tinte 2#3C4B44RGB 60, 75, 68 · --farbe-tinte-2Sekundärer Text auf creme, karte und flieder (8,6:1 / 6,1:1).
Creme 5,2:1
Grau#5F6B65RGB 95, 107, 101 · --farbe-grauBildunterschriften, Quellen, Metadaten auf creme und karte (5,2:1), nicht kleiner als 13 px. Auf flieder nur ab 24 px (3,7:1).
Tinte 11,9:1
Linie#E5DFD1RGB 229, 223, 209 · --farbe-linieHaarlinien, Kartenrahmen, Tabellenlinien.
Creme 4,5:1
Koralle#C4492ERGB 196, 73, 46 · --farbe-koralleNur für Nachzahlungen, Fehler und kritische Fristen – als Text auf creme oder karte (4,5:1); auf flieder nur ab 24 px fett oder als koralle-hell-Badge. Nie als Deko.
Tinte 12,9:1
Koralle hell#FBE3DCRGB 251, 227, 220 · --farbe-koralle-hellHintergrund für kritische Status-Badges; Text darauf: koralle oder tinte.
Tinte 7,6:1
Amber#E4A93BRGB 228, 169, 59 · --farbe-amberHinweise und offene Rückfragen als Punkt oder Fläche; Text darauf: tinte.
Tinte 13,9:1
Amber hell#FCEFD4RGB 252, 239, 212 · --farbe-amber-hellHintergrund für Hinweis-Badges; Text darauf: tinte.
Tinte 14,4:1
App-Grund#F4F4F0RGB 244, 244, 240 · --farbe-app-grundHintergrund der Anwendungen (Web und App) – heller als creme, damit weiße Karten schweben.
Tinte 15,8:1
App-Karte#FFFFFFRGB 255, 255, 255 · --farbe-app-karteKarten und Flächen in der Anwendung auf app-grund.
Tinte 13,2:1
App-Linie#ECEAE4RGB 236, 234, 228 · --farbe-app-linieTrenner in Listen, Rahmen von Eingabefeldern und Pill-Buttons in der Anwendung.
Creme 4,8:1
App-Grau#66706BRGB 102, 112, 107 · --farbe-app-grauLabels und Metadaten in der Anwendung auf app-karte (4,9:1).

Regeln

  • Text: Tinte auf hellen Flächen, Creme auf Wald. Auf Minze und Flieder immer Tinte oder Wald.
  • Minze ist nie Textfarbe, sondern Fläche: Klar-Markierung, aktiver Zustand, positiver Status.
  • Koralle nur für Nachzahlung, Fehler, kritische Fristen – als helles Badge (Koralle hell) mit Text in Tinte. Nie als Dekoration, nie als Fließtext.
  • Amber nur für offene Punkte – als helles Badge (Amber hell).
  • Nie: Verläufe, Flieder und Minze als große Flächen direkt nebeneinander ohne Creme-Abstand, neue Farben ohne Eintrag in den Tokens.

Kontraste

Alle Textkombinationen erfüllen mindestens WCAG AA (4,5:1 für Text, 3:1 ab 24 px).

Vordergrund auf Creme auf Flieder auf Minze auf Wald
Tinte 14,8:1 ✓ 10,5:1 ✓ 11,9:1 ✓ –
Wald 11,2:1 ✓ 7,9:1 ✓ 9,0:1 ✓ –
Tinte 2 8,6:1 ✓ 6,1:1 ✓ 6,9:1 ✓ –
Grau 5,2:1 ✓ 3,7:1 nur ≥ 24 px 4,2:1 nur ≥ 24 px –
Koralle 4,5:1 ✓ 3,2:1 nur ≥ 24 px 3,6:1 nur ≥ 24 px –
Creme – – – 11,2:1 ✓
Minze – – – 9,0:1 ✓
  • Auf Flieder kein Grau und keine Koralle unter 24 px – negative Beträge dort als Koralle-hell-Badge oder auf einer Karte.
  • Die Klar-Markierung ist Dekoration: Minze auf Creme, auf Flieder immer Minze hell. Die Information trägt der Text darauf (≥ 9:1).

Datenvisualisierung

  • Ist-Werte in Wald, der aktuelle Monat in Minze kräftig, Prognose in Minze und gestrichelt, Vergleich/Vorjahr in Flieder.
  • Guthaben für positive, Koralle nur für negative Abweichungen und Nachzahlungen.
  • Diagrammgrund Flieder hell oder Karte; Achsen in Grau.