Anthropomorphic demo
Anthropomorphic

A whimsical, character-driven visual style featuring anthropomorphic mascots and storybook charm with a touch of vintage packaging nostalgia.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 15.9 KB · 2233 words
# BUILD SPECIFICATION — "Anthropomorphic" Storybook Landing Page (Coding Agent Prompt)

**Your Role:** You are a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality landing page on the first attempt. Every rule below is mandatory unless explicitly marked optional.

**The Product:** Invent one coherent anthropomorphic character brand for the entire page (e.g., a woodland goods company or storybook club run by animal characters). All user-facing copy must be written in **English**, in a whimsical, charming, storybook voice, with real content — no lorem ipsum.

**Required Sections:** Sticky Header, Hero, Features (3 cards), How It Works (3 steps), Testimonials (3 quotes), Pricing (3 tiers), FAQ (accordion), Final CTA (email capture), Footer with secondary links.

---

## 1. Architecture Rules (Mandatory)

**1.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute, inline `<style>` blocks, and presentation attributes are **forbidden**.
- Target everything via class/ID selectors. HTML must remain semantic (`header`, `nav`, `main`, `section`, `article`, `footer`) and visually agnostic — re-skinning the site must only require editing `style.css`, never the markup.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` and the dark theme class. Use this exact scaffold (you may extend it, never remove from it):

```css
:root {
  /* Colors — Light "Storybook Morning" theme */
  --primary: #E8A840;          /* Warm Honey — borders, fills, accents */
  --secondary: #87CEEB;        /* Sky Blue — focus rings, secondary accents */
  --bg-primary: #FFF5E1;       /* Soft Cream — page background */
  --bg-secondary: #FEFEFE;      /* card surfaces (never #ffffff) */
  --text-primary: #5C3D2E;     /* Forest Brown — headings & body */
  --text-secondary: #8A6D57;    /* muted brown */
  --text-success: #6B8E4E;      /* Leaf Green */
  --text-error: #C7442E;        /* warm brick red, harmonized with Sunset Orange */
  --border-default: #E8A840;
  --border-error: #C7442E;
  --border-success: #6B8E4E;

  /* Secondary palette accents (rotate across cards/steps/avatars) */
  --accent-pink: #F5C6C6;
  --accent-green: #6B8E4E;
  --accent-orange: #E87040;
  --accent-lavender: #B8A9D4;

  /* Shape & depth */
  --radius-sm: 20px;
  --radius-md: 24px;
  --radius-lg: 30px;
  --shadow-sm: 4px 4px 0 rgba(92, 61, 46, 0.15);
  --shadow-md: 6px 6px 0 rgba(92, 61, 46, 0.22);

  /* Spacing, motion, layering, type */
  --spacing-gap: 1.5rem;
  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 150ms ease-out;
  --transition-normal: 300ms var(--ease-standard);
  --z-dropdown: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
  --font-base: 'Nunito', sans-serif;
}

.dark {
  --bg-primary: #2B1F17;
  --bg-secondary: #3A2A1F;
  --text-primary: #FFF5E1;
  --text-secondary: #D9C3AC;
  --text-success: #9BC178;
  --text-error: #F2937B;
  --border-success: #9BC178;
  --border-error: #F2937B;
  --shadow-sm: 4px 4px 0 rgba(0, 0, 0, 0.35);
  --shadow-md: 6px 6px 0 rgba(0, 0, 0, 0.45);
}
```

- **Contrast pairing law:** every light background token pairs with a dark text token and every dark background token pairs with a light text token — enforced in **both** themes. Warm Honey (`#E8A840`) must never be used as text on cream backgrounds (fails contrast); it is reserved for borders, fills, and accents. Forest Brown text on Honey fills passes (≈4.7:1); verify ≥ 4.5:1 any time you adjust a value.
- Never use `#ffffff`; near-white surfaces use `#FEFEFE`.

**1.3 Mandatory Dark Mode**
- Dark tokens must be defined under a `.dark` class selector **and** `@media (prefers-color-scheme: dark)` (guard the media query with `:not(.light)` so the explicit class always wins).
- Provide a visible theme toggle in the header: an icon button using Material Symbols `light_mode` / `dark_mode`, with correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode") and icon swap.
- Persist the choice in `localStorage` (key `theme`, values `light`/`dark`); on first visit fall back to `prefers-color-scheme`; apply the theme **before first paint** to prevent flash-of-wrong-theme; announce the change through a visually-hidden `aria-live` region.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container **defaults to `align-items: center`** unless there is an explicitly justified exception (e.g., multi-line text columns inside cards may use `flex-start` — document each exception with a CSS comment).
- Mobile-first: multi-column rows collapse to columns below 768px; no horizontal scrolling at any viewport (test down to 320px); fluid `clamp()` typography and spacing.

**1.5 CSS Approach**
- Use handcrafted, framework-free custom CSS in `style.css` — the hand-drawn storybook aesthetic requires bespoke values utilities cannot express. If you opt for Tailwind instead, every utility must map back to the tokens above via `@layer`/`@apply` and generic component classes (`.btn`, `.card`, `.input-group`) — no raw arbitrary values.

**1.6 Typography & Icons — Google Only**
- Text: load **Nunito** (weights 400, 600, 700, 800, 900) via Google Fonts `<link>` in `<head>`, bound to `--font-base`. Headings use weight 800–900 for the rounded, friendly storybook voice.
- Icons: **Google Material Symbols Rounded** (FILL 1 for character accents) via Google Fonts. Inline SVGs, local icon files, and emoji-as-icons are **strictly forbidden**.

---

## 2. Component Specifications

**2.1 Buttons — `.btn` + BEM modifiers**
- Base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px touch target, `border-radius: var(--radius-md)`, Nunito 700, `transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-fast)`.
- Variants: `.btn--primary` (Honey fill, Forest Brown text, 2px border, `--shadow-sm`), `.btn--secondary` (cream fill, Honey border), `.btn--ghost`, `.btn--danger` (brick/coral — visually distinct in both themes).
- **Hover:** sticker-lift — `translateY(-2px)` with shadow growing to `--shadow-md`, `cursor: pointer`.
- **Focus-visible:** `outline: 3px solid var(--secondary); outline-offset: 2px` — never remove or replace with nothing.
- **Active/pressed:** `transform: scale(0.97)`.
- **Loading** (`.btn--loading` / `aria-busy="true"`): `pointer-events: none`, prevents double submits, CSS spinner (rotating border circle in the text color) swaps in via opacity; button dimensions must not change.
- **Disabled:** `opacity: 0.5; filter: grayscale(0.5); cursor: not-allowed;` no hover transform.
- **Success/Error:** `.btn--success`, `.btn--error` — temporary feedback states swapping in `check_circle` / `error` Material Symbols plus token colors; used for form submission feedback.

**2.2 Cards — `.card`**
- Base: `background: var(--bg-secondary); border: 2px solid var(--border-default); box-shadow: var(--shadow-sm);` flex column with `gap: var(--spacing-gap)`; use **asymmetric border-radius** for the hand-drawn feel (e.g., `24px 28px 22px 26px`).
- **Hover:** `translateY(-2px)` (up to `-4px` with a slight `rotate(-0.5deg)` for this theme) + `--shadow-md`, bouncy ease.
- **Focus-within:** border shifts to `var(--secondary)` when a child link/button receives focus.
- **Loading (`.card--skeleton`):** shimmer gradient animation that causes zero layout shift when real content swaps in.
- **Empty state (`.card--empty`):** Material Symbol + clear guidance text fallback.

**2.3 Forms & Inputs — `.input-group`**
- Structure: flex column wrapping a `<label>`, the `<input>`, and a dedicated error `<p>` wired via `aria-describedby`; error container has `aria-live="polite"`.
- Style every state in CSS: empty, `:focus` (Sky Blue ring), filled, valid (`.is-valid` — success border + `check_circle` icon), invalid (`.is-invalid` — error border, error text, `error` icon; never color alone — icon + message), `:disabled`, `[readonly]`.
- Inputs: `border-radius: var(--radius-sm)`, 2px borders, minimum 44px height.

**2.4 Modal — Pricing plan details**
- Each pricing tier includes a "View details" trigger that opens a storybook modal.
- Overlay: fixed, `display: flex; align-items: center; justify-content: center;`, `background: rgba(92, 61, 46, 0.5)`, `z-index: var(--z-modal)`.
- Dialog: `--bg-secondary`, asymmetric `--radius-lg`, 2px Honey border, `--shadow-md`; entrance animates `scale(0.9) → 1` with the bouncy ease; closing reverses.
- States: opening, open, `.modal--loading` (spinner), success/error, closing — all CSS-transitioned.
- UX: close button with Material Symbol `close` (44px target), `Esc` closes, overlay click closes, keyboard focus is trapped inside while open, focus returns to the trigger on close; `role="dialog"`, `aria-modal="true"`, `aria-labelledby`.

**2.5 FAQ Accordion**
- Button-per-question pattern: `aria-expanded` + `aria-controls`; answer region with `role="region"`.
- Chevron Material Symbol rotates 180° on open; panel height animates in pure CSS (e.g., `grid-template-rows: 0fr → 1fr` technique); fully keyboard operable.

**2.6 Header & Mobile Menu**
- Sticky header: translucent `--bg-primary` + `backdrop-filter: blur(8px)`, 2px Honey bottom border, flex row with `align-items: center`.
- Contains: brand mark (Material Symbol in a Honey circle + brand name), anchor navigation, theme toggle (per 1.3), primary CTA.
- Mobile: nav collapses behind a hamburger (`menu` / `close` symbols, `aria-expanded`, panel layered at `--z-dropdown`); closes on link click and `Esc`.
- Apply `scroll-margin-top` to sections equal to header height; `scroll-behavior: smooth` on `html` (disabled under reduced motion).

---

## 3. Core UX & Micro-Interaction Rules

**3.1 Responsive by Default** — fluid sizing, wrapping flex rows, zero horizontal overflow at any breakpoint.

**3.2 Smooth Animations** — every state change transitions with `var(--transition-normal)`; entrance animations are staggered and bouncy; under `prefers-reduced-motion: reduce`, remove all transforms, floats, and bounces (opacity-only or none).

**3.3 Accessibility** — skip link; landmark elements; logical `h1 → h2 → h3` order; full keyboard operability (no mouse-only interactions); visible focus everywhere; ≥ 4.5:1 contrast in both themes; state is never communicated by color alone; `aria-live` regions for form results and theme changes.

**3.4 Mandatory Visual Feedback** — every click, hover, and submission triggers a visible state change.

**3.5 Distinct/Destructive Actions** — `.btn--danger` must be visually distinct in both light and dark themes.

---

## 4. Deliverables & Output Format

- **Files:** separate `index.html`, `style.css`, `script.js`. Only one `<script src="script.js" defer>` — no inline script blocks, no inline styles.
- **Naming:** BEM only (`.card`, `.card__title`, `.card--featured`) — one consistent convention, never mixed.
- **Copy:** real, whimsical English copy throughout; placeholders only where content was genuinely left unspecified.
- **Head:** Google Fonts links for Nunito and Material Symbols Rounded.

---

## 5. Theme Direction — "Anthropomorphic"

**5.1 Mood** — Whimsical, character-driven, playful, vintage (Victorian illustration → modern mascot design). The page should read as a storybook world where animal characters run the brand: charming, relatable, warm.

**5.2 Color Usage** — Cream page, Forest Brown text, Honey borders/accents; rotate the secondary palette (Sky Blue, Blush Pink, Leaf Green, Sunset Orange, Lavender) across feature cards, step badges, and testimonial avatars. The footer inverts to a Forest Brown surface with cream text in light mode.

**5.3 Signature Effects (all CSS-only)**
- **Hand-drawn borders:** 2px solid Honey plus asymmetric border-radius (`24px 28px 22px 26px` style).
- **Sticker shadows:** hard offset `4px 4px 0` — never blurry.
- **Bouncy motion:** `cubic-bezier(0.34, 1.56, 0.64, 1)` on hovers, entrances, and the modal.
- **Storybook transitions:** scalloped section edges built from `repeating radial-gradient` dividers; a dashed "forest path" connecting the How-It-Works steps.
- **Warm gradients:** hero and Final CTA use warm gradient backgrounds (honey-tinted cream → soft peach in light mode; deep brown → warm umber in dark mode).
- **Gentle float:** looping `translateY(±6px)` animation on hero mascot elements.

**5.4 Characters Without SVG** — build mascots purely from CSS shapes + Material Symbols: rounded "face" circles with `pets`, `cruelty_free`, `flutter_dash`, or `sentiment_satisfied` symbols; ear shapes via pseudo-element circles; floating leaf/star/heart symbol badges. No images, no SVG.

---

## 6. Section-by-Section Requirements

**6.1 Header** — per 2.6.

**6.2 Hero** — two-column flex (copy left, mascot scene right; stacked on mobile). Eyebrow badge, `h1` (Nunito 900), subcopy, `.btn--primary` + `.btn--secondary`, and a trust row (paw avatars + "Loved by 10,000 woodland friends" + filled `star` symbols). Mascot scene: one large asymmetric-radius card containing the CSS character composition plus 2–3 floating symbol badges. Warm gradient background with a scalloped bottom edge; staggered bounce-in entrance.

**6.3 Features** — section heading (eyebrow + `h2` + copy), then three `.card`s in a wrapping flex row (`flex: 1 1 280px`), each with a unique accent (Sky Blue / Blush Pink / Leaf Green), a Material Symbol in an accent badge, an `h3`, and 2–3 lines of copy. Hover per 2.2.

**6.4 How It Works** — three steps in a flex row (column on mobile): numbered Honey badges (1/2/3 with brown numerals), Material Symbol, `h3`, copy — connected by a 3px dashed Honey path (horizontal on desktop, vertical on mobile).

**6.5 Testimonials** — three quote cards: filled `star` rating, quote, avatar (accent-colored circle + character symbol or initials), character name and role (e.g., "Barnaby the Badger — Village Baker"). On first load the cards render in `.card--skeleton` shimmer briefly, then populate — demonstrating the 2.2 skeleton state with zero layout shift.

**6.6 Pricing** — three tier cards: "Acorn" (starter), "Honeycomb" (featured: thicker Honey border, "Most Popular" ribbon badge, `--shadow-md`, slight desktop scale), "Grand Oak" (premium). Each contains tier name, price, tagline, a feature list with `check_circle` symbols, a CTA (featured = `.btn--primary`, others = `.btn--secondary`), and a "View details" trigger opening the 2.4 modal. Row → column on mobile.

**6.7 FAQ** — five to six storybook-toned Q&As in a narrow (max-width ~760px) container, accordion per 2.5.

**6.8 Final CTA** — full-width warm gradient banner with scalloped top and bottom edges, decorative corner symbols, `h2`, copy, and an email-capture `.input-group` + `.btn--primary`: on submit the button enters loading (simulated ~800ms), then success (green + `check_circle` + aria-live "Welcome to the club!") or error for invalid email (per 2.3). Microcopy: "No spam — only postcards."

**6.9 Footer** — Forest Brown surface (light mode) / elevated brown (dark mode) with cream text. Brand + tagline, three secondary link columns (Company: About, Careers, Contact; Resources: Help Center, Storybook, Community; Legal: Privacy, Terms), social icon buttons (Material Symbols), and a copyright line with JS-injected year.

---

## 7. JavaScript Behavior (`script.js` only)

- Theme init/toggle/persistence per 1.3, applied pre-paint.
- Mobile menu ARIA toggle per 2.6.
- FAQ accordion ARIA per 2.5.
- Modal manager per 2.4 (open/close, focus trap, `Esc`, overlay click, focus return).
- Newsletter validation + simulated submit with loading/success/error states and `aria-live` announcements per 2.3 / 6.8.
- Testimonial skeleton → content reveal per 6.5.
- Footer year injection.
- JS never writes inline styles — all state changes are class toggles that `style.css` already styles.

---

## 8. Definition of Done

Zero inline styles/scripts; BEM throughout; both themes pass contrast; a keyboard-only walkthrough works end to end (nav → FAQ → pricing modal → form); `prefers-reduced-motion` respected; no horizontal scroll from 320px up; all nine sections present with real, whimsical English copy.