Cut & Paste — Paper-Collage Zine demo
Cut & Paste — Paper-Collage Zine

A handmade scrapbook aesthetic of torn paper edges, taped clippings, ransom-note typography, and layered cutout imagery assembled like a punk photocopied zine.
Category: Art & Illustration
Era: 1990s DIY Zine
Prompt: 15.0 KB · 2067 words
# CODING PROMPT — Build the "CUT & PASTE: A Paper-Collage Zine" Landing Page

**ROLE:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page described below in a single attempt. It must ship fully responsive, accessible, light-default with a fully working dark theme, and 100% themed — no scaffolding, no TODOs, no lorem ipsum.

---

## 0. PROJECT BRIEF

**0.1 Theme Identity & Product Context**
Build a marketing landing page for "Cut & Paste," a fictional web app for creating digital paper-collage zines. The page itself must look like a hand-assembled 2020s zine: torn paper edges, masking tape, tilted paper blocks, typewriter labels, duotone gradient washes, and playful scribble energy. Author ALL user-facing copy in English, in a playful, craft-forward, slightly irreverent zine editorial voice (e.g., headlines like "Snip. Layer. Ship.").

**0.2 Art Direction (Mandatory Techniques)**
- **Torn edges & collage:** `clip-path` polygons for torn paper shapes and section dividers; tilted blocks via `transform: rotate()`; hand-cut "wobble" border radius (`255px 15px 225px 15px / 15px 225px 15px 255px`) on buttons and cards.
- **Blend modes:** overlapping paper shapes use `mix-blend-mode: multiply` on the cream background for authentic collage layering.
- **CSS Filters:** tasteful `sepia`/`saturate`/`contrast` for aged-paper washes; `grayscale` on disabled elements.
- **Neumorphism (paper-softened):** soft dual box-shadows (dark + light) derived from the cream background for buttons, inputs, and cards.
- **Gradients:** duotone paper washes on hero shapes and CTA banner; never allow gradients to reduce text contrast.
- **Motion:** gentle floating hero collage pieces (staggered keyframes), infinite tape-marquee, hover lift/rotate, accordion/modal transitions, shimmer skeletons.
- **No image assets:** every visual is CSS-composed. Avatars are CSS monogram circles. No raw inline SVGs — icons come exclusively from Google Material Symbols.

**0.3 Palette → Token Map (Light theme — designed default)**
```
--primary: #e04a2a         (zine red-orange: CTAs, highlights, tape accents)
--secondary: #2e7fa4        (cut-paper blue: links, step badges, icons)
--bg-primary: #f2e8d5      (main cream paper background)
--bg-secondary: #faf3e3    (paper card/sheet background)
--text-primary: #1b1512    (ink black)
--text-secondary: rgba(27, 21, 18, 0.68)   (faded ink)
--text-success: #2e7d4f    --text-error: #b3261e
--border-default: #d9c9a3   (aged paper tan)   --border-success / --border-error: match text tokens
--tape: rgba(217, 201, 163, 0.8)   (masking-tape overlay)
```
Dark ink text on cream backgrounds — contrast pairing satisfied.

**0.4 Mandatory Dark Token Overrides (defined under `[data-theme="dark"]`)**
```
--bg-primary: #1b1512   --bg-secondary: #2a211b   --text-primary: #faf3e3
--text-secondary: #d9c9a3   --primary: #ff6b47   --secondary: #6fb6d9
--border-default: #4a3b30   --text-success: #7fd6a0   --text-error: #ff8f80
```

**0.5 Required Page Sections (in order)**
1. **Sticky Header (furniture):** "CUT & PASTE" wordmark + `content_cut` icon; anchor nav (Features, How It Works, Testimonials, Pricing, FAQ) with smooth scroll; theme toggle; compact CTA button. Below 768px, links collapse behind an accessible menu button (`aria-expanded` disclosure panel).
2. **Hero:** masking-tape kicker strip in Special Elite uppercase ("ISSUE Nº 01 — MAKE SOMETHING"); `<h1>` in the display font with a hard offset text-shadow; subcopy; primary CTA "Start Collaging" + ghost anchor CTA "See How It Works"; a CSS-composed floating collage (torn clip-path shapes in red-orange, blue, tan, cream with gradient washes, `multiply` blend, tape strips, scattered Material Symbol chips) — staggered float keyframes, `aria-hidden="true"`, `pointer-events: none`.
3. **Tape Marquee Divider:** thin infinite-scroll band "CUT • PASTE • CREATE • REPEAT" via `translateX` keyframes; halts under reduced motion.
4. **Features (3 cards):** section heading + three paper-scrap `.card`s with alternating slight rotation (≈ ±1.5deg); each card has a Material Symbol on a tilted paper chip, a title, and two lines of copy.
5. **How It Works (3 steps):** horizontal flex row of three steps, each with a blue numbered paper badge (1/2/3), title, and copy; dashed "cut line" connectors with a small `content_cut` icon between steps; stacks vertically below 768px.
6. **Testimonials (3 quotes):** paper-scrap quote cards with a tape corner pseudo-element, a row of `star` Material Symbols (decorative, `aria-hidden`), CSS monogram avatar circles, and authored name + role in zine voice.
7. **Pricing (3 tiers):** tier names (e.g., SCRAP / STAPLER / PRESS) on Special Elite tape labels, price, feature list with `check` icons, per-tier CTA; middle tier is `.card--featured` (primary border, slight raise, tape badge "MOST INKED"); small-print billing note.
8. **FAQ:** section heading + accessible accordion (per Rule 2.5) with at least 5 authored questions; a "Still have questions?" `.btn-secondary` that opens the contact modal (per Rule 2.4).
9. **Final CTA:** full-width collage banner with torn `clip-path` top/bottom edges and gradient wash; big display headline; email capture form (per Rule 2.3) — input + button inline on desktop, stacked on mobile; inline success/error feedback.
10. **Footer (secondary links):** an ink strip in light mode (bg `#1b1512`, text `#faf3e3`/`#d9c9a3` — in dark mode use `--bg-secondary` with standard dark tokens); brand blurb, three secondary link columns (Product anchors, Company, Legal), Material Symbol social buttons with `aria-label`s, copyright, and a "hand-assembled with CSS" credit.

---

## 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.**
- Target all properties, layout, and states via class or ID selectors only.
- HTML must be semantic and styling-agnostic (header, nav, main, section, article, footer); reskinning the site must require editing CSS only.
- Build collage decoration with classes + `::before`/`::after` pseudo-elements; every purely decorative layer gets `aria-hidden="true"` and `pointer-events: none`.

**1.2 CSS Variables & Theme Tokens**
- Store every token in `:root` and re-map under `[data-theme="dark"]`: the full color set from 0.3/0.4; radii `--radius-sm: 4px`, `--radius-md: 12px`, `--radius-lg: 24px`, `--radius-wobble` (hand-cut); shadows `--shadow-sm`, `--shadow-md`, `--shadow-poster` (hard offset ink shadow), `--shadow-neu` (dual neumorphic shadow) — all re-tokenized per theme; spacing `--spacing-gap: 1.5rem`, `--section-padding: clamp(4rem, 10vw, 7rem)`; motion `--transition-fast: 150ms`, `--transition-normal: 300ms`, `--ease-standard: cubic-bezier(.4,0,.2,1)`, `--ease-paper: cubic-bezier(.34,1.56,.64,1)`; stacking `--z-dropdown: 100`, `--z-modal: 1000`, `--z-toast: 1100`; fonts `--font-display`, `--font-base`, `--font-zine`.
- **Contrast pairing law:** light background ↔ dark text, dark background ↔ light text, enforced in every theme. Any near-white must be `#fefefe`, never `#ffffff`.
- Verify WCAG AA in both themes: 4.5:1 for body text, 3:1 for large/bold text and UI components; if a pairing fails, adjust within the palette family.

**1.3 Mandatory Dark Mode Support**
- Light is the designed default, but dark tokens must be fully defined under `[data-theme="dark"]` on `<html>`, with `color-scheme` declared.
- **Persistence:** store the user's choice in `localStorage`; a visible header toggle with correct `aria-pressed` and a dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme"); icon swap (`dark_mode`/`light_mode`) driven purely by CSS on `[data-theme]`. Theme initialization must be the very first statements in `script.js` to minimize flash.
- Dark-mode adaptations required: replace `multiply` blending with `screen`/`soft-light` or plain layering where it would kill contrast; re-tokenize neumorphic and poster shadows; keep tape overlays visible.
- **Exception clause (this brief selects Light):** on first visit, default to the light theme instead of consulting `prefers-color-scheme`; persist the user's explicit toggle choice thereafter.

**1.4 Flexbox Layout & Mobile-First Alignment**
- Build every layout container with Flexbox. **Default to `align-items: center`** unless an exception is explicitly justified (text-heavy cards may use `flex-start`).
- Mobile-first: multi-column rows collapse to a single column below 768px; no horizontal overflow at any viewport from 320px up; fluid type and spacing via `clamp()`; absolutely positioned collage pieces must be contained by their parents.

**1.5 Framework & Styling Strategy**
- Tailwind CSS (CDN) may be used for structural utilities only (flex, gap, sizing, responsive prefixes). ALL thematic styling — colors, collage effects, component skins — lives in `style.css` as reusable component classes (`.btn`, `.card`, `.input-group`, …). Alternatively, deliver clean custom CSS; never mix half-defined conventions or one-off utility soup for themed components.

**1.6 Typography & Icons (Google Fonts Mandatory)**
- Google Fonts via `<link>` with `preconnect`: **Archivo Black** (display, `--font-display`), **Space Grotesk** 400/500/700 (body, `--font-base`), **Special Elite** (zine typewriter for kickers, labels, tape notes, `--font-zine`).
- Icons: **Google Material Symbols (Rounded)**. Required icons include `content_cut`, `content_paste`, `check`, `close`, `expand_more`, `dark_mode`, `light_mode`, `progress_activity`, `star`. **Inline SVGs and local icon files are forbidden; never use emoji as icons.**

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
- Variants: `.btn-primary` (red-orange), `.btn-secondary` (blue), `.btn-ghost` (ink outline, transparent), `.btn-danger` (distinct in both themes).
- **Default:** flex layout (`display: flex; align-items: center; justify-content: center; gap: 0.5rem;`), minimum 44×44px touch target, wobble radius, hard offset poster shadow.
- **Hover:** lifts (`translate(-2px, -2px)`) with the shadow growing; `cursor: pointer`.
- **Focus:** distinct visible ring via CSS variables on `:focus-visible` for keyboard navigation — never removed.
- **Active/Pressed:** `transform: scale(0.97)` with the shadow collapsing — a "pressed into paper" feel.
- **Loading (`.is-loading`):** `aria-busy="true"`, interactions disabled to prevent double-clicks, label swaps to a spinning `progress_activity` icon without changing button dimensions.
- **Disabled:** `opacity: 0.5`, `grayscale` filter, `cursor: not-allowed`.
- **Success/Error (`.is-success` / `.is-error`):** temporary feedback styles driven by `--text-success`/`--text-error`, always paired with an icon and/or text change — never color alone.

**2.2 Cards**
- **Default:** paper-scrap base — `--bg-secondary`, torn edge via `clip-path` polygon, slight rotation, tape pseudo-element; because `clip-path` clips box-shadows, use `filter: drop-shadow()` so the shadow follows the torn silhouette.
- **Hover:** `transform: translateY(-2px)` with rotation settling to 0deg and a shadow shift.
- **Focus-within:** border/highlight change when a child link or button receives focus.
- **Loading (Skeleton):** define shimmer keyframe classes for testimonial cards to prevent layout jumps.
- **Empty State:** define a fallback pattern — a Material Symbol plus short guidance copy.
- **Featured modifier (`.card--featured`):** primary border, raised shadow/scale, tape badge — used for the middle pricing tier.

**2.3 Forms & Inputs** (Final CTA email capture + modal contact field)
- **Structure:** `.input-group` flex container wrapping a tape-styled label (Special Elite), the input, and a dedicated `.input-error` feedback container.
- **States:** empty; focused (visible ring via CSS variables); filled; valid (success border + `check` icon); invalid (error border + error icon + specific error text); disabled; read-only.
- **Behavior:** JS validates on submit and blur; the error container has `aria-live="polite"` and is linked to the input via `aria-describedby`; on success, show an inline confirmation announcement and route the button through `.is-loading` → `.is-success`. Zine-voiced error copy is encouraged ("That email looks torn — try again?").

**2.4 Modal / Popup** (FAQ "Still have questions?" contact modal)
- **States:** opening (scale 0.96→1 + fade), open, loading (submitting), success/error (inline feedback), closing (reverse transition) — all CSS-animated.
- **UX:** centered flex container (`align-items: center; justify-content: center`), dimmed backdrop overlay at `--z-modal`, Material Symbol `close` button, focus trapping (Tab/Shift+Tab cycle), close via `Esc` and overlay click, focus returns to the trigger, body scroll locked. `role="dialog"`, `aria-modal="true"`, `aria-labelledby`. Reduced motion: fade only.

**2.5 FAQ Accordion**
- Each item: a full-width flex `<button>` trigger (question text + `expand_more` icon that rotates 180deg) and a content panel.
- ARIA: trigger has `aria-expanded` + `aria-controls`; panel has `role="region"` + `aria-labelledby`.
- Animate height with the CSS Grid `0fr → 1fr` rows technique (no JS height measuring); items toggle independently; native button keyboard behavior preserved; visible focus states.

---

## 3. CORE UX & MICRO-INTERACTION RULES

- **Responsive by default:** fluid `clamp()` sizing, breakpoints without horizontal overflow from 320px up.
- **Smooth animations:** transitions on all state changes via the motion tokens; keyframes for float, marquee, shimmer, and spinner. Under `prefers-reduced-motion: reduce`, stop floats/marquee, shorten transitions, and keep feedback non-animated.
- **Accessibility (a11y):** AA contrast in both themes; never rely on color alone to communicate state; semantic HTML5 with a single `<h1>` and logical heading order; a skip-to-content link; correct ARIA on the theme toggle, menu, accordion, and modal; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, modal status, and CTA confirmations.
- **Mandatory visual feedback:** every click, hover, and submission triggers a visible state change.
- **Destructive actions:** `.btn-danger` must be visually distinct in both light and dark themes.
- **Blend & layer guard:** text must never sit beneath a blend layer that reduces its contrast; decorative layers are `aria-hidden` and `pointer-events: none`; animate only `transform` and `opacity`.

---

## 4. DELIVERABLE & OUTPUT FORMAT

- **Files:** separate `index.html`, `style.css`, `script.js`. No inline `<script>` blocks beyond a single deferred `script.js` reference; zero inline styles.
- **Naming:** BEM throughout (`block__element--modifier`, e.g., `.hero__title`, `.card--featured`, `.faq__panel`). Never mix conventions.
- **Copy:** author real English copy in the zine voice for every section — realistic testimonial names and roles, plausible tier pricing, five genuine FAQ questions. No lorem ipsum.
- **Head:** Google Fonts and Material Symbols `<link>` tags with `preconnect`.
- **Self-check before finishing:** both themes pass contrast; the theme toggle persists across reloads; a keyboard-only walkthrough works end-to-end (menu → anchors → FAQ → modal → email form); a 320px viewport shows no horizontal overflow.