Style · 22

Organic

Organic = blob shapes, flowing soft gradients, nature palette, diffuse shadow; the UI breathes, it does not corner.

Blobs. Soft gradients. Diffuse shadow.

North Search

The UI that breathes.

The UI that breathes. Blobs, soft gradients, a diffuse shadow. No hard corner.

Soft blob

Feel

Breathe

Big radius, diffuse shadow. The card is a pebble.

Flow

Pastel blobs drift behind soft white surfaces.

Grow

Calm green and terracotta, never neon.

Showcase

Wellness brand Organic

Eco product Organic · Minimal

Calm app Organic · Claymorphism

Page Overall

Page

Formulas stay in English so you can paste them straight into your tool.

STYLE
- Organic: blob shapes, flowing soft gradients, diffuse shadows, a nature palette, no hard corner
- Background soft pastel blobs: radial-gradient(60% 60% at 18% 18%, #FFD9C2, transparent 70%), radial-gradient(55% 55% at 85% 82%, #C7F0D8, transparent 72%), linear-gradient(160deg, #FEF6F0, #EEF7F1)
- Accent terracotta #E08B5A for kickers; secondary green #4F9D69 for one link state; ink #3A2E28; surfaces #FFFFFF
- Radius 28px on cards, 999px on pills. Shadow is diffuse: 0 24px 50px rgba(120, 90, 70, 0.12). No bevel, no gloss
- Type: a warm humanist sans (Inter / Quicksand) for UI. No serif, no neon

LAYOUT
- Container max-width 1120px. Pastel blob wallpaper; every block is a soft white pebble, never a hard rectangle
- Top bar is a floating soft capsule: wordmark left, three links, search field, soft CTA — 12px off the top
- Generous radius everywhere; corners are round, sections breathe with whitespace

SECTIONS
1. Hero: a wide white blob, headline "The UI that breathes.", kicker CALM, one dek line, soft CTA Start free plus ghost See the kit
2. Three soft value blobs: Breathe, Flow, Grow — kicker, one line, Read more each
3. Feature band: two columns, left a soft cover blob, right a short list of four claims
4. Pricing strip: three soft columns, the middle one a peach tint with a diffuse shadow
5. Closing CTA band: a wide white blob with one soft CTA
6. Three-column soft footer: Product / Company / Colophon

INTERACTION
- Hover lifts each blob 4px and blooms its shadow wider and softer; pills press gently on :active
- Focus is a 2px solid #E08B5A outline, never a glow ring
- Everything should feel like it settles, not snaps — that is the calm read

MOTION
- Motion is slow and soft: 260ms ease for lifts and blooms, a gentle 8s drift on the pastel blobs
- Use ease, no steps, no hard stops. Blobs settle, they do not bounce
- Entrance is a 12px rise with the shadow fading in, staggered 70ms per card
- prefers-reduced-motion: no drift, no stagger, blobs appear instantly

TECHNICAL
- React, Tailwind CSS, a .blob surface utility (big radius + diffuse shadow). One homepage route.

DON'Ts
- Do not call this claymorphism: organic has no inflated inner light, just a thin soft shell and a big radius
- Do not call this brutalism: every corner is round, nothing is a rule
- No sharp corners, no gradient mesh, no neon, no hard shadow
- Do not output only a headline plus two empty cells. Do not make every surface a hard rectangle

Card

Formulas stay in English so you can paste them straight into your tool.

Build a single Organic card. Not a page, not a dashboard.

STYLE
- Organic: a soft white blob with very large radius and a diffuse, low shadow; no hard corner anywhere
- Fill #FFFFFF; radius 30px; shadow 0 24px 50px rgba(120, 90, 70, 0.12); border 1px solid rgba(255, 255, 255, 0.6)
- Kicker in terracotta #E08B5A; title in ink #3A2E28. The card reads as a pebble, not a tile

LAYOUT
- One card only: kicker, title, one-line summary, one primary button
- No navbar, no secondary tiles, no image

INTERACTION
- Hover lifts the card 4px and blooms the shadow wider and softer; never a hard snap

CONSTRAINTS
- This is NOT claymorphism: there is no inflated inner light, just a thin soft shell and a big radius
- This is NOT brutalism: every corner is round, nothing is a rule
- No sharp corners, no gradient mesh, no neon

TECHNICAL
- React, Tailwind CSS, a .blob surface utility (big radius + diffuse shadow). One component

Buttons

Formulas stay in English so you can paste them straight into your tool.

Build an Organic button row only: Continue (soft pill), Save (outline pill), Skip (ghost). Not a card, not a page.

STYLE
- Radius 999px. Continue: soft gradient linear-gradient(135deg, #FFB38A, #FF8F6B), white label, shadow 0 10px 24px rgba(255, 140, 107, 0.35)
- Save: white pill, ink label, 1px #F0DCCB border. Skip is text only in #3A2E28 at 70% alpha

LAYOUT
- One horizontal row, 14px gap. No card chrome, no helper text

INTERACTION
- Hover blooms the shadow and lifts 2px; active presses gently (scale 0.98)

CONSTRAINTS
- Every button is a soft pill; square or hard-cornered buttons break the language
- No gloss highlight, no neon, no sharp edges

TECHNICAL
- React, Tailwind CSS, restyle shadcn Button into soft pills

Navbar

Formulas stay in English so you can paste them straight into your tool.

Build an Organic site navbar only, as a floating soft capsule. Not tabs, not a page.

STYLE
- Bar fill #FFFFFF with radius 24px and a diffuse shadow 0 18px 40px rgba(120, 90, 70, 0.14); border 1px solid rgba(255, 255, 255, 0.6)
- Wordmark NORTH in #3A2E28 weight 700. Links Product and Pricing in #3A2E28 at 70% alpha
- CTA Start free: soft peach pill with diffuse shadow, white label

LAYOUT
- Single horizontal chrome: wordmark left, two links, CTA right. No panel below, no dropdown

INTERACTION
- Bar sits 12px off the top; hover blooms its shadow. Links gain a 1px underline in terracotta

CONSTRAINTS
- The bar must float as a soft capsule; a flat rectangular bar is the wrong style
- No hard corners, no neon, no gradient mesh

TECHNICAL
- React, Tailwind CSS, restyle shadcn navigation into a floating capsule

Tabs

Formulas stay in English so you can paste them straight into your tool.

Build an Organic Tabs component with three tabs: Overview (selected), Billing, Activity. Not a navbar, not a page.

STYLE
- Tabs are soft pills; selected tab is a peach gradient pill with white label weight 600 and a diffuse shadow
- Unselected tabs are text only, ink at 60% alpha, no fill
- Panel: white blob, 28px radius, diffuse shadow 0 24px 50px rgba(120, 90, 70, 0.12)

LAYOUT
- Horizontal pill tablist plus one panel below. No wordmark, no CTA

INTERACTION
- Switching tabs blooms the selected pill; selected locks softer. No bounce

CONSTRAINTS
- Panel and selected tab must both read as soft blobs; no sharp corners
- No square tabs, no neon, no hard shadow

TECHNICAL
- React, Tailwind CSS, restyle shadcn Tabs into soft pills

What is Organic?

Organic UI flows. Name a blob silhouette, a flowing pastel gradient, and a diffuse shadow, then let softness carry the calm. It is the anti-grid: curves over corners, nature over chrome.

Elements

Blob shapes
Flowing gradients
Diffuse shadow

Put this word in the prompt.

Typical colors

#E08B5A
#4F9D69
#3A2E28

Use on

Wellness brands
Eco products
Calm consumer apps

Prompt formula

[Component] + Organic + Blob shape + Soft gradient + Diffuse shadow

BUILD - Build a complete Organic marketing homepage. Not a card, not an isolated navbar, not a dashboard, not tabs. - Domain from Use on: wellness brands, eco products, calm consumer apps first; enterprise reuses only the softness, not the pastel. STYLE - Organic: blob shapes, flowing soft gradients, diffuse shadows, a nature palette, no hard corner - Background soft pastel blobs: radial-gradient(60% 60% at 18% 18%, #FFD9C2, transparent 70%), radial-gradient(55% 55% at 85% 82%, #C7F0D8, transparent 72%), linear-gradient(160deg, #FEF6F0, #EEF7F1) - Accent terracotta #E08B5A for kickers; secondary green #4F9D69 for one link state; ink #3A2E28; surfaces #FFFFFF - Radius 28px on cards, 999px on pills. Shadow is diffuse: 0 24px 50px rgba(120, 90, 70, 0.12). No bevel, no gloss - Type: a warm humanist sans (Inter / Quicksand) for UI. No serif, no neon LAYOUT - Container max-width 1120px. Pastel blob wallpaper; every block is a soft white pebble, never a hard rectangle - Top bar is a floating soft capsule: wordmark left, three links, search field, soft CTA — 12px off the top - Generous radius everywhere; corners are round, sections breathe with whitespace SECTIONS 1. Hero: a wide white blob, headline "The UI that breathes.", kicker CALM, one dek line, soft CTA Start free plus ghost See the kit 2. Three soft value blobs: Breathe, Flow, Grow — kicker, one line, Read more each 3. Feature band: two columns, left a soft cover blob, right a short list of four claims 4. Pricing strip: three soft columns, the middle one a peach tint with a diffuse shadow 5. Closing CTA band: a wide white blob with one soft CTA 6. Three-column soft footer: Product / Company / Colophon INTERACTION - Hover lifts each blob 4px and blooms its shadow wider and softer; pills press gently on :active - Focus is a 2px solid #E08B5A outline, never a glow ring - Everything should feel like it settles, not snaps — that is the calm read MOTION - Motion is slow and soft: 260ms ease for lifts and blooms, a gentle 8s drift on the pastel blobs - Use ease, no steps, no hard stops. Blobs settle, they do not bounce - Entrance is a 12px rise with the shadow fading in, staggered 70ms per card - prefers-reduced-motion: no drift, no stagger, blobs appear instantly TECHNICAL - React, Tailwind CSS, a .blob surface utility (big radius + diffuse shadow). One homepage route. DON'Ts - Do not call this claymorphism: organic has no inflated inner light, just a thin soft shell and a big radius - Do not call this brutalism: every corner is round, nothing is a rule - No sharp corners, no gradient mesh, no neon, no hard shadow - Do not output only a headline plus two empty cells. Do not make every surface a hard rectangle

Organic

The UI that breathes.

Breathe

Flow

Grow

Organic

What is Organic?

Elements

Typical colors

Use on

See also

Components

Animations

Styles

Themes

Prompts

Glossary

Anti-patterns