Hand-Drawn Sketch-Note demo
Hand-Drawn Sketch-Note

A casual, fun design featuring hand-drawn doodles and sketch-style illustrations on notebook paper backgrounds with handwriting fonts.
Category: Art & Illustration
Era: 2020s Modern
Prompt: 17.2 KB · 2477 words
# CODING AGENT PROMPT — "HAND-DRAWN SKETCH-NOTE" LANDING PAGE (ART & ILLUSTRATION)

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Your task is to code a complete, production-ready landing page on the first attempt — no stubs, no TODOs, no clarifying questions. Generate the final code immediately after internalizing every rule below.

## PROJECT BRIEF

- **Deliverable:** A single-page marketing landing page for a fictional product in the **Art & Illustration** category. Suggested concept (you may refine the name, not the category): **"SketchNote Studio"** — a playful web app that turns plain notes into illustrated, hand-drawn sketch-notes. Author all user-facing copy yourself in **English**, in a casual, fun, sketch-note voice. **Lorem ipsum is forbidden.**
- **Theme:** Hand-Drawn Sketch-Note — authentic, informal, creative. Keywords: sketch, note, hand-drawn, doodle, paper, notebook, pencil, casual, fun. Era: Modern Casual.
- **North-star visual direction:** hand-drawn landing page, notebook paper background, sketch style, doodles, handwriting font, casual and fun design.
- **Required sections, in order:** Header/Nav (page shell — hosts the mandatory theme toggle), Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- Keep all styling strictly inside `style.css`.
- **No Inline CSS:** the `style="..."` attribute is forbidden anywhere in the HTML.
- **Class/ID Selectors Only:** every design property, layout rule, and state is applied via class or ID selectors.
- **Minimal HTML Modifications:** HTML must remain clean, semantic, and style-agnostic — re-theming the page must require editing CSS only, never markup.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
Store all visual tokens in `:root` and override per theme:
- **Colors (light theme — mandatory mapping):** `--primary: #D12828` (red pencil — primary CTAs, emphasis), `--secondary: #0000FF` (ballpoint blue — links, secondary actions), `--bg-primary: #F4F1EA` (matte paper), `--bg-secondary: #FFFFA5` (highlighter yellow — emphasis washes, featured pricing card), `--text-primary: #0E2A5C` (ink navy), `--text-secondary: #333333` (graphite grey), `--text-success: #2E7D32` (pencil green — the palette lacks a success hue; pick a sketch-friendly green passing 4.5:1 on paper), `--text-error: #D12828`, `--border-default: #333333` (graphite pencil lines), `--border-error: #D12828`, `--border-success: #2E7D32`. Also tokenize the ruled-line color (e.g., `--paper-line: #ccc`).
- **Contrast Pairing:** every light background token must pair with a dark text token and every dark background token with a light text token — enforced in every theme, not just the default.
- **Light Mode Background:** never pure white; the paper tone is `#F4F1EA`. Where a near-white panel is needed, use `#fefefe`, never `#ffffff`.
- **Border Radius & Shadows:** define `--radius-sm`, `--radius-md`, `--radius-lg` for standard radii — but sketch components use the hand-drawn wobble radius technique (§5.1) instead of uniform rounding. `--shadow-sm` / `--shadow-md` must be hard-offset "pencil" shadows (e.g., `3px 3px 0 var(--border-default)`), no blur.
- **Spacing & Transitions:** `--spacing-gap`, `--transition-fast: 150ms`, `--transition-normal: 250ms`, `--ease-standard`.
- **Elevation/Stacking:** `--z-dropdown`, `--z-modal`, `--z-toast` to prevent overlap conflicts between layered components.

### 1.3 Mandatory Dark Mode Support
- Dark mode must always be defined: provide dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>`.
- **Dark theme concept — "Midnight Sketchbook":** dark graphite paper (e.g., `--bg-primary: #1B1B23`), paper-white ink (`--text-primary: #F4F1EA`), brightened red (e.g., `#FF7A7A` — never raw `#D12828` as text on dark), periwinkle blue replacing raw `#0000FF` (raw ballpoint blue is unreadable on dark backgrounds), highlighter yellow retained, ruled lines switched to a low-opacity light grey. All doodles, grain, and stains must remain visible in dark mode.
- **Theme Switching:** background and text variables must flip seamlessly with no HTML restructuring.
- **Persistence:** store the user's choice in `localStorage`, fall back to `prefers-color-scheme` on first visit, and render a visible toggle button in the header (Google Material Symbol `light_mode` / `dark_mode`) with correct `aria-pressed` and `aria-label` state.
- **Exception clause:** the source style spec declares this theme light-only; per mandatory architecture, dark mode must still be fully implemented as the Midnight Sketchbook variant — do not omit or stub it.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build every 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 explicitly justified exception is documented in a CSS comment.
- **Mobile-Friendly First:** all flex layouts must be responsive out of the box — rows convert to columns on small viewports, zero horizontal scrolling down to 320px, fluid type and spacing.

### 1.5 Framework Default & Tailwind CSS Integration
- Use Tailwind CSS (CDN or compiled) or clean custom CSS organized with `@layer` / `@apply` directives (custom CSS in `@layer base, components, utilities` is acceptable given the heavy sketch effects).
- All utility classes must map back to CSS variables or generic reusable class names (`.btn`, `.card`, `.input-group`, `.section`, `.container`, `.paper`).

### 1.6 Typography & Icons (Google Fonts Mandatory)
- **Text:** load **Patrick Hand** from Google Fonts and bind it to `--font-base` (`font-family: 'Patrick Hand', cursive;` per the spec). You may add exactly one accent handwriting Google Font (e.g., Caveat) for annotations and quotes. No other font sources.
- **Icons:** Google Material Symbols only (e.g., `draw`, `gesture`, `check`, `close`, `menu`, `format_quote`, `light_mode`, `dark_mode`). **Raw inline SVGs and local icon files are explicitly forbidden.** Emoji must not be used as icons.

## 2. COMPONENT DESIGN SPECIFICATIONS
Style every state via CSS classes; JavaScript only toggles state classes and ARIA attributes.

### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--secondary`, `.btn--danger`)
- **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` minimum touch target 44×44px; 2px graphite wobble border + hard pencil shadow; Patrick Hand label.
- **Hover:** visual shift — shadow offset grows and/or the button translates 1–2px; `cursor: pointer`.
- **Focus:** distinct focus ring via CSS variables (`outline` + `box-shadow` offset ring in `--secondary`), clearly visible on paper in both themes.
- **Active/Pressed:** `transform: scale(0.97)` (or translate into its shadow for a "stamped" feel).
- **Loading:** `aria-busy="true"`, pointer events disabled to prevent double-clicks, CSS spinner (rotating dashed hand-drawn circle) or animated Material Symbol — button dimensions must not change.
- **Disabled:** `opacity: 0.5`, greyscale filter, `cursor: not-allowed`.
- **Success/Error:** temporary feedback styles driven by `--text-success` / `--text-error` (border + icon swap), announced via an `aria-live` region.
- **Danger:** `.btn-danger` must be visually distinct in both light and dark themes (red pencil styling).

### 2.2 Card Component (`.card`, `.card--featured`)
- **Default:** flexible flexbox layout (column), subtle 2px wobble border and hard-offset elevation; body panels use `#fefefe` or `--bg-primary`; featured states may use `--bg-secondary` (highlighter wash).
- **Hover (interactive cards):** elevation/shadow shift plus `transform: translateY(-2px)`.
- **Focus-within:** card border shifts to `--secondary` when a child link/button receives focus.
- **Loading (Skeleton):** `.card--skeleton` shimmer animation defined in CSS, preserving exact card dimensions to prevent layout jumps.
- **Empty State:** structured fallback layout featuring a Google Material Symbol and clear guidance text.

### 2.3 Form & Input (`.input-group`)
- **States:** Empty, Focused (ballpoint-blue wobble outline ring), Filled, Valid (success border + check icon), Invalid (`--border-error` border, red helper text, error icon), Disabled, Read-only.
- **Structure:** flex container wrapping a `<label for>`, the input (hand-drawn style: transparent background, 2px graphite bottom border), and a dedicated error feedback element wired with `aria-describedby` + `aria-live="polite"`.
- Applied to the Final CTA email capture (§6.7).

### 2.4 Modal / Popup (only if you add one, e.g., "See full plan details")
- **States:** Opening, Open, Loading, Success/Error, Closing — all animated via CSS transitions (fade + slight wobble scale).
- **UX Features:** centered flex container (`align-items: center`), backdrop overlay, Google Material Symbol close button, keyboard focus trapping, close via `Esc` or overlay click, `role="dialog"` + `aria-modal="true"`, focus restored to the trigger on close, layered with `--z-modal`.
- The FAQ must NOT be a modal — build it as an accessible accordion (§6.6).

## 3. CORE UX & MICRO-INTERACTION RULES
- **Responsive by Default:** fluid sizing and responsive breakpoints; zero horizontal overflow.
- **Smooth Animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, shimmer, spinner rotation, and doodle wiggles — fall back to opacity changes).
- **Accessibility (a11y):** sufficient contrast in both Light and Dark modes; never rely on color alone to communicate state (pair color with icons/text); semantic HTML5 elements (`header`, `nav`, `main`, `section`, `footer`); correct ARIA roles/labels on custom widgets (accordion, theme toggle, mobile nav); logical DOM/focus order; full keyboard operability; `aria-live` regions for dynamic feedback (form errors, loading, toasts).
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive Actions:** `.btn-danger` / delete actions must be visually distinct in both light and dark themes.
- **Decorations:** all doodles, arrows, stains, spirals, and stick figures must be `aria-hidden="true"` with `pointer-events: none` so they never obscure content or interactions.

## 4. 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></script>`).
- **Naming Convention:** BEM throughout (`.card`, `.card__title`, `.card--featured`) — never mix conventions.
- **No Unrequested Placeholders:** author real English copy for every section in the sketch-note voice; placeholders are permitted only where content was genuinely left unspecified (e.g., social URLs may use `#`).

## 5. HAND-DRAWN SKETCH-NOTE DESIGN SYSTEM (Theme Implementation)
All effects are pure CSS — no image assets, no inline SVG.

### 5.1 Signature Techniques
- **Base paper (from the spec):** body/section base is `background-color: #F4F1EA; color: #0E2A5C; font-family: 'Patrick Hand', cursive; background-image: linear-gradient(var(--paper-line) 1px, transparent 1px); background-size: 100% 1.5em;` — expose as a `.paper` utility; `--paper-line: #ccc` in light mode, low-opacity light grey in dark mode.
- **Wobble borders (hand-drawn boxes):** `border: 2px solid var(--border-default); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;` — vary the values slightly per component for an organic feel.
- **Spiral binding:** a vertical strip of rings built from repeating radial-gradients (or stacked pseudo-element circles) along the left edge of notebook-style cards / the hero panel; decorative only.
- **Coffee ring stains:** absolutely positioned double radial-gradient rings at low opacity, slightly rotated, placed in the Hero and one later section.
- **Doodle arrows:** CSS-composed arrows (thin rotated rectangle shaft + border-triangle head) or Material Symbol arrows, pointing at CTAs and connecting steps; gentle wiggle on hover (reduced-motion safe).
- **Stick figures:** composed from CSS shapes — `border-radius: 50%` circle head plus thin rotated rectangles for torso and limbs — inside `aria-hidden` decorative wrappers (Hero illustration).
- **Speech bubbles:** wobble-radius box with a pseudo-element triangle tail; used for annotations and testimonial cards.
- **Matte paper grain:** layered low-opacity repeating gradients (or `background-blend-mode`) for subtle paper tooth; keep opacity ≤ ~4% so text contrast is unaffected.
- **Ink bleed:** on select display words, `text-shadow: 0 0 1px currentColor`; on borders, a 1px outer box-shadow in the border color.
- **Highlighter marker:** key words get `background-image: linear-gradient(transparent 55%, var(--bg-secondary) 55%, var(--bg-secondary) 90%, transparent 90%)` with a slight `-1deg` rotation for a hand-swept feel.
- **Pencil shadows:** hard offset only (e.g., `box-shadow: 4px 4px 0 var(--border-default)`), no blur — this is the theme's elevation language.

### 5.2 Color & Mood Rules
- Paper `#F4F1EA` dominates; ink navy is the reading color; red pencil is reserved for primary CTAs and emphasis; ballpoint blue for links and secondary actions; highlighter yellow only as a wash behind dark text (never behind light text).
- Dark mode keeps the same doodle language with the Midnight Sketchbook tokens (§1.3).

## 6. PAGE SECTIONS & CONTENT REQUIREMENTS

### 6.0 Header / Nav
- Sticky bar on paper background with a 2px graphite bottom rule; flex row (`align-items: center`): sketch wordmark logo (Patrick Hand + a small Material Symbol such as `draw`), anchor links (Features, How It Works, Pricing, FAQ), the theme toggle (§1.3), and a compact `.btn--primary` CTA.
- Mobile: links collapse behind a Material Symbol `menu` button opening a dropdown panel — keyboard operable, `aria-expanded`, layered with `--z-dropdown`.

### 6.1 Hero
- Two-column flex (stacks on mobile). Left: small kicker annotation (accent font), `<h1>` with the highlighter-marker effect on the key phrase, playful subhead, dual CTAs (`.btn--primary` + `.btn--secondary`), one-line social proof. Right: CSS-composed doodle illustration (stick figure at a desk, speech bubble annotation) with a doodle arrow pointing toward the primary CTA and a coffee-ring stain behind it.

### 6.2 Features — 3 Cards
- Section heading with a doodle underline; flex row of three `.card`s (column on mobile).
- Each card: Material Symbol icon inside a hand-drawn wobble circle, card title, 2–3 sentence description; hover lift + shadow shift; focus-within border highlight.
- Topics must fit the Art & Illustration product (e.g., instant doodle library, ink-to-clean-vector cleanup, shareable sketch-notes).

### 6.3 How It Works — 3 Steps
- Flex row of three steps (column on mobile): oversized hand-drawn circled numbers (1, 2, 3), step title, short description; dashed pencil arrows connect the steps horizontally (reoriented or hidden on mobile).
- Give step cards alternating slight rotations (−1° / +1°) for a casual pinned-note feel.

### 6.4 Testimonials
- Three quote cards styled as speech bubbles / torn notebook pages: wobble borders, oversized hand-drawn quote mark (Material Symbol `format_quote`), quote copy, and an author row with a CSS initials avatar (wobble circle + Patrick Hand initials), name, and role.
- Vary each card's rotation slightly; hover lifts or straightens the card.

### 6.5 Pricing — 3 Tiers
- Flex row of three `.card`s (column on mobile): Doodler (free), Sketcher (featured), Studio (pro) — names may be refined.
- Featured middle card: `--bg-secondary` highlighter wash (or thick highlighter top strip), rotated "Most Popular" sticker badge, slightly larger scale/elevation.
- Each card: tier name, price, feature list with Material Symbol `check` in `--text-success` (and `close` in `--text-secondary` for excluded items), and a CTA (featured tier `.btn--primary`; others `.btn--secondary`).
- Optional per-tier "Full details" link: if it reveals content, use the modal pattern (§2.4); otherwise link to the FAQ anchor.

### 6.6 FAQ
- Accessible accordion: each item is an `<h3>` + `<button aria-expanded="false" aria-controls="...">` controlling a panel; animate open/close via CSS; a Material Symbol chevron/plus rotates on expand.
- 5–6 real Q&As about the product; keyboard operable; expanded state must be communicated by more than color (icon rotation + border emphasis).

### 6.7 Final CTA
- Full-bleed section on a highlighter-yellow wash (light) / its dark equivalent: big handwriting headline (accent font), one supporting line, and an email-capture `.input-group` (label + email input + `.btn--primary`).
- JS behavior: validate the email format; invalid → inline error state (§2.3) announced via `aria-live`; valid → button loading state → simulated success (check icon + "You're on the list!" confirmation) announced via `aria-live`. No backend — simulate with a timeout; prevent double submission.

### 6.8 Footer
- Paper background with a top graphite rule; multi-column layout: brand wordmark + one-liner, secondary link groups (Product, Company, Support) with real short labels, a social row of Material Symbol icon links (doodle-underline hover + visible focus ring), and a copyright line.
- Link hover: hand-drawn wavy underline (bottom border or gradient) + color shift to `--secondary`.