# Luxus / Mode-Serif

Auch bekannt als: Luxus-Webdesign, Mode-Editorial, High-End-Markenseite, Couture-Web, Quiet Luxury  
Ära: Print-Mode-Erbe; Web ab 2012 (Net-a-Porter, Celine, Aesop, The Row)  
Seite: https://designforai.dev/de/style/luxury-fashion-serif

## Merkmale

- kontrastreiche oder leichte Serif in großen Größen mit weitem Letter-Spacing in Versalien
- enormer Weißraum, winziger Fließtext, sehr wenige Wörter pro Screen
- randlose Fotografie und Video, oft gedämpft oder schwarzweiß
- fast kein UI: Haarlinien, Textlinks, keine Buttons, die wie Buttons aussehen
- Palette aus Schwarz, Elfenbein und einem gedämpften Ton (Kamel, Ochsenblut, Salbei)
- zentrierte Kompositionen für Kampagnen, strenge Raster für Produktlisten
- langsame, zurückhaltende Motion: 1s Fades, dezenter Parallax, Hover zeigt ein zweites Bild

Palette: #f6f4f0 Elfenbein, #0c0c0c Schwarz, #8b7355 Kamel, #5a1f22 Ochsenblut, #9a9a9a gedämpft, #e2dfd9 Linie

Schrift: Cormorant Garamond, Playfair Display, Bodoni Moda oder Italiana für Display (300-400 bei 48-120px, 0.1-0.25em Tracking in Versalien); Jost, Karla oder Helvetica-artig bei 12-14px für alles andere

## Do

- setze Display-Schrift leicht (300-400) und riesig; Gewicht kommt aus der Größe, nicht aus der Fette
- halte Fließ- und UI-Text bei 12-14px mit 0.05-0.1em Tracking in Versalien; das liest sich als Zurückhaltung
- gib der Fotografie den ganzen Viewport; Text sitzt in einer Ecke oder exakt mittig

## Don't

- nutze keine farbigen Buttons; Links sind unterstrichener Text oder Haarlinien-Boxen
- füge keine Schatten, Radien oder Icons außer Plus, Minus und Pfeil hinzu
- überfülle nicht; eine Botschaft pro Screen

Bekannt dafür: Celine, The Row, Aesop, Bottega Veneta, Net-a-Porter-Editorial

## CSS-Seed

```css
:root{--bg:#f6f4f0; --fg:#0c0c0c; --muted:#9a9a9a; --accent:#8b7355; --line:#e2dfd9; --radius:0; --tracking:0.18em; --font:'Karla',sans-serif; --font-display:'Cormorant Garamond',serif}
```

## Prompt

Baue die Seite im Luxus-Mode-Stil. Hintergrund #f6f4f0, Text #0c0c0c, gedämpft #9a9a9a, Haarlinien #e2dfd9, ein Akzent #8b7355 nur für ein Sale-Label. Schriften: Cormorant Garamond 300 für Display bei 104px Desktop / 52px mobil in Versalien mit 0.18em letter-spacing und line-height 1.0; Karla 400 bei 13px mit 0.08em Tracking in Versalien für Nav, Labels, Buttons und Bildunterschriften; Fließtext 14px Karla, line-height 1.7, max-width 480px. Hero: Foto in voller Viewport-Größe oder gedämpftes Video mit zentriertem Titel und einem einzelnen unterstrichenen Textlink darunter. Produktraster: 3 Spalten auf Desktop mit 40px Gutter, 4:5 Bilder, kein Radius, kein Rand; Hover blendet über 700ms zu einem zweiten Bild über. Buttons: 1px Haarlinien-Box in #0c0c0c, transparent, Versalien 12px, 48px hoch, Hover füllt über 400ms mit Schwarz und Elfenbein-Text. Abschnitte getrennt durch Haarlinien und 160px Abstand. Motion: 1s Fades beim Scrollen, 5 % Parallax im Hero, sonst nichts.