Pin & Paper demo
Pin & Paper

A tactile scrapbook aesthetic pairing saturated yellow and cream paper-grain backgrounds with ink-blue handwritten Caveat typography, safety-pin illustrations, and rust-red accents.
Category: Art & Illustration
Era: 2020s Modern
Prompt: 18.3 KB · 2538 words
# BUILD PROMPT — "PIN & PAPER" HANDCRAFTED LITERARY LANDING PAGE

**Role & Objective.** You are a Senior Frontend Engineer and Expert UI Designer. Build a complete, production-ready, fully interactive single-page marketing site for **Pin & Paper** — a fictional handcrafted stationery & journaling subscription studio — in a **single attempt**. No TODOs, no lorem ipsum, no "add your content here". The experience must feel handcrafted, literary, paper-grained, and intimate — deliberately *not* digital-polished (2020s modern editorial layout). All user-facing copy must be authored in **English**.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling must live in a dedicated `style.css`. The `style="..."` attribute is **forbidden** anywhere in the HTML.
* All design properties, layout rules, and state styles must be targeted exclusively via class or ID selectors.
* HTML must remain clean, semantic, and style-agnostic: changing the entire look must require editing only `style.css`, never the markup. Decorations (grain, safety pins, ruled lines, stitched borders) must be implemented via CSS backgrounds, `mask-image`, and pseudo-elements — never as extra decorative HTML nodes (any unavoidable decorative element must be empty and `aria-hidden="true"`).

**1.2 CSS Variables & Theme Tokens**
Store every visual token in `:root` (light) and a `.dark` class (dark). Required names — light theme values:

```css
:root {
  --primary: #1F3A8A;          /* deep ink — actions, links */
  --secondary: #C2342B;        /* safety-pin red — accents, danger */
  --bg-primary: #F5E8A0;      /* aged yellow paper */
  --bg-secondary: #F8F1D6;    /* cream — cards, alternating sections */
  --bg-accent: #EFE56A;       /* paper yellow — highlight panels, featured card, chips (constant in both themes; always pairs with ink text) */
  --text-primary: #1A2550;    /* ink blue */
  --text-secondary: #4A5578;  /* muted ink */
  --text-success: #4F6B3A;    /* moss */
  --text-error: #C2342B;
  --border-default: #D4C060;  /* aged paper edge */
  --border-error: #C2342B;
  --border-success: #4F6B3A;
  --text-on-primary: #F8F1D6; /* text on --primary surfaces */
  --focus-ring: #1F3A8A;
  --font-display: 'Caveat', cursive;
  --font-base: 'Lora', Georgia, serif;
  --radius-sm: 4px; --radius-md: 10px; --radius-lg: 18px;
  --shadow-sm: 0 1px 3px rgba(26, 37, 80, 0.14);
  --shadow-md: 0 6px 18px rgba(26, 37, 80, 0.18);
  --spacing-gap: 1.25rem;
  --transition-fast: 200ms; --transition-normal: 320ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --z-header: 900; --z-dropdown: 1000; --z-modal: 2000; --z-toast: 3000;
  --header-height: 72px;
  --grain-image: url("data:image/svg+xml,..."); /* feTurbulence noise, authored by you, ink speckle at ≤8% opacity */
}
```

Dark theme ("Midnight Manuscript") overrides under `.dark`:

```css
.dark {
  --bg-primary: #141B33;  --bg-secondary: #1E2946;
  --text-primary: #F5E8A0; --text-secondary: #C6CC9B;
  --primary: #EFE56A;    --text-on-primary: #1A2550;
  --secondary: #E2574B;
  --text-success: #9DBB7A; --border-success: #9DBB7A;
  --text-error: #E2574B;  --border-error: #E2574B;
  --border-default: #3A4468; --focus-ring: #EFE56A;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.5);
}
```

* **Contrast pairing is mandatory in every theme:** light background tokens pair with dark text tokens, dark background tokens with light text (e.g., dark-mode buttons are paper-yellow `--bg-accent`/`--primary` surfaces carrying ink `#1A2550` text).
* Never use pure white. If a near-white surface is needed anywhere, use `#fefefe`, not `#ffffff`.
* Apply `--bg-accent: #EFE56A` panels/featured cards identically in both themes — yellow is light, so it must always carry ink text.

**1.3 Mandatory Dark Mode Support**
* Define the dark tokens above under both a `.dark` class **and** `@media (prefers-color-scheme: dark) { :root:not(.light) { … } }` so no-JS visitors still receive dark mode, while an explicit class always wins.
* A visible toggle in the header (Google Material Symbol `dark_mode` / `light_mode`) must carry `aria-pressed` and a descriptive `aria-label`; the choice persists via `localStorage`, falling back to `prefers-color-scheme` on first visit.
* All backgrounds and text must switch purely through variables — zero HTML restructuring, zero duplicate stylesheets.
* **Exception:** the source spec marks dark mode as "None" — honor that intent by making the aged-paper light theme the default, but the mandatory dark variant above must still ship with the same toggle, persistence, and contrast guarantees.

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build every layout structure with Flexbox. Every flex container **must default to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., stretch-to-equal-height pricing columns).
* Mobile-first: multi-column rows (features, steps, testimonials, pricing, footer columns) collapse to a single column below 768px; fluid type via `clamp()`; **horizontal scrolling is forbidden** (guard rotated paper notes with section padding so ±2° rotations never overflow the viewport).

**1.5 Styling Approach — Tailwind-Conformant Custom CSS**
* Because the HTML may reference only one script (see Section 5), do not use the Tailwind CDN. Author `style.css` as clean custom CSS organized in native cascade layers mirroring Tailwind's philosophy: `@layer base`, `@layer components`, `@layer utilities`.
* `@layer components` must define the generic reusable classes `.btn`, `.card`, `.input-group` plus all BEM blocks; every utility/helper must map back to the CSS variables above. No arbitrary magic numbers for colors, spacing, or motion.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load via `<link>` (with `preconnect`): **Caveat** (weights 400–700) bound to `--font-display`, and **Lora** (400–700, italics) bound to `--font-base`. Caveat is reserved for display per the source spec ("Caveat for hero headlines"): h1/h2, button labels (≥1.25rem, weight 600), section tag notes, and handwritten annotations. Lora is used for all body copy, nav links, form labels, FAQ questions, and prices — handwriting fonts are never used for long-form reading text.
* Load **Google Material Symbols Rounded** for every functional icon. Raw inline `<svg>` elements and local icon files are **forbidden**.
* **Exception:** the source spec explicitly demands safety-pin SVG illustrations and paper-grain SVG texture — these are permitted *only* as SVG data-URIs authored inside `style.css` (via `background-image` / `mask-image` / pseudo-elements, colored with token colors or `currentColor` so pins adapt per theme); inline `<svg>` tags in HTML remain forbidden, and all functional UI icons must be Google Material Symbols.

**1.7 Theme-Specific Art Direction (Pin & Paper)**
* **Paper grain:** body background layers `var(--bg-primary)` + `var(--grain-image)` (an `feTurbulence` noise data-URI, speckle opacity ≤ 8% so it reads on both themes); cards may take a fainter grain pass.
* **Safety pins:** each pinned element (hero badge, section tags, testimonial notes, featured pricing card, modal panel) receives a pin via a CSS `mask-image` data-URI pseudo-element colored `var(--secondary)` (red-head pin) or ink, positioned at the tag's top edge.
* **Handcraft details:** `1px solid var(--border-default)` paper edges; stitched/dashed borders on note-style cards; faint notebook rule lines via `repeating-linear-gradient` on hero paper sheets; paper tags and testimonial notes rotated ±1–2°; slight `transform: rotate` shifts on hover for playful paper feel.
* **Hover language (from source spec):** interactive controls (`.btn`, links, tags) use `opacity: 0.8` over `var(--transition-fast)` (200ms) with `cursor: pointer`.
* **Exception (justified):** large cards must not use the opacity-0.8 hover because it would wash out body-text contrast; their hover feedback is elevation + `translateY(-2px)` instead.
* **Refined focus rings:** every interactive element uses `:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 3px; }` — never remove focus indicators.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons**
* `.btn` base: `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` Caveat label ≥1.25rem, minimum touch target 44×44px, `border-radius: var(--radius-sm)`.
* Variants: `.btn--primary` (`--primary` bg + `--text-on-primary`), `.btn--secondary` (transparent bg, 1px ink border — "ink stamp"), `.btn--danger` (red `--secondary`/error tokens — must be clearly distinct in **both** themes), `.btn--ghost` (text link with arrow Material Symbol).
* **Hover:** `opacity: 0.8` + subtle lift, 200ms. **Focus:** ring per 1.7. **Active:** `transform: scale(0.97)`.
* **Loading (`.is-loading`):** `aria-busy="true"`, pointer events disabled to prevent double-clicks, label fades to `opacity: 0`, an absolutely-centered CSS spinner (border-based ring) appears — button dimensions must not change.
* **Disabled:** `opacity: 0.5`, `filter: grayscale(1)`, `cursor: not-allowed`, no hover effects.
* **Success/Error:** temporary `.is-success` / `.is-error` states swap in Material Symbols `check_circle` / `error` with `--text-success` / `--text-error` coloration; feedback is icon + text, never color alone.

**2.2 Cards**
* `.card` base: Flexbox column (with justified stretch exception where equal heights are needed), `--bg-secondary` surface, `1px solid var(--border-default)`, `--radius-md`, `--shadow-sm`.
* **Hover (interactive cards):** `--shadow-md` + `translateY(-2px)` over `var(--transition-fast)`. **Focus-within:** border shifts to `--focus-ring` when a child link/button is focused.
* **Skeleton:** define `.skeleton` shimmer (`linear-gradient` sweep keyframes, fixed line-height placeholders so nothing jumps) in CSS, ready for any async content.
* **Empty state:** define `.card--empty`: Material Symbol + one line of guidance text, centered flex.
* Theme variants: `.card--feature`, `.card--pricing`, `.card--pricing--featured` (paper-yellow `--bg-accent`, ink text, raised, "most loved" pinned tag), `.card--testimonial` (pinned note, rotated ±1°).

**2.3 Forms & Inputs**
* `.input-group` structure: flex container wrapping a visible `<label>`, the input, and a dedicated error container `.input-group__error`.
* States — **Empty** (cream field, `--border-default`), **Focused** (focus ring), **Filled**, **Valid** (`--border-success` + trailing `check_circle` icon), **Invalid** (`--border-error`, red helper text + `error` icon, `aria-invalid="true"`, input `aria-describedby` pointing at the error id, message announced via an `aria-live="polite"` region), **Disabled** (per 2.1), **Read-only** (dashed border, muted text).
* Placeholders render in Caveat (`--font-display`, muted ink) for handwritten charm.

**2.4 Modal / Dialog**
* Triggered by hero, pricing, and nav CTAs ("Reserve your first kit": name + email `.input-group`s + submit).
* **States:** Opening (backdrop fade + panel `translateY`/scale via CSS transitions), Open, Loading (submit button `.is-loading`, ~900ms simulated async), Success (form swaps to `check_circle` + Caveat thank-you note, toast fires), Error (inline invalid feedback), Closing (reverse animation, respects reduced motion).
* `role="dialog"`, `aria-modal="true"`, `aria-labelledby`; centered flex overlay with dimmed ink backdrop; Material Symbol `close` button with `aria-label="Close dialog"`; keyboard **focus trap** (Tab/Shift+Tab cycle), closes on **Esc** and overlay click, focus returns to the trigger, body scroll locked, stacking at `--z-modal`.

**2.5 FAQ Accordion**
* Pattern: `<h3><button class="faq__trigger" aria-expanded="…" aria-controls="…">` + panel (`role="region"`, `aria-labelledby`). CSS height transition (grid-rows or max-height technique); one panel open at a time; fully keyboard operable; `aria-expanded` always reflects state; icon (`expand_more` Material Symbol) rotates — state is conveyed by icon rotation **and** `aria-expanded`, not color alone.

**2.6 Navigation, Theme Toggle & Toast**
* Sticky header (`z-index: var(--z-header)`), cream paper surface, bottom paper border; logo in Caveat; anchor links; theme toggle (per 1.3); CTA button.
* Mobile: hamburger (`menu` symbol) with `aria-expanded`/`aria-controls`, panel at `--z-dropdown`, closes on Esc and link selection, focus managed into the panel.
* `.toast`: paper-note card, bottom-right, `role="status"` inside a persistent `aria-live="polite"` region, auto-dismisses in 4s, dismiss button with `close` icon + `aria-label`, stacking at `--z-toast`.
* Anchor targets get `scroll-margin-top: calc(var(--header-height) + 1rem)`; smooth scrolling only when motion is allowed.

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` typography, single breakpoint strategy (~768px), zero horizontal overflow.
* **Smooth animations:** every state change uses `transition: var(--transition-normal)` (or `--transition-fast` for hover), and the following block is mandatory:
```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
```
* **Accessibility:** text contrast ≥ 4.5:1 in **both** themes; never color alone for state; semantic HTML5 landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); single `h1`, logical h2→h3 order; visible skip link; logical DOM/focus order; full keyboard operability; `aria-live` regions for form errors, toasts, and loading feedback.
* **Mandatory visual feedback:** every click, hover, toggle, and submission triggers a visible state change.
* **Progressive enhancement:** all content is visible and usable without JS; a scroll-reveal effect (`.reveal` → `.is-visible` via IntersectionObserver) only initializes when the user has no reduced-motion preference.
* **No external images:** all visuals are CSS, data-URI SVG, and Material Symbols only.

---

## 4. PAGE COMPOSITION & REQUIRED CONTENT (WRITE THIS COPY — NO LOREM IPSUM)

**4.1 Header:** Logo "Pin & Paper" (Caveat, tiny pin mark) · links: Features, How it works, Testimonials, Pricing, FAQ · theme toggle · `.btn--primary` "Start writing" (opens modal).

**4.2 Hero (`#hero`):** pinned paper-tag eyebrow "handmade · small-batch · slow" · h1 (Caveat, `clamp(3rem, 7vw, 5.5rem)`): **"Pin your story to paper."** · sub (Lora): "Pin & Paper is a monthly stationery ritual for people who still think in ink — archival paper, gentle prompts, and a quiet place to keep every page you've ever pinned." · CTAs: primary "Start writing" (modal) + secondary anchor "See how it works" · Caveat footnote "first kit ships in a paper envelope, always" · CSS-only visual: layered rotated paper sheets with ruled lines, a pinned tag, safety pins.

**4.3 Features (`#features`) — 3 `.card--feature`:** h2 "Made slowly, by hand". (1) `history_edu` — "Paper with a pulse" — 120gsm cotton-blend sheets that take fountain ink without a whisper of bleed, cut and packed by hand. (2) `tips_and_updates` — "Prompts that whisper" — twelve gentle prompts a month; no streaks, no pressure, one honest page. (3) `push_pin` — "Pin & keep" — scan any page with the companion app and pin it to your private, searchable archive.

**4.4 How It Works (`#how-it-works`) — 3 steps** joined by a dashed "stitch" line (hidden on mobile): `local_post_office` "01 · Receive your kit" · `edit` "02 · Write by hand" · `document_scanner` "03 · Pin it forever".

**4.5 Testimonials (`#testimonials`) — 3 pinned notes** (rotated, red safety pin): "I bought it for the paper. I stayed for the quiet." — Mariana E., novelist · "It's the only subscription that doesn't want my attention — just my handwriting." — Jonah R., teacher · "Three years in, my archive is the book I always meant to write." — Priya S., night-shift nurse. Quotes in Lora italic; attributions in Caveat; initials in paper-yellow circles.

**4.6 Pricing (`#pricing`) — 3 tiers:** Loose Leaf $9/mo (prompts, printable pack, 50-page archive) · **The Folio $24/mo — featured, `.card--pricing--featured`, paper-yellow, pinned "most loved" tag** (full stationery kit, journal refill, unlimited archive, quarterly letterpress print) · The Anthology $48/mo (monthly letterpress art print, reading circles, hand-pinned surprise, priority post). Buttons open the modal; footnote "Cancel anytime. Pause whenever. The ink forgives." Feature lists pair `check` icons with text.

**4.7 FAQ (`#faq`) — 6 accordion items:** paper weight & fountain-pen friendliness · shipping timing (first kit in 5 business days, worldwide) · pause/cancel anytime, archive retained · app optional and ad-free · gift subscriptions with a handwritten note · international flat-rate shipping.

**4.8 Final CTA (`#cta`):** paper-yellow panel, h2 (Caveat) "Your next chapter is pinned & waiting." · newsletter `.input-group` (label "Email address", Caveat placeholder "you@somewhere.quiet") + `.btn--primary` "Save my spot" · footnote "One letter a month. Unsubscribe with one click." · full form states per 2.3, inline success + toast.

**4.9 Footer:** inverted deep-ink surface (`#141B33` in light theme, slightly lifted in dark) with aged-paper text (pairing rule respected). Brand blurb + tagline · "Explore" (Features, How it works, Pricing, FAQ) · "Studio" (About, Journal, Contact, Gift cards) · "Fine print" (Privacy, Terms, Accessibility, Shipping) · `mail` icon link "hello@pinandpaper.co" · bottom line "© 2025 Pin & Paper Studio. Made slowly, by hand." in Caveat.

---

## 5. DELIVERABLE & OUTPUT FORMAT

* Exactly three files: `index.html`, `style.css`, `script.js`. The HTML contains **one** script reference only: `<script src="script.js" defer></script>`. No inline script blocks, no inline styles, no inline event handlers — all JS via `addEventListener` in `script.js`.
* `script.js` implements: theme persistence/toggle, mobile menu, FAQ accordion, modal with focus trap, email validation with live feedback, loading/success/error button states, toasts, and motion-safe scroll reveals.
* **Naming convention:** strict BEM only (`.btn`, `.btn--primary`, `.card__title`, `.pricing-card--featured`, `.input-group__error`, `.faq__trigger`, …) — never mix conventions.
* **Placeholders:** none — the copy in Section 4 is real and final; render it verbatim (minor in-voice polish allowed). No lorem ipsum anywhere.
* `<html lang="en">`, viewport meta, title "Pin & Paper — Handcrafted stationery for slow writers", meta description. Deliver the complete, working code for all three files in one response.