Design for AI

Stil Corporate Memphis: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für corporate memphis. Auch bekannt als Alegria-Stil, Big-Tech-Illustration, flache Menschen-Illustration, Facebook-Illustrationsstil, Globohomo (abwertend). 2017-2022 (Facebook Alegria 2017, dann überall); inzwischen viel verspottet, aber immer noch verbreitet.

Merkmale

  • flache Vektormenschen mit verlängerten Gliedmaßen, winzigen Köpfen, ohne Gesichtsdetails, mit unpassenden Hautfarben (Blau, Lila)
  • helle, aber sichere Palette: Koralle, Petrol, Senf, Lavendel auf Weiß
  • runde, freundliche geometrische Sans; viele Pillen-Buttons und Karten mit 12-16px Radius
  • Hero-Illustration rechts, Headline links, Dreier-Feature-Reihe darunter
  • gedämpfte Verläufe oder keine; sehr sauber, kontrastarme Schatten
  • generischer Optimismus: Leute beim High-Five, Pflanzen, Laptops, abstrakte Diagramme
  • wirkt sofort wie "Startup-Landingpage-Template"

Palette

#ffffff Seite, #1a1a2e Text, #ff6b6b Koralle, #4ecdc4 Petrol, #ffd166 Senf, #a78bfa Lavendel, #f7f7fb Fläche

Schrift

Poppins, DM Sans, Nunito oder Manrope; Überschriften 700 bei 40-56px, Fließtext 400 bei 16-18px

Do

  • wenn du ihn nutzen musst, lass Illustrationen mit konsistenter Strichstärke und einer Lichtquelle zeichnen
  • beschränke dich auf eine Hero-Illustration; Icons sollten einfache Linien-Icons sein, nicht noch mehr kleine Menschen
  • kombiniere ihn mit starker, konkreter Copy, damit die Seite etwas hat, was die Illustration nicht hat

Don't

  • nutze ihn 2026 nicht, außer die Marke besitzt ihn schon; er wirkt wie ein Stock-Template und signalisiert nichts
  • nutze keine lilahäutigen Figuren, um Diversität vorzutäuschen
  • lass die Illustration nicht die Botschaft tragen; das tut sie nie

Bekannt dafür: Facebook (Alegria, 2017-2020), Hims, Lyft, Google-Doodle-nahes Marketing, Stripe (2018 teilweise)

CSS-Seed
:root {
  --bg: #ffffff;
   --surface: #f7f7fb;
   --fg: #1a1a2e;
   --accent: #ff6b6b;
   --accent2: #4ecdc4;
   --accent3: #ffd166;
   --radius: 16px;
   --shadow: 0 8px 24px rgba(26,26,46,0.08);
   --font: 'Poppins',sans-serif
}
Prompt

Baue die Seite im Corporate-Memphis-Illustrationsstil (Alegria), bewusst und konsistent. Hintergrund #ffffff, Flächen #f7f7fb, Text #1a1a2e, Akzente Koralle #ff6b6b, Petrol #4ecdc4, Senf #ffd166, Lavendel #a78bfa. Schrift Poppins: Überschriften 700 bei 52/36/24px, Fließtext 400 bei 18px line-height 1.6. Hero: zweispaltig, Headline und Pillen-Button (#ff6b6b, weißer Text, Radius 999px, 48px hoch) links, rechts eine flache Vektorillustration: zwei Figuren mit verlängerten Gliedmaßen und kleinen Köpfen, flache Füllungen, keine Outlines, eine abstrakte Pflanze und eine schwebende UI-Karte. Feature-Reihe: drei Karten, Radius 16px, 32px Padding, box-shadow 0 8px 24px rgba(26,26,46,0.08), jede mit einem 48px runden Icon-Badge in einer Akzenttönung (Akzent bei 15 % Alpha). Testimonials mit runden Avataren. Geschwungene Abschnittstrenner (SVG-Welle) zwischen weißen und #f7f7fb Bändern. Motion: Karten heben sich bei Hover 4px, 200ms; die Hero-Illustration schwebt 8px über 4s.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite im Corporate-Memphis-Illustrationsstil (Alegria), bewusst und konsistent. Hintergrund #ffffff, Flächen #f7f7fb, Text #1a1a2e, Akzente Koralle #ff6b6b, Petrol #4ecdc4, Senf #ffd166, Lavendel #a78bfa. Schrift Poppins: Überschriften 700 bei 52/36/24px, Fließtext 400 bei 18px line-height 1.6. Hero: zweispaltig, Headline und Pillen-Button (#ff6b6b, weißer Text, Radius 999px, 48px hoch) links, rechts eine flache Vektorillustration: zwei Figuren mit verlängerten Gliedmaßen und kleinen Köpfen, flache Füllungen, keine Outlines, eine abstrakte Pflanze und eine schwebende UI-Karte. Feature-Reihe: drei Karten, Radius 16px, 32px Padding, box-shadow 0 8px 24px rgba(26,26,46,0.08), jede mit einem 48px runden Icon-Badge in einer Akzenttönung (Akzent bei 15 % Alpha). Testimonials mit runden Avataren. Geschwungene Abschnittstrenner (SVG-Welle) zwischen weißen und #f7f7fb Bändern. Motion: Karten heben sich bei Hover 4px, 200ms; die Hero-Illustration schwebt 8px über 4s.

## Tokens
:root { --bg:#ffffff; --surface:#f7f7fb; --fg:#1a1a2e; --accent:#ff6b6b; --accent2:#4ecdc4; --accent3:#ffd166; --radius:16px; --shadow:0 8px 24px rgba(26,26,46,0.08); --font:'Poppins',sans-serif }

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