Playful Hand-Drawn demo
Playful Hand-Drawn

A whimsical, organic style featuring sketchy hand-drawn lines and childlike doodles that evoke a crayon-illustrated storybook feel.
Category: Playful & Youth
Era: 2020s Modern
Prompt: 13.6 KB · 1846 words
## Landing Page Build Prompt — "Playful Hand-Drawn" (Children's Illustrator Blog)

Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-quality Landing Page on the first attempt — no follow-up questions, no partial deliverables.

**Project Brief**

* **Theme:** "Playful Hand-Drawn" (*Desenho à Mão Lúdico*) — a playful, organic, artistic landing page for a children's illustrator blog.
* **Style keywords:** hand-drawn, illustration, children, stories, playful, organic, artistic, unique, warm, friendly. Era: 2026+ Artisanal Creativity.
* **Visual language:** hand-drawn illustrations as main elements, handwritten-style typography, paper and chalk textures, irregular borders, scribble-animation hover micro-interactions, notebook page-turn section transitions, sky blue and grass green accents, warm and friendly feel.
* **Sections (in order):** Header/Nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.
* **Copy:** All user-facing copy must be written in **English**, in a warm, storybook voice. Write original copy — lorem ipsum is prohibited.

---

## 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.
* All design properties, layout rules, and states are targeted via class or ID selectors only.
* HTML remains clean, semantic, and style-agnostic — changing the look must never require touching the markup.

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root`. Light mode is the default **"Sketchbook Paper"** theme:

* Backgrounds: `--bg-primary: #FDFDFD` (Chalk White — the theme's specified near-white paper; never `#ffffff`), `--bg-secondary: #FFF8E1` (sun-warmed paper tint).
* Brand: `--primary: #87CEEB` (Sky Blue), `--secondary: #FFB6C1` (Pastel Pink).
* Decorative accents: `--accent-green: #7CFC00` (Grass Green), `--accent-yellow: #FFD700` (Sun Yellow), `--accent-orange: #FFA07A` (Soft Orange), `--accent-brown: #D2B48C` (Light Brown).
* Text: `--text-primary: #333333` (pencil), `--text-secondary: #5C5C5C` (darkened Pencil Gray — raw `#A9A9A9` fails AA as text and is reserved for borders/decoration only), `--text-success: #2E7D32`, `--text-error: #C62828` (deepened, AA-accessible variants of the palette).
* Borders: `--border-default: #A9A9A9` (Pencil Gray, used as `1px dashed` per the theme's technical spec), `--border-success: #2E7D32`, `--border-error: #D32F2F`.
* Shape & depth: `--radius-sm: 6px`, `--radius-md: 14px`, `--radius-lg: 26px`, plus the signature wobbly corner token `--radius-doodle: 255px 15px 225px 15px / 15px 225px 15px 255px`; `--shadow-sm: 2px 3px 0 rgba(51,51,51,.08)`, `--shadow-md: 4px 6px 0 rgba(51,51,51,.14)` (flat offset "marker" shadows).
* Motion & layout: `--spacing-gap: 1.25rem`, `--transition-fast: 0.2s ease-in-out`, `--transition-normal: 0.5s ease-in-out`, `--ease-standard: ease-in-out`.
* Stacking: `--z-dropdown: 1000`, `--z-modal: 1050`, `--z-toast: 1100`.
* Typography: `--font-display: "Permanent Marker", cursive`, `--font-base: "Patrick Hand", cursive`.
* **Contrast pairing is mandatory:** every light background token pairs with dark text tokens and vice versa, in every theme. Bright crayon accents (`#7CFC00`, `#FFD700`, `#FFA07A`) may be used as fills with dark text, highlighter strokes, and decorative borders — never as light text on light backgrounds.

**1.3 Mandatory Dark Mode**
* Implement dark mode as a **"Chalkboard"** variant: `--bg-primary: #263238`, `--bg-secondary: #2F3D45`, `--text-primary: #FDFDFD` (chalk), `--text-secondary: #BFC9CF`, `--text-success: #7CFC00`, `--text-error: #FF8A80`, borders `#A9A9A9`; the pastel accents carry over and become the bright, accessible chalk strokes on the dark board.
* Define tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class; switching must require zero HTML restructuring.
* Persist the user's choice via `localStorage`, falling back to `prefers-color-scheme` on first visit; ship a visible toggle with correct `aria-pressed`/`aria-label` state.
* **Exception clause:** the source style spec lists dark mode as unsupported — dark mode remains architecturally mandatory and must ship as the Chalkboard variant.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless an exception is explicitly justified in CSS comments.
* Mobile-first: multi-column rows collapse to columns below ~768px; horizontal scrolling is prohibited at any viewport width.

**1.5 Framework Default & Tailwind CSS Integration**
* Use Tailwind CSS (CDN or custom CSS via `@layer`/`@apply`). Every utility must map back to the CSS variables or to generic reusable classes: `.btn`, `.card`, `.input-group`, plus the theme classes `.hand-drawn-illustration`, `.scribble-animation`, `.paper-texture`.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load **Google Fonts** via `<link>`: "Permanent Marker" for display/headings and "Patrick Hand" for body copy (base size ≥ 18px for legibility — Permanent Marker must never be used for long-form text).
* Icons: **Google Material Symbols (Rounded variant)** only. Raw inline SVGs are forbidden for functional UI icons. **Exception clause:** decorative hand-drawn illustration artwork (hero scene, doodles, map path, scribbles) may be authored as inline SVG stroke paths — this is core to the theme's identity; all functional icons remain Material Symbols.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Button Component**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum 44×44px, `--radius-doodle` corners, dashed or solid border, flat offset shadow. Primary CTA uses Sun Yellow or Sky Blue fill with `#333333` text.
* **Hover:** shadow grows + slight `rotate(-1deg)`, `cursor: pointer`.
* **Focus:** distinct 3px dashed outline using `--primary` with 3px offset — visible in both themes.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** `aria-busy="true"`, interactions disabled to prevent double-clicks, CSS spinner that does not distort button dimensions.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** temporary feedback states driven by `--text-success`/`--text-error`, always paired with a Material Symbol icon and text — never color alone.

**2.2 Card Component** (applies to feature, testimonial, and pricing cards)
* **Default:** flexible flexbox layout, `--bg-secondary` fill, `1px dashed var(--border-default)`, `--radius-doodle`, slight per-card rotation (±1deg) for organic imperfection.
* **Hover:** `translateY(-2px)` + shadow shift + scribble underline on the title.
* **Focus-within:** border shifts to `--primary` when a child link/button receives focus.
* **Loading (Skeleton):** shimmer animation defined in CSS to prevent layout jumps.
* **Empty State:** Material Symbol icon + clear guidance text fallback layout.

**2.3 Form & Input Requirements** (used by the Final CTA newsletter capture)
* **States:** Empty, Focused (dashed ring), Filled, Valid (success border + check icon), Invalid (error border, error icon, error message), Disabled, Read-only.
* **Structure:** flex `.input-group` wrapping a `<label>`, the input, and a dedicated error feedback container with `aria-live="polite"`.

**2.4 Modal / Popup Requirements** (recommended for the newsletter success confirmation)
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions.
* **UX:** centered flex container (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping, close via `Esc` and overlay click, `z-index: var(--z-modal)`.

**2.5 FAQ Accordion**
* Button + panel pattern with `aria-expanded`, `aria-controls`, and linked IDs; CSS-animated open/close; `expand_more` icon rotates with the panel; fully keyboard operable; panels use `--bg-secondary` with doodle borders.

**2.6 Theme Toggle**
* Doodle-circle button with Material Symbols `light_mode`/`dark_mode`; `aria-pressed` and `aria-label` update on switch; persists via `localStorage`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Signature theme effects (mandatory):**
  * `.paper-texture`: pure-CSS paper grain (layered repeating gradients + soft vignette); dark mode swaps to chalkboard grain. No external image assets.
  * `.scribble-animation`: on hover/focus of links, buttons, and card titles, a hand-drawn underline draws itself — use native `text-decoration: underline wavy` + `text-underline-offset` for links, and `stroke-dashoffset` draw-in transitions for SVG doodles.
  * Irregular borders: wobbly `--radius-doodle` corners + `1px dashed var(--border-default)` throughout, with slight rotations for a hand-made feel.
  * Notebook page-turn transitions: each `<section>` is a `.page` with a spiral-binding strip (CSS repeating radial-gradient dots) on its left edge and a torn-paper top edge; an IntersectionObserver adds a class triggering a subtle `rotateY(-3deg)` → `0` perspective turn on entry.
  * Hero illustration strokes draw in on page load via `stroke-dashoffset` animation.
* **Responsive by default:** fluid sizing, no horizontal overflow at any breakpoint.
* **Smooth animations:** all state changes use `transition: var(--transition-normal)` (scoped to `color`, `background-color`, `border-color`, `transform`, `box-shadow` for performance); `--transition-fast` for micro feedback.
* **Reduced motion:** under `prefers-reduced-motion`, disable page turns, draw-ins, floats, and spins; keep simple opacity fades only.
* **Accessibility (a11y):** WCAG AA contrast in both modes; never rely on color alone to communicate state; semantic HTML5 (`header`, `nav`, `main`, `section`, `article`, `footer`, exactly one `h1`); skip-to-content link; logical DOM/focus order; full keyboard operability; `aria-live` regions for form feedback and dynamic messages; 44×44px minimum touch targets.
* **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
* **Destructive actions:** any `.btn-danger` must be visually distinct in both light and dark themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** separate `index.html`, `style.css`, `script.js`. A single `<script src="script.js" defer>` entry point — no inline script blocks, no inline styles.
* **Naming:** one consistent convention — BEM (e.g., `.pricing-card`, `.pricing-card--featured`, `.pricing-card__title`) for components; Tailwind utilities only for flex layout and spacing. Never mix conventions.
* **No unrequested placeholders:** write original, playful English copy for headlines, feature blurbs, testimonial quotes, plan names, and FAQ answers. Only genuinely unspecified data (social URLs, contact email) may use `#` placeholders.
* Google Fonts and Material Symbols are loaded via `<link>` tags in `index.html`.

---

## 5. SECTION-BY-SECTION BUILD SPECIFICATION

**5.1 Header** — sticky, paper-textured background; hand-lettered logo wordmark (Permanent Marker); anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with scribble hover underlines; theme toggle; accessible mobile burger menu (`aria-expanded`, `z-index: var(--z-dropdown)`).

**5.2 Hero** — `h1` headline + playful subhead in storybook voice; primary CTA button + secondary text link; large inline-SVG hand-drawn illustration as the main element (a friendly storybook scene) with stroke draw-in on load; floating doodle accents (sun, cloud, stars) in palette colors, gently animated; trust line beneath the CTA; flex row on desktop, column on mobile, `align-items: center`.

**5.3 Features (3 cards)** — each card: Material Symbol icon inside a doodle-circle badge (one accent per card: Sky Blue, Grass Green, Sun Yellow), a title, and a one-sentence description; staggered rotations; hover lift + scribble underline.

**5.4 How It Works (3 steps)** — oversized hand-drawn numerals inside doodle circles, connected by a dashed treasure-map path (SVG dotted line on desktop, hidden or vertical on mobile); each step: icon, short title, description.

**5.5 Testimonials** — 3 quote cards with oversized hand-drawn quotation marks; doodle avatars (SVG faces or Material Symbol `face` inside doodle circles — no photos); name + role (e.g., "Mum of two", "Year 2 teacher", "Children's librarian"); 5-star rating via `star` icons with visually-hidden "Rated 5 out of 5 stars" text.

**5.6 Pricing (3 tiers)** — middle tier uses `.pricing-card--featured` with a thicker doodle border, slight scale/rotation, and a text ribbon ("Most loved" — conveyed by text, not color alone); each card: plan name, price, feature list with success-colored check icons paired with text, and a CTA button with full state styling per 2.1.

**5.7 FAQ** — 5–6 questions in the accessible accordion defined in 2.5; section heading + friendly intro line; answers in warm, plain English.

**5.8 Final CTA** — doodle-framed panel with a sun-yellow highlighter sweep behind the headline; newsletter `.input-group` per 2.3 (label, email input, submit button with loading + success/error states); inline `aria-live` feedback ("You're on the list!"); optional success modal per 2.4.

**5.9 Footer** — `--bg-secondary` background; grouped secondary links (Explore / Stories / Help); social icons (Material Symbols, `#` hrefs, descriptive `aria-label`s); copyright and small print; scribble hover underlines; contrast maintained in both themes.

**JavaScript responsibilities (`script.js`):** theme toggle + `localStorage` persistence, mobile nav, FAQ accordion, IntersectionObserver page-turn reveals, newsletter form validation feedback, smooth anchor scrolling (disabled under `prefers-reduced-motion`).