Farben
Neutrale Zink-Palette als ruhige Basis, Akzentfarben nur für Shop-Signale wie Preise und Status
Neutral – ce-zinc
ce-zinc-50
#FBFBFC
Seitenhintergrund (body)
ce-zinc-100
#F3F3F3
Sektionshintergründe
ce-zinc-200
#EDEEEF
Card-Hintergründe, Trennlinien
ce-zinc-300
#D1D1D4
ce-zinc-400
#B6B7BB
Placeholder-Text
ce-zinc-500
#69727D
Hilfstext, Metadaten
ce-zinc-600
#575A61
Sekundärer Text, Outline-Buttons
ce-zinc-700
#454850
ce-zinc-800
#313337
Fließtext, Button hover
ce-zinc-900
#232528
ce-zinc-950
#18191A
Überschriften, Primary Buttons
VERLAUF · CE-ZINC-50 BIS CE-ZINC-950
Akzent – ce-red
Shop: Preise, Sale-Badge, Fehler
ce-red-200
#FECACA
ce-red-300
#FCA5A5
ce-red-400
#F87171
ce-red-500
#D93F33
Preise, Sale, Fehler
Akzent – ce-emerald
Shop: Verfügbar, Erfolg
ce-emerald-200
#A7F3D0
ce-emerald-300
#6EE7B7
ce-emerald-400
#34D399
ce-emerald-500
#10B981
Verfügbar, Erfolg
Akzent – ce-yellow
Shop: Warnung, Hinweis
ce-yellow-200
#FDE68A
ce-yellow-300
#FCD34D
ce-yellow-400
#FBBF24
ce-yellow-500
#F59E0B
Warnung, Hinweis
Tabellen-Farben
Table Header BG
rgba(128, 128, 128, 0.07)
Tabellenkopf-Hintergrund
Table Row Alt BG
rgba(0, 0, 0, 0.024)
Alternierende Tabellenzeilen
Table Border
rgba(128, 128, 128, 0.5)
Tabellenränder
Dotted Border
rgba(0, 0, 0, 0.1)
Gepunktete Trennlinien
Dark Theme – Farbzuordnung
Welche Light-Farbe wird im Dark Mode zu welchem Wert
Surfaces
white → ce-zinc-900
Cards, Panels
ce-zinc-50 → ce-zinc-950
Page BG
ce-zinc-100 → ce-zinc-900
Section BG
ce-zinc-200 → ce-zinc-900
Showcase BG
Borders
ce-zinc-100 → ce-zinc-800
Subtle borders
ce-zinc-200 → ce-zinc-800
Card borders
ce-zinc-300 → ce-zinc-700
Strong borders
Text
ce-zinc-950 → ce-zinc-50
Headings
ce-zinc-800 → ce-zinc-200
Body text
ce-zinc-600 → ce-zinc-400
Secondary text
ce-zinc-400 → ce-zinc-500
Placeholder
Akzente
ce-red-500 (#D93F33) — unchanged on dark
ce-emerald-500 (#10B981) — unchanged on dark
ce-yellow-500 (#F59E0B) — unchanged on dark
Monochromatisches Theme
DESIGNENTSCHEIDUNG · KEINE INVERTIERTEN SEKTIONEN IM LIGHT MODE
• Das Theme ist monochromatisch: Alle Sektionen folgen dem aktiven Theme
• Kein Wechsel zwischen hellen und dunklen Sektionen innerhalb eines Modes
• Footer, Header und alle Komponenten nutzen semantische Tokens (--ce-surface-card, --ce-text-heading etc.)
• Logos verwenden CSS Custom Property --ce-logo-filter (none in Light, invert(1) in Dark)
• Invertierte Surfaces (--ce-surface-invert) nur für interaktive Elemente (Buttons, Tags), nicht für Layout-Sektionen
Regeln
• Palette ist komplett neutral (Graustufen mit leichtem Warmton)
• Kontrastverhältnis ce-zinc-950/ce-zinc-50: ~18:1 (WCAG AAA)
• Sektionen auf ce-zinc-100 (#F3F3F3), Cards auf ce-zinc-200 (#EDEEEF)
• ce-red für Preise, Sale und Fehler
• ce-emerald für Verfügbarkeit und Erfolgsmeldungen
• ce-yellow für Warnungen und Hinweise