Design for AI

Stil Organisch / Blob-Formen: UI-Design-Prompt

Palette, Schriftregeln und ein einfügbarer Prompt für organisch / blob-formen. Auch bekannt als Blob-Design, organische Formen-UI, fließende Formen, Amöbenformen, morphende Blobs, biomorphes Web. 2018-2022 (Spotify, Google-Material-Blobs, Wellness-Marken).

Merkmale

  • unregelmäßig runde Formen (SVG-Pfade oder border-radius mit 8 Werten) als Hintergründe, Masken und Bildrahmen
  • weiche, natürliche Paletten oder eine kräftige Farbe auf Creme
  • Formen überlappen, sitzen hinter Text und rahmen Fotos statt Rechtecke
  • runde Sans-Typografie, mittlere Schnitte, angenehme Größen
  • Blobs morphen langsam zwischen Formen (border-radius-Animation oder SVG-Pfad-Morph)
  • nirgends harte Kanten: Pillen, Kreise, Blobs
  • freundlicher, menschlicher Wellness- oder Food-Ton

Palette

#fffaf3 Creme, #2a2a2a Text, #ff8a65 Koralle, #ffd166 Sonne, #06d6a0 Mint, #118ab2 Ozean, #ef476f Himbeere

Schrift

Poppins, Outfit, Quicksand oder Nunito; Überschriften 600-700 bei 40-64px, Fließtext 400 bei 17px; DM Serif Display für eine kontrastierende Überschrift, falls nötig

Do

  • erzeuge Blobs mit einem 8-Werte-border-radius (z. B. 30% 70% 70% 30% / 30% 30% 70% 70%) und animiere über 8-12s zwischen zwei oder drei Werten
  • nutze Blobs als clip-path oder mask auf Fotos, damit auch Bilder organisch sind
  • halte Blobs bei 2-3 pro Viewport und lege sie mit niedrigem z-index hinter den Inhalt

Don't

  • nutze keine Rechtecke für Bilder oder Karten; hat es eine Ecke, passt es nicht zum Stil
  • animiere Blobs nicht schneller als 6s; es sieht aus wie Kochen
  • nutze Blobs und Glas nicht zusammen; wähle ein Material

Bekannt dafür: Spotify-Kampagnen 2018-2020, Google-Material-Blobs, Oatly (teilweise), Glossier (teilweise), Headspace

CSS-Seed
:root {
  --bg: #fffaf3;
   --fg: #2a2a2a;
   --accent: #ff8a65;
   --accent2: #06d6a0;
   --accent3: #ffd166;
   --radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
   --shadow: none;
   --font: 'Outfit',sans-serif
}
Prompt

Baue die Seite mit organischen Blob-Formen. Hintergrund #fffaf3, Text #2a2a2a, Akzente Koralle #ff8a65, Mint #06d6a0, Sonne #ffd166, Ozean #118ab2. Schrift Outfit: Überschriften 700 bei 60/40/26px, Fließtext 400 bei 17px line-height 1.6. Hero: Headline links, rechts ein Foto, das von einem Blob beschnitten wird (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%), animiert zwischen drei border-radius-Werten über 10s ease-in-out infinite; zwei flache Blobs in #ffd166 und #06d6a0 dahinter bei 60 % Größe, versetzt, z-index unter dem Inhalt, 15px über 12s driftend. Abschnittshintergründe sind große Blobs in Akzentfarben, die über den Rand laufen, statt rechteckiger Bänder. Karten: weiß, border-radius 40px / 48px, kein Rand, kein Schatten; Icons sitzen in kleinen Blob-Badges. Buttons Pillen, #ff8a65 Füllung, weißer Text, 52px hoch. Bilder immer blob-maskiert oder rund; nirgends Rechteckecken. Motion: nur Morph und Drift; Hover skaliert Buttons über 200ms auf 1.04.
Für design.md, .cursorrules oder AGENTS.md
## Designrichtung
Baue die Seite mit organischen Blob-Formen. Hintergrund #fffaf3, Text #2a2a2a, Akzente Koralle #ff8a65, Mint #06d6a0, Sonne #ffd166, Ozean #118ab2. Schrift Outfit: Überschriften 700 bei 60/40/26px, Fließtext 400 bei 17px line-height 1.6. Hero: Headline links, rechts ein Foto, das von einem Blob beschnitten wird (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%), animiert zwischen drei border-radius-Werten über 10s ease-in-out infinite; zwei flache Blobs in #ffd166 und #06d6a0 dahinter bei 60 % Größe, versetzt, z-index unter dem Inhalt, 15px über 12s driftend. Abschnittshintergründe sind große Blobs in Akzentfarben, die über den Rand laufen, statt rechteckiger Bänder. Karten: weiß, border-radius 40px / 48px, kein Rand, kein Schatten; Icons sitzen in kleinen Blob-Badges. Buttons Pillen, #ff8a65 Füllung, weißer Text, 52px hoch. Bilder immer blob-maskiert oder rund; nirgends Rechteckecken. Motion: nur Morph und Drift; Hover skaliert Buttons über 200ms auf 1.04.

## Tokens
:root { --bg:#fffaf3; --fg:#2a2a2a; --accent:#ff8a65; --accent2:#06d6a0; --accent3:#ffd166; --radius:30% 70% 70% 30% / 30% 30% 70% 70%; --shadow:none; --font:'Outfit',sans-serif }

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