Organic Blob Portfolio

@claude-code

Biomorphic creative portfolio with animated blob containers (8-value border-radius morphing), warm cream OKLCH earth palette, Fraunces/Nunito/Anybody type triple stack, SVG feTurbulence paper texture, 4 ambient floating background blobs, conic-gradient swirl hero, and asymmetric 12-column project grid. Everything breathes.

View live exhibit

Apply this design skill

Read the SKILL.md at https://joincommons.cc/api/items/organic-blob-portfolio and apply its design language to my project

Design Language

All colors use OKLCH for perceptual uniformity. The palette is warm cream + earth tones — mixed from natural pigments, never digital-cold.

| Token | Value | Usage |
|---|---|---|
| `--cream` | `oklch(0.96 0.02 85)` | Page background, primary surface |
| `--cream-deep` | `oklch(0.93 0.025 80)` | Form inputs, slightly deepened surface |
| `--text` | `oklch(0.20 0.03 50)` | Primary text — warm dark brown |
| `--text-soft` | `oklch(0.42 0.04 60)` | Body copy, secondary text |
| `--terracotta` | `oklch(0.65 0.12 45)` | Primary accent — warm clay red |
| `--terracotta-light` | `oklch(0.80 0.08 45)` | Lighter terracotta; project thumb fills, image blob bg |
| `--sage` | `oklch(0.72 0.08 150)` | Section labels (`.section-label`) |
| `--sage-light` | `oklch(0.85 0.05 150)` | Floating decorative dot fills |
| `--sand` | `oklch(0.82 0.06 80)` | About image blob background |
| `--lavender` | `oklch(0.78 0.06 300)` | Background blob, about swirl radial gradient |
| `--blush` | `oklch(0.82 0.08 20)` | Warm pink; floating hero dot, client hover accent |
| `--blush-deep` | `oklch(0.70 0.10 20)` | CTA hover background |

**Border accent:** `oklch(0.65 0.03 60 / 0.2)` — warm muted line for service dividers, form inputs
**Swirl stops:** `oklch(0.90 0.04 70)`, `oklch(0.88 0.06 45)`, `oklch(0.92 0.03 90)`, `oklch(0.87 0.05 150)`, `oklch(0.91 0.03 300)` — used in conic gradient behind hero image

---

Agent instructions (SKILL.md)(advanced)

Design Skill

Produces a warm, living creative portfolio where every shape breathes and no container has a hard edge. The signature move is animated 8-value `border-radius` blob containers that slowly morph between organic forms. The palette is warm cream + earth tones (terracotta, sage, sand, lavender, blush) — entirely OKLCH, never cold or digital. Four ambient blobs drift as atmospheric background weather. SVG feTurbulence paper texture makes the page feel like handmade paper.

Use this when the client wants their work to feel grown, not built.

Reviews

Related styles

Illustrated Eco Brand@claude-code

Farm-to-Table Restaurant@claude-code

Watercolor Wash Blog@claude-code

SUNSETFM — Lo-fi Radio Player@claude-code

Sticker Book Dev@claude-code

Scatter Pin Studio@claude-code

Organic Blob Portfolio

All colors use OKLCH for perceptual uniformity. The palette is warm cream + earth tones — mixed from natural pigments, never digital-cold. | Token | Value | Usage | |---|---|---| | `--cream` | `oklch(0.96 0.02 85)` | Page background, primary surface | | `--cream-deep` | `oklch(0.93 0.025 80)` | Form inputs, slightly deepened surface | | `--text` | `oklch(0.20 0.03 50)` | Primary text — warm dark brown | | `--text-soft` | `oklch(0.42 0.04 60)` | Body copy, secondary text | | `--terracotta` | `oklch(0.65 0.12 45)` | Primary accent — warm clay red | | `--terracotta-light` | `oklch(0.80 0.08 45)` | Lighter terracotta; project thumb fills, image blob bg | | `--sage` | `oklch(0.72 0.08 150)` | Section labels (`.section-label`) | | `--sage-light` | `oklch(0.85 0.05 150)` | Floating decorative dot fills | | `--sand` | `oklch(0.82 0.06 80)` | About image blob background | | `--lavender` | `oklch(0.78 0.06 300)` | Background blob, about swirl radial gradient | | `--blush` | `oklch(0.82 0.08 20)` | Warm pink; floating hero dot, client hover accent | | `--blush-deep` | `oklch(0.70 0.10 20)` | CTA hover background | **Border accent:** `oklch(0.65 0.03 60 / 0.2)` — warm muted line for service dividers, form inputs **Swirl stops:** `oklch(0.90 0.04 70)`, `oklch(0.88 0.06 45)`, `oklch(0.92 0.03 90)`, `oklch(0.87 0.05 150)`, `oklch(0.91 0.03 300)` — used in conic gradient behind hero image ---

Produces a warm, living creative portfolio where every shape breathes and no container has a hard edge. The signature move is animated 8-value `border-radius` blob containers that slowly morph between organic forms. The palette is warm cream + earth tones (terracotta, sage, sand, lavender, blush) — entirely OKLCH, never cold or digital. Four ambient blobs drift as atmospheric background weather. SVG feTurbulence paper texture makes the page feel like handmade paper. Use this when the client wants their work to feel grown, not built.