Kawaii demo
Kawaii

A charming Japanese-inspired aesthetic featuring soft pastel palettes, rounded shapes, and irresistibly cute character-driven visuals.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 14.6 KB · 1950 words
# KAWAII LANDING PAGE — FULL BUILD SPECIFICATION FOR CODING AI

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality, single-page Kawaii-themed landing page on the first attempt. Every rule below is mandatory. All user-facing copy must be written in English.

---

## 1. Project Brief & Theme Direction

- **Theme:** Kawaii — pastel, rounded, adorable, cartoon-like, inspired by Japanese cute culture (1970s–present). Mood: soft, bubbly, friendly.
- **Fictional Product:** Invent one coherent concept (e.g., "Mochi — the cutest way to plan your day," a kawaii planner app) and write all real copy in a bubbly, friendly English voice. No lorem ipsum.
- **Required 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.
- **Visual language:** very rounded shapes (24–32px radii), bouncy overshoot animations, soft pastel gradients, kawaii face mascots (dot eyes, tiny mouth, blush), sparkle/star decorations, gentle wobble animations, cloud-shaped section dividers.

---

## 2. Strict Rules & Architecture

**2.1 CSS-First Architecture & Zero Inline CSS**
- All styling lives in `style.css`. The `style="..."` attribute is forbidden anywhere in the HTML.
- Target all design properties, layout rules, and states exclusively via class or ID selectors.
- Keep HTML semantic and styling-agnostic: changing the site's look must never require markup edits.

**2.2 CSS Variables & Theme Tokens**
Define exactly these tokens in `:root`:

```css
:root {
  /* Kawaii palette — Light (default) */
  --primary: #FFB6C1;            /* Pastel Pink */
  --secondary: #ADD8E6;          /* Pastel Blue */
  --accent-yellow: #FFFACD;      /* Pastel Yellow */
  --accent-mint: #B2F2BB;        /* Pastel Mint */
  --accent-lavender: #D8B4FE;    /* Pastel Lavender */
  --accent-peach: #FFDAB9;       /* Pastel Peach */
  --accent-grey: #E8E8E8;        /* Soft Grey */

  --bg-primary: #FFF5F5;         /* Soft White page background — never #ffffff */
  --bg-secondary: #FFFACD;       /* alternating section background */
  --bg-card: #FEFEFE;           /* card surface */

  --text-primary: #5A4A5A;      /* Soft Plum — pairs with light backgrounds */
  --text-secondary: #8A7590;
  --text-success: #2F7D5D;      /* deep mint, AA on pastels */
  --text-error: #D94A6E;        /* deep rose, AA on pastels */

  --border-default: #FFB6C1;
  --border-success: #B2F2BB;
  --border-error: #FF9FB6;

  --radius-sm: 16px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-pill: 999px;

  --shadow-sm: 0 4px 12px rgba(255, 182, 193, 0.2);
  --shadow-md: 0 8px 24px rgba(255, 182, 193, 0.35);

  --spacing-gap: 1.5rem;
  --transition-fast: 150ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-normal: 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-standard: cubic-bezier(0.34, 1.56, 0.64, 1);

  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;

  --font-base: 'Quicksand', sans-serif;
  --font-heading: 'Nunito', sans-serif;
}
```

- **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens pair with light text tokens. Never place white body text on pastel fills — pastel-filled components always use `--text-primary` (Soft Plum).
- Never use `#ffffff`; where a near-white is needed, use `#fefefe`.

**2.3 Mandatory Dark Mode Support**
- Define dark token overrides both under a `.dark` class on `<html>` and under `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` so system-preference users get dark mode before JS runs:

```css
.dark { /* mirrored in the media query block */
  --bg-primary: #2B2233;         /* soft deep plum */
  --bg-secondary: #352A40;
  --bg-card: #3C3048;
  --text-primary: #FFF5F5;       /* light text on dark bg — pairing enforced */
  --text-secondary: #D9C7DC;
  --text-success: #8FE3B8;
  --text-error: #FF9FB6;
  --border-default: rgba(255, 182, 193, 0.45);
  --border-success: rgba(178, 242, 187, 0.5);
  --border-error: rgba(255, 159, 182, 0.6);
  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
}
```

- Keep the pastel accents (`--primary`, `--secondary`, `--accent-*`) unchanged in dark mode — they pop against deep plum.
- `script.js` must persist the user's choice in `localStorage` (key `kawaii-theme`), fall back to `prefers-color-scheme` on first visit, and toggle `.dark`/`.light` on `<html>` without any HTML restructuring.
- The header must contain a visible toggle button using Material Symbols `light_mode`/`dark_mode`, with correct `aria-pressed` and a dynamically updated `aria-label`.
- **Exception clause:** The source style spec marks dark mode as "Not Recommended"; it is nevertheless mandatory for this build — implement it as a soft deep-plum night palette that preserves the pastel accents so the page stays kawaii in both modes.

**2.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout structure with Flexbox. Every flex container defaults to `align-items: center` unless a rule explicitly justifies another value (the only sanctioned exception: `align-items: stretch` for equal-height pricing cards).
- Mobile-first: all multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column below 768px. No horizontal scrolling at any viewport; use fluid `clamp()` sizing and a centered `.container` (max-width 1200px, horizontal padding via `clamp()`).

**2.5 Framework Default**
- Use clean, hand-authored custom CSS in `style.css` — no framework build step. Any utility-style class must map back to the CSS variables above. Never mix naming conventions.

**2.6 Typography & Icons (Google Fonts Mandatory)**
- Load via `<link>` with `preconnect`: **Nunito** (headings, weights 700–800) and **Quicksand** (body, weights 500–700), bound to `--font-heading` / `--font-base`.
- Load **Google Material Symbols Rounded** (FILL 1) and use it for every functional icon: `cruelty_free` (bunny logo), `favorite`, `auto_awesome`, `check_circle`, `star`, `expand_more`, `dark_mode`/`light_mode`, `menu`, `close`, `mail`, `person`, `celebration`, `error`, `task_alt`, `palette`, `forum`, `share`, `arrow_forward`. Raw inline SVGs and local icon files are forbidden for icons.
- **Exception clause:** Bespoke kawaii decorative artwork — face mascots (dot eyes, tiny mouth, blush), cloud-shaped section dividers, and sparkle/star shapes — may be hand-authored inline SVG because it is custom artwork unavailable in Material Symbols; every functional icon must still be a Google Material Symbol.

---

## 3. Component Design Specifications

**3.1 Buttons**
- **Default:** `.btn` — `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px, `border-radius: var(--radius-pill)`, 2px border, font-weight 700, padding `0.75rem 1.75rem`. Variants: `.btn--primary` (pink fill, plum text), `.btn--secondary` (pastel blue fill, plum text), `.btn--ghost` (transparent, pink border), `.btn--danger` (deep rose fill, visually distinct in both themes).
- **Hover:** `transform: translateY(-2px) scale(1.03)` + `box-shadow: var(--shadow-md)` with the bouncy easing; `cursor: pointer`.
- **Focus:** `:focus-visible` renders a distinct ring — `outline: 3px solid var(--accent-lavender); outline-offset: 2px;`.
- **Active/Pressed:** `transform: scale(0.97)`.
- **Loading:** `.btn--is-loading` — `pointer-events: none`, `aria-busy="true"`, CSS border spinner via `::after` (`spin` keyframe) that does not change button dimensions (fixed `min-width`); prevents double-clicks.
- **Disabled:** `opacity: 0.5`, `filter: grayscale(0.6)`, `cursor: not-allowed`, no transform/shadow.
- **Success/Error:** temporary `.btn--success` (mint) / `.btn--error` (rose) feedback states driven by `--text-success` / `--text-error` tokens.

**3.2 Cards**
- **Default:** `.card` — `background: var(--bg-card)`, `border: 2px solid var(--border-default)`, `border-radius: var(--radius-lg)`, `box-shadow: var(--shadow-sm)`, flex column, `gap: var(--spacing-gap)`.
- **Hover:** `transform: translateY(-2px)` + `--shadow-md` with bouncy easing.
- **Focus-within:** border shifts to lavender with a soft ring when a child link/button is focused.
- **Loading (Skeleton):** `.card--skeleton` with a `shimmer` gradient animation that preserves layout dimensions.
- **Empty State:** `.card--empty` fallback layout with a Material Symbol in a pastel circle and clear guidance text.

**3.3 Forms & Inputs**
- **Structure:** `.input-group` flex column wrapping a `<label>`, the input, and a dedicated `.input-group__error` feedback container with `aria-live="polite"`.
- **States:** Empty, Focused (lavender outline ring), Filled, Valid (mint border + `check_circle` icon), Invalid (rose border, `--text-error` message + `error` icon), Disabled, Read-only. Inputs: `min-height: 44px`, `border-radius: var(--radius-md)`, 2px border.
- **Usage:** the Final CTA email capture uses this pattern; validate in JS and show `.input-group--error` / `.input-group--success` with friendly microcopy ("Yay! You're on the list!" + `celebration` icon).

**3.4 Modal / Popup (applies to any modal used)**
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
- **UX:** centered flex container (`align-items: center`), backdrop overlay, Material `close` icon button, keyboard focus trapping, close via `Esc` and overlay click, `role="dialog"` + `aria-modal="true"`, `z-index: var(--z-modal)`.

**3.5 FAQ Accordion**
- Each item: `<button class="faq-item__question" aria-expanded="false" aria-controls="…">` toggling an answer region (`role="region"`), `expand_more` icon rotating 180°, animated height (CSS `grid-template-rows: 0fr → 1fr` or `max-height`), fully keyboard operable, `aria-expanded` always accurate.

---

## 4. Core UX & Micro-Interaction Rules

- **Responsive by default:** fluid sizing, no horizontal overflow, `scroll-behavior: smooth` wrapped in a no-reduced-motion media query, `scroll-margin-top` on sections for the sticky header.
- **Smooth animations:** every state change transitions with `var(--transition-normal)` (bouncy overshoot `cubic-bezier(0.34, 1.56, 0.64, 1)`).
- **Required keyframes:** `wobble` (gentle ±2.5° rotate, 0.5s — mascots and decorations), `float` (translateY ±8px — hero mascot), `twinkle` (opacity/scale pulse — sparkles), `shimmer` (skeletons), `spin` (loading).
- **Reduced motion:** `@media (prefers-reduced-motion: reduce)` disables wobble/float/twinkle/bounce and smooth scroll; instant state feedback remains.
- **Accessibility:** AA contrast in both modes; never rely on color alone (pair icons/text with every state); semantic HTML5 (`header`/`nav`/`main`/`section`/`footer`, one `h1`, sections labeled via `aria-labelledby`); a skip-to-content link; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback (any toast uses `z-index: var(--z-toast)`); all decorative SVG/icons marked `aria-hidden="true"`.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.

---

## 5. Page Section Requirements

**5.1 Header (sticky)** — Logo: `cruelty_free` bunny icon in a pink circle + Nunito wordmark. Anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle, primary CTA "Get Started". Mobile: `menu` icon button (`aria-expanded`) opens a dropdown panel (`z-index: var(--z-dropdown)`). Soft translucent `backdrop-filter` background.

**5.2 Hero** — Two-column flex (text | mascot), column on mobile. `h1` in Nunito 800 with one accent word highlighted by a pastel marker underline; subcopy in `--text-secondary`; CTAs: `.btn--primary` "Get Started" + `.btn--ghost` "See How It Works" (anchor). Right side: kawaii cloud mascot SVG (dot eyes, tiny mouth, blush) with `float` + `wobble`, scattered `auto_awesome` sparkles with `twinkle`, and low-opacity floating pastel blobs (pink/blue/mint). Bottom: cloud-shaped divider into the next section.

**5.3 Features** — Section heading + 3 `.card`s in a flex row (column on mobile). Each card: Material icon in a pastel circle (alternate `--primary` / `--secondary` / `--accent-mint` or lavender), title, friendly description. Hover bounce; focus-within ring.

**5.4 How It Works** — 3 steps in a flex row (column on mobile): numbered pastel badge (1/2/3), Material icon, title, description; dashed connector line between badges (hidden on mobile).

**5.5 Testimonials** — 3 `.card`s: avatar circle (pastel background + `person` icon or initials), quote, name + role, 5-star row (Material `star`, group labeled `aria-label="Rated 5 out of 5 stars"`). Optional playful ±1° tilt.

**5.6 Pricing** — 3 `.card`s with equal heights (`align-items: stretch` — sanctioned exception). Middle `.card--featured`: "Most Popular" pill badge (lavender), slight scale/lift, pink glow shadow. Each tier: name, price, feature list with `check_circle` (mint), CTA (featured = `.btn--primary`; others = `.btn--ghost` / `.btn--secondary`).

**5.7 FAQ** — 5–6 real Q&As about the fictional product using the accordion pattern (3.5).

**5.8 Final CTA** — Full-width `.card`-style panel with a soft pastel gradient (`linear-gradient(135deg, #FFB6C1, #D8B4FE, #ADD8E6)` at reduced opacity over `--bg-card`; deep-plum-tinted gradient in dark mode), sparkles, headline, and the email capture form (3.3) whose button demonstrates loading → success states.

**5.9 Footer** — `--bg-secondary` background: brand block (logo + tagline), secondary link columns ("Product": Features, Pricing, FAQ; "Company": About, Blog, Careers; "Support": Help Center, Contact, Privacy, Terms), social row (Material `mail`, `forum`, `share`), copyright line with a pink `favorite` icon. Links in `--text-secondary`, hover → `--primary` with a bouncy underline. Cloud divider above the footer.

**5.10 Decorations** — All mascots, sparkles, blobs, and cloud dividers: `aria-hidden="true"`, `pointer-events: none`, and disabled under reduced motion.

---

## 6. Deliverable & Output Format

- **Files:** exactly `index.html`, `style.css`, `script.js`. One `<script src="script.js" defer></script>` in `<head>` — no other inline scripts, no inline styles anywhere.
- **Naming:** BEM only (`.btn`, `.btn--primary`, `.card`, `.card__title`, `.faq-item__question`, …) — one consistent convention across the entire deliverable.
- **`script.js` scope:** theme toggle + `localStorage` persistence, mobile nav toggle, FAQ accordion, email form validation demo, CTA loading-state demo, smooth-scroll fallback. No external libraries.
- **Copy:** all user-facing copy in English, real and on-theme; placeholders only where content was genuinely unspecified.
- **Completeness:** ship the entire page on the first attempt — every section fully built and styled for both light and dark themes.