Vollständige Farbpalette, Kontrast-Regeln, Typografie-Skala und Syntax-Highlighting — jede Variable, jeder Wert
Jede CSS-Variable des Design-Systems mit ihrem Hex-Wert. Gruppiert nach Funktion — von Primärfarben über Hintergründe bis zu semantischen Farben und Chart-Farben.
Primärfarben (3)
Hintergründe (3)
Text (3)
Borders & Surfaces (4)
Akzent (4)
Semantisch (8)
Akteur-Farben (6)
Chart-Farben (6)
WCAG AA verlangt mindestens 4.5:1 für normalen Text und 3:1 für großen Text. Hier sind die verbotenen Kombinationen und ihre korrigierten Werte.
Kritische Korrektur: --color-text-muted
Dieser Text nutzt #9995A0 auf Weiß
Ratio: 2.8:1 — FAIL AADieser Text nutzt #6B6778 auf Weiß
Ratio: 5.1:1 — PASS AAVerbotene Kombinationen
| Kombination | Ratio | Status |
|---|---|---|
| #FFFFFF auf #F3EFEB | 1.1:1 | VERBOTEN |
| #FFFFFF auf #F8F5F2 | 1.1:1 | VERBOTEN |
| #E4DAD4 auf #FFFFFF | 1.5:1 | VERBOTEN (als Text) |
| #FEB85C auf #FFFFFF | 2.1:1 | VERBOTEN (als Text) |
| #84C041 auf #FFFFFF | 2.7:1 | VERBOTEN (als Text) |
Faustregel: Verwende für Fließtext immer --color-text (#1A1A2E) oder --color-text-secondary (#5C5A6B). Helle Farben wie Orange oder Grün nur für Akzente (Badges, Icons, Borders) — nie als Textfarbe auf hellem Hintergrund.
Die vollständige Typografie-Skala von --text-xs (.75rem) bis --text-6xl (3.75rem). Jede Stufe mit ihrem Einsatzbereich.
Font-Weight-Zuordnung
| Kontext | Font | Weight | Line-Height |
|---|---|---|---|
| Hero-Titel | --font-display | 800 | --leading-tight (1.15) |
| Modul-Titel | --font-display | 700 | --leading-tight (1.15) |
| Card-Titel | --font-display | 600 | --leading-normal (1.6) |
| Fließtext | --font-body | 400 | --leading-normal (1.6) |
| Code / Mono | --font-mono | 400–600 | 1.8 (Code-Blöcke) |
Code-Blöcke verwenden --color-bg-code (#000066) als Hintergrund. Nicht Schwarz, nicht Anthrazit — Deep Navy Blue. Hier sind alle Highlight-Klassen.
Beispiel mit allen Klassen
// Beispiel: File-Agent Konfiguration const createFileAgent = (config) => { const agent = { filename: "farbraum-typografie_dev_de.html", audience: "dev", level: 2, hs_score: 7, // kein L3 Deep-Dive sections: 4, }; // Validierung: WCAG AA prüfen if (contrastRatio(agent.textColor, agent.bgColor) < 4.5) { throw new Error("WCAG AA Kontrast nicht erfüllt"); } return agent; };
Was ist die Hintergrundfarbe für Code-Blöcke?