Design for AI

Stil Art Deco: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für art deco. Auch bekannt als Art-Deco-Web, Gatsby-Stil, 1920er-Luxus, geometrischer Luxus, Deco-Gold. 1920er-1930er; Web-Revival für Hotellerie, Spirituosen, Events und die Gatsby-Film-Welle 2013.

Merkmale

  • Symmetrie, Sonnenstrahlen, Fächer, Chevrons, gestufte Formen (Zikkurate)
  • goldene oder messingfarbene Metalliclinien auf tiefem Schwarz, Navy oder Smaragd
  • hohe, schmale geometrische Versalien mit extremem Letter-Spacing
  • ornamentale Rahmen und Eckklammern um Inhalte
  • dünne Doppellinien-Ränder, strahlenförmige Linienmuster
  • luxuriöse, formelle, zentrierte Kompositionen
  • zurückhaltende Motion: langsame Fades, ein Schimmer auf Gold

Palette

#0d0d0d Schwarz, #c9a227 Gold, #f3e9d2 Champagner-Text, #14343b tiefes Petrol, #6e1423 Burgunder

Schrift

Poiret One, Limelight, Josefin Sans (300, Versalien, 0.2-0.3em Tracking) für Display; Cormorant Garamond oder Cinzel für Überschriften; Josefin Sans oder Lato für Fließtext bei 16px

Do

  • baue ein Sonnenstrahlen- oder Fächermuster in SVG und nutze es als Ornament über Abschnittsüberschriften
  • nutze doppelte 1px Goldlinien mit 4px Abstand für Rahmen und Trenner
  • zentriere alles; Deco ist von Natur aus symmetrisch

Don't

  • nutze kein grelles Gold (#ffd700); nutze gedämpftes Messing #c9a227, um einen Casino-Look zu vermeiden
  • füge keine runden Ecken hinzu; nur Stufen und Spitzen
  • nutze nicht mehr als ein Metall; Gold oder Silber, nicht beides

Bekannt dafür: Chrysler Building und Empire State Building, Der große Gatsby (2013), Ritz-Hotels, Kampagnen von Hendrick's und Bombay Sapphire

CSS-Seed
:root {
  --bg: #0d0d0d;
   --fg: #f3e9d2;
   --accent: #c9a227;
   --accent2: #14343b;
   --radius: 0;
   --frame: 1px solid #c9a227;
   --font: 'Josefin Sans',sans-serif;
   --font-display: 'Poiret One',sans-serif
}
Prompt

Baue die Seite im Art-Deco-Stil. Hintergrund #0d0d0d, Text #f3e9d2, Gold #c9a227, Sekundärfläche #14343b. Alles zentriert und symmetrisch. Schriften: Poiret One für den Hero-Titel bei 72px Versalien mit 0.25em letter-spacing; Cinzel 600 für Abschnittsüberschriften bei 32px Versalien 0.15em; Josefin Sans 300 bei 16px für Fließtext, line-height 1.7. Rahmen: doppelte Goldlinien (1px #c9a227, 4px Abstand, 1px #c9a227) um den Hero und um Karten, mit kleinen goldenen Eckklammern. Abschnittstrenner: ein Inline-SVG-Sonnenstrahl aus strahlenförmigen Goldlinien, zentriert über jeder Überschrift. Buttons: transparent mit 1px Goldrand und goldenem Versalientext, Hover füllt über 300ms mit Gold und #0d0d0d Text. Nutze ein Chevron- oder gestuftes Zikkurat-SVG-Muster als dezentes Hintergrundband (opacity 0.08). Kein border-radius, keine Schatten, kein grelles Gold. Motion: ein langsamer 1.2s Fade beim Laden und ein 3s Schimmer (Verlaufsdurchlauf) über Goldlinien.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Art-Deco-Stil. Hintergrund #0d0d0d, Text #f3e9d2, Gold #c9a227, Sekundärfläche #14343b. Alles zentriert und symmetrisch. Schriften: Poiret One für den Hero-Titel bei 72px Versalien mit 0.25em letter-spacing; Cinzel 600 für Abschnittsüberschriften bei 32px Versalien 0.15em; Josefin Sans 300 bei 16px für Fließtext, line-height 1.7. Rahmen: doppelte Goldlinien (1px #c9a227, 4px Abstand, 1px #c9a227) um den Hero und um Karten, mit kleinen goldenen Eckklammern. Abschnittstrenner: ein Inline-SVG-Sonnenstrahl aus strahlenförmigen Goldlinien, zentriert über jeder Überschrift. Buttons: transparent mit 1px Goldrand und goldenem Versalientext, Hover füllt über 300ms mit Gold und #0d0d0d Text. Nutze ein Chevron- oder gestuftes Zikkurat-SVG-Muster als dezentes Hintergrundband (opacity 0.08). Kein border-radius, keine Schatten, kein grelles Gold. Motion: ein langsamer 1.2s Fade beim Laden und ein 3s Schimmer (Verlaufsdurchlauf) über Goldlinien.

## Tokens
:root { --bg:#0d0d0d; --fg:#f3e9d2; --accent:#c9a227; --accent2:#14343b; --radius:0; --frame:1px solid #c9a227; --font:'Josefin Sans',sans-serif; --font-display:'Poiret One',sans-serif }

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