---
title: "Durrani Website — DESIGN.md (Design-System + Brand Language)"
type: reference
tags: [durrani, website, design, design-system, brand, typography, color, motion, ux, a11y, mobile-first]
date: 2026-05-24
status: draft
source: "state/sub-agent-context/design-benchmarks/report.md (20+ Premium-Quellen) + Aria-Synthese"
related: "[[constitution]], [[spec]], [[plan]]"
---

# Durrani Website — DESIGN.md

> Verbindliches Design-System fürs Durrani-Premium-Hospitality-Projekt. Synthese aus internationaler Premium-Benchmark-Recherche (ilili/Pentagram, Eleven Madison Park, Apple, Awwwards-Hospitality, WCAG 2.2, Framer-Motion-Perf, AI-Search-Schema-Studien) + Aria-Judgment. **Status: Draft → Kais Design-Review-Gate.** Voll-Recherche: `state/sub-agent-context/design-benchmarks/report.md` (772 Z.).
>
> **Leitprinzip (Kais):** Jede Design-Entscheidung muss UX verbessern, Vertrauen erhöhen, Performance/SEO/AI-Readability respektieren, Mobile priorisieren, Markenwirkung stärken. Keine unnötigen Effekte. Qualität deutlich über typischen Restaurant-Sites.

## 1. Brand Language — „Premium Afghan, nicht Kitsch"
**Mood:** warm-modern, würdevoll, geerdet — das Gefühl, einen schön beleuchteten Raum zu betreten, der nach Kardamom + Lamm duftet. Nicht laut, nicht exotisierend, nicht theatralisch.
**Pillars:** (1) authentisch, nicht folkloristisch · (2) Familienwärme + professionelle Präzision · (3) Selbstbewusst ohne Einschüchterung · (4) lokaler Stolz, internationale Qualität.
**NIE:** generische Arabesken-Borders, Gold-Filigree-Clipart, Teppich-Texturen als BG, Laternen-Stock-Fotos, Rot+Gold+Dunkelgrün ungebremst, fliegende Falken, „exotic"-Orientalismus.
**Ein Grounding-Motiv, systematisch (ilili-Prinzip):** EIN geometrisches Afghan-Tilework-Element (6-zackiger Stern / Lozenge) als Divider/Bullet/Textur-Token — klein, funktional, nie Deko. Ein Motiv, viele Uses. Verankert Kultur ohne sie aufzuführen.
**Material-Referenz (nicht abbilden, evozieren):** rohes Leinen, warmer Sandstein, Terrakotta, schattiges Oliv, gealtertes Messing.
**Foto = die kulturelle Aussage:** das perfekte Mantu auf Stein-Teller, natürlich belichtet, wie Fine-Dining fotografiert — das IST die Identität.

## 2. Typografie (max 2 Schriften, Apple-Prinzip)
- **Display: Cormorant Garamond Variable** (Hero, Section-Titel, Gerichtnamen, Pull-Quotes). High-Contrast = Luxus, europäisches Erbe ohne Steifheit. Fallback Playfair Display. Weights 300 (Atmosphäre, nur ≥28px wg. Kontrast), 400, 600.
- **Body/UI: Inter Variable** (Body, Nav, Labels, Buttons, alle UI). Screen-optimiert, volle Umlaute, 16px mobil top-lesbar. Weights 400/500/600.
- **Labels:** Inter Medium 11-12px, tracking 0.12em, all-caps („VORSPEISEN") — keine dritte Schrift.
- **Scale (8pt, fluid via clamp):** hero 56-80/1.05 · display 40-56/1.1 · heading 28-36/1.2 · subheading 20-24/1.3 · body-lg 18/1.65 · body 16/1.6 · sm 14/1.55 · label 11-12/1.4.
- **Preise:** Inter Regular, kein Währungssymbol bei Erstnennung, keine Dotted-Leader (Cafeteria-Sprache).
- **Perf:** Variable-Fonts = 1 File ∞ Weights; `font-display: swap` + woff2 preloaden.

**Mobile-Scales + DE/EN + Preis-Rhythmus (Kais-Ergänzung):**
- **Konkrete Mobile-Caps** (375px Viewport): hero clamp-min 2.5rem (40px), display max 32px, heading max 26px — verhindert Overflow auf schmalen Spalten. Cormorant 300 NIE < 28px mobil (Kontrast + Lesbarkeit).
- **DE/EN-Umbruch:** Deutsche Komposita sind lang → `hyphens: auto` + `lang="de"`/`lang="en"` korrekt setzen, `text-wrap: balance` für Headlines, `overflow-wrap: break-word` für lange Wörter. EN-Strings testen (oft kürzer → andere Zeilenumbrüche, Layout darf nicht springen).
- **Preis-/Zahlen-Alignment:** Inter mit `font-variant-numeric: tabular-nums` für Preise (gleiche Ziffernbreite → saubere vertikale Flucht in Menü-Listen). Preis rechtsbündig in eigener Spalte, **kein Dotted-Leader**. Konsistenter Preis-Rhythmus = ein Spacing-Token zwischen Name-Block und Preis.
- **Low-Light-Mobilität:** Gäste lesen oft im dunklen Restaurant/abends draußen → Body min 16px, ausreichend Kontrast (AA+), keine 300-Weight für funktionale Texte, genug Zeilenhöhe (1.6).

## 3. Spacing — 8pt-Grid
Tokens 4/8/12/16/24/32/40/64/80/96/128px. **Regel:** internes Spacing ≤ externes (Gruppierung). Max-Content 1280px, Text-Spalte ≤680px (~75 Zeichen). Fixed-Elemente immer `env(safe-area-inset-*)`; Bottom-CTA `padding-bottom: calc(16px + env(safe-area-inset-bottom))`.

## 4. Color — Light-First (Dark optional, NICHT gleichwertig) — Kais-Korrektur 2026-05-24
**Warum Light:** Food-Fotos performen auf Light dramatisch besser; 73% Buchungen mobil bei Tageslicht; Fine-Dining-Erbe (EMP/Noma/Le Bernardin).
**Dark Mode ist NICHT ein gleichwertiger zweiter Mode.** Light-first ist DIE Brand. Dark nur subtil/optional, **kein automatisches `prefers-color-scheme`-Takeover** (Risiko: Hospitality-Sites verlieren Wärme im Dark). Reihenfolge: zuerst perfekte Light-Experience, Dark erst wenn vollständig hochwertig (eigener späterer Slot, opt-in-Toggle, nicht v1-blockierend).

**Light:** bg `#FAF7F3` (warm off-white, NIE `#FFFFFF`) · surface `#F2EDE6` · raised `#EDE7DC` · fg `#1A1611` (warm near-black, NIE `#000`) · fg-muted `#5A5248` · fg-subtle `#9A9089` · **accent `#B8892A`** (Antik-Messing/Safran, NIE `#FFD700`) · accent-warm `#C9A35E` (hover) · accent-deep `#8A6415` (active) · border `#DDD4C8` · success `#3D7A5A` · error `#B03A2E`.
**Dark:** bg `#120F0B` · surface `#1E1A15` · raised `#2A2520` · fg `#F2EDE6` · accent `#C9A35E` (heller für Kontrast) · border `#2E2820`.
**Kontrast-Regel:** alle Text/BG-Paare ≥ WCAG-AA (4.5:1 Body, 3:1 Large). Accent `#B8892A` auf `#FAF7F3` ≈ 4.6:1 → nur Large-Text/Deko.
**Messing SEHR sparsam (Kais-Korrektur):** Antik-Messing NUR für Akzente, Divider, feine Linien, Fokus-Zustände, hochwertige CTA-Akzente. **NICHT** für große Flächen, starke Gradients, „billigen Luxury-Effekt". Max 2-3 Accent-Instanzen pro Viewport. Messing wirkt als Material-Detail, nie als Fläche.

## 5. Bild-Direction
**Hero:** Extreme-Close-up eines Gerichts (Mantu/Kebab/Bolani), 45°, dunkler Schiefer/warmes Leinen, Textur + impliziter Dampf. ODER Interieur mit Bokeh, warmem Amber-Licht, Gästen.
**NIE:** Stock, Flat-Lay auf Weiß (Delivery-App-Sprache), Instagram-Filter.
**Prinzipien:** natürliches/warmes Licht (3000-4000K), Tiefenschärfe, Negative-Space (= premium), EIN site-weiter Lightroom-Grade. → **höchste-ROI-Einzelentscheidung des Projekts (Kais): professionelles Food-Foto-Shooting** — kein Design kompensiert schwache Fotos.

**Foto-Briefing (verbindlich, Kais-Ergänzung):**
- **Lichtstil:** natürliches Fensterlicht / weich gerichtetes Kunstlicht, eine dominante Lichtquelle, weiche Schatten. Kein hartes Blitz-On-Camera, kein flaches Ringlicht.
- **Brennweite:** 50mm/85mm-Look (Teleporträt der Speise), enge Tiefenschärfe, Subjekt scharf, Hintergrund cremig. Kein Weitwinkel-Verzerrung.
- **Hintergrund-Sprache:** dunkler Schiefer, warmes Leinen, Sandstein, gealtertes Holz — ruhig, uni, nie gemustert/ablenkend. Ein Hintergrund-Set site-weit.
- **Farbtemperatur:** warm (3000-4000K), EIN konsistenter Grade — nie kühl/klinisch.
- **Teller-Komposition:** Off-Center / Rule-of-Thirds, großzügiges Negative-Space, ein Held-Gericht pro Bild. Keine überladene Tisch-Collage.
- **Dampf/Textur/Close-up:** echter Dampf/impliziter Dampf erlaubt (Frische), Makro auf Textur (Mantu-Falten, Reis-Körnung, Granatapfel) — Appetit über Detail.
- **Menschen:** ja, dosiert, für Wärme (Gäste/Service-Moment, mit Consent) — nie Stock-Lächeln.
- **Hände:** ja, authentische Service-/Ess-Gesten (Brot brechen, einschenken) — erhöhen Wärme + Maßstab.
- **Kitchen-Shots:** ja, sparsam — Handwerk/Frische-Story (Teig, Grill, Gewürze), kein Chaos.
- **Video (optional, später):** kurze stille Loops (Dampf, Einschenken) — performance-budgetiert (poster + lazy, kein Autoplay-Sound), nicht v1-kritisch.
- **VERBOTEN:** überbearbeitete Instagram-Food-Bilder, HDR-Overkill, Sättigungs-Push, Flat-Lay auf Weiß, Stock.

## 6. Motion — Disziplin
**Nur `transform` + `opacity`** (GPU-composited, kein Reflow). Default = KEINE Animation; jede muss sich verdienen.
**Erlaubt:** Fade+`translateY(8px→0)` für Enter, `scale(1.02)` Card-Hover, Underline `scaleX(0→1)`, Button `translateY(-1px)`/`scale(0.97)`, Header-Shrink. Dauer 150-300ms, ease-out.
**Verboten:** Parallax-Overkill, Scroll-Jacking, Auto-Karussells, Bounce/Spring-Spielerei, Layout-animierende Props (width/height/top/left), alles > 400ms.
**`prefers-reduced-motion`:** in CSS UND Framer-Motion respektieren (Animationen → instant/opacity-only).

## 7. Mobile-First (höchste Priorität)
- Mobile ist die Leit-Plattform — jeder Flow zuerst mobil entworfen + getestet.
- **Sticky Bottom-CTA-Bar:** „Tisch reservieren" + „Online bestellen", fixed, safe-area-aware, dismissable → Research: +20-25% Reservierungs-Conversion. *Stärkste Einzel-Komponente.*
- Edge-to-edge Imagery, Touch-Targets ≥ 44×44px, Daumen-Reichweite für Primär-Aktionen.
- Native Datepicker vermeiden (Android-inkonsistent) → eigene Komponente.

## 8. Layout & Grid
12-Spalten CSS-Grid, Max 1280px. Patterns: full-bleed Hero, asymmetrische Editorial-Splits (Foto/Text 7:5), Menu als Single-Column-Scroll mit Sticky-Category-Nav, Karten-Grid für Events/Galerie.

## 9. CTA-Strategie & Conversion-Hierarchie
**3 Tiers:** Primary „Tisch reservieren" (filled accent, ≥48px) · Secondary „Online bestellen" (ghost/outline) · Tertiary „Speisekarte ansehen"/„Feier anfragen" (Text-Link).
**Button:** radius 4px, Primary accent+weiß ohne Shadow, hover accent-warm+`translateY(-1px)` 200ms, active `scale(0.97)`, Focus 3px Offset-Ring (WCAG 2.4.11), disabled 40%.
**Homepage-Hierarchie:** Hero Primary → Hero-Tertiary Speisekarte → Sticky-Bar → nach Menu-Preview „Vollständige Speisekarte" → nach Feiern „Feier anfragen" → Footer.
**Reservierung im Modal-Overlay** (kein Page-Leave → −40% Abbruch), `backdrop-filter: blur(8px)`, ESC/×-Close.
**Trade-off (DE-Kultur):** großzügiges Spacing um CTAs, nie 2 Primary nebeneinander — CTAs als Einladung, nicht Forderung.

## 10. Menu-UX
**Sticky Category-Pill-Nav** (horizontal-scroll mobil, Intersection-Observer-aktiv, accent-Underline), Inline-Scroll. **NIE PDF** (inaccessible, AI-uncrawlable, Mobile-tot, wirkt 2005).
**Gericht:** Name (Cormorant subheading) · Beschreibung (Inter body, 2 Zeilen mobil, expandable) · Tags (Halal/Vegetarisch/Vegan/Scharf — Icon-Pills, max 3, Tooltip) · Preis (Inter, rechts/unter Name).
**Filter-Bar:** Alle | Halal | Vegetarisch | Vegan | Scharf — **Conversion- + Trust-Signal für Halal-Publikum (Durrani-Markenversprechen).**

## 11. Reservierungs-UX (Premium, 60-Sekunden-Regel)
Feld-Reihenfolge: Datum (Next-7-Days-Chips/Kalender) → Uhrzeit (**Slot-Chips** aus KADi-`slots`-API, belegte ausgegraut — kein Dropdown) → Personen (Stepper −2+) → Name → Telefon (`inputmode`, DE-Format) → Anmerkungen (optional).
**Kein CAPTCHA** (WCAG 3.3.8) → Honeypot + Cloudflare-Turnstile + BFF-Rate-Limit (KADi hat keins, siehe [[kadi-integration]]). Inline-Validierung on-blur, Floating-Labels, Autofill-Attribute.
**Microinteractions:** Focus → accent-Border + Label floats; Valid → grüner Haken; Error → roter Border+Icon+Msg unter Feld (Label nie ersetzen); Submit → Spinner → Success-Haken.
**Success:** Full-Screen-Summary-Card + „Add to Calendar" (.ics von KADi). **Cancel-ready:** „Reservierung ändern/stornieren"-Slot vorgesehen (v1 Telefon/Mail, später Magic-Link, [[kadi-integration]]/KAR-612).

## 12. Navigation
**Desktop:** sticky transparent → solid + `blur(12px)` nach 60px, Logo links, Nav zentriert (Speisekarte | Über uns | Feiern | Kontakt), DE/EN-Toggle top-right, „Tisch reservieren" rechts immer sichtbar, Hover-Underline `scaleX`. Header 72→56px nach Scroll (padding-Transition, kein Jump).
**Mobile:** Hamburger 44×44 rechts, **Full-Screen-Overlay** (kein Drawer — Drawer = App 2018, Full-Screen = Premium 2025), große Type, unten „Tisch reservieren" + Telefon, Close ×+tap-outside, Fade+`translateY(-8px→0)`.

## 13. Component Language & States
Radius: 4px Buttons/Inputs, 8px Cards, 16px Modals. Shadows dezent (`0 1px 3px /.08` Cards, `0 8px 32px /.12` Modals). Keine Gradients auf UI (nur Hero-Overlay für Text-Lesbarkeit).
- **Loading:** Skeleton (keine Spinner), gleiche Layout-Dimensionen, erst nach 300ms zeigen. Für Menu/Slots/Galerie.
- **Empty:** nie leeres Rechteck — warme Message + CTA. Keine Slots → nächstes freies Datum + Telefon.
- **Error:** Form inline; Page-Level „was/was-tun + Telefon"; API → Top-Toast 5s, nie `alert()`; 404 on-brand mit Links.
- **Success:** Reservierung Full-Screen-Summary; Kontaktform inline-replace.
- **Hover/Touch:** Card `scale(1.02)`+Shadow, Inner-Image `scale(1.05)` (card overflow-hidden), Link-Underline L→R 200ms.

## 14. AI-Readability + SEO (Detail → SEO-Foundation KAR-604)
Voll-`JSON-LD` Restaurant/LocalBusiness inkl. `MenuItem` (Top-Gerichte), `amenityFeature` (Halal/vegetarisch/Parken), `aggregateRating`, OpeningHours, geo. Korrektes Schema verbessert die Verständlichkeit für AI-Suchsysteme deutlich (interne Hypothese/Benchmark, *nicht* als absolute Marketing-Zahl behandeln). Semantisches HTML (1× h1, saubere Hierarchie, `<article>`/`<section>`), SSG-HTML ohne JS-Wall → AI-Crawler lesen alles.

## 15. Accessibility — WCAG 2.2 AA, konkret (Constitution VIII, Kais-Ergänzung)
Nicht nur „WCAG" — explizit:
- **Große Touch-Targets** ≥44×44px (Kais), genug Abstand zwischen Tap-Zielen.
- **Mobile Readability:** Body ≥16px, Zeilenhöhe 1.6, keine 300-Weight für Fließtext, Low-Light-tauglich.
- **Kontrast auf warmen Hintergründen:** jedes Paar gegen `#FAF7F3`/`#F2EDE6` real geprüft (AA), Messing nie als Text auf hellem Grund unter 18px.
- **Screenreader für Reservierung:** Slot-Chips als echte Radio/Buttons mit Labels, Schritt-Ansagen (`aria-live`), Bestätigung announced.
- **Tastatur-Navigation:** kompletter Flow (Nav, Modal-Reservierung, Menu-Filter) per Tastatur, Focus-Trap im Modal, sichtbarer Focus-Ring (2.4.11), ESC schließt.
- **Form-Fehler verständlich:** Klartext-Meldung („Bitte Telefonnummer prüfen"), programmatisch mit Feld verknüpft (`aria-describedby`), nie nur Farbe.
- kein Captcha (3.3.8) → Honeypot+Turnstile; Alt-Texte localized DE/EN; `prefers-reduced-motion`.

## 16. Dark/Light-Entscheidung (Kais-Korrektur)
**Light-first ist DIE Brand**, nicht „Mode 1 von 2". Dark = optionaler späterer Layer, **kein Auto-`prefers-color-scheme`-Takeover**, opt-in-Toggle, erst wenn vollständig hochwertig (verliert sonst Wärme). v1 liefert die perfekte Light-Experience; Dark blockiert v1 nicht. Dark-Palette oben bleibt als spätere Referenz.

## 17. Trade-off-Matrix (Auszug — jede Entscheidung gegen die 7 Achsen)
| Entscheidung | UX | Trust | Perf | SEO | AI | Mobile | Brand |
|---|---|---|---|---|---|---|---|
| Sticky Bottom-CTA-Bar | ++ | + | ~ | + | + | ++ | + |
| Inline-Menu statt PDF | ++ | + | + | ++ | ++ | ++ | + |
| Light-primary + Dark-Layer | + | + | + | ~ | ~ | + | ++ |
| Variable Fonts (2) | + | + | ++ | + | ~ | + | ++ |
| Motion nur transform/opacity | + | + | ++ | ~ | ~ | ++ | + |
| Reservierung im Modal | ++ | + | + | ~ | ~ | + | + |
| Voll-JSON-LD | ~ | + | ~ | ++ | ++ | ~ | + |
| Echte Food-Fotografie | ++ | ++ | ~ | + | + | + | ++ |

## 19. Hero-Strategie (Kais-Ergänzung, explizit)
**NIE:** generische Food-Collagen, Slider, Auto-Carousel, überladene Hero-Bereiche.
**Regel:** *1 starkes Hero-Bild* (ein Held-Gericht oder ein Atmosphäre-Moment) + starke Cormorant-Typografie + klare CTA-Hierarchie (1 Primary „Tisch reservieren" + 1 Tertiary „Speisekarte") + emotionale Ruhe + „Premium-Spannung" (Negative-Space, ein Fokuspunkt, kein visuelles Geschrei). Hero lädt als priorisiertes LCP-Bild (preload, AVIF, korrekte Dimensionen → CLS 0).

## 20. Conversion-Psychologie (Kais-Ergänzung)
- **Warum Sticky-CTA funktioniert:** Reservierungs-/Bestell-Absicht entsteht beim Scrollen durch Speisekarte/Galerie — der CTA ist im Moment der Absicht da, ohne Suchen. Reduziert Time-to-Action.
- **Wann der CTA verschwindet:** während der Reservierungs-/Bestell-Flow offen ist (Modal), und im Footer-Bereich (dort eigener CTA) → keine Doppelung/kein Verdecken von Inhalt.
- **Bewusst entfernte Friction:** keine Account-Pflicht für Reservierung, Slot-Chips statt Dropdown, kein Captcha, Autofill, 60-Sek-Formular, Telefon als 1-Tap-Fallback.
- **Warum wenige Entscheidungen premium wirken:** jede zusätzliche Option erhöht kognitive Last → Reduktion signalisiert Kuratierung + Selbstbewusstsein (Apple/EMP-Prinzip).
- **Warum reduzierte UI Vertrauen erhöht:** weniger visuelles Rauschen = wahrgenommene Wertigkeit + Fokus auf Food/Reservierung; Überladung wirkt billig/unsicher.

## 21. Local-SEO-Dominanz (Kais-Ergänzung, Detail → KAR-606)
- **Gelnhausen-Content-Cluster:** Kernseite + Inhalte rund um „afghanisches/orientalisches Restaurant Gelnhausen", Halal, vegetarisch/vegan.
- **Umgebung/Städte:** regionale Relevanz für Main-Kinzig-Kreis (z.B. Hanau, Wächtersbach, Bad Orb, Langenselbold) — ehrliche, nützliche Inhalte, keine Doorway-Spam.
- **Catering-Landingpages regional** („Catering in X", später als Channel, KAR-602).
- **„Afghanisches Restaurant in X"** + Event-/Business-Dinner-/Feier-Seiten als echte Inhalte.
- Google-Business-Profile + NAP-Konsistenz + Reviews = primärer Local-Hebel (wichtiger als On-Page-Tricks).

## 22. Premium-Performance-Gates (HART, ab jetzt, Kais-Ergänzung)
CI-erzwungen (Merge-Gate), strenger als der Constitution-Floor:
- **Lighthouse Mobile ≥ 95** (Perf), SEO = 100, A11y ≥ 95.
- **CLS < 0.05** (verschärft von 0.1), **INP < 200ms**, **LCP < 2.0s** (Mobile 4G).
- **JS-Budget strikt:** First-Load-JS hart gedeckelt (Richtwert ≤ ~120KB gz route-initial), Third-Party minimal.
- **Font-Budget strikt:** 2 Variable-Fonts, subset, preload, swap.
- **Animation-Budget strikt:** nur transform/opacity, keine Animation > 400ms, kein Layout-Shift durch Motion.
- **Third-Party-Budget strikt:** GloriaFood/KADi/Umami lazy + consent-/perf-gated, kein Render-Blocking.

## 23. Future-AI-Layer (Kais-Ergänzung — Architektur offenhalten)
Die semantische Struktur (Schema, saubere Content-Modelle in Payload, klare API/BFF-Schicht) wird so gebaut, dass später **ohne Architektur-Umbau** möglich wird: AI-Concierge, Voice-Interfaces, AI-Search, Agentic-Booking, Smart-Recommendations. Konkret: strukturierte Menu-/Reservierungs-Daten als Single-Source, BFF als stabile Service-Schicht, JSON-LD + saubere Entitäten = maschinenlesbare Grundlage. Deckt sich mit Constitution X (Extensibility) + spec Optional-Roadmap.

## 24. Verwandt
- [[constitution]] (II Perf, VIII A11y, XI Mobile-First) · [[spec]] (FRs) · [[plan]] (Stack) · [[kadi-integration]] (Reservierungs-Flow) · Voll-Recherche im sub-agent-context report.