Design for AI

Stil Memphis: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für memphis. Auch bekannt als Memphis-Design, Memphis-Group-Stil, 80er-Postmoderne, Squiggle-Design. 1981-1988 (Memphis Group, Mailand); Web-Revival 2015-2020.

Merkmale

  • Konfetti aus geometrischen Formen: Schnörkel, Zickzack, Kreise, Dreiecke, Terrazzo-Punkte
  • sich beißende Pastell- und Primärfarben auf Weiß oder Schwarz: Pink, Petrol, Gelb, Lavendel
  • dicke schwarze Outlines und flache Füllungen, keine Schattierung
  • überall Muster: Polka Dots, Streifen, Raster, Kritzeltextur
  • verspielte Asymmetrie, Formen überlappen und kippen
  • klobige geometrische Sans (Futura-artig) in Versalien
  • Farbblöcke als Abschnittshintergründe

Palette

#ffffff Basis, #000000 Outlines, #ff6f91 Pink, #19a7ce Petrol, #ffd93d Gelb, #b39ddb Lavendel, #2ec4b6 Mint

Schrift

Futura ist kommerziell; frei: Jost, Outfit, Poppins oder League Spartan; Überschriften 700 Versalien bei 40-64px mit 0.05em Tracking, Fließtext 400 bei 16-17px

Do

  • erstelle ein Set aus 6-8 SVG-Formen (Schnörkel, Zickzack, Kreis, Halbkreis, Dreieck, Punkte) und verteile sie an festen Positionen
  • umrande Formen mit 2-3px Schwarz, damit sie als eine Illustration lesbar sind
  • nutze Muster als Abschnittsfüllungen bei 10-15 % Opacity, damit Text lesbar bleibt

Don't

  • nutze keine Verläufe oder Schatten; Memphis ist flach und umrandet
  • zentriere nicht alles symmetrisch; kippen und versetzen
  • mach es nicht geschmackvoll; der Stil ist absichtlich laut

Bekannt dafür: Möbel von Ettore Sottsass, Titelsequenz von Saved by the Bell, 80er-Nickelodeon-Branding, Mailchimp-Illustrationen 2018 (teilweise)

CSS-Seed
:root {
  --bg: #ffffff;
   --fg: #000000;
   --accent: #ff6f91;
   --accent2: #19a7ce;
   --accent3: #ffd93d;
   --accent4: #b39ddb;
   --radius: 0;
   --border: 3px solid #000;
   --font: 'Jost',sans-serif
}
Prompt

Baue die Seite im Memphis-Stil. Hintergrund #ffffff, Text und Outlines #000000, Füllungen #ff6f91, #19a7ce, #ffd93d, #b39ddb und #2ec4b6. Schrift Jost: Überschriften 700 Versalien bei 56/36/24px mit 0.05em Tracking, Fließtext 400 bei 17px. Verteile Inline-SVG-Formen hinter dem Hero an festen Positionen: ein pinker Schnörkel, ein schwarzer Zickzack, ein gelber Kreis, ein lavendelfarbenes Dreieck und ein Feld kleiner schwarzer Punkte; jede Form hat eine 3px schwarze Outline und eine leichte Drehung (-12deg bis 15deg). Karten und Buttons: flache Füllungen, border 3px solid #000, border-radius 0 oder Vollkreis für Badges, keine Schatten. Abschnittshintergründe wechseln zwischen Weiß, #ffd93d und einem schwarz-weißen Polka-Dot-Muster (radial-gradient, 12px, opacity 0.15). Die Nav ist eine schwarze Leiste mit weißen Versalien-Links. Hover: Füllung springt sofort auf die nächste Palettenfarbe. Motion beschränkt auf ein sanftes 6s Schweben auf zwei dekorativen Formen.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Memphis-Stil. Hintergrund #ffffff, Text und Outlines #000000, Füllungen #ff6f91, #19a7ce, #ffd93d, #b39ddb und #2ec4b6. Schrift Jost: Überschriften 700 Versalien bei 56/36/24px mit 0.05em Tracking, Fließtext 400 bei 17px. Verteile Inline-SVG-Formen hinter dem Hero an festen Positionen: ein pinker Schnörkel, ein schwarzer Zickzack, ein gelber Kreis, ein lavendelfarbenes Dreieck und ein Feld kleiner schwarzer Punkte; jede Form hat eine 3px schwarze Outline und eine leichte Drehung (-12deg bis 15deg). Karten und Buttons: flache Füllungen, border 3px solid #000, border-radius 0 oder Vollkreis für Badges, keine Schatten. Abschnittshintergründe wechseln zwischen Weiß, #ffd93d und einem schwarz-weißen Polka-Dot-Muster (radial-gradient, 12px, opacity 0.15). Die Nav ist eine schwarze Leiste mit weißen Versalien-Links. Hover: Füllung springt sofort auf die nächste Palettenfarbe. Motion beschränkt auf ein sanftes 6s Schweben auf zwei dekorativen Formen.

## Tokens
:root { --bg:#ffffff; --fg:#000000; --accent:#ff6f91; --accent2:#19a7ce; --accent3:#ffd93d; --accent4:#b39ddb; --radius:0; --border:3px solid #000; --font:'Jost',sans-serif }

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