Stilguide

Farben, Haarstrich, Schrift und Regeln, damit Haarscharf gerechnet überall gleich aussieht.

Das Prinzip

Ein Urteil, vier Kontexte. Burgund steht für die Entscheidung und ist auf jeder Seite da. Pinie ist die Gegenseite. Die vier Elemente tragen nur den Kontext: Kartenrand, Icon, Band. Messing ist der Haarstrich, das Erkennungszeichen der Seite.

  • A ist immer Burgund, B ist immer Pinie. Das gilt für Autos, Objekte und jeden anderen Vergleich.
  • Messing ist nur Schmuck: feine Linie unter Überschriften, Markierung bei Gleichstand („haarscharf“), Trenner. Nie als Textfarbe, der Kontrast reicht nicht.
  • Elementfarben färben nie das Ergebnis. Das Ergebnis gehört Burgund und Pinie.
  • Text braucht mindestens 4,5:1 Kontrast, große Schrift mindestens 3:1. Farbe trägt nie allein eine Information, es gibt immer Text oder Form dazu.
  • Luft ist hell („Nebel“), Wasser ist dunkel („Tiefsee“). Sie unterscheiden sich in der Helligkeit, nicht nur im Farbton: Bei Rot-Grün-Schwäche liegt der Abstand weiter bei 30 und mehr, bei der früheren Violett-Blau-Kombination waren es 2 bis 3.

Farben

Hell / DunkelFarbe und RolleHex (hell), RGB, CMYKHex (dunkel)Kontrast
Burgund
Marke und Entscheidung: Logo, Ergebnisse, Hauptknöpfe, Urteilssätze
#7A1C2E
RGB 122, 28, 46
CMYK 0/77/62/52
#E0788C9.3:1
dunkel 6.2:1
Pinie
Gegenseite und Erde: Option B, Mieten, Depot, Haus-Bereich
#28513F
RGB 40, 81, 63
CMYK 51/0/22/68
#6FB5948.1:1
dunkel 7.5:1
Nebel
Luft (Fläche): Auto und Mobilität. Icon, Rand, Band. Heller Ton, daher nie als Schrift
#8E9AA8
RGB 142, 154, 168
CMYK 15/8/0/34
#C9D1DB2.6:1
dunkel 11.7:1
Nebel, Text
Luft (Schrift): Beschriftungen im Bereich Luft
#4F5B68
RGB 79, 91, 104
CMYK 24/12/0/59
#C9D1DB6.3:1
dunkel 11.7:1
Tiefsee
Wasser: Familie
#1F5A82
RGB 31, 90, 130
CMYK 76/31/0/49
#5E9BD06.7:1
dunkel 6.1:1
Terrakotta
Feuer: Uhren und Leidenschaft
#99492B
RGB 153, 73, 43
CMYK 0/52/72/40
#E08A625.7:1
dunkel 6.8:1
Messing
Haarstrich, Gleichstand, Schmuck. Nie für Text
#B8955A
RGB 184, 149, 90
CMYK 0/19/51/28
#D2B07A2.5:1
dunkel 8.8:1
Papier
Hintergrund
#F6F3EE
RGB 246, 243, 238
CMYK 0/1/3/4
#14171A–
dunkel –
Tinte
Fließtext, Überschriften
#1F2326
RGB 31, 35, 38
CMYK 18/8/0/85
#ECE9E214.3:1
dunkel 14.8:1
Sandstein
Abgesetzte Bereiche, Sektionen
#EEE9E1
RGB 238, 233, 225
CMYK 0/2/5/7
#20262A–
dunkel –
Weiß
Karten und Eingabefelder
#FFFFFF
RGB 255, 255, 255
CMYK 0/0/0/0
#1B1F23–
dunkel –
Schiefergrau
Metadaten, ergänzende Hinweise
#62666A
RGB 98, 102, 106
CMYK 8/4/0/58
#A19D955.2:1
dunkel 6.7:1

Kontrast gegen den jeweiligen Hintergrund (Papier hell, #14171A dunkel), berechnet nach WCAG 2. CMYK ist eine einfache Umrechnung für Entwürfe. Für Druck bitte ein Probedruck mit Profil (z. B. FOGRA39).

Haarstrich

Eine feine Linie in Messing, 2 Pixel stark und 56 Pixel lang unter Seitenüberschriften, 40 Pixel unter Kartenüberschriften. Sie taucht auch auf, wenn zwei Optionen praktisch gleichauf liegen. Wo sie steht, wurde haarscharf gerechnet.

Schrift und Logo

Überschriften und Name in einer Serifenschrift (ui-serif, New York, Georgia), Text in der Systemschrift. Das Logo ist ein helles Quadrat in Papierfarbe mit feiner Sandkontur, darin eine Kugel mit zwei Hälften in Burgund #7A1C2E und Pinie #28513F und einem Messingstrich mit Haar #B8955A in der Mitte. Es verwendet immer die echten Markenfarben, nie aufgehellte Töne. Der Name steht als „Haarscharf“ in Serif und „gerechnet“ kursiv.

Tokens zum Kopieren

:root{--buy:#7A1C2E;--rent:#28513F;--gold:#B8955A;--bg:#F6F3EE;--ink:#1F2326;--sand:#EEE9E1;--mute:#62666A;
 --erde:#28513F;--luft:#8E9AA8;--luft-ink:#4F5B68;--wasser:#1F5A82;--feuer:#99492B}
:root[data-theme=dark]{--buy:#E0788C;--rent:#6FB594;--gold:#D2B07A;--bg:#14171A;--ink:#ECE9E2;
 --erde:#6FB594;--luft:#C9D1DB;--luft-ink:#C9D1DB;--wasser:#5E9BD0;--feuer:#E08A62}

Stand: Oktober 2026. Änderungen an diesen Werten gehören hierher, bevor sie auf der Seite ankommen.