---
title: Durrani Design-System (orientalisch, aus Logo)
type: project
tags: [durrani, design, brand, palette, oriental]
date: 2026-05-25
status: aktiv
related: [[launch-gates]], [[cms-import-media]], [[foto-shotlist]]
confidence: high
---

# Durrani Design-System — restrained (Pass 2)

> ⚠️ **KORREKTUR 2026-05-25:** Pass 1 (`63731d1`, lautes Rot/Grün/Gold + rotierender Deko-Stern) war **Kitsch** — von Kais abgelehnt, weil es gegen die verbindliche [[DESIGN]] verstieß (die ich fälschlich nicht gelesen hatte). **Pass 2 (`917d325`, live)** korrigiert strikt nach DESIGN.md „Premium Afghan, nicht Kitsch": warmes Off-White + Antik-Messing sparsam, Logo trägt allein die Flaggenfarben, EIN kleines funktionales Motiv (kein Spin), statische Logo-Marke als Fokuspunkt, KEINE Entrance-Animation (§6), Editorial-Hero mit Negative-Space (§19/§20). CLS 0.005, axe 0. Siehe Memory `durrani-design-follow-design-md` (Standing Order: Durrani-Design strikt nach DESIGN.md). Größter Hebel bleibt echtes Food-Foto-Shooting (§5).

## Logo-Assets
`public/brand/`: `durrani-mark.webp` (512² Stern-Marke), `durrani-lockup.webp` (1200×491 voll), `durrani-mark-96.webp` (Header). Quelle: „Duranni logo design 2 new.pdf" (Kais 2026-05-25) → pdftocairo → PIL-optimiert (webp). Source-PDF im Telegram-Inbox.

## Palette (Tokens in `app/styles/tokens.css`)
| Rolle | Hex | Nutzung |
|---|---|---|
| Background | `#f8f3ea` | warmes Creme |
| Surface / raised | `#f1e8d7` / `#e9dcc4` | Sand-Panels |
| Foreground | `#1c1813` | warm near-black Text |
| Accent (Bordeaux) | `#8c2231` / warm `#74182a` / deep `#5e1422` | Primär-CTA, Akzent-Text, Links |
| Emerald | `#0f6b3a` / deep `#0b5530` | Sekundär-CTA, Open-Status |
| Gold | `#b8923f` | **nur** Ornament/Border/Deko (NICHT Body-Text, ~2.8:1) |
| Border | `#ddceb3` / strong `#c2ab85` | — |
> WCAG: Bordeaux/Emerald passen als CTA-Fill (weißer Text) + als Text auf Creme. Gold nur dekorativ. axe 0 serious/critical verifiziert.

## Motiv & Komponenten
- `components/ornament/star-motif.tsx` — 8-zackiger Khatam-Stern als Inline-SVG (recolorierbar via `currentColor`/`text-*`, aria-hidden). Hero-Backdrop, Section-Ornament, Wasserzeichen.
- `components/site-header.tsx` — Logo-Marke + Wortmarke + Nav, sticky, Gold-Ornament-Border, backdrop-blur.
- `.ornament-rule` (globals.css) — feine Gold-Trennlinie.

## Motion (globals.css) — CSS-only, GPU, reduced-motion-safe
`animate-spin-slow` (90s), `animate-spin-rev` (120s), `animate-reveal` (+`reveal-1..4` Stagger), `animate-shimmer`. Kein framer-motion/JS-Lib → Budget (102 kB) + CSP unangetastet, CLS < 0.1.

## Typo
Display: Cormorant Garamond (`display:optional`, kein CLS). Body: Inter.

## Offen / nächste Tiefe (Kais steuert)
Speisekarte mit Ornament-Trennern/Food-Bildern · Hero-Foto/Video (nach Shooting) · mehr Micro-Interactions · ggf. ausgewählte 21st.dev-Komponenten (performant) · Kategorie-Pills mit Stern-Akzent · Footer-Ornament.