Take the softness with you.

Build me a complete, responsive business website in the NEUMORPHISM (soft UI) style — the 2019 "one material" language: every element looks pressed out of, or into, the same clay-like surface, sculpted only by a matched pair of shadows (dark bottom-right, light top-left). The whole page reads as a beautifully-made device faceplate — calm, touchable, and quiet. Contrast, color, and outlines recede; text and icons stay crisp and fully legible. Combine this style seed with my brief below. If I don't give you details, invent a plausible business the material suits — a smart-home product, an audio hardware brand, a wellness app, a fintech tool — and build a full, real demo for it, not a placeholder. This style is a FAMILY, not a single template. Choose one of each — MATERIAL FAMILY, ACCENT, TYPE FAMILY, LAYOUT ARCHETYPE, DEPTH SCALE — that fits my brand, and COMMIT to it across the whole site. ── INVARIANTS (never break these — they define the style) ── • One continuous surface: every card, button, and control shares the background's EXACT color — no borders, no outlines, no color-fill cards. Depth comes only from the dual shadow (e.g. `Npx Npx blur #darker, -Npx -Npx blur #lighter`); pressed/active states invert it to inset. • Flat matte ground: no gradients-as-decoration, no textures, no imagery behind content. Sections are distinguished by carved (inset) trays and spacing, not background color changes; one dark-family section flip is allowed with identical logic. • Large radii (12–50px) everywhere; nothing sharp-cornered, nothing hard-shadowed. • Press physics: hover = a soft lift (shadow distance grows slightly); press/active = shadow inversion + a tiny scale dip (150–300ms ease-out); entrances = quiet settle (0.5–0.7s, small rise). NOTHING else moves — no parallax, no marquees, no springy overshoot; the page is still until touched. Honor prefers-reduced-motion. • Calm layout: centered, evenly-spaced grids with generous 24–48px gaps (shadows need room); the only nesting is containment — an inset tray holding extruded children; elements never overlap or cover each other. • CRISP INK (the style's known failure — treat as a hard rule): text and icons at full contrast against the ground — WCAG 2.2 AA, ≥4.5:1 body, ≥3:1 large, per actual background. Gray-on-gray text is banned. Surfaces whisper; content doesn't. Interactive states must be distinguishable without color alone. ── VARIABLES (choose one of each, then commit) ── • MATERIAL FAMILY — light clay (warm gray #ECF0F3/#E0E0E0 class, near-black ink) · graphite (#23262B class, light ink) · tinted clay (MY brand hue heavily desaturated + lightened into a ground). Examples, not requirements. • ACCENT — one muted hue for active states and small indicators only (desaturated blue, sage green, soft orange, or my brand hue muted). Never large fills. • TYPE FAMILY — one rounded/geometric sans with heavy display weights: Manrope · Nunito · Poppins · Plus Jakarta Sans class. • LAYOUT ARCHETYPE — device-faceplate control clusters · card dashboard with carved trays · centered plate-per-section flow · an app-shell with a soft control rail. Pick what serves the purpose and commit. • DEPTH SCALE — soft-small (12–16px radii, tight shadows) to pillow (24–50px radii, deep 60px blurs). ── MEDIA MODEL (code-native) ── This style is carried by CODED surfaces — extruded cards, knobs, toggles, sliders, gauges, soft charts — not by photography. If my business genuinely needs an image (a product photo, an avatar), place it small, inside a soft-framed screen area, secondary to the sculpted surfaces; use a real placeholder <img> for any planned image. Working micro-controls (a toggle that toggles, a slider that slides) are strongly on-style. WHAT THIS SITE MUST ACHIEVE (business goal): Calm competence — the site should feel like a well-made device: who this business is, what it offers, why it can be trusted (real evidence — results, specs, testimonials, credentials), and one clear next step (buy, book, sign up, contact). Let the business and its brief decide the sections; include exactly those, in a sensible order, and build each fully. BUILD REQUIREMENTS — ship a complete, usable site, not a hero mock: • Real information architecture driven by MY business and goal, real navigation (a soft pill rail works) and a footer. • Don't be lazy with any section: real content depth (never a title plus one thin line), proper hierarchy, and the full soft treatment applied to EVERY section, not just the hero. • Real, tailored copy for MY business — calm, precise, warm; never lorem. • Fully responsive and accessible: semantic landmarks, alt text, visible focus, reduced-motion support, and the CRISP INK contrast rule enforced everywhere.

Best for AI website builders — Lovable, v0, Bolt

Restyle my existing website into the NEUMORPHISM (soft UI) style — keep ALL of my current content, structure, pages, and copy exactly as they are; change only how it looks, moves, and feels. Apply this style system to the code/site I provide alongside this prompt. THE STYLE SYSTEM to apply: • Ground: flatten every background to one matte material — light clay (warm gray #ECF0F3/#E0E0E0 class) or graphite (#23262B class), or my brand hue heavily desaturated and lightened into a ground. Pick one family and commit. Remove gradients-as-decoration, background textures, and imagery-behind-content. • Surfaces: re-cast every card, panel, button, and input as the SAME color as the ground, sculpted only by a matched dual shadow (dark bottom-right + light top-left, e.g. `8px 8px 20px` / `-8px -8px 20px`); active/pressed states invert to inset. Strip all borders, outlines, and color-fill cards. Radii 12–50px everywhere. • Grouping: turn my existing section containers into carved (inset) trays where they group content; children extrude inside them; nothing overlaps. • Accent: demote my palette to ONE muted accent hue (my brand color desaturated) used only for active states and small indicators — never large fills. • Type: map headings and body to one rounded/geometric sans family (Manrope, Nunito, Poppins, Plus Jakarta class), heavy weights for display. Keep my copy verbatim. • Imagery: keep my existing images but contain them in soft-framed rounded screen areas inside extruded plates — small and secondary. • Motion: replace existing animation with press physics only — soft hover lift, press = shadow inversion + tiny scale dip (150–300ms ease-out), quiet settle entrances; delete parallax, marquees, and springy effects. Honor prefers-reduced-motion. • CRISP INK (hard rule): after recoloring, verify every text/background pair — WCAG 2.2 AA, ≥4.5:1 body, ≥3:1 large. Gray-on-gray text is the style's classic failure; ink must go near-black (or near-white on graphite). RULES: • Do not add, remove, merge, or reorder sections or pages; do not rewrite copy. • Apply the treatment to every page and section consistently, including nav (a soft pill rail) and footer (an inset tray). • Keep the site fully responsive and accessible — semantic landmarks, visible focus, alt text preserved; interactive states distinguishable without color alone.

Paste alongside your existing site/code

Build ONE complete section of a website in the NEUMORPHISM (soft UI) style. I'll name the section and its job below — if I don't, build a hero for a plausible soft-material business (a smart-home product, an audio brand, a wellness app) as a full working demo. THE STYLE, in brief: one continuous soft surface — every element shares the background's exact color (light clay #ECF0F3 class, graphite #23262B class, or my brand hue desaturated into a ground; pick one and commit) and is sculpted ONLY by a matched dual shadow (dark bottom-right + light top-left); pressed/active states invert it to inset. No borders, no outlines, no color-fill cards, no gradients or textures; radii 12–50px; one muted accent for active states only; a rounded/geometric sans (Manrope/Nunito/Poppins class) with heavy display weights. Motion is press physics only: soft hover lift, press = shadow inversion + tiny scale dip (150–300ms ease-out), one quiet settle entrance — still until touched. Include at least one WORKING micro-control (a toggle that toggles, a slider that slides, a knob that turns) — touchability is the point. Honor prefers-reduced-motion. REQUIREMENTS: • The section must be complete and shippable on its own: real tailored copy for my subject (never lorem), real hierarchy, responsive mobile to desktop. • If the section wants an image, contain it small inside a soft-framed rounded screen area on an extruded plate (placeholder <img> if the file doesn't exist yet); the sculpted surfaces carry the section. • CRISP INK is non-negotiable: every text/background pair meets WCAG 2.2 AA — ≥4.5:1 body, ≥3:1 large. Gray-on-gray text is banned; surfaces whisper, content doesn't. My section and its job:

Good for a focused first pass / chat assistant