Dough Time — Claymorphic Kitchen Companion demo
Dough Time — Claymorphic Kitchen Companion

A soft, puffy claymorphic style with rounded squishy shapes, pastel colors, and deep inner shadows that make UI elements look like molded clay kitchen toys.
Category: Glass & Soft UI
Era: 2020s Modern
Prompt: 15.2 KB · 2036 words
# BUILD PROMPT — "DOUGH TIME" Landing Page (Claymorphic Kitchen Companion)

**Your Role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-ready landing page described below in a single attempt. All user-facing copy must be written in **English**, fully thematic (baking/kitchen language), real — no lorem ipsum.

**Project Brief:**
- **Theme:** DOUGH TIME — a claymorphic kitchen timer companion. 2020s contemporary aesthetic: soft, inflated, "squishy dough" UI with pastel cream/mint/blush surfaces, pillowy shadows, and playful time-based micro-animations.
- **Sections (in order):** Sticky Header/Nav → Hero → Features (3 cards) → How It Works (3 steps) → Testimonials → Pricing (3 tiers) → FAQ → Final CTA → Footer with secondary links.
- **Palette:** Cream base `#fff9ee` / `#fdf3dc`, mint `#cfe3b4`, sage `#b7d496`, blush `#ffd9e0`, pink `#ffb9c8`.
- **Effects:** Claymorphism (soft neumorphic dual-shadows), gradients, glow, micro-animations, hover transforms.
- **CSS techniques:** Flexbox, keyframe animations, transitions, transforms, gradients, box shadows, subtle text shadows, large border radii, `aspect-ratio`.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** The `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** All design properties, layout rules, and states must be applied via class or ID selectors defined in `style.css`.
- **Semantic, Presentation-Agnostic HTML:** Use semantic HTML5 elements (`header`, `nav`, `main`, `section`, `footer`, `h1`–`h3` hierarchy). The markup must remain clean and agnostic of visual styling — re-theming must only require editing `style.css`.

### 1.2 CSS Variables & Theme Tokens
Store every visual token in `:root`, and re-map them under the dark theme. Suggested values (verify contrast before finalizing):

```css
:root {
  /* Surfaces & brand */
  --bg-primary: #fff9ee;      /* near-white cream — NEVER #ffffff; use #fefefe if a white is truly needed */
  --bg-secondary: #fdf3dc;    /* cream panel */
  --surface-mint: #cfe3b4;
  --surface-blush: #ffd9e0;
  --primary: #b7d496;
  --secondary: #ffb9c8;
  /* Text — dark warm tokens paired against light backgrounds */
  --text-primary: #3b3226;    /* suggested — must pass WCAG AA on --bg-primary */
  --text-secondary: #7a6b54;   /* suggested — must pass AA on --bg-secondary */
  --text-success: #3e6b2f;
  --text-error: #b3454e;
  /* Borders */
  --border-default: #e9dcc2;
  --border-error: #b3454e;
  --border-success: #3e6b2f;
  /* Shape, depth, motion */
  --radius-sm: 12px; --radius-md: 20px; --radius-lg: 32px; --radius-pill: 999px;
  --shadow-sm: 0 2px 6px rgba(120,100,70,.14);
  --shadow-md: 0 6px 18px rgba(120,100,70,.18);
  --shadow-clay-raised: 14px 14px 28px rgba(120,100,70,.22), -10px -10px 24px rgba(255,255,255,.9),
                        inset 3px 3px 8px rgba(255,255,255,.55), inset -4px -4px 10px rgba(120,100,70,.12);
  --shadow-clay-pressed: inset 6px 6px 14px rgba(120,100,70,.22), inset -6px -6px 14px rgba(255,255,255,.7);
  --glow-mint: 0 0 40px rgba(183,212,150,.55);
  --glow-pink: 0 0 40px rgba(255,185,200,.55);
  --text-shadow-soft: 0 2px 0 rgba(255,255,255,.6);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms; --transition-normal: 300ms;
  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1); /* springy, dough-like */
  --font-display: 'Baloo 2', sans-serif;
  --font-base: 'Nunito', sans-serif;
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;
}
```

- **Contrast Pairing (mandatory in every theme):** Light background tokens must pair with dark text tokens; dark background tokens must pair with light text tokens. Re-verify pairing after defining the dark palette.
- **Clay shadows and text shadows must be redefined (inverted tints) in dark mode.**

### 1.3 Mandatory Dark Mode Support
- **Tokens:** Define a complete dark palette (suggested anchors: `--bg-primary: #241f17`, `--bg-secondary: #2e2820`, `--text-primary: #fdf3dc`, `--text-secondary: #cbbfa4`, brighter `--primary: #a9cd86`, translucent cream borders — verify AA) under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`, so switching never requires HTML restructuring.
- **Toggle & Persistence:** Implement a visible sun/moon toggle (Material Symbols) in the header with correct `aria-pressed` and `aria-label`. Persist the user's choice in `localStorage` and restore it on revisit.
- **Exception (per user spec):** Light mode is the requested default presentation — on first visit (no saved preference), default to **Light** rather than `prefers-color-scheme`; the fully-defined Dark mode remains mandatory and switchable via the toggle.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structure with **Flexbox** (`display: flex` / Tailwind flex utilities).
- **Default Alignment Rule:** Every flex container must default to `align-items: center` (`items-center`) unless an exception is justified (e.g., multi-line text columns may use `flex-start`) — document any exception with a CSS comment.
- **Mobile-first:** Single-column stacks below ~768px; multi-column rows (features, steps, pricing, footer) above. No horizontal scrolling at any viewport width. Add `scroll-margin-top` to anchored sections to offset the sticky header.

### 1.5 Styling Scope & Tailwind
- Use Tailwind CSS (CDN, dark variant set to class-based) **for layout utilities only** (flex, grid, gap, padding, responsive prefixes).
- All visual identity — colors, clay shadows, radii, gradients, animations, and every component state — must live in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, etc.) mapped to the CSS variables above. Never hardcode theme values as arbitrary utility values.

### 1.6 Google Fonts & Icons (Mandatory)
- **Fonts:** Load `Baloo 2` (display/headings) and `Nunito` (body) from Google Fonts via `<link>` with `preconnect`; bind to `--font-display` and `--font-base`.
- **Icons:** Use **Google Material Symbols (Rounded variant)** exclusively — the rounded glyphs match the clay aesthetic. Raw inline SVGs and local icon files are forbidden.
- **Favicon:** omit — do not add local icon files.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, modifiers `.btn--primary`, `.btn--secondary`, `.btn--danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-pill)`, clay-raised shadow, gradient fills (primary: `#b7d496 → #cfe3b4` at 135deg).
- **Hover:** Brightness/shadow shift with `cursor: pointer`.
- **Focus:** Distinct `:focus-visible` ring built from CSS variables (outline/box-shadow) for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)` squish feedback.
- **Loading (`.is-loading`):** Disable interaction, prevent double-clicks, show a rotating Material Symbol (`progress_activity`) spinner — button dimensions must not change.
- **Disabled (`disabled` attr):** `opacity: 0.5`, grayscale, `cursor: not-allowed`.
- **Success/Error (`.is-success`, `.is-error`):** Temporary feedback swapping icon to `check_circle`/`error` with colors from `--text-success`/`--text-error`.
- **Danger:** Define `.btn--danger` (warm red fill/border) with distinct appearance and AA contrast in both Light and Dark themes, even though this landing page uses it sparingly.

### 2.2 Card Component (`.card`)
- **Default:** Flexible flexbox layout, `background: var(--bg-secondary)`, `border-radius: var(--radius-lg)`, subtle `--border-default` edge + `--shadow-clay-raised` elevation.
- **Hover:** `transform: translateY(-2px)` with shadow shift (`transition: var(--transition-normal) var(--ease-standard)`).
- **Focus-within:** Card border/glow highlights when an inner link or button receives focus.
- **Loading (`.card--loading`):** Skeleton shimmer keyframe styling that prevents layout jumps — define it in CSS even if unused statically.
- **Empty state (`.card--empty`):** Structured fallback with a large Google Material Symbol and short guidance text — define it in CSS as production-ready.

### 2.3 Form & Input (`.input-group` — used for the Final CTA email opt-in)
- **Structure:** Flex container wrapping a `<label>`, an `<input type="email" required>` (with `autocomplete="email"`), and a dedicated error feedback element linked via `aria-describedby`, wrapped in an `aria-live="polite"` region.
- **States (all styled):** Empty, focused (outline ring via variables), filled, valid (`.is-valid`: success border + `check_circle` icon), invalid (`.is-invalid`: error border, red text, `error` icon, message), disabled, read-only. Never rely on color alone — pair every state with an icon and/or text message.

### 2.4 Modal / Popup — Out of Scope
- No modal or popup dialogs are requested. **Do not add any.** (If scope ever changes, any modal must implement: opening/open/loading/success/closing CSS-animated states, centered flex overlay, Material Symbol close button, keyboard focus trap, and Esc/overlay-click dismissal.)

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** Fluid sizing, breakpoints without horizontal overflow, 44px minimum touch targets everywhere.
- **Smooth Animations:** `transition: var(--transition-normal) var(--ease-standard)` on all state changes; all keyframes and transitions must be disabled/minimized under `@media (prefers-reduced-motion: reduce)` (also disable `scroll-behavior: smooth` there).
- **Accessibility (a11y):** WCAG AA contrast in both Light and Dark modes (verify text tokens ≥ 4.5:1, adjust suggested values if needed). Semantic HTML5 elements; correct ARIA on the FAQ accordion (`aria-expanded`, `aria-controls`, panel `role="region"` + `aria-labelledby`), `aria-pressed`/`aria-label` on the theme toggle; logical DOM/focus order; full keyboard operability (no mouse-only interactions, visible focus everywhere); `aria-live` regions for form feedback. Decorative blobs/graphics get `aria-hidden="true"`.
- **Mandatory Visual Feedback:** Every click, hover, anchor jump, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` must be visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** Separate `index.html`, `style.css`, `script.js`. Only one `<script>` tag allowed: a single deferred reference to `script.js`. Include `<html lang="en">`, meta viewport, title ("DOUGH TIME — The Claymorphic Kitchen Timer"), and meta description.
- **Naming Convention:** BEM throughout (`.hero__title`, `.card--featured`, `.btn--primary`, `.faq__trigger`, `.footer__links`) — Tailwind layout utilities are the only permitted additional classes; never mix other naming conventions.
- **JS scope (all inside `script.js`):** theme toggle + `localStorage` persistence, FAQ accordion toggling, smooth anchor scrolling, email form client-side validation with a simulated submit (loading → success, with `aria-live` feedback), dynamic footer year. No other behavioral JS.
- **No Unrequested Placeholders:** Write real, thematic English copy for every heading, paragraph, testimonial, tier, and FAQ answer. No lorem ipsum.

---

## 5. CLAYMORPHIC VISUAL LANGUAGE

- **Clay surfaces:** Every raised element uses `--shadow-clay-raised` (dark drop shadow + white top-left light + inset highlight rim) with `--radius-lg` or larger — the "inflated dough" look. Pressed/inset elements (input fields, step badges) use `--shadow-clay-pressed`.
- **Gradients:** Hero backdrop uses layered soft radial gradients (mint + blush blobs); Final CTA band uses a `#cfe3b4 → #ffd9e0` linear gradient; primary buttons use the `#b7d496 → #cfe3b4` gradient.
- **Glow:** `--glow-mint` on the hero timer and `--glow-pink` on the Final CTA panel.
- **Text shadows:** Subtle `--text-shadow-soft` on display headings only — never at the cost of AA contrast; invert for dark mode.
- **Keyframe inventory (define all in `style.css`):**
  - `dough-rise` — breathing `scale(1 ↔ 1.03)`, 4s ease-in-out infinite (hero timer)
  - `tick-tock` — 360° rotation, 60s linear infinite (timer second hand)
  - `blob-float` — alternating `translateY(±10px)`, 6s (decorative background blobs)
  - `shimmer` — skeleton loading sweep
  - `spin` — loading spinner
- **Aspect-ratio:** Hero timer face and testimonial avatar circles use `aspect-ratio: 1` (never fixed px heights).

---

## 6. PAGE SECTIONS & CONTENT DIRECTION

- **Header (sticky):** Translucent clay bar (background color + `backdrop-filter: blur`) below `--z-dropdown`. Logo (Material Symbol `timer` + "DOUGH TIME" wordmark in `--font-display`), anchor links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, compact "Get Started" primary button. On small screens, hide the secondary nav links (keep logo, toggle, CTA) — never overflow.
- **Hero:** `<h1>` "DOUGH TIME" with playful display styling + tagline ("The claymorphic kitchen companion that times every rise, proof, and bake") + sub-copy. Two CTAs: "Start Your First Timer" (primary, anchors to Pricing) and "See How It Works" (secondary, anchor). Right side: circular clay timer mock — `aspect-ratio: 1` face, gradient ring, `bakery_dining` Material Symbol, a rotating second-hand element (`tick-tock`), digital readout "00:45" with `font-variant-numeric: tabular-nums`, `dough-rise` breathing, `--glow-mint`. Floating `aria-hidden` blob decorations behind (`blob-float`).
- **Features (3 `.card`s):** "Proof-Perfect Timers" (`hourglass_top`), "Recipe-Synced Reminders" (`sync` / `restaurant`), "Gentle Kitchen Alerts" (`notifications`) — icon in a clay bubble, title, description, "Learn more" link (exercises card `:focus-within`). Row → column on mobile.
- **How It Works (3 steps):** "Set It" (`add_circle`), "Let It Rise" (`trending_up`), "Bake On Cue" (`local_fire_department`) — numbered clay badges (01/02/03, `--shadow-clay-pressed`) connected by a dashed line that hides cleanly on mobile column layout.
- **Testimonials (3 `.card`s):** Quotes from home bakers; clay monogram avatars (styled initials in gradient circles, `aspect-ratio: 1`), name + role, 5-star row using Material Symbols `star` with `font-variation-settings: 'FILL' 1`.
- **Pricing (3 `.card--tier`s):** "Starter Dough" (Free), "Rising Star" (`--featured`: "Most Popular" pill badge, `--shadow-clay-raised` + gradient border + slight desktop scale), "Full Oven" — each with a real feature list and a CTA button (featured: primary; others: secondary).
- **FAQ (accessible accordion, 5 real questions):** e.g., "Does DOUGH TIME work offline?", "Can I sync timers across devices?", "What happens if my dough overproofs?", "Can I cancel anytime?". Independent toggle per item; CSS height animation (e.g., `grid-template-rows: 0fr → 1fr`).
- **Final CTA:** Gradient band (`#cfe3b4 → #ffd9e0`) with `--glow-pink`, headline ("Give every dough its moment"), and the email opt-in `.input-group` (label + input + "Join the Waitlist" button) wired to the loading → success flow with `aria-live` feedback.
- **Footer with secondary links:** Brand blurb, three secondary link columns (Product, Company, Support), social row (Material Symbols with `aria-label`s), bottom bar with dynamic-year copyright and legal links. All links show visible focus states.

**Deliver the complete, working `index.html`, `style.css`, and `script.js` now, in one response — Light mode as default, Dark mode fully implemented and toggleable, zero inline CSS, zero inline SVGs.**