Woodcut / Linocut demo
Woodcut / Linocut

A relief printmaking aesthetic featuring bold, high-contrast ink imagery with rough carved textures and hand-pressed grain, evoking woodcut and linoleum block prints.
Category: Art & Illustration
Era: Early 20th Century
Prompt: 11.1 KB · 1576 words
# System Prompt: Build "Woodcut / Linocut" Landing Page

## 0. MISSION

You are a Senior Frontend Engineer and Expert UI Designer. Build a **complete, production-ready Landing Page in a single attempt** using the **Woodcut / Linocut** visual style — relief printmaking: bold, thick, hand-carved black outlines on every shape, visible gouge/cut-stroke texture filling color areas instead of flat fills, high-contrast limited palette (black/cream plus one spot color), hard offset "print" shadows instead of soft blurs. Reference eras: Albrecht Dürer's woodcut prints, WPA-era American relief posters, contemporary linocut protest-poster illustration.

**Required sections, in order:** Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA, Footer with secondary links.

**Deliverables:** Separate `index.html`, `style.css`, and `script.js` files. No inline `<script>` blocks beyond a single deferred entry-point reference. No inline CSS. All user-facing copy in **English**.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
- **No Inline CSS:** The `style="..."` attribute is forbidden in HTML.
- **Class 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 require modifying only the CSS file, not the markup.

**1.2 CSS Variables & Theme Tokens**
Store all visual tokens in `:root` using the provided Woodcut/Linocut token set, mapped to the standard naming contract:

| Standard token | Woodcut value |
|---|---|
| `--bg-primary` | `#f2e8d3` |
| `--bg-secondary` | `#f8f1e0` |
| `--bg-tertiary` | `#e9dcbc` |
| `--text-primary` | `#1c1712` |
| `--text-secondary` | `#5a4a35` |
| `--primary` | `#1c1712` |
| `--accent` | `#a4271f` (the single spot color — never add a second) |
| `--text-success` / `--text-error` | derive from `--accent` family; never introduce new hues |
| `--border-default` | `#241d16` (`--carve-line`) |
| `--radius-sm: 0px; --radius-md: 2px; --radius-lg: 4px; --radius-pill: 999px` | corners must stay nearly square — carved blocks have no rounded edges |
| `--shadow-sm` / `--shadow-md` | hard offset print shadows: `3px 3px 0 rgba(28,23,18,0.9)` and `6px 6px 0 rgba(28,23,18,0.9)` — **never soft/blurred shadows** |
| `--spacing-gap`, `--transition-fast: .15s`, `--transition-normal: .25s`, `--ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1)` |
| `--z-dropdown: 10; --z-modal: 100; --z-toast: 200` |

Also define and use the signature texture tokens:
- `--gouge-texture: repeating-linear-gradient(35deg, rgba(28,23,18,0.10) 0px, rgba(28,23,18,0.10) 2px, transparent 2px, transparent 7px);` — apply to filled areas (cards, primary buttons, hero panel, pricing cards) instead of flat fills.
- `--ink-border: 3px solid #1c1712;` — every shape, card, button, input, badge, and image frame must carry this bold carved outline.

**Contrast Pairing:** Light cream backgrounds always pair with `--text-primary` (#1c1712); dark backgrounds always pair with cream text (#f2e8d3). Enforce this in every theme. Where a near-white is needed, use `#fefefe`, never `#ffffff`.

**1.3 Mandatory Dark Mode**
- Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class: invert to inked-block mood — `--bg-primary: #1c1712`, `--bg-secondary: #241d16`, `--bg-tertiary: #2e261d`, `--text-primary: #f2e8d3`, `--text-secondary: #cbb894`, `--accent: #d4453a` (brightened for dark-mode contrast), `--border-default: #f2e8d3`. Keep the gouge texture but lighten its strokes (`rgba(242,232,211,0.10)`); print shadows become cream-offset (`6px 6px 0 rgba(242,232,211,0.9)`).
- **Persistence:** Store user choice in `localStorage`, fall back to `prefers-color-scheme` on first visit. Provide a visible theme toggle in the nav with correct `aria-pressed` and `aria-label` ("Switch to dark mode" / "Switch to light mode"), rendered as a Google Material Symbol icon.
- The source spec does not declare modes — **validate contrast in both light and dark before finishing.**

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build all layout structures with Flexbox. Every flex container defaults to `align-items: center` unless a documented exception exists (e.g., feature card text stacks should use `align-items: flex-start` with a comment explaining why).
- Mobile-first: Hero, Features, How It Works, Pricing, and Footer rows must collapse to single columns on small viewports. No horizontal scrolling at any breakpoint. Test at 320px, 768px, 1024px, 1440px.

**1.5 Framework Default**
Use clean custom CSS (no framework needed for this deliverable), organized with the provided component classes (`.nav`, `.btn`, `.btn--primary`, `.card`, `.input`, `.badge`) extended with BEM naming (`.hero__title`, `.pricing-card__feature-list`, `.faq__item`, etc.). Never mix naming conventions.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- **Text:** Load via Google Fonts `<link>`: **Bebas Neue** (display — hero title, section headings, pricing tier names) and **Space Grotesk** (body/UI). Bind to `--font-display` and `--font-sans`.
- **Icons:** Use **Google Material Symbols** only. Explicitly forbidden: raw inline SVGs, local icon files, emoji as icons. Use icons sparingly and boldly — large, heavy glyphs suit the print style (e.g., `carpenter`, `print`, `content_cut`, `history_edu`, `handyman`).
- Display headings should use tight tracking and heavy weight; consider a subtle text-shadow offset (`2px 2px 0 var(--accent)`) on the hero title for a misregistered-print effect.

---

## 2. SECTION-BY-SECTION SPECIFICATIONS

**2.1 Nav**
Sticky top nav: cream background, `--ink-border` bottom border, flex row with logo (text-based, Bebas Neue), nav links, theme toggle, and a `.btn--primary` CTA. On mobile, collapse links behind a hamburger (Google Material Symbol `menu`) that toggles a vertical flex column via `script.js` with `aria-expanded` state.

**2.2 Hero**
Full-width flex panel with `--gouge-texture` background, `--ink-border` frame, and a hard print shadow. Contains: badge, oversized Bebas Neue headline, supporting paragraph, two buttons (`.btn--primary` "Get Started" and `.btn` "Learn More"), and a decorative framed block (a large Material Symbol or CSS-composed carved shape — no external images). All hero copy must be real, on-theme English copy (no lorem ipsum).

**2.3 Features — 3 Cards**
Flex row → column on mobile. Each `.card`: gouge texture, ink border, print shadow, large Material Symbol in a bordered square, Bebas Neue card title, body text. Include hover (`translateY(-2px)` + shadow grows), `:focus-within` border highlight, and a skeleton-loading class (`.card--skeleton` with shimmer) even if unused on load.

**2.4 How It Works — 3 Steps**
Numbered steps (01 / 02 / 03 in oversized Bebas Neue with accent color), connected by a carved dashed line (CSS border, hidden on mobile). Flex row → column. Each step: icon, title, description.

**2.5 Testimonials**
At least 3 testimonials. Each styled as a `.card` with an oversized decorative quotation mark (Bebas Neue, accent color), quote text, and an attribution row (initials in a bordered circle — CSS only, no avatar images) with name and role.

**2.6 Pricing — 3 Tiers**
Flex row → column. Middle tier marked "Most Popular" via `.badge` and visually elevated (thicker border or larger print shadow). Each tier card: tier name (Bebas Neue), price, feature list (Material Symbol `check` for included, `close` for excluded — never color alone; pair icon with text), and a CTA button. The top tier CTA uses `.btn--primary`; others use `.btn`.

**2.7 FAQ**
Use `<details>`/`<summary>` elements (semantic, keyboard-accessible natively) styled with ink borders, Bebas Neue questions, and a rotating `expand_more` Material Symbol that rotates 180° when open. No JS needed for the accordion itself.

**2.8 Final CTA**
Full-width accent-red panel (`--accent` background, cream text, gouge texture, thick cream border), centered flex column with a bold headline, one-line subcopy, and a cream `.btn` variant (`.btn--inverse`: cream background, ink text, ink border, print shadow).

**2.9 Footer**
Ink-dark background (in light mode) with cream text, flex layout: brand column, two secondary link columns, and a bottom bar with copyright and social links (Material Symbols). Links must have visible focus rings and hover states (accent underline).

---

## 3. COMPONENT STATE REQUIREMENTS (ALL VIA CSS CLASSES)

**Buttons:** Default (flex, `align-items: center`, `justify-content: center`, `gap: 0.5rem`, min 44×44px touch target); Hover (`translate(-2px,-2px)` + shadow grows to `--shadow-md`); Focus-visible (`outline: 2px dashed var(--accent); outline-offset: 3px`); Active (`translate(1px,1px)`, shadow shrinks — the "pressed into the paper" effect); Loading (`.btn--loading`: disabled, CSS spinner or animated Material Symbol, dimensions unchanged); Disabled (`opacity: .4; cursor: not-allowed; box-shadow: none`); Success/Error feedback states using `--text-success`/`--text-error` tokens.

**Cards:** Default, Hover (`translateY(-2px)` + shadow shift), `:focus-within` (border color shift to accent), Skeleton (shimmer animation), Empty state (icon + guidance text).

**Inputs (Final CTA / newsletter form if included):** Empty, Focused (print-shadow ring), Filled, Valid (success border + `check` icon), Invalid (error border, error text, `error` icon — never color alone), Disabled, Read-only. Structure: flex container wrapping label, input, and a dedicated error container with `aria-live="polite"`.

**Modal (FAQ "Contact us" link may open one):** Opening/Open/Closing animated via CSS transitions, centered flex container, backdrop overlay, Google Icon close button, focus trapping, `Esc` and overlay-click close, `role="dialog"` + `aria-modal="true"`.

---

## 4. CORE UX & GLOBAL RULES

- **Responsive by default:** fluid sizing, no horizontal overflow at any viewport.
- **Smooth animations:** `transition: var(--transition-normal)` on all state changes; fully respect `prefers-reduced-motion` (disable transforms, shadows shifts, shimmer).
- **Accessibility:** WCAG-sufficient contrast in **both light and dark modes**. Semantic HTML5 (`header`, `nav`, `main`, `section`, `footer`, `h1`–`h3` hierarchy). Correct ARIA roles/labels on the nav toggle, theme toggle, modal, and any `aria-live` regions. Logical DOM/focus order. Full keyboard operability — no mouse-only interactions.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive/danger actions:** visually distinct in both themes.
- **Print aesthetic discipline:** no soft blur shadows, no gradients other than the gouge texture, no rounded corners beyond 4px, no colors outside the black/cream/red palette.

---

## 5. DELIVERABLE & OUTPUT FORMAT

- **Files:** `index.html`, `style.css`, `script.js` (deferred single reference). No inline styles, no inline scripts.
- **Naming:** BEM consistently across all files.
- **Copy:** All user-facing copy in English, written to fit the woodcut/printmaker theme (workshop, craft, and printmaking metaphors welcome). No lorem ipsum — write real copy for every section.
- **Output the complete, final code for all three files immediately.**