Paper & Ink demo
Paper & Ink

A refined editorial aesthetic evoking printed books and literary magazines, with paper textures, ink-toned typography, and elegant serif layouts.
Category: Luxury & Editorial
Era: Timeless Print Classic
Prompt: 16.9 KB · 2350 words
# SYSTEM PROMPT — CODING AGENT ASSIGNMENT

## Project: "Paper & Ink" Editorial Landing Page — Luxury & Editorial

**Role:** Act as a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page described below on the **first attempt** — production-ready, fully functional, no unresolved placeholders.

**Mission:** Create a complete Landing Page with the theme **Paper & Ink** (Editorial, Literary, Thoughtful, Elegant — Classic Literary + 2024 Modern). Required sections: **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
* **No Inline CSS:** The `style="..."` attribute is **forbidden** anywhere in the HTML.
* **Class/ID 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 (HTML5 landmarks: `header`, `nav`, `main`, `section`, `footer`), and agnostic of visual styling. Changing the site's look must require editing only the CSS file.

### 1.2 CSS Variables & Theme Tokens
Store **all** visual tokens in `:root` (and theme blocks). No raw hex values may appear in component rules — only inside token definitions:

```css
:root {
  /* Paper & Ink palette (light — default) */
  --primary: #c41e3a;          /* Crimson accent */
  --primary-hover: #a51830;
  --secondary: #8b7355;        /* Soft brown */
  --bg-primary: #faf9f7;       /* Warm cream */
  --bg-secondary: #f5f3ef;     /* Light cream */
  --text-primary: #1a1a1a;     /* Charcoal */
  --text-secondary: #666666;  /* Medium grey */
  --text-success: #2e6b4f;     /* Deep ink green */
  --text-error: #a4243b;       /* Deep crimson, distinct from accent */
  --border-default: #e4dfd5;  /* Warm hairline */
  --border-error: #a4243b;
  --border-success: #2e6b4f;

  /* Typography */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-base: 'Source Serif 4', Georgia, serif;

  /* Shape, depth, motion, stacking */
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px;
  --shadow-sm: 0 1px 8px rgba(26, 26, 26, 0.05);
  --shadow-md: 0 8px 24px rgba(26, 26, 26, 0.08);
  --spacing-gap: 1.5rem;
  --transition-fast: 150ms;
  --transition-normal: 300ms;  /* "page-like transitions" per spec */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --z-dropdown: 100; --z-modal: 200; --z-toast: 300;
}
```

* **Contrast Pairing:** Every light background token must pair with a dark text token and vice versa — enforce in **every** theme, not just the default.
* **No Pure White:** Never default to `#ffffff`; where a near-white is needed, use `#fefefe`. (The cream palette already satisfies this — do not introduce white anywhere.)
* Editorial note: keep radii subtle (sharp, print-like corners), shadows whisper-soft and warm-tinted.

### 1.3 Mandatory Dark Mode Support
* **Implementation:** Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class selector. Background and text variables must switch seamlessly with **no HTML restructuring**.
* **Persistence:** Store the user's choice in `localStorage`; fall back to `prefers-color-scheme` on first visit. Provide a **visible toggle** in the header with correct `aria-pressed` and `aria-label` state.
* **Midnight Ink variant (dark):** `--bg-primary: #171412; --bg-secondary: #1f1b18; --text-primary: #f2ecdf; --text-secondary: #b5aca0; --primary: #d4576a; --secondary: #a08b6f; --border-default: rgba(242,236,223,0.16)` — an aged-paper-on-charcoal mood that preserves the literary character. Verify AA contrast in both themes.
* **Exception (explicit):** The source style spec marks this theme "Light: Full / Dark: No" — dark mode remains mandatory per platform standards; implement it as the Midnight Ink variant above, keep the toggle visible, and treat **light mode as the default on first visit**.

### 1.4 Flexbox Layout & Mobile-First Alignment
* Build all layout structures 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 exists (e.g., `stretch` for equal-height card rows — document the exception in a CSS comment).
* **Mobile-Friendly First:** All flex rows must collapse to columns on small viewports. **No horizontal scrolling at any breakpoint.** Use fluid `clamp()` sizing and a prose measure of ~60–65ch for body text.

### 1.5 Framework Default & Tailwind CSS Integration
* Use **Tailwind CSS** (Play CDN is acceptable) for layout utilities (flex, grid, spacing, responsive breakpoints).
* Configure Tailwind colors/fonts to reference the CSS variables. All visual design (colors, typography, effects, states) must live in reusable component classes (`.btn`, `.card`, `.input-group`, `.modal`, `.toast`) defined via `@layer components` — never as scattered one-off utilities.

### 1.6 Typography & Icons (Google Fonts Mandatory)
* **Text:** Load **Cormorant Garamond** (display/headings) and **Source Serif 4** (body) via Google Fonts `<link>`. Bind to `--font-display` and `--font-base`.
* **Icons:** Use **Google Material Symbols** (Outlined, FILL 0, weight 200–300 for elegance). **Raw inline SVGs and local icon files are forbidden.**
* Typographic ornaments (Unicode glyphs such as ❦ ❧ ✦) are permitted as **text characters**, not icon assets — they are part of the literary typography.

---

## 2. COMPONENT DESIGN SPECIFICATIONS

### 2.1 Button Component (`.btn`, `.btn--primary`, `.btn--ghost`, `.btn--danger`)
Style **all** states via CSS classes:
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` — minimum touch target **44×44px**. Labels: uppercase, letter-spacing `0.08em`, small size, consistent across all buttons.
* **Hover:** Brightness/shadow shift with `cursor: pointer` (crimson darkens to `--primary-hover`).
* **Focus:** Distinct focus ring via `outline`/`box-shadow` using CSS variables — clearly visible on cream in light mode and charcoal in dark mode.
* **Active/Pressed:** `transform: scale(0.97)`.
* **Loading:** Disables interaction, prevents double-clicks, renders a CSS spinner or animated Material Symbol **without distorting button dimensions**.
* **Disabled:** `opacity: 0.5`, greyscale, `cursor: not-allowed`.
* **Success/Error:** Temporary feedback states driven by `--text-success` / `--text-error`, always paired with an icon or text — never color alone.
* **`.btn--primary`:** crimson fill, cream text. **`.btn--ghost`:** hairline charcoal border, transparent background. **`.btn--danger`:** visually distinct in both light and dark themes (define it in the design system even if lightly used).

### 2.2 Card Component (`.card`)
* **Default:** Flexible flexbox layout on `--bg-secondary` (or cream with `--border-default` hairline), `--radius-md`, `--shadow-sm`.
* **Hover:** `transform: translateY(-2px)` and elevation shift to `--shadow-md`.
* **Focus-within:** Card border highlights (crimson hairline) when a child link/button receives focus.
* **Loading (Skeleton):** Shimmer animation defined purely in CSS to prevent layout jumps.
* **Empty State:** Structured fallback with a Google Material Symbol icon and clear guidance text.
* Apply to Features cards, Pricing cards, and Testimonial cards; equal heights via `align-items: stretch`.

### 2.3 Form & Input (`.input-group`)
* **States:** Empty, Focused (crimson outline ring), Filled, Valid (success border + icon), Invalid (error border, error text, error icon), Disabled, Read-only.
* **Structure:** Flex container wrapping a `<label>`, the input field, and a dedicated error-feedback element with `aria-live="polite"`.
* Inputs: cream background, `--border-default` hairline, Source Serif 4 text. Apply to the Final CTA email capture.

### 2.4 Modal / Popup (`.modal`)
* **States:** Opening, Open, Loading, Success/Error, Closing — all animated with `var(--transition-normal)` (fade + subtle scale).
* **UX:** Centered flex container (`align-items: center`), charcoal backdrop overlay (~60% opacity), close button using a Google Material Symbol, **keyboard focus trapping**, restore focus to the trigger on close, closable via `Esc` and overlay click, `role="dialog"` + `aria-modal="true"`.
* **Concrete instance:** Testimonial cards include a "Read the full letter" action that opens this modal with the complete testimonial.

### 2.5 Toast (`.toast`)
* Minimal toast pattern for submit feedback: fixed position, `--z-toast` stacking, `aria-live` announcement, auto-dismiss, 300ms entrance/exit, styled to theme (cream card, hairline border, Material Symbol status icon).

---

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by Default:** Fluid sizing, standard breakpoints, zero horizontal overflow.
* **Smooth Animations:** `transition: var(--transition-normal)` on all state/reveal changes; `--transition-fast` for hovers. **Respect `prefers-reduced-motion`** — disable transforms, scroll reveals, and shimmering; keep opacity-only changes.
* **Scroll Reveals:** Sections/elements reveal with a subtle fade-up (~12px, 300ms) via IntersectionObserver adding an `is-visible` class; staggered by 60–80ms within groups.
* **Accessibility (a11y):** WCAG AA contrast in **both** modes (crimson text must be large/semibold or paired with charcoal). Never rely on color alone — pair with icons, text, or borders. Semantic HTML5, correct ARIA roles/labels on custom widgets (accordion, modal, toggle, mobile menu), logical DOM/focus order, **full keyboard operability**, visible skip link, and `aria-live` regions for form errors, toasts, and loading states.
* **Mandatory Visual Feedback:** Every click, hover, and submission triggers a visible state change.
* **Destructive Actions:** `.btn--danger` must be visually distinct in both themes.

---

## 4. DELIVERABLE & OUTPUT FORMAT

* **File Structure:** Separate `index.html`, `style.css`, and `script.js`. No inline `<script>` blocks beyond a single deferred entry-point reference (`<script src="script.js" defer>`). No inline styles. No inline event handlers.
* **Naming Convention:** **BEM** (`block__element--modifier`) consistently across the entire deliverable — never mix conventions.
* **No Unrequested Placeholders:** **Lorem ipsum is forbidden.** Author all user-facing copy in **English** with a polished, literary, editorial voice (see 5.5). Every button, heading, error message, and FAQ answer must be real, finished copy.
* **Completeness:** The page must be fully functional and runnable on the first attempt — all eight sections, all interactions, both themes.

---

## 5. THEME SPECIFICATION — "PAPER & INK" (Luxury & Editorial)

### 5.1 Design Language
Editorial, literary, thoughtful, elegant — Classic Literary meets 2024 Modern. Generous whitespace, narrow prose measure, strong typographic hierarchy, hairline rules, restrained ornamentation. **No** glassmorphism, neon, or heavy gradients — the only gradient permitted is the fading horizontal rule.

### 5.2 Signature Editorial Effects (CSS-only, variable-driven)
* **Drop Caps:**
```css
.drop-cap::first-letter {
  font-size: 4em; float: left; line-height: 0.8;
  padding-right: 8px; font-family: var(--font-display);
  color: var(--primary);
}
```
Apply to the Hero lede and to one intro paragraph per major prose section. Provide a smaller mobile fallback.
* **Pull Quotes:**
```css
.pull-quote {
  font-family: var(--font-display); font-size: 1.5em;
  font-style: italic; border-left: 3px solid var(--primary);
  padding-left: 20px;
}
```
Use for featured testimonials and at least one interlude quote between sections.
* **Elegant Horizontal Rules:**
```css
hr.elegant { border: none; height: 1px;
  background: linear-gradient(to right, transparent, var(--text-primary), transparent); }
```
Add an ornament variant (`hr.elegant--ornament`) with a centered crimson Unicode fleuron (❦) sitting on the line — used as the divider between major sections.
* **Page-like Transitions:** All reveals and state changes run at 300ms with `--ease-standard`, evoking the turning of a page.

### 5.3 Typography Scale & Hierarchy
* **Hero display:** Cormorant Garamond, `clamp(2.75rem, 7vw, 5rem)`, weight 500–600, line-height ~1.05, with one key word in crimson italic (via a class, never inline styles).
* **H2:** `clamp(2rem, 4vw, 3rem)` Cormorant. **H3:** 1.5rem Cormorant.
* **Eyebrow labels:** uppercase, `letter-spacing: 0.18em`, 0.75rem, `--text-secondary` or crimson.
* **Body:** Source Serif 4, ~1.0625rem, line-height 1.75.
* **Numerals** (step numbers, prices): Cormorant Garamond.

### 5.4 Color Application
Warm cream backgrounds, charcoal text, crimson **reserved for accents** (drop caps, key words, primary CTA, featured pricing border, ornament rules), soft brown for secondary accents (step numerals, icons, meta text). Dark mode swaps to the Midnight Ink variant with identical accent discipline.

### 5.5 Content & Voice
* **Product concept:** A premium literary writing & publishing studio (suggested brand: **"Folio"** — or choose an equally elegant name). The page sells the craft of beautiful writing.
* **Voice:** Measured, literary, confident — like a fine publishing house. **Forbidden:** marketing clichés ("supercharge", "unlock", "game-changing", "10x").
* **Suggested anchors:** Hero headline in the spirit of *"Every great story deserves fine paper."*; pricing tiers named **The Quire / The Folio / The Colophon** (middle tier featured); How It Works steps as *Draft → Refine → Publish*. Write all remaining copy (features, testimonials from authors, 5–6 FAQs, footer manifesto) in the same voice.

---

## 6. PAGE STRUCTURE — SECTION-BY-SECTION SPEC

### 6.0 Global Shell & Header
Skip link → sticky header on `--bg-primary` with hairline bottom border: Cormorant wordmark, nav links (Features, How It Works, Testimonials, Pricing, FAQ), theme toggle (Material Symbol, `aria-pressed`), header CTA (`.btn--primary`, compact). Mobile: accessible disclosure menu (`aria-expanded`, animated panel, `--z-dropdown`). Sections separated by `hr.elegant--ornament`; generous vertical rhythm (`clamp(4rem, 10vh, 7rem)` padding).

### 6.1 Hero
Eyebrow label → display headline with crimson italic accent word → lede paragraph with **drop cap** → two CTAs (`.btn--primary` "Begin your manuscript" + `.btn--ghost` secondary) → supporting meta line (e.g., edition/trust flourish). Staggered 300ms entrance reveals.

### 6.2 Features — 3 Cards
Section header (eyebrow + H2 + short intro). Three equal-height `.card` elements: Material Symbol icon (soft brown), Cormorant H3, 2–3 sentences of Source Serif body, crimson underlined "Learn more" text link. Full card state spec per 2.2. Column stack on mobile.

### 6.3 How It Works — 3 Steps
Three steps with oversized Cormorant numerals **01 / 02 / 03** (soft brown), hairline connector rules between steps (horizontal on desktop, vertical on mobile), each with H3 + body copy. Staggered scroll reveals.

### 6.4 Testimonials
A featured `.pull-quote` plus 2–3 testimonial cards: italic Cormorant quote, small-caps attribution in `--text-secondary`, and a "Read the full letter" trigger opening the modal (spec 2.4).

### 6.5 Pricing — 3 Tiers
Three `.card` tiers: tier name (Cormorant), large Cormorant price + period, feature list with Material Symbol check icons (soft brown), per-tier CTA. **Middle tier featured:** crimson hairline border, "Most Cherished" badge, slight elevation. Clicking a CTA triggers the full button loading → success lifecycle (spec 2.1) with toast confirmation (spec 2.5).

### 6.6 FAQ
5–6 accessible accordion items: `<button>` with Cormorant question + rotating Material Symbol `expand_more` (300ms), answer region in Source Serif animated via CSS (`grid-template-rows: 0fr → 1fr` technique). `aria-expanded`/`aria-controls`, fully keyboard operable.

### 6.7 Final CTA
Centered composition: ornament rule → display headline → short lede → email-capture `.input-group` (label, input, submit button) with full validation states (spec 2.3), `aria-live` inline status, simulated submit (loading 300ms+ → success confirmation + toast), privacy microcopy beneath.

### 6.8 Footer
On `--bg-secondary` with hairline top border: brand wordmark + one-line manifesto, secondary link columns (**Explore:** Features / How It Works / Pricing / FAQ; **Company:** About / Journal / Contact; **Legal:** Privacy / Terms), social icons (Material Symbols with `aria-label`). Bottom bar: dynamic copyright year + "Back to top" smooth-scroll link (reduced-motion aware).

### 6.9 JavaScript Behavior (`script.js`)
Implement: theme toggle with `localStorage` persistence and `prefers-color-scheme` fallback (light default per 1.3 exception); mobile menu; FAQ accordion; modal (focus trap, `Esc`, overlay click, focus restore); IntersectionObserver scroll reveals (reduced-motion aware); newsletter validation + simulated submit lifecycle; toast system; smooth anchor scrolling; dynamic footer year. All behavior progressive-enhancement friendly and keyboard safe.

---

**Build the entire deliverable now, in one complete pass — semantic HTML, token-driven CSS, and behavior script — polished to a luxury editorial standard.**