Want this look?

Build me a complete, responsive business website in the CLAYMORPHISM style — the soft, squeezable look of playful app onboarding, Gen-Z fintech, and the puffy 3D renders that fill Dribbble: inflated rounded shapes, toy-like inset shadows, and a candy-bright palette that make every element feel safe, tactile, and poke-able. It is the visual opposite of a cold, flat dashboard — friendly before it is anything else. Combine this style seed with my brief below. If I don't give you the details, invent a plausible business that suits this soft, approachable look — a budgeting app, a habit tracker, a kids' learning product, a wellness service — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template — the same seed should produce visibly different sites for different businesses. A few dimensions are yours to choose: the exact CANDY PALETTE, the TYPE pairing, and the overall LAYOUT APPROACH. Pick one of each that fits my brand and COMMIT to it across the whole site — every option below is equally on-style, so don't second-guess the choice with your own taste. ── INVARIANTS (never break these — they define the style) ── • Inflated rounded forms. Every card, button, and container has big corner radii and a bulging, pumped-full-of-air feel — soft and squeezable, like a 3D-printed toy. Nothing is sharp-cornered. • Double inner shadow. Each shape carries two inset highlights — a light one and a dark one — inside its edges, giving it rounded hollow "clay" volume rather than a flat paper feel. This is the signature; never a flat single shadow. • Bold soft drop shadows. Large, soft, gently COLOURED drop shadows (tinted to match the shape, not plain grey/black) lift elements well off the page, exaggerating depth far beyond flat design. • Candy palette. Bright, saturated pastels — never washed-out grey. The colour is what fixes the low-contrast failure of the style's predecessor: keep it saturated enough to read clearly. • Motion is "inflate / bounce": shapes puff up and settle with spring physics — a gentle overshoot then settle, like squeezing and releasing clay. Never a hard snap, glitch, or flat linear slide. Honor prefers-reduced-motion (reduce to a soft fade), and keep ALL content visible without JavaScript — never leave a section stuck invisible. • CONTRAST (WCAG 2.2 AA, non-negotiable): pastels are light, so text needs care — every text/background pair is ≥4.5:1 for body, ≥3:1 for large/headline. On light pastel grounds and cards use a deep, near-black ink (a dark tint of the hue reads warmer than pure black); reserve white text only for the deeper, more saturated accent fills where it actually clears 4.5:1. Never light text on a pale pastel, never faint grey that dips under 4.5:1. Re-check every card on its own pastel. ── VARIABLES (choose one of each that fits my brand, then commit) ── • CANDY PALETTE — bring my own brand colours if I give them; otherwise choose. Keep the puffy double-shadow clay behaviour fixed, but the hues are mine: a soft light ground (a pale tint of a hue), plus two or three bright saturated pastels for shapes and accents, each with a matching tinted drop shadow. Express it as bright-but-soft — saturated enough to read, never washed-out or greyed. Example sets (not required): lavender-white ground + periwinkle & peach — or mint-white + coral & sky — or cream + lilac & butter-yellow. Keep them candy-bright. • TYPE — one rounded, friendly display face + a legible rounded body face, loaded via Google Fonts. The letterforms should feel as soft as the shapes. Display, pick one: Quicksand · Fredoka · Baloo 2 · Comfortaa. Body, pick one: Nunito · Quicksand · Rubik. • LAYOUT APPROACH — choose one structural feel and commit: a stack of big puffy clay cards down the page; a rounded bento grid of soft tiles; a hero blob with smaller clay chips floating around it; generously spaced single-column clay modules; or overlapping soft shapes on a pastel field. Also settle on your own hero composition, corner-radius scale, and shadow softness. ── MEDIA MODEL (soft 3D and clay shapes) ── Build most visuals from inflated clay shapes, soft blobs, puffy icons, and rounded illustration marks — the toy-like 3D render language the style borrows. Where the business needs a photo (a product, a team, a screen), place it inside a puffy rounded clay frame with the double inner shadow — a real placeholder <img>, never a fake coloured div standing in for a photo, never sharp-cornered. Generate marks and imagery appropriate to MY business, not a reuse of any demo. WHAT THIS SITE MUST ACHIEVE (business goal): Make it instantly clear who this business helps and what it offers, in a tone that lowers the visitor's guard and makes an intimidating subject (money, health, learning) feel safe and easy; reduce risk with real proof (reviews, results, credentials, guarantees — whatever is true); and drive one clear next step — a signup, a download, a booking. Let the business and its brief decide which sections serve that goal, include exactly those in a sensible order, and build each one fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal — whatever sections genuinely move a stranger toward acting, each with one clear job, in an order that builds understanding then trust then action. Include working navigation and a footer, both rendered in clay. • Don't be lazy with any section: each carries real content depth (never a title plus one thin line), proper internal hierarchy, and the full claymorphism treatment — every section made of puffy double-shadowed shapes, not just the hero. • Real, tailored copy for MY business — warm, friendly, plain-spoken, written to reassure and reduce doubt. Never lorem. • Fully responsive and accessible: semantic landmarks, alt text, and the CONTRAST invariant enforced on EVERY card and pastel panel. On mobile, stack the clay cards but keep the inflation, double inner shadow, and coloured drop shadows. • Apply the chosen palette, type, and layout approach to EVERY section, not just the hero.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing site into the CLAYMORPHISM look — the soft, squeezable aesthetic of playful app onboarding, Gen-Z fintech, and puffy 3D Dribbble renders: inflated rounded shapes, toy-like inset shadows, and a candy-bright palette that make everything feel safe, tactile, and poke-able. Keep ALL of my current content, copy, pages, and structure exactly as they are; change only the visual language so surfaces become soft, inflated clay. Do not invent new pages, remove sections, or rewrite my words. Keep MY brand hues — carry my existing brand colours into the candy palette rather than swapping in new ones. Push them into the claymorphism logic: a soft light ground (a pale tint of a brand hue), brand colours as saturated pastels on puffy shapes, each with a matching tinted drop shadow. Keep them bright enough to read — nudge any washed-out greys up toward candy saturation. Then make one TYPE choice and COMMIT — a rounded, friendly face that matches the soft shapes. ── INVARIANTS (never break these) ── • Inflate every card, button, and container: big corner radii, a bulging pumped-full-of-air feel. Remove sharp corners. • Give every shape the double inner shadow — a light and a dark inset highlight inside its edges — for hollow clay volume. Replace flat single shadows with this. • Add large, soft, gently COLOURED drop shadows (tinted to the shape, not plain grey) that lift elements off the page. • Keep the palette candy-bright and saturated enough to read — never washed-out grey. • Motion becomes "inflate / bounce": shapes puff up and settle with spring physics (gentle overshoot then settle). Remove hard snaps, glitches, and flat linear slides. Honor prefers-reduced-motion (soft fade) and never leave a section stuck invisible; keep content visible without JavaScript. • Never: sharp corners, flat single shadows, washed-out/grey palettes, snappy hard-edged motion. ── TYPE (pick one to suit my brand, then commit) ── One rounded friendly display (Quicksand · Fredoka · Baloo 2 · Comfortaa) + a legible rounded body (Nunito · Quicksand · Rubik), via Google Fonts. Wrap any existing image inside a puffy rounded clay frame with the double inner shadow (keep the image clear); replace flat panels and hard shadows with inflated clay shapes and soft coloured shadows. Keep it responsive and accessible — enforce WCAG 2.2 AA contrast on every card (≥4.5:1 body, ≥3:1 large): pastels are light, so use deep near-black ink on pale grounds and cards, reserve white text only for deeper saturated fills where it clears 4.5:1, never light-on-pastel. Restyle what already exists so every section carries the claymorphism system consistently — same content, new skin.

Paste alongside your existing site/code for an AI coding agent to apply

Design a single section in the CLAYMORPHISM style — the soft, squeezable look of playful app onboarding and Gen-Z fintech: inflated rounded shapes, toy-like double inset shadows, and a candy-bright palette that make everything feel safe and poke-able. A low-commitment preview of the style, built richly for whatever section I ask for. Tell me in your own words, alongside this prompt, which section you want and the job it has to do — a hero that lands who you are, a feature grid, a pricing panel, a testimonial row, a signup call-to-action, a project showcase. If I don't name one, build a soft, friendly hero for a plausible business you invent that suits this approachable look. Whatever the section, build it fully and richly — don't be lazy: real, tailored copy, proper hierarchy, and depth, not a title plus one thin line. ── INVARIANTS ── • Inflated rounded forms with big corner radii (nothing sharp). The double inner shadow — light and dark inset highlights — on every shape for hollow clay volume. Large, soft, gently COLOURED drop shadows lifting elements off the page. A candy-bright, saturated palette (never washed-out). Motion is a spring "inflate / bounce" — gentle overshoot then settle; no hard snap or glitch; content visible without JavaScript, honoring prefers-reduced-motion. • Never: sharp corners, flat single shadows, washed-out/grey palettes, snappy hard-edged motion. ── VARIABLES (pick one of each, commit) ── • CANDY PALETTE — bring my brand colours if I give them; otherwise choose a soft light ground plus two or three bright saturated pastels for shapes and accents, each with a matching tinted drop shadow. Bright-but-soft, saturated enough to read. Example sets (not required): lavender-white + periwinkle & peach — mint-white + coral & sky — cream + lilac & butter-yellow. • TYPE — one rounded friendly display (Quicksand · Fredoka · Baloo 2 · Comfortaa) + a legible rounded body (Nunito · Quicksand · Rubik), via Google Fonts. Build the section from inflated clay shapes, soft blobs, and puffy marks. If it genuinely needs an image, use a real placeholder <img> inside a puffy rounded clay frame with the double inner shadow — never a fake coloured div standing in for a photo, never sharp-cornered. Include a puffy clay primary button where the section's job calls for one. Make it responsive and accessible — WCAG 2.2 AA contrast (≥4.5:1 body, ≥3:1 large): deep near-black ink on pale pastel grounds and cards, white text only on deeper saturated fills where it clears 4.5:1, never light-on-pastel. Write real, tailored copy for the subject, not lorem.

Good for a focused first pass, or a chat-based assistant like ChatGPT/Claude