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