Expressive & trend · 2018 – 2023
Organic Blob
Amoeba-shaped background blobs, biomorphic SVG illustrations, and smooth flowing forms that contrast with the hard rectangles of typical UI.
Live preview base style — press Wear
$2,100
Revenue, up 12% from last month.
| Customer | Plan | Status | MRR |
|---|---|---|---|
| Northwind | Studio | Active | $1,240 |
| Acme Labs | Team | Trial | $0 |
| Kaldi Coffee | Studio | Active | $860 |
Use this style 15 tokens
- --bg
oklch(97.5% 0.012 292) - --fg
oklch(22% 0.03 290) - --muted
oklch(52% 0.05 285) - --surface
oklch(100% 0 0) - --surface-2
oklch(94% 0.015 290) - --border
oklch(88% 0.025 288) - --accent
oklch(62% 0.2 295) - --accent-fg
oklch(100% 0 0) - --focus
oklch(64% 0.2 295)
| Token | Value |
|---|---|
| --font-body | 'Nunito', ui-rounded, system-ui, sans-serif |
| --font-display | 'Nunito', ui-rounded, system-ui, sans-serif |
| --radius | 20px |
| --radius-sm | 12px |
| --shadow | 0 4px 18px oklch(62% 0.18 295 / 0.12), 0 1px 3px oklch(0% 0 0 / 0.04) |
| --shadow-lg | 0 12px 44px oklch(62% 0.18 295 / 0.18) |
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&display=swap');
:root {
--bg: oklch(97.5% 0.012 292);
--fg: oklch(22% 0.03 290);
--muted: oklch(52% 0.05 285);
--surface: oklch(100% 0 0);
--surface-2: oklch(94% 0.015 290);
--border: oklch(88% 0.025 288);
--accent: oklch(62% 0.2 295);
--accent-fg: oklch(100% 0 0);
--focus: oklch(64% 0.2 295);
--font-body: 'Nunito', ui-rounded, system-ui, sans-serif;
--font-display: 'Nunito', ui-rounded, system-ui, sans-serif;
--radius: 20px;
--radius-sm: 12px;
--shadow: 0 4px 18px oklch(62% 0.18 295 / 0.12), 0 1px 3px oklch(0% 0 0 / 0.04);
--shadow-lg: 0 12px 44px oklch(62% 0.18 295 / 0.18);
}Where it came from
Origin: Figma blob illustration trend, Dribbble UI illustration culture
Organic blob shapes emerged on Dribbble and Figma community files in the late 2010s, as a reaction to the geometric rigidity of flat and material design. They were used as background containers, illustration blobs, and avatar frames. By 2020 they were everywhere: startup landing pages, health apps, and educational tools. Their popularity faded as they became over-associated with a generic "startup" look.
How to spot it
- Smooth biomorphic shapes with no straight edges
- Used as backgrounds, image containers, or decorative fills
- Pastel, soft, or vibrant fill colours
- Often paired with isometric or flat illustration
Trade-offs
| Strengths | Weaknesses |
|---|---|
| Breaks up the monotony of rectangular layouts | Overused — strongly associated with a generic era |
| Friendly and approachable | Hard to align with grid-based layout systems |
| Easy to generate with SVG path tools | Provides no functional information |
In the wild
- Numerous health and wellness app landing pages, 2019–2022
- Headspace illustration and marketing design
- Figma Community cover art
Use it when
Background decoration or illustration containers in health, education, or consumer apps.