Design for AI

Organic / blob shapes: UI design prompt

Palette, type rules and a pasteable prompt for organic / blob shapes. Also called blob design, organic shapes UI, fluid shapes, amoeba shapes, morphing blobs, biomorphic web. 2018-2022 (Spotify, Google Material blobs, wellness brands).

Traits

  • irregular rounded shapes (SVG paths or border-radius with 8 values) as backgrounds, masks and image frames
  • soft, natural palettes or one vivid colour on cream
  • shapes overlap, sit behind text, and frame photos instead of rectangles
  • rounded sans typography, medium weights, comfortable sizes
  • blobs morph slowly between shapes (border-radius animation or SVG path morph)
  • no hard edges anywhere: pills, circles, blobs
  • friendly, human, wellness or food tone

Palette

#fffaf3 cream, #2a2a2a text, #ff8a65 coral, #ffd166 sun, #06d6a0 mint, #118ab2 ocean, #ef476f raspberry

Type

Poppins, Outfit, Quicksand or Nunito; headings 600-700 at 40-64px, body 400 at 17px; DM Serif Display for a contrasting heading if needed

Do

  • generate blobs with an 8-value border-radius (e.g. 30% 70% 70% 30% / 30% 30% 70% 70%) and animate between two or three values over 8-12s
  • use blobs as clip-path or mask on photos so images are organic too
  • keep blobs to 2-3 per viewport and put them behind content with low z-index

Don't

  • do not use rectangles for images or cards; if it has a corner, it is off-style
  • do not animate blobs faster than 6s; it looks like boiling
  • do not use blobs and glass together; pick one material

Known for it: Spotify campaigns 2018-2020, Google Material blobs, Oatly (partial), Glossier (partial), 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

Build the site with organic blob shapes. Background #fffaf3, text #2a2a2a, accents coral #ff8a65, mint #06d6a0, sun #ffd166, ocean #118ab2. Font Outfit: headings 700 at 60/40/26px, body 400 at 17px line-height 1.6. Hero: headline on the left, on the right a photo clipped by a blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animated between three border-radius values over 10s ease-in-out infinite; two flat blobs in #ffd166 and #06d6a0 behind it at 60% size, offset, z-index below content, drifting 15px over 12s. Section backgrounds are large blobs in accent colours bleeding off the edge instead of rectangular bands. Cards: white, border-radius 40px / 48px, no border, no shadow; icons sit in small blob badges. Buttons pills, #ff8a65 fill, white text, 52px tall. Images always blob-masked or circular; no rectangle corners anywhere. Motion: morph and drift only; hover scales buttons 1.04 over 200ms.
For design.md, .cursorrules or AGENTS.md
## Design direction
Build the site with organic blob shapes. Background #fffaf3, text #2a2a2a, accents coral #ff8a65, mint #06d6a0, sun #ffd166, ocean #118ab2. Font Outfit: headings 700 at 60/40/26px, body 400 at 17px line-height 1.6. Hero: headline on the left, on the right a photo clipped by a blob (border-radius 30% 70% 70% 30% / 30% 30% 70% 70%) animated between three border-radius values over 10s ease-in-out infinite; two flat blobs in #ffd166 and #06d6a0 behind it at 60% size, offset, z-index below content, drifting 15px over 12s. Section backgrounds are large blobs in accent colours bleeding off the edge instead of rectangular bands. Cards: white, border-radius 40px / 48px, no border, no shadow; icons sit in small blob badges. Buttons pills, #ff8a65 fill, white text, 52px tall. Images always blob-masked or circular; no rectangle corners anywhere. Motion: morph and drift only; hover scales buttons 1.04 over 200ms.

## 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 }

Keep hover and focus-visible states on every interactive element. Do not add a CSS framework.