Die Website ist ein digitaler Showroom, kein Katalog. Die Farbwelt bildet die Materialien einer Wohnküche ab – warmes Holz, Kupfer, Messing, Leinen, Stein, Graphit. Sie ist bewusst gedeckt und in der Fläche kontrastarm; Kontrast entsteht durch Bilder und wenige, klar gesetzte Akzente.

Das Designsystem ist Code (src/styles/global.css, packages/ui/) und wird nicht über Decap CMS gepflegt.

Grundsätze

1. Die Bilder sind der Farbträger. Flächen bleiben ruhig (color-bg-primary, color-bg-sand, color-bg-linen), damit Küchenfotos nicht mit dem Layout konkurrieren.
2. Akzente sind selten. color-brand-copper und color-brand-gold markieren Handlungen und Rubriken, nie Dekoration.
3. Farbe trägt nie allein Information. Jeder farbig markierte Zustand hat zusätzlich Text, Symbol, Position oder Rahmen (WCAG 2.2, 1.4.1).

Farbe

Alle Farben sind Custom Properties im :root-Block; die Hex-Werte stehen nur dort.

Heller Grund (color-bg-primary, color-bg-sand, color-bg-linen)

• Überschriften und primärer Text in color-brand-dark.
• Fließtext und Sekundärtext in color-text-secondary.
• Buttons, Links, Eyebrows, aktive Zustände in color-brand-copper; Text auf Kupferfläche Weiß (6,32:1).
• Meta-Zeilen und Versalien-Labels in color-brand-sand – außer auf color-bg-linen (3,97:1). Dort auf color-brand-dark oder color-text-secondary wechseln.
• Rahmen und Trennlinien in color-border.

Dunkler Grund (color-deep-brown für Hero, dunkle Sektionen, Footer; color-graphite als Akzentfläche)

• Sekundärtext in color-text-on-dark-muted.
• Eyebrows, Listenmarker, Fokusring in color-brand-gold.
• color-brand-copper ist hier unzulässig (2,93:1 auf deep-brown) – Gold übernimmt.

Nur Flächen: color-sage und color-stone sind nie Textfarben; sie tragen Lieferanten-Logos, Platzhalter und Intro-Linien.

Gold ist keine Textfarbe auf hellem Grund – 2,28:1 auf color-bg-primary, auch für große Schrift unzulässig.

Kontrastmatrix (WCAG 2.2)

Erforderlich: 4,5:1 für normalen Text, 3:1 für großen Text (ab 24 px bzw. 18,66 px fett) sowie für Bedienelement- und Grafikbegrenzungen. ✗ = unter 4,5:1.

Vordergrund	bg-primary	bg-sand	bg-linen	deep-brown	brand-dark	graphite
brand-dark	12,06	10,58	9,03	—	—	—
brand-copper	6,07	5,32	4,54	2,93 ✗	—	2,11 ✗
brand-gold	2,28 ✗	2,00 ✗	1,71 ✗	7,80	5,29	5,60
brand-sand	5,31	4,65	3,97 ✗	3,35 ✗	—	—
text-secondary	6,33	5,55	4,74	2,81 ✗	—	—
text-on-dark-muted	1,76 ✗	1,55 ✗	1,32 ✗	10,08	6,84	7,24
sage	4,79	4,20 ✗	3,58 ✗	3,72 ✗	—	—
stone	1,46 ✗	1,28 ✗	1,10 ✗	12,16	8,25	8,73

Jede neue Farbkombination wird gegen diese Matrix geprüft; neue Tokens erweitern sie.

Zustände und Fokus

Zustand	Umsetzung
Link (Ruhe)	color-brand-copper, unterstrichen oder mit Unterlinie
Link (Hover)	Farbwechsel und sichtbare Linienänderung
Fokus	Doppelring auf jeder Fläche: outline: 3px solid var(--color-bg-primary), outline-offset: 2px, dazu shadow-focus (6px color-deep-brown). Nie outline: none ohne Ersatz.
Ungültiges Feld	Rahmen color-brand-dark + 2px Ring color-brand-gold + fetter Fehlertext
Aktive Navigation	aria-current="page" plus Goldrand bzw. Unterlinie (Footer)
Deaktiviert	reduzierte Deckkraft und aria-disabled

Der Doppelring ist hell-dunkel und damit auf hellem wie dunklem Grund sichtbar (deep-brown auf bg-primary 17,79:1). forced-colors: active ersetzt ihn durch outline: 3px solid Highlight.

Barrierefreiheitsmodi

Drei Nutzereinstellungen, per localStorage gespeichert (packages/ui/components/SiteScripts.astro):

Attribut	Werte	Wirkung
html[data-font-size]	large, xlarge	Basisschriftgröße 115 % / 130 %
html[data-contrast]	high	Schwarz/Weiß-Palette mit verstärkten Rahmen für Header, Navigation, Buttons, Karten
html[data-motion]	reduce	Animationen und Übergänge praktisch aus

prefers-reduced-motion wird zusätzlich respektiert. Der Modus „Hoher Kontrast" ist hier das Theme high: Flächen Schwarz (#000, #0E0E0E, #181818), Text Weiß bzw. #F0F0F0, Kupfer #E6A15C, Gold #FFD27D; Header, Nav-Pillen, Buttons und Karten bekommen 2px weiße Rahmen, .btn-primary wird weiß mit schwarzer Schrift. Er überschreibt nur Tokens – jeder direkt notierte Hex- oder rgba()-Wert bricht ihn an dieser Stelle.

Im Hochkontrastmodus nicht abgedeckt (Befunde aus dem Code):

• color-brand-sand wird nicht überschrieben: Labels und Meta-Zeilen haben dort nur 3,21–3,80:1.
• color-bg-primary und color-deep-brown werden beide #000 – beide Fokusringe sind dann schwarz auf schwarzem Grund, der Fokus ist unsichtbar.
• Aktiver a11y-Button: Weiß auf #E6A15C = 2,18:1.

Typografie

• Überschriften, Zitate, Bildunterschriften in serif (Georgia) – der Träger der Anmutung.
• Fließtext, Bedienelemente, Kleintext in sans (Systemschrift).
• Es werden keine Webfonts geladen: keine zusätzlichen Requests, kein Layout-Shift, keine Drittanbieter-Ressourcen.
• Überschriften sind fluid (clamp()), immer Gewicht 400 – nie fett. Die Stile hero-title, page-title, section-title und statement zeigen den Maximalwert; die volle clamp()-Formel steht in ihrer Beschreibung.
• Fließtext und Kleintext in festen Pixelwerten mit großzügigem Zeilenabstand (1,7–1,8): lead 16px, body 15px, body-sm 14px, card-text 13px, hint 12px – immer in color-text-secondary.
• Versalien nur für Bedienung und Etiketten: button, nav, eyebrow, label-caps, jeweils mit Sperrung.
• eyebrow: 11 px, 600, letter-spacing: 3px. Auf hellem Grund color-brand-copper, auf dunklem color-brand-gold. Im Seiten-Hero ist die Eyebrow technisch das <h1>; die optisch dominante Hauptüberschrift ist ein <h2> mit clamp().
• Kleinste Größe ist 10 px (label-caps), nur für Versalien-Labels.

Radien und Layout

• radius-md (4 px) ist der Standard für Karten, Panels, Fotos und Nav-Pillen; radius-sm (3 px) für Buttons und Eingabefelder, radius-lg (8 px) für große Flächen, radius-pill bzw. 50 % für Pillen und Kreise. Keine weiteren Werte einführen (5 px und 6 px im Code sind Streuwerte).
• Inhalt maximal max-page (1180 px) breit, seitlich page-gutter (48 px).
• Sektionen atmen: section-y-lg (104 px), section-y (96 px), section-y-sm (88 px) oben und unten. Kartenraster mit grid-gap (24 px).
• Schatten sind selten und warm getönt (rgba(26, 18, 8, …)): shadow-card-hover nur bei Hover, shadow-float für eine Tafel über einem Foto. Flächen trennen sich sonst durch Farbe und Haarlinien.

Logo

• jan-hoepken-logo-farbe.png auf color-bg-primary, color-bg-sand und Weiß: Haus aus fünf Holztönen, Wortmarke in Dunkelbraun, Signatur in Schwarz.
• Jan_Hoepken_Logo_Weiss.svg (Header) bzw. jan-hoepken-logo-weiss.png auf color-deep-brown, color-graphite und dunklen Bildbereichen.
• Die Wortmarke ist in Exo 2 Bold gesetzt. Exo 2 wird auf der Website nicht als Schrift geladen – nur im Logo verwenden.
• Die Holztöne des Logos (#BB7C48, #AB8358, #A77E4D, #D2A66D, #C3986A) und das Braun der Wortmarke (#583B1E) sind Logofarben, keine Tokens. Nicht in Layout oder Text übernehmen.
• Das Logo nie umfärben, verzerren oder ohne Rahmenlinien und Signatur verwenden.

Regeln für Änderungen

1. Keine Hex- oder rgba()-Werte außerhalb des :root-Blocks. Neue Farbe heißt: neues Token oder bestehendes Token.
2. Neue Tokens brauchen eine Rolle, keinen Materialnamen. Ist „Wofür ist das da?" nicht in einem Satz beantwortbar, fehlt kein Token, sondern eine Entscheidung.
3. Jede neue Farbkombination gegen die Kontrastmatrix prüfen und die Matrix erweitern.
4. Farbe nie als alleiniger Informationsträger.
5. Nach jeder Farbänderung npm run check:a11y, ein Tastaturdurchlauf der betroffenen Strecke und ein Blick in den Hochkontrastmodus.

Bekannte Abweichungen im Code

#	Befund	Priorität
1	~44 direkte Hex-Werte und >60 rgba()-Literale außerhalb von :root – ignorieren den Hochkontrastmodus	hoch
2	color-brand-sand als Text auf color-bg-linen (3,97:1) – AA-Verstoß bei 10-px-Labels	hoch
3	Keine semantische Ebene (--color-text, --color-surface, --color-accent)	mittel
4	Keine Statusfarben für Erfolg, Warnung, Fehler	mittel
5	color-graphite, color-sage, color-stone mit nur 2–4 Verwendungen – festschreiben oder zusammenführen	niedrig
6	Kein Abstands- und Schriftgrößen-Token-Satz	niedrig
7	Hochkontrast: Fokusringe unsichtbar (bg-primary und deep-brown beide #000)	hoch
8	Hochkontrast: color-brand-sand nicht überschrieben (3,21–3,80:1)	hoch
9	Hochkontrast: aktiver a11y-Button Weiß auf #E6A15C (2,18:1)	mittel

Reihenfolge: 7 und 2/8, dann 1, dann 3 und 4 gemeinsam.