Design for AI

Stil Luxus / Mode-Serif: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für luxus / mode-serif. Auch bekannt als Luxus-Webdesign, Mode-Editorial, High-End-Markenseite, Couture-Web, Quiet Luxury. Print-Mode-Erbe; Web ab 2012 (Net-a-Porter, Celine, Aesop, The Row).

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
: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.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
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.

## Tokens
: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 }

Hover- und focus-visible-Zustände auf jedem interaktiven Element beibehalten. Kein CSS-Framework hinzufügen.