Soft 3D Illustration demo
Soft 3D Illustration

A tactile 3D illustration style featuring soft, rounded, clay-like shapes with matte surfaces and pastel gradients, popularized by tools like Spline and Blender on Dribbble.
Category: Art & Illustration
Era: 2020s Modern
Prompt: 15.8 KB · 2109 words
Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready Landing Page on the first attempt.

- **Landing Page Theme:** Soft 3D Illustration (claude-artisan/morphism — claymorphism)
- **Sections to add:** Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links

Every rule below is mandatory. Do not skip, reinterpret, or simplify any requirement. Where exact values are given, use them exactly.

---

## 0. THEME DEFINITION — SOFT 3D ILLUSTRATION

- **Name:** Soft 3D Illustration · **Type:** claude-artisan/morphism · **Era:** 2020–present
- **Keywords:** Soft 3D Illustration, 3D render UI, Spline 3D, claymation UI, rounded, soft-lit 3D rendered objects, matte pastel materials, ambient occlusion, floating isometric-ish scenes, paired with flat UI chrome, morphism.
- **Signature visual language:** claymorphism-adjacent soft extrusion — every raised surface (nav, card, button, badge, icon tile) reads as gently molded, floating clay: a matte pastel gradient fill plus a dual shadow pair (soft white highlight top-left, diffused lavender ambient shadow bottom-right). Reference vibe: Spline showcase sites; Stripe/Vercel 3D hero scenes. (Reference spec: `references/00-flagship-implementation-specs/soft-3d.md`)
- **Light/Dark note (translated from source):** the source style does not declare color modes — you must define and validate **both light and dark** before considering the page done.
- **Light palette:** bg `#eef1fb` · surface-strong `#f6f4ff` · text `#2d2a45` · text-muted `#6b6690` · primary `#6d5ae6` · accent `#ff9e7d` · mint `#7be0c4`. **Mandatory adjustment:** replace every pure `#ffffff` fill with `#fefefe` — including the clay gradient's top stop.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML; no `<style>` blocks in the markup.
- All design properties, layout rules, and states are targeted exclusively via class/ID selectors.
- HTML stays semantic and style-agnostic: re-theming the page must require CSS edits only, never markup changes.

**1.2 CSS Variables & Theme Tokens**
- Store every visual token in `:root` (light) and `.dark` (dark) — never hard-code hex values inside component rules.
- **Mandatory base tokens** (map the theme palette onto these exact names):
  - *Colors:* `--primary: #6d5ae6`; `--secondary: #ff9e7d`; `--bg-primary: #eef1fb`; `--bg-secondary: #fefefe`; `--text-primary: #2d2a45`; `--text-secondary: #6b6690`; `--text-success: #0e7a5f` (darkened mint, AA on light bg); `--text-error: #e5484d`; `--border-default: #dcd9f2`; `--border-error: #e5484d`; `--border-success: #7be0c4`.
  - *Radius:* `--radius-sm: 16px`; `--radius-md: 24px`; `--radius-lg: 32px`; plus `--radius-pill: 999px`.
  - *Shadows (clay dual-shadow pair):* `--shadow-sm: 6px 6px 14px rgba(151,143,199,.28), -4px -4px 12px rgba(255,255,255,.85)`; `--shadow-md: 10px 10px 24px rgba(151,143,199,.32), -6px -6px 18px rgba(255,255,255,.9)`; `--shadow-lg: 16px 16px 40px rgba(151,143,199,.36), -10px -10px 26px rgba(255,255,255,.95)`; `--shadow-inset-hi: inset 2px 2px 4px rgba(255,255,255,.9), inset -2px -2px 6px rgba(151,143,199,.25)`.
  - *Spacing & transitions:* `--spacing-gap: 24px`; `--transition-fast: 150ms`; `--transition-normal: 250ms`; `--ease-standard: cubic-bezier(0.2,0,0,1)`; `--ease-entrance: cubic-bezier(0,0,0,1)`; `--ease-exit: cubic-bezier(0.3,0,1,1)`.
  - *Stacking:* `--z-dropdown: 100`; `--z-modal: 200`; `--z-toast: 300`.
- **Extended theme tokens (also required):** `--surface-strong: #f6f4ff`; `--accent: #ff9e7d`; `--mint: #7be0c4`; `--clay-gradient: linear-gradient(160deg, #fefefe 0%, #f3f1ff 60%, #e9e5ff 100%)`; `--relief-highlight: rgba(255,255,255,.9)`; `--relief-shadow: rgba(151,143,199,.32)`; the full type scale `--text-xs: .75rem` through `--text-5xl: 4rem`; the space scale `--space-1: 4px` through `--space-24: 96px`; `--font-sans` (Inter stack) and `--font-display` (Quicksand stack).
- **Contrast pairing:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens — enforced in both themes, not only the default.

**1.3 Mandatory Dark Mode Support**
- Dark mode must always be defined. Provide dark token overrides both under `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>` (the class must win).
- **Suggested starting dark palette** (validate and adjust for WCAG AA before publishing): `--bg-primary: #211e33`; `--bg-secondary: #2b2847`; `--surface-strong: #322e52`; `--text-primary: #f1efff`; `--text-secondary: #a8a2cf`; `--primary: #9d8dff`; `--secondary/--accent: #ffb397`; `--mint: #8bead0`; `--text-success: #7be0c4`; `--text-error: #ff8a8f`; `--border-default: rgba(255,255,255,.12)`.
- **Clay treatment in dark mode:** `--clay-gradient` becomes a subtle dark molded gradient (e.g., `linear-gradient(160deg, #37335c 0%, #2c2949 60%, #25223d 100%)`); dual shadows deepen (bottom-right shadow toward black, top-left highlight becomes a faint light rim, e.g., `rgba(255,255,255,.07)`) so surfaces still read as softly lit clay.
- Theme switching must require zero HTML restructuring — token overrides only.
- **Persistence:** store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Render a visible toggle (sun/moon Material Symbols) with correct `aria-pressed` and dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structure with Flexbox.
- Every flex container **defaults to `align-items: center`** unless an explicitly justified exception exists (allowed exception: equal-height pricing/feature cards may use `align-items: stretch` — document it in a CSS comment).
- Mobile-first: all flex rows (nav links, features, steps, testimonials, pricing tiers, footer columns) collapse to single-column stacks on small viewports. No horizontal scrolling at any width down to 320px.

**1.5 Framework Default & CSS Approach**
- No framework was requested and the theme ships framework-free tokens: use clean custom CSS in `style.css` (no Tailwind, no build step). All patterns must be generic reusable classes (`.nav`, `.btn`, `.card`, `.input`, `.badge`, `.input-group`) driven by the tokens above.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Load Google Fonts via `<link>` with `preconnect`: **Quicksand** (500–700) for display/headings and **Inter** (400–700) for body. Bind them to `--font-display` and `--font-sans`.
- Icons: **Google Material Symbols — Rounded variant** (matches the soft theme), loaded via the official Google Fonts icon stylesheet. Raw inline SVGs, local icon files, and emoji-as-icons are forbidden.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button**
- Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: .5rem;` minimum touch target 44×44px; `border-radius: var(--radius-pill)`; `background: var(--clay-gradient)`; `box-shadow: var(--shadow-sm)`; font-weight 600.
- *Variants:* `.btn--primary` (`linear-gradient(160deg, var(--primary) 0%, #5a46d1 100%)`, white text), `.btn--ghost` (transparent, primary text), `.btn--danger` (visually distinct in both light and dark).
- *Hover:* `translateY(-2px)` + `--shadow-md`, `cursor: pointer`.
- *Focus-visible:* distinct ring via CSS variables (`outline: 2px solid var(--primary); outline-offset: 3px`).
- *Active/Pressed:* `transform: scale(0.97)` combined with the clay press (`box-shadow: var(--shadow-inset-hi)`) so the button reads as pressed into the clay.
- *Loading (`.is-loading`):* disables interaction and double-clicks, renders an animated CSS spinner or rotating Material Symbol without changing button dimensions; set `aria-busy="true"`.
- *Disabled:* `opacity: .5`, grayscale filter, `cursor: not-allowed`, no transforms.
- *Success/Error:* temporary feedback classes driven by `--text-success` / `--text-error` (used by the Final CTA form submit).

**2.2 Card**
- Base `.card`: clay gradient fill, `--radius-lg`, `--shadow-lg`, `padding: var(--space-6)`, flexible flexbox layout.
- *Hover (interactive cards):* elevation shift + `transform: translateY(-2px)`.
- *Focus-within:* card border/ring highlights when a child link/button receives focus.
- *Loading skeleton:* `.card--skeleton` with a CSS shimmer animation that preserves final dimensions (no layout jump).
- *Empty state:* `.card--empty` pattern with a Material Symbol and clear guidance text (define it in CSS even if unused on this page).

**2.3 Form & Input**
- Used by the Final CTA email capture. Structure: `.input-group` flex container wrapping a `<label>`, an `<input class="input">`, and a dedicated feedback message element with `aria-live="polite"`.
- `.input` base: full width, `--radius-md`, `background: var(--surface-strong)`, inset clay shadow (`--shadow-inset-hi`), no border.
- *States via classes:* empty, focused (inset shadow + `0 0 0 3px color-mix(in srgb, var(--primary) 30%, transparent)` ring), filled, valid (mint border + check Material Symbol), invalid (`--border-error`, `--text-error` message, error icon), disabled, read-only.

**2.4 Modal / Popup (conditional)**
- No modal is requested — do not introduce one. Exception clause: if an overlay ever becomes necessary, it must be a centered flex container (`align-items: center`) with backdrop, Material Symbol close button, keyboard focus trap, Esc and overlay-click closing, CSS-animated open/close, and `z-index: var(--z-modal)`.

**2.5 Badge & Clay Icon Tile**
- `.badge`: inline-flex, `align-items: center`, `gap: .4em`, `font-size: var(--text-xs)`, `padding: .3em .9em`, `--radius-pill`, `background: var(--mint)`, `color: #14332a`, `--shadow-sm`. Used for the hero eyebrow and "Most popular".
- `.icon-tile`: rounded square (`--radius-md`), clay gradient, `--shadow-sm`, centered Material Symbol in `--primary`. Used in Features and steps.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()`-based type scaling, responsive breakpoints, zero horizontal overflow.
- **Smooth animations:** every state change transitions with `var(--transition-normal)` / `var(--ease-standard)`. Signature motion: hero clay objects gently float (`translateY ±8px`, 6–8s ease-in-out infinite, staggered delays). All motion respects `prefers-reduced-motion: reduce` (disable floats, transforms, and reveal animations; keep instant state changes).
- **Accessibility (a11y):** AA contrast in both light and dark. Never communicate state by color alone. Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`), exactly one `h1` with a logical `h2`→`h3` outline, correct ARIA roles/labels on custom widgets (accordion buttons, nav toggle), logical DOM/focus order, full keyboard operability, a skip-to-content link, and `aria-live` regions for dynamic feedback (form errors/success, loading).
- **Mandatory visual feedback:** every click, hover, focus, and submission triggers a visible state change.
- **Destructive actions:** none are expected; if any appear, style with `.btn--danger`, distinct in both themes.

---

## 4. LANDING PAGE BUILD SPEC — SECTION BY SECTION

Invent one coherent fictional product concept that suits the Soft 3D theme (e.g., a collaborative 3D design/prototyping platform) and write all copy in English around it. No lorem ipsum.

**4.0 Page Shell**
- Sticky floating header using the `.nav` pill (clay gradient, `--shadow-md`, `align-items: center`, `gap: var(--space-4)`): wordmark logo with a Material Symbol, anchor links (Features, How It Works, Pricing, FAQ) with CSS smooth scrolling and `scroll-margin-top` offsets, theme toggle, primary CTA. On mobile: hamburger (Material Symbol `menu`) toggles a dropdown panel (`z-index: var(--z-dropdown)`) with `aria-expanded`/`aria-controls`.
- Skip link, `<main>` landmark, consistent section rhythm: each section = eyebrow badge + `h2` + lede, vertical padding `var(--space-24)` desktop / `var(--space-12)` mobile.

**4.1 Hero**
- Two-column flex (stacks on mobile). Left: mint `.badge` pill, `h1` in `--font-display` at fluid `--text-4xl`/`--text-5xl`, subheadline in `--text-secondary`, CTA pair (`.btn--primary` + `.btn--ghost`).
- Right: a **pure-CSS floating clay scene** — 3–5 abstract objects (orbs, blobs, rounded tiles, a miniature clay UI card) built from `border-radius` + `--clay-gradient` + dual shadows, arranged as a floating isometric-ish composition with staggered float animations and a soft radial glow (primary/accent at low alpha). No external images; any decorative image must have empty `alt` and never be the sole carrier of meaning.

**4.2 Features — 3 Cards**
- Row of three `.card` components (column on mobile). Each: `.icon-tile` with a meaningful Material Symbol, `h3` title, `--text-secondary` description. Hover lift + focus-within. Choose three distinct, relevant icons.

**4.3 How It Works — 3 Steps**
- Three steps, each with a numbered clay badge (pill/circle, clay gradient, bold number), `h3`, short description; a CSS dashed connector between steps on desktop (hidden on mobile). Steps stack vertically on small screens.

**4.4 Testimonials**
- Three testimonial `.card`s: quote text, 5-star rating via Material Symbol `star` (`aria-hidden` with a visually-hidden "Rated 5 out of 5" text), clay-circle avatar with initials (pure CSS, no photos), name + role in `--text-secondary`. Hover lift.

**4.5 Pricing — 3 Tiers**
- Three `.card` tiers in a row (column on mobile), equal height via the documented stretch exception. Middle tier featured: stronger shadow/scale, "Most popular" `.badge`. Each tier: name, price + "/month", feature list with `check_circle` Material Symbols (mint), CTA (`.btn--primary` on featured, `.btn` on the others).

**4.6 FAQ**
- 4–6 accessible accordion items. Each: `h3` wrapping a `<button>` with `aria-expanded` + `aria-controls`, rotating `expand_more` Material Symbol chevron, and a controlled answer region; CSS-animated open/close; fully keyboard operable with visible focus.

**4.7 Final CTA**
- Full-width clay panel (card treatment, `--radius-lg`, floating clay accents). Centered flex column: `h2`, supporting line, `.input-group` email capture (label + input + `.btn--primary` submit). On submit: prevent default, validate the email, run the button's loading state, then show success (mint check + message) or error (`--text-error` message) in the `aria-live` feedback container.

**4.8 Footer with Secondary Links**
- Multi-column flex (wraps to column on mobile): brand block (logo, one-liner, social icon buttons — Material Symbols, 44px targets, `aria-label`s), three secondary link columns (e.g., Product, Company, Resources), bottom bar with copyright and a back-to-top link. Link labels must be real, meaningful English copy; `href`s may use in-page anchors, or `"#"` only for targets that genuinely do not exist yet.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **File structure:** separate `index.html`, `style.css`, and `script.js`. The HTML references CSS via `<link>` and includes exactly one `<script src="script.js" defer>` — no inline script blocks, no inline styles.
- **Naming convention:** BEM everywhere (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.nav__link`, `.faq__item`, `.input-group`). Never mix conventions.
- **JS scope:** theme toggle with `localStorage` + `prefers-color-scheme` fallback, mobile nav, FAQ accordion, smooth anchor scrolling, email form validation with loading/success/error feedback, and a subtle IntersectionObserver reveal-on-scroll (disabled under `prefers-reduced-motion`). No frameworks, no build step.
- **Copy:** all user-facing copy in English, specific to the invented product — no lorem ipsum; placeholders only where content was genuinely left unspecified.
- **Definition of done:** all sections built, all component states styled, and both light and dark themes validated for contrast and layout before you consider the page complete. Deliver the full, working result on the first attempt.