Artisanal Creative Learning demo
Artisanal Creative Learning

A creative hand-drawn illustration style with sketchy doodles and playful artistic elements, designed for art and creativity course platforms.
Category: Art & Illustration
Era: 2020s Modern
Prompt: 17.9 KB · 2419 words
# CODING AGENT BUILD PROMPT — Landing Page: "Artisanal Creative Learning"

**Your Role:** Senior Frontend Engineer & Expert UI Designer. Build the complete, production-ready landing page described below on the first attempt. Every rule in this document is binding. Where a source-specification detail conflicts with a mandatory rule below, the mandatory rule wins and the conflict is called out with an explicit **Exception clause.**

---

## 0. PROJECT BRIEF & DESIGN DIRECTION

**0.1 Theme:** "Artisanal Creative Learning" (source concept: *Aprendizado Criativo Artesanal*) — a creative, engaging, educational landing page for an online art and creativity course platform. Output category: **Art & Illustration.** Era: 2026+ Digital Inspiration — modern web standards, forward-looking execution. The page must feel like a beloved sketchbook: warm, playful, hand-crafted, and expressive, while remaining fully professional and accessible.

**0.2 Copy Language (Mandatory):** Write **all user-facing copy** — headings, buttons, labels, feature descriptions, testimonials, FAQ answers, pricing copy, footer text — in **English**. The source specification was Portuguese; translate every concept, keyword, and content direction into English before rendering it. Keep all CSS variable names, class names, file names, and code identifiers in English/ASCII.

**0.3 Mood & Keywords:** art courses, creativity, learning, hand-drawn, engaging, educational, artistic, inspiring, community, expressive.

**0.4 Required Page Structure (in this exact order):**

1. **Sticky Header** — flex row: brand (Google Material Symbol `brush` + wordmark in the display font), anchor nav (Features, How It Works, Testimonials, Pricing, FAQ), visible **theme toggle button** (sun/moon Material Symbols, `aria-pressed`, `aria-label`), primary CTA "Start Creating". On mobile: hamburger button (`aria-expanded`, `aria-controls`) opening a slide-down panel closable via `Esc`; translucent canvas-texture background with backdrop blur.
2. **Hero** — two-column flex layout (stacks to column on mobile). Left: eyebrow badge with brush icon ("Hand-crafted online art courses"), a single expressive `<h1>` on theme (e.g., direction: "Learn art the hand-made way"), supporting subheadline, CTA pair (primary "Start Creating" + ghost "See How It Works" that smooth-scrolls to the steps section), and a short social-proof line. Right: an `.art-element-illustration` composition — a brush, paint palette, paint tubes, and watercolor blobs built with pure CSS (see 0.6). Background: `.canvas-texture-bg` plus soft watercolor blob accents in mint, lavender, and sky blue. Hero content enters with the "blank canvas" reveal animation.
3. **Features (3 cards)** — section heading + intro line, then three `.card` components: (1) `draw` icon — "Learn by Making" (project-based courses); (2) `groups` icon — "Creative Community" (share work, get feedback, join challenges); (3) `school` icon — "Mentor Artists" (step-by-step guidance from practicing artists). Each card: Material Symbol inside a pastel blob, display-font title, body-font description, and a focusable "Explore" text link (to demonstrate `:focus-within`).
4. **How It Works (3 steps)** — three steps with large hand-drawn numerals (display font): (1) "Pick Your Path" (`palette` icon); (2) "Create with Guidance" (`brush` icon); (3) "Share & Grow" (`auto_stories` icon). Connect steps with a dashed hand-drawn connector (CSS dashed border or rotated `arrow_downward` Material Symbols); on mobile, steps stack vertically with connectors reoriented.
5. **Testimonials** — three `.card` components, each with a `format_quote` Material Symbol, a five-star row (`star` Material Symbols with an `aria-label` such as "Rated 5 out of 5"), a distinct believable quote, an initials avatar (pastel-colored circle with display-font initials — no external images), and name + role (e.g., "Hobbyist Illustrator," "Elementary Art Teacher," "First-time Painter").
6. **Pricing (3 tiers)** — tier names in the display font, e.g., "Sketch" (Free), "Canvas" (mid price, marked "Most Popular" with a hand-drawn ribbon), "Atelier" (premium). Middle tier visually elevated (lavender wash, stronger shadow, slight scale). Each tier: feature checklist with `check` Material Symbols, a CTA button (ghost / primary / secondary variants respectively), and a "View full details" trigger that opens the plan-details modal (see 2.4). Include realistic prices and billing microcopy.
7. **FAQ** — 4–6 substantive Q&As (skill levels needed, art supplies required, cancellation policy, community rules, certificates). Accordion built with styled native `<details>`/`<summary>` (or an ARIA `button` + region pattern with `aria-expanded`); `expand_more` icon rotates on open; animated height transition; fully keyboard operable.
8. **Final CTA** — full-width expressive band with `.canvas-texture-bg` and watercolor blobs; display-font headline (direction: "Your blank canvas is waiting"); email-capture form per spec 2.3 with primary button "Join the Workshop" and privacy microcopy.
9. **Footer** — brand + one-line tagline; three link columns (Explore: in-page anchors; Company: About, Contact, Blog; Legal: Privacy, Terms); social icon row (Material Symbols with `aria-label`s); copyright line; hand-drawn brushstroke top divider. Out-of-scope links may use `href="#"` but must be real, descriptive `<a>` elements.

**0.5 Color Palette (bind to tokens in 1.2):**
- **Primary accents:** Mint Green `#98FB98`, Lavender `#E6E6FA`, Pastel Yellow `#FFFACD`
- **Secondary accents:** Sky Blue `#87CEEB`, Peach `#FFDAB9`, Light Brown `#D2B48C`, Pencil Gray `#A9A9A9`
- **Text:** `#333333` on light surfaces (per source spec). **Pencil Gray `#A9A9A9` is decorative only** (sketch lines, dividers) — it fails text contrast and must never be used for body text; derive a darker secondary text tone instead.

**0.6 Signature Visual Effects (build with CSS only):**
- **Hand-drawn art-element illustrations** (brushes, palette, paint blobs, watercolor splashes): construct with pure CSS — pseudo-elements, layered gradients, wobbly border-radii — plus Google Material Symbols. **Exception clause:** the theme calls for illustrations, but inline SVGs are forbidden by the icon mandate (1.6); all decorative art must be CSS-built or Material Symbols.
- **Canvas & watercolor textures:** implement `.canvas-texture-bg` with layered CSS gradients (subtle crosshatch weave via `repeating-linear-gradient`; watercolor blobs via overlapping, blurred `radial-gradient`s at low opacity). No image files.
- **Brushstroke borders:** implement `.brushstroke-border` with irregular border-radius values (e.g., `255px 15px 225px 15px / 15px 225px 15px 255px`) and slightly uneven border colors/widths for a painted-edge feel.
- **Sketch hover micro-interactions:** on hover/focus, interactive elements play a short "being redrawn" effect — a subtle border-radius jitter keyframe, a hand-drawn underline that draws itself in (gradient `background-size` transition), and/or a slight rotation wobble.
- **Blank-canvas section transitions:** each section reveals on scroll (IntersectionObserver adds an in-view class) with a "fresh canvas" effect — background wash fading in like primer, content inking in (opacity + slight translateY + blur-to-sharp), children staggered.

**0.7 Typography:** Google Fonts mandatory. **"Gochi Hand"** is the identity/display font (headings, buttons, numerals, short expressive copy — per source spec). **"Nunito"** is the body font (minimum 16px, line-height ≥ 1.6) for readable long-form copy. Bind via `--font-display` and `--font-base`. **Exception clause:** the source spec set Gochi Hand as the sole font; Nunito is required as an accessibility-driven body pairing — Gochi Hand must remain dominant across all headings, CTAs, and accents so the hand-drawn identity is preserved.

---

## 1. STRICT RULES & ARCHITECTURE

### 1.1 CSS-First Architecture & Zero Inline CSS
- **No Inline CSS:** the `style="..."` attribute is forbidden everywhere in `index.html`.
- **Class/ID Selectors Only:** all design properties, layout rules, and states are applied via class/ID selectors in `style.css`.
- **Minimal HTML Modifications:** HTML stays semantic and styling-agnostic; re-theming the page must require editing `style.css` only, never the markup.

### 1.2 CSS Variables (`var(--...)`) & Theme Tokens
Store all visual tokens in `:root` (light theme) and override in the dark theme block (1.3). Required tokens:
- **Colors:** `--primary` (`#98FB98` mint), `--secondary` (`#E6E6FA` lavender), `--accent-sky` (`#87CEEB`), `--accent-peach` (`#FFDAB9`), `--accent-brown` (`#D2B48C`), `--accent-yellow` (`#FFFACD`), `--bg-primary`, `--bg-secondary`, `--bg-card`, `--text-primary` (`#333333` light), `--text-secondary` (darkened, ≥ 4.5:1 contrast — never `#A9A9A9`), `--text-success`, `--text-error`, `--border-default` (`#E0E0E0` per source spec), `--border-success`, `--border-error`.
- **Light Background:** `--bg-primary: #fefefe` — **Exception clause:** the source spec specified `#FFFFFF`; per the near-white rule, use `#fefefe` as the light canvas base, with `--bg-secondary` as a pastel-yellow wash for alternating sections.
- **Contrast Pairing:** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens — enforced in both themes. Pastel-filled surfaces (mint/lavender buttons and badges) must always carry `#333`-range text.
- **Radius & Shadows:** `--radius-sm`, `--radius-md`, `--radius-lg` — each with slight irregularity for the hand-drawn feel (e.g., `--radius-lg: 255px 15px 225px 15px / 15px 225px 15px 255px`); `--shadow-sm`, `--shadow-md` (soft, warm-tinted).
- **Spacing & Transitions:** `--spacing-gap`; `--transition-fast` (~0.25s) for interactive feedback; `--transition-normal: 0.7s ease-in-out` (per source spec) reserved for section reveals and large-surface/theme changes; `--ease-standard`.
- **Elevation:** `--z-dropdown`, `--z-modal`, `--z-toast` in ascending order to prevent overlap conflicts.
- **Fonts:** `--font-display`, `--font-base` per 0.7.
- The three source-spec utility classes — `.art-element-illustration`, `.brushstroke-border`, `.canvas-texture-bg` — must exist verbatim and be used as global decorative utilities.

### 1.3 Mandatory Dark Mode Support
- **Implementation:** define a "Midnight Atelier" dark theme — deep warm charcoal backgrounds (in the `#23252c` range, **never pure black**), light warm paper text (in the `#faf7ef` range), retained pastel accents (mint and lavender pop on dark), deepened borders, and watercolor/canvas textures reduced to ~40–50% opacity. Provide tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector.
- **Theme Switching:** switching themes must require only token overrides — no HTML restructuring.
- **Persistence:** the user's choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit. A visible header toggle button carries correct `aria-pressed` and `aria-label` state and swaps sun/moon Material Symbols.
- **Exception clause:** the source specification requested light-mode-only delivery; dark mode remains a mandatory architectural requirement and must be fully implemented and visually coherent with the pastel, hand-drawn mood.

### 1.4 Flexbox Layout & Mobile-First Alignment
- Build all layout structures with **Flexbox**.
- **Default Alignment Rule:** every flex container defaults to `align-items: center` unless an exception is explicitly justified in comments.
- **Mobile-Friendly First:** rows collapse to columns below ~768px; use fluid sizing (`clamp()` where sensible); **no horizontal scrolling at any viewport width**.

### 1.5 Framework Default & Tailwind CSS Integration
- Use **Tailwind CSS** with all custom theming driven through `@layer` / `@apply` mapped back to the CSS variables above (or an equivalent clean custom-CSS architecture honoring the same tokens). Utility usage must resolve to reusable component classes: `.btn`, `.card`, `.input-group`, etc.

### 1.6 Typography & Icons (Google Fonts Mandatory)
- Include Google Fonts `<link>` tags for Gochi Hand and Nunito; bind to `--font-display` / `--font-base`.
- Use **Google Material Symbols** (Rounded variant suits the hand-drawn feel) for all iconography: `brush`, `palette`, `draw`, `water_drop`, `format_quote`, `check`, `close`, `menu`, `dark_mode`, `light_mode`, `school`, `groups`, `auto_stories`, `star`, `send`, `expand_more`, `arrow_downward`, social glyphs, etc.
- **Explicitly forbidden:** raw inline SVGs, local icon files, and emoji used as icons.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`)
Style all states via CSS classes; variants: `.btn--primary` (mint fill, dark text), `.btn--secondary` (lavender fill, dark text), `.btn--ghost` (transparent, brushstroke border), `.btn--danger` (defined per Section 3, distinct in both themes).
- **Default:** flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`); minimum touch target 44×44px; display-font label.
- **Hover:** brightness/shadow shift, `cursor: pointer`, plus the sketch-wiggle micro-interaction (0.6).
- **Focus:** distinct `:focus-visible` ring built from CSS variables for keyboard navigation.
- **Active/Pressed:** `transform: scale(0.97)` click feedback.
- **Loading:** disables interaction and prevents double-clicks; renders a CSS spinner or animated Material Symbol without changing button dimensions; announced via `aria-live`.
- **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
- **Success/Error:** temporary feedback states driven by `--text-success` / `--text-error` with icon + text (never color alone). Pricing CTAs demonstrate the full loading → success flow on click.

### 2.2 Card Component (`.card`)
Applies to feature, testimonial, and pricing cards.
- **Default:** flexible flexbox layout (column), `--bg-card` surface, `.brushstroke-border` treatment, `--shadow-sm`, generous `--spacing-gap` internal rhythm.
- **Hover:** elevation shift plus `transform: translateY(-2px)` and the sketch micro-interaction (interactive cards only).
- **Focus-within:** card border highlights (lavender) when a child link/button receives focus.
- **Loading (Skeleton):** define a `.card--skeleton` shimmer animation class in CSS to prevent layout jumps.
- **Empty State:** define a reusable fallback pattern featuring a Google Material Symbol and clear guidance text.

### 2.3 Form & Input Requirements (`.input-group`)
Used for the Final CTA email capture.
- **States:** Empty, Focused (outline ring), Filled, Valid (success border + check icon), Invalid (error border, error icon, error message in a dedicated feedback container), Disabled, Read-only.
- **Structure:** flex container wrapping a `<label>`, the input field, and a dedicated error/success feedback element tied to an `aria-live` region.
- **Behavior:** validate email format in `script.js`; on submit, the button enters loading state, then renders success ("You're on the list!") or error feedback, all announced to assistive technology.

### 2.4 Modal / Popup Requirements
Pricing tiers open a plan-details modal via "View full details."
- **States:** Opening (backdrop fade + panel scale/ink-draw-in), Open, Loading (skeleton content), Success/Error, Closing — all animated via CSS transitions.
- **UX Features:** centered flex overlay (`align-items: center`), backdrop overlay, Material Symbol close button, keyboard focus trapping with restoration on close, `role="dialog"`, `aria-modal="true"`, `aria-labelledby`, body scroll lock, close via `Esc` and overlay click, stacked at `--z-modal`.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by Default:** fluid sizing and breakpoints with zero horizontal overflow at any width.
- **Smooth Animations:** CSS transitions on all state changes; the signature `0.7s ease-in-out` (`--transition-normal`) for section reveals and large surfaces; `--transition-fast` for hover/press so feedback feels immediate. **All motion respects `prefers-reduced-motion`** — degrade to opacity-only or none.
- **Accessibility (a11y):** contrast ≥ 4.5:1 in both Light and Dark modes; never rely on color alone to communicate state (pair icons with text); semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); skip link; single `<h1>` with logical heading order; correct ARIA roles/labels on the accordion, mobile menu, modal, and theme toggle; full keyboard operability with visible focus rings everywhere; `aria-live` regions for form feedback, button loading/success states, and any toasts.
- **Mandatory Visual Feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive Actions:** `.btn--danger` must be visually distinct in both themes (tokens defined even if unused by the default sections).

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **File Structure:** separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred `script.js` entry point. No inline event handlers — bind everything with `addEventListener`.
- **Naming Convention:** BEM (`block__element--modifier`) exclusively. **Exception clause:** the three source-spec utility classes (`.art-element-illustration`, `.brushstroke-border`, `.canvas-texture-bg`) are preserved verbatim as the only permitted non-BEM names.
- **No Unrequested Placeholders:** lorem ipsum is forbidden — write real, on-theme English copy for every section: hero headline and subcopy, three distinct feature descriptions, three step descriptions, three distinct testimonials with names and roles, four to six substantive FAQ answers, pricing tier names/prices/feature lists, CTA copy, and footer labels. In-page nav/footer links anchor to real sections; out-of-scope links may use `href="#"` but must be descriptive, real link elements.
- **JavaScript Scope (behavior only):** theme toggle + `localStorage` persistence, mobile menu, IntersectionObserver section reveals, FAQ accordion behavior (if the ARIA pattern is used), newsletter validation with simulated submit states, pricing modal lifecycle, and button loading demonstrations. Keep the code organized and commented.