Kawaii / Sweet Pastel demo
Kawaii / Sweet Pastel

A cute, girly Japanese-inspired aesthetic featuring soft pastel palettes, rainbow gradients, sparkles, fluffy clouds, and adorable mascot characters.
Category: Playful & Youth
Era: 2000s Y2K
Prompt: 13.4 KB · 1841 words
# CODING-AI PROMPT — Build a Complete "Kawaii / Sweet Pastel" Landing Page

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-quality landing page on the first attempt. Theme: **Kawaii / Sweet Pastel** (Japanese Kawaii culture) — cute, playful, whimsical, rainbow gradients, fluffy clouds, sparkle embellishments, mascots, soft airbrushed, decorative, rounded everything (20px+), glossy highlights, high-key brightness.

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

**Copy Direction:** Invent ONE coherent kawaii product concept (e.g., a cute habit-tracking or journaling app) and write all real, thematic, playful English copy around it. All user-facing copy must be written in **English**.

---

## 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 targeted via class or ID selectors in `style.css`.
* **Minimal HTML Modifications:** HTML must remain clean, semantic, and agnostic of visual styling — changing the site's look must only require editing the CSS file.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` (and the `.dark` theme class) using CSS variables:

* **Colors (Light Mode — default):**
  * `--primary: #FF9AA2` (Salmon — main interactive accent)
  * `--secondary: #9D84B6` (Lilac — secondary accent, focus rings)
  * `--bg-primary: #FFF6FA` (soft pink-tinted base — never pure white; use `#fefefe` only where a near-white surface is required)
  * `--bg-secondary: #FFD1DC` (Soft Pink — cards/panels)
  * `--text-primary: #5B4B6B` (dark plum)
  * `--text-secondary: #8E7C9F`
  * `--text-success: #2F9E77` (deep mint — contrast-safe)
  * `--text-error: #D6455D` (deep rose)
  * `--border-default: #F3D9E3`, `--border-error: #D6455D`, `--border-success: #2F9E77`
  * Pastel section accents: `--pastel-lavender: #E0BBE4`, `--pastel-blue: #C3E5F9`, `--pastel-lemon: #FFFACD`, `--pastel-mint: #B5EAD7`
  * `--gradient-rainbow: linear-gradient(90deg, #FF9AA2, #FFD1DC, #FFFACD, #B5EAD7, #C3E5F9, #E0BBE4)` (animated via `background-size: 200%` + `background-position` keyframes)
* **Contrast Pairing:** Every light background token must pair with dark text tokens, and every dark background token must pair with light text tokens — enforce this pairing in BOTH themes. Body text must meet 4.5:1 contrast in light and dark modes.
* **Border Radius & Shadows (kawaii rounding):** `--radius-sm: 12px`, `--radius-md: 20px`, `--radius-lg: 32px`, plus `--radius-pill: 999px` for buttons/badges. Shadows must be soft and pastel-colored: `--shadow-sm: 0 4px 12px rgba(255,154,162,0.25)`, `--shadow-md: 0 8px 24px rgba(157,132,182,0.30)`.
* **Spacing & Transitions:** `--spacing-gap: 1.5rem`, `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: ease`, plus the mandatory kawaii bounce easing `--ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1)` used for all hover/entrance bounce effects.
* **Elevation/Stacking:** `--z-dropdown: 1000`, `--z-modal: 2000`, `--z-toast: 3000`.

**1.3 Mandatory Dark Mode ("Kawaii Night")**
* **Implementation:** Define a complete dark token set under both `@media (prefers-color-scheme: dark)` and a `.dark` class: `--bg-primary: #2B2340` (deep plum), `--bg-secondary: #372E4F`, `--text-primary: #F7EFF9`, `--text-secondary: #C9BCDA`, brightened accents (`--primary: #FFAAB2`, `--secondary: #B79CD6`), and adjusted borders/success/error tokens. Pastel section accents become muted translucent tints.
* **Theme Switching:** Background and text variables must switch seamlessly with zero HTML restructuring.
* **Persistence:** Persist the user's choice via `localStorage` (e.g., key `kawaii-theme`), falling back to `prefers-color-scheme` on first visit. Provide a visible toggle button in the header with correct `aria-pressed` and `aria-label` ("Toggle dark mode"), swapping Google Material Symbols `light_mode` / `dark_mode` icons.
* **Exception clause:** The source style spec marks dark mode as "partial" — light pastel mode remains the default presentation, but a complete, fully switchable dark-mode token set must still be delivered.

**1.4 Flexbox Layout & Mobile-First Alignment**
* **Default Alignment Rule:** Every flex container must default to `align-items: center` unless an explicitly justified exception exists (document the exception in a CSS comment).
* **Mobile-Friendly First:** All flex layouts must be responsive out of the box — rows convert to columns on small viewports. No horizontal scrolling at any breakpoint.

**1.5 Framework Default: Tailwind CSS**
* Use Tailwind CSS (or clean custom CSS driven by Tailwind's `@layer` / `@apply` directives). All utility usage must map back to the CSS variables above or to generic reusable classes (`.btn`, `.card`, `.input-group`, `.section`, `.container`).

**1.6 Typography & Icons (Google Fonts Mandatory)**
* **Text:** Load Google Fonts via `<link>`: **Baloo 2** (headings, bound to `--font-display`) and **Quicksand** (body, bound to `--font-base`). Rounded, playful letterforms are mandatory.
* **Icons:** Use Google Material Symbols (Rounded variant) exclusively. Raw inline SVGs and local icon files are forbidden — mascots, clouds, sparkles, stars, checks, and social icons must all be Material Symbols ligatures or pure-CSS shapes (`::before`/`::after`, `clip-path`, `border-radius` blobs).

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
Style all states via CSS classes (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--ghost`, `.btn--danger`):
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — pill radius, pastel gradient fill, glossy highlight via a `::before` white sheen gradient. Minimum touch target 44×44px.
* **Hover:** Brightness shift + shadow growth + a cute wobble (rotate ±2° keyframes, ~400ms, `--ease-bounce`), `cursor: pointer`.
* **Focus:** Distinct focus ring using `--secondary` (`outline` or `box-shadow`) — clearly visible on pastel backgrounds.
* **Active/Pressed:** `transform: scale(0.97)` with bounce easing.
* **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Google Icon without distorting button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback styles driven by `--text-success` / `--text-error` (used by the newsletter submit).
* **Danger:** `.btn--danger` must be visually distinct in both themes (not required by this page's content, but the class must exist and be themed).

**2.2 Card Component**
* **Default:** Flexbox layout, `--bg-secondary` surface, `--radius-lg`, subtle `--border-default` border and `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` + gentle wobble + `--shadow-md`.
* **Focus-within:** Card border highlights when a child link/button receives focus.
* **Loading (Skeleton):** Define a shimmer animation class in CSS (gradient sweep) that preserves layout dimensions.
* **Empty State:** Define a fallback layout class featuring a Google Icon and clear guidance text.

**2.3 Form & Input Component (Newsletter in Final CTA)**
* **Structure:** Flex container wrapping a visible `<label>`, the email input, and a dedicated error/success feedback element with `aria-live="polite"`.
* **States — all styled via CSS classes:** Empty, Focused (outline ring via `--secondary`), Filled, Valid (`--border-success` + `check_circle` icon), Invalid (`--border-error`, error text in `--text-error`, `error` icon), Disabled, Read-only.
* **Behavior:** JS validates email format on submit; invalid submissions show inline error copy and focus the input; valid submissions show a button loading state, then a success message with a `celebration` Material Symbol — all announced via the `aria-live` region.

**2.4 Modal / Popup**
* No modal is part of this build — do not add unrequested overlays. If any layered component becomes necessary, it must follow: animated opening/open/closing states via CSS transitions, centered flex container (`align-items: center`), backdrop overlay, Google Icon close button, keyboard focus trapping, and closing via `Esc` or overlay click, stacked at `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES (Kawaii Effects)

* **Responsive by Default:** Fluid sizing and breakpoints with zero horizontal overflow.
* **Smooth Animations:** Apply `transition: var(--transition-normal)` to all state changes. Mandatory kawaii effects, all defined as reusable CSS classes/keyframes:
  * **Sparkles:** `::before`/`::after` star shapes (via `clip-path` polygon or Material Symbols ligature content like `auto_awesome`) with twinkle keyframes (scale + opacity), decorating the Hero and Final CTA.
  * **Bounce:** Entrance animations using `--ease-bounce` (`cubic-bezier(0.34, 1.56, 0.64, 1)`), staggered on hero elements and on scroll-reveal (IntersectionObserver in `script.js`).
  * **Wobble:** Hover wobble keyframes on cards, buttons, and footer links.
  * **Rainbow gradient transitions:** Animated `background-position` on the Final CTA panel and the "Most Popular" pricing badge using `--gradient-rainbow`.
  * **Fluffy clouds & mascot:** Pure-CSS cloud shapes (stacked `border-radius` blobs) or Material Symbols `cloud`/`filter_drama` icons with a gentle floating bob animation; mascot rendered as a large Material Symbol (e.g., `cruelty_free` bunny) inside a pastel circle with glossy highlight.
* **Reduced Motion:** All wobble, bounce, sparkle, and gradient animations must be disabled under `prefers-reduced-motion: reduce` (including the JS scroll-reveal, which must check this preference).
* **Accessibility (a11y):** Sufficient contrast in both modes; never rely on color alone to communicate state; semantic HTML5 elements (`header`, `main`, `section`, `nav`, `footer`); correct ARIA roles/labels on the theme toggle, FAQ accordion, and star ratings (e.g., `aria-label="Rated 5 out of 5 stars"`); logical DOM/focus order; full keyboard operability; `aria-live` regions for the newsletter feedback.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** Any generic `.btn--danger`/delete styling must be visually distinct in both light and dark themes.

---

## 4. LANDING PAGE SECTION SPECIFICATIONS

* **Header (page shell):** Sticky, pastel translucent background with backdrop blur. Logo (Material Symbol + wordmark), anchor nav links with smooth scrolling and visible hover/focus states, and the dark-mode toggle (per rule 1.3). Collapses to a wrapped column layout on mobile.
* **Hero:** Sparkle-adorned badge pill, `H1` headline with one gradient-text accent word, subheadline, primary CTA (scrolls to Pricing) + secondary ghost link, mascot composition (CSS clouds + Material Symbol mascot in a glossy pastel circle), floating sparkle decorations, staggered bounce-in entrance.
* **Features (3 cards):** Each card = icon tile (Material Symbol in a pastel rounded square), title, 2-line description. Cards follow all rule 2.2 states; alternate pastel accent colors per card.
* **How It Works (3 steps):** Numbered badges (1/2/3) in pastel circles, step icon, title, copy. Horizontal row with a dotted CSS connector line on desktop; vertical column on mobile.
* **Testimonials (3 quotes):** Card per quote with 5-star rating (Material Symbols `star` + accessible label), CSS avatar circle containing the person's initials, name, and role. Hover lift per rule 2.2.
* **Pricing (3 tiers):** Free / mid / premium. Middle tier is visually elevated (thicker border or scale, animated rainbow-gradient "Most Popular" badge). Each tier: name, price, feature list with `check_circle` icons, CTA button (primary style on the popular tier, secondary/ghost on the others). Do not add an unrequested monthly/yearly toggle.
* **FAQ (5–6 items):** Native `<details>`/`<summary>` (preferred) or an ARIA-compliant custom accordion. Custom-styled summary with a `expand_more` icon rotating on open, animated answer reveal via CSS, full keyboard operability, visible focus states, answers in `--text-secondary`.
* **Final CTA:** Full-width panel with the animated rainbow gradient, sparkle decorations, headline + subcopy, and the newsletter email form per rule 2.3.
* **Footer with secondary links:** Logo recap, 3–4 link columns (Product / Company / Support / Social with Material Symbol icons), copyright line. All secondary links must have visible hover (wobble/underline) and focus states; link to page sections where applicable.

---

## 5. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry point (`<script src="script.js" defer>`). No external JS libraries.
* **Naming Convention:** BEM throughout (`.hero__title`, `.card--feature`, `.btn--primary`, `.pricing__badge`) — never mix conventions.
* **No Unrequested Placeholders:** No lorem ipsum — write real, coherent, kawaii-themed English copy for every section. Placeholder text is permitted only where content is genuinely unspecified.
* **Language:** All user-facing copy, comments, class names, and file names in English/ASCII.
* **Quality Bar:** Deliver the complete, working page on the first attempt — zero console errors, zero horizontal scroll, fully keyboard navigable, and both light ("Sweet Pastel") and dark ("Kawaii Night") themes fully functional and persisted.