Design for AI

Stil Retro-Futurismus: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für retro-futurismus. Auch bekannt als Retrofuturismus, Atomic-Age-Design, Space-Age-UI, Zukunft der 1950er, Jetsons-Stil, Mid-Century-Futurismus. 1950er-1960er (Atomzeitalter, Wettlauf ins All); Web-Nutzung ab 2018 (Marken, die Optimismus mit Nostalgie wollen).

Merkmale

  • Bumerang- und Starburst-Formen, Orbitringe, Atome, Raketen, Strahlenpistolen
  • Mid-Century-Palette: Türkis, Mandarine, Senf, Kirschrot auf Creme oder Anthrazit
  • abgerundete Rechtecke mit Chrom- oder Zweiton-Behandlung; TV-Bildschirm-Kurven
  • Script-Display-Schriften (Googie-Beschilderung) gemischt mit breiter geometrischer Sans in Versalien
  • Halbtonpunkte, versetzter Druck, gealterte Papiertexturen
  • Illustration im Stil der 1950er-Werbung: selbstbewusst, lächelnd, optimistisch
  • Motion: kreisende Elemente, blinkende Glühbirnenschilder, sanfte Rotation

Palette

#f4e9d8 Creme, #2b2b2b Anthrazit, #3fb8af Türkis, #f37021 Mandarine, #e4b429 Senf, #c8102e Kirsche

Schrift

Monoton oder Pacifico für eine Script-Headline, Righteous oder Bungee für Display-Versalien, Josefin Sans oder Futura-Ersatz Jost für Fließtext bei 16-17px; Display 48-96px

Do

  • baue ein Starburst-SVG (12-16 dünne Zacken) und ein Atom-Orbit-SVG und nutze sie als Abschnittsmarker
  • nutze TV-Bildschirm-Formen: border-radius 24px 24px 24px 24px / 40px für Karten, leicht gewölbt
  • kombiniere eine Script-Schrift mit einer breiten Versalien-Schrift; das Paar ist der Stil

Don't

  • nutze kein Neon; das ist Cyberpunk. Retro-Futurismus ist Tageslicht und Druck
  • nutze Chromverläufe nicht überall; maximal ein oder zwei Chromakzente
  • nutze keine modernen flachen Icons; zeichne sie als 1950er-Piktogramme mit runden Enden

Bekannt dafür: Fallout (Vault-Tec), Disney Tomorrowland, Googie-Diner, Space-Needle-Bildwelt, Tiki-Bars

CSS-Seed
:root {
  --bg: #f4e9d8;
   --fg: #2b2b2b;
   --accent: #3fb8af;
   --accent2: #f37021;
   --accent3: #e4b429;
   --accent4: #c8102e;
   --radius: 24px 24px 24px 24px / 40px 40px 40px 40px;
   --font: 'Jost',sans-serif;
   --font-display: 'Righteous',sans-serif
}
Prompt

Baue die Seite im retro-futuristischen Atomic-Age-Stil. Hintergrund Creme #f4e9d8 mit gealterter Papiertextur (SVG-Rauschen bei opacity 0.08, multiply), Text #2b2b2b, Palette Türkis #3fb8af, Mandarine #f37021, Senf #e4b429, Kirsche #c8102e. Schriften: Pacifico für ein Script-Wort im Hero bei 72px in #c8102e, Righteous Versalien für Überschriften bei 56/36/24px mit 0.04em Tracking, Jost 400 bei 17px für Fließtext. Dekoriere mit Inline-SVGs: ein 16-zackiger Starburst in #e4b429 hinter dem Hero-Titel, ein Atom mit drei langsam rotierenden Orbitringen (20s linear) in der Ecke, Bumerang-Formen in Türkis als Abschnittstrenner. Karten nutzen eine TV-Bildschirm-Form (border-radius 24px / 40px), 3px #2b2b2b Outline und ein zweifarbiges Kopfband. Buttons: Pille, #f37021 Füllung, Cremetext in Righteous, 3px #2b2b2b Outline, harter versetzter Schatten 4px 4px 0 #2b2b2b. Halbtonpunktmuster (radial-gradient 3px) über Hero-Bildern. Motion: Orbit-Rotation, ein 1.2s Glühbirnen-Blinkeffekt auf einem Schild; sonst nichts.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im retro-futuristischen Atomic-Age-Stil. Hintergrund Creme #f4e9d8 mit gealterter Papiertextur (SVG-Rauschen bei opacity 0.08, multiply), Text #2b2b2b, Palette Türkis #3fb8af, Mandarine #f37021, Senf #e4b429, Kirsche #c8102e. Schriften: Pacifico für ein Script-Wort im Hero bei 72px in #c8102e, Righteous Versalien für Überschriften bei 56/36/24px mit 0.04em Tracking, Jost 400 bei 17px für Fließtext. Dekoriere mit Inline-SVGs: ein 16-zackiger Starburst in #e4b429 hinter dem Hero-Titel, ein Atom mit drei langsam rotierenden Orbitringen (20s linear) in der Ecke, Bumerang-Formen in Türkis als Abschnittstrenner. Karten nutzen eine TV-Bildschirm-Form (border-radius 24px / 40px), 3px #2b2b2b Outline und ein zweifarbiges Kopfband. Buttons: Pille, #f37021 Füllung, Cremetext in Righteous, 3px #2b2b2b Outline, harter versetzter Schatten 4px 4px 0 #2b2b2b. Halbtonpunktmuster (radial-gradient 3px) über Hero-Bildern. Motion: Orbit-Rotation, ein 1.2s Glühbirnen-Blinkeffekt auf einem Schild; sonst nichts.

## Tokens
:root { --bg:#f4e9d8; --fg:#2b2b2b; --accent:#3fb8af; --accent2:#f37021; --accent3:#e4b429; --accent4:#c8102e; --radius:24px 24px 24px 24px / 40px 40px 40px 40px; --font:'Jost',sans-serif; --font-display:'Righteous',sans-serif }

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