E-Ink / Paper demo
E-Ink / Paper

A monochrome, paper-like interface with high-contrast grayscale tones, flat surfaces, and clean typography that mimics the look of an e-reader display.
Category: Minimalism & Swiss
Era: 2020s Modern
Prompt: 16.3 KB · 2258 words
# CODING AGENT PROMPT — Build a Complete "E-Ink / Paper" Landing Page (First Attempt, Production-Ready)

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete landing page in one attempt. No follow-up questions, no TODOs, no partial output. The deliverable must run by simply opening `index.html`.

**Theme — E-Ink / Paper:** Paper-like, matte, high-contrast, monochrome, reading-focused, calm "slow tech" aesthetic (2020s digital well-being era). The page must feel like a beautifully typeset document printed on matte paper: ink-black text on off-white stock, hairline 1px rules, serif reading typography, subtle grain, sharp instant state changes, minimal UI chrome, zero decorative motion, no gradients, no glow, no shadows-as-decoration — elevation is expressed with 1px borders and inversion.

**Sections to build (in order):** Header/nav, Hero, Features (3 cards), How It Works (3 steps), Testimonials, Pricing (3 tiers), FAQ, Final CTA (email capture), Footer with secondary links.

**Copy direction:** Invent one coherent fictional product that fits the theme (e.g., a distraction-free e-ink reading tablet or slow-tech reading app). All user-facing copy must be in English — realistic headlines, feature names, step titles, testimonial names + roles, plausible pricing values, and at least 6 real FAQ questions. Lorem-ipsum-only submissions are rejected.

**Explicit exceptions to mandatory rules (do not drop the rules — apply them as follows):**
1. **Motion exception:** The mandatory transition declarations (`transition: var(--transition-normal)` on all state changes) are retained in the code, but the transition tokens resolve to **0ms** — every state snaps instantly, like an e-ink screen refresh. No fades, no smooth scrolling, no continuous animation.
2. **Texture exception:** The mandatory "no inline SVG" rule stands for HTML. The grain overlay may use an inline SVG `feTurbulence` data-URI **defined only inside `style.css` as a `background-image` value** — this is the sole permitted SVG usage in the project.
3. **Palette exception:** The monochrome palette is extended with the mandatory success/error tokens, themed as "pen ink" colors (a green grading pen and a red editing pen). They are reserved exclusively for validation and feedback states — never used decoratively.

---

## 1. STRICT RULES & ARCHITECTURE

**1.1 CSS-First Architecture & Zero Inline CSS**
* All styling lives in `style.css`. Forbidden: `style="..."` attributes, `<style>` blocks in `index.html`, and presentational markup.
* Every design property, layout rule, and state is targeted via class or ID selectors only.
* HTML must remain semantic and style-agnostic — restyling the site later requires touching only `style.css`, never the markup.
* The only permitted external references are Google Fonts, Google Material Symbols, and one deferred `script.js`.

**1.2 CSS Variables & Theme Tokens**
Define all tokens in `:root` (light theme) with these exact values:
* **Colors:** `--primary: #1A1A1A;` `--secondary: #4A4A4A;` `--bg-primary: #FDFBF7;` `--bg-secondary: #F5F5F5;` `--text-primary: #1A1A1A;` `--text-secondary: #4A4A4A;` `--accent: #FFFF00;` (Highlighter Yellow) `--text-success: #1F6E43;` `--text-error: #B3261E;` `--border-default: #E0E0E0;` `--border-success: #1F6E43;` `--border-error: #B3261E;`
* **Contrast pairing (enforced in every theme):** every light background token pairs with dark text tokens and every dark background token pairs with light text tokens. Pure `#ffffff` is forbidden anywhere — the paper whites are `#FDFBF7` and `#F5F5F5` only.
* **Accent rule:** `--accent` (#FFFF00) is used exclusively as a marker-style background highlight behind `--text-primary` text (semantic `<mark>` or a `.hl` class), never as text or border color on light backgrounds, and the yellow highlight keeps black text on it in dark mode. Use it sparingly: one hero phrase, the featured pricing badge, at most one phrase per testimonial.
* **Shape & elevation:** `--radius-sm: 0;` `--radius-md: 2px;` `--radius-lg: 4px;` (never exceed 4px anywhere — paper corners are cut, not rounded); `--shadow-sm: none;` `--shadow-md: 0 2px 0 var(--border-default);` (prefer 1px borders over shadows for all elevation).
* **Spacing:** `--spacing-gap: 1.5rem;` plus a consistent 0.25rem-based scale used throughout.
* **Motion:** `--transition-fast: 0ms;` `--transition-normal: 0ms;` `--ease-standard: steps(1, end);`
* **Stacking:** `--z-dropdown: 100;` `--z-modal: 200;` `--z-toast: 300;` plus a dedicated `--z-noise` for the grain overlay.
* **No gradients anywhere** — solid fills only.

**1.3 Mandatory Dark Mode (Full Inversion)**
* Dark mode is a **strict inversion** of the paper theme. Define dark tokens under both `@media (prefers-color-scheme: dark)` and a `.dark` class on `<html>` (the class takes precedence; the media query is the no-JS / first-paint fallback).
* **Dark tokens:** `--bg-primary: #1A1A1A;` `--bg-secondary: #242424;` `--text-primary: #FDFBF7;` `--text-secondary: #B8B8B8;` `--primary: #FDFBF7;` `--secondary: #B8B8B8;` `--border-default: #3D3D3D;` Lighten the pen tokens for dark paper so feedback text keeps ≥ 4.5:1 contrast on `#1A1A1A` (e.g., success ≈ `#8FD3A8`, error ≈ `#F0A69B` — verify with a contrast check). Set `color-scheme` correctly so native form controls invert.
* Verify the pairing in dark mode: light text on dark backgrounds everywhere; the yellow highlight remains black-on-yellow.
* **Toggle:** a visible theme toggle button in the header using Material Symbols (`light_mode` / `dark_mode`), with correct `aria-label` and `aria-pressed` state. The choice persists via `localStorage` (e.g., key `"theme"`), falls back to `prefers-color-scheme` on first visit, and must not flash on load (the media query handles the pre-JS paint; `script.js` syncs the stored preference immediately).

**1.4 Flexbox Layout & Mobile-First Alignment**
* Build every layout structure with Flexbox.
* **Every flex container defaults to `align-items: center`** unless an exception is explicitly justified in a CSS comment (e.g., prose-heavy card interiors may use `align-items: flex-start` with left-aligned text for readability — document each such exception).
* Mobile-first: all multi-column rows (Features, How It Works, Pricing) stack into single columns below your breakpoint; no horizontal scrolling at any viewport from 320px up; prose blocks capped to a reading measure of ~65–75ch; page shell wrapped in a max-width `.container` (~72rem).
* **"Page turn" rhythm:** separate every section with a full-width `1px solid var(--border-default)` rule, like the pages of a book, and number sections with mono eyebrows ("01 — Features").

**1.5 CSS Architecture**
* Use clean custom CSS in `style.css` (no Tailwind CDN, no frameworks, no build step), organized with `@layer`: `reset`, `tokens`, `base`, `layout`, `components`, `utilities`.
* Component classes must be generic and reusable (`.btn`, `.card`, `.input-group`, `.section`, `.container`); every utility must map back to CSS variables, never raw values.

**1.6 Typography & Icons (Google Fonts Mandatory)**
* Load via Google Fonts `<link>` tags (with `preconnect`): **Newsreader** (serif — body and headings) and **IBM Plex Mono** (labels, buttons, nav, numbers, small print). Bind `--font-base: "Newsreader", Georgia, serif;` and `--font-mono: "IBM Plex Mono", monospace;`.
* Body line-height 1.6–1.7; headings large and tight via `clamp()`; mono labels uppercase with letterspacing.
* Icons: Google Material Symbols (Outlined variant) via `<link>`, rendered as `<span class="material-symbols-outlined" aria-hidden="true">icon_name</span>`. Forbidden: inline `<svg>` elements, local icon files, emoji-as-icons, and any other icon font.
* Imagery: the hero is purely typographic (like a printed front page). If any image is used elsewhere, it must be grayscale-filtered (`filter: grayscale(1)`) to match the e-ink look.

## 2. COMPONENT DESIGN SPECIFICATIONS

**2.1 Buttons (`.btn`, `.btn--solid`, `.btn--outline`, `.btn--danger`)**
* **Default:** `display: flex; align-items: center; justify-content: center; gap: 0.5rem;` mono uppercase label; minimum touch target 44×44px; `1px solid var(--primary)` border; transparent background; `var(--text-primary)` text; radius `var(--radius-md)`.
* **Hover:** instant full inversion — `background: var(--primary); color: var(--bg-primary);` with `cursor: pointer` (no fade).
* **Focus-visible:** `2px solid var(--primary)` outline with 3px offset (reads like a text-selection bracket) — distinct in both themes; never suppress focus outlines.
* **Active/pressed:** `transform: scale(0.97)` applied instantly.
* **Loading (`.is-loading` + `aria-busy="true"`):** disables interaction and prevents double-clicks, keeps the exact button dimensions, and renders the Material Symbol `hourglass_empty` with a `steps(2)` blink (e-ink cursor style) or static "Sending…" text — no smooth spinners.
* **Disabled:** `opacity: 0.5; filter: grayscale(1); cursor: not-allowed;`
* **Success/Error:** post-submit feedback swaps border/label color to `--text-success`/`--text-error` and pairs a `check_circle`/`error` Material Symbol — never color alone — with the message rendered in an adjacent `aria-live="polite"` region.
* **`.btn--danger`:** `1px solid var(--text-error)` with `var(--text-error)` text; hover inverts to an error background with light text. It must remain visually distinct in both light and dark themes.

**2.2 Cards (`.card`, `.card--featured`)**
* **Default:** `background: var(--bg-secondary); 1px solid var(--border-default);` radius `var(--radius-md)`; flex column layout; center-aligned content per the default rule (prose-heavy interiors may use the documented `flex-start` exception); generous padding from the spacing scale.
* **Hover (interactive cards only):** instant `border-color: var(--primary)` shift plus `transform: translateY(-2px)` — applied with no easing.
* **Focus-within:** `border-color: var(--primary)` whenever a child link/button receives focus.
* **Loading (skeleton):** define `.card--skeleton` with grey placeholder blocks animated only by a `steps()` blink between two greys (an e-ink refresh, not a smooth shimmer); fixed dimensions to prevent layout jumps.
* **Empty state:** a `.card--empty` pattern featuring one large Material Symbol plus one line of clear guidance copy.
* **Featured (middle pricing tier):** fully inverted — `background: var(--primary); color: var(--bg-primary); border-color: var(--primary);` with a mono badge (e.g., a yellow `<mark>` "Most highlighted") — visually distinct in both themes.

**2.3 Forms & Inputs (`.input-group`)**
* **Structure:** a flex column with `align-items: stretch` (a documented exception to the center default) wrapping a `<label>`, the `<input>`, and a dedicated `.input-group__error` feedback container.
* **States (all class-driven):** empty; focused (`2px solid var(--primary)` ring); filled; valid (success border + `check_circle` icon + text confirmation); invalid (error border, error icon, error message in `--text-error`, `aria-invalid="true"`, message linked via `aria-describedby`); disabled (opacity 0.5, not-allowed); read-only (dashed border).
* **Behavior:** the Final CTA email capture is wired in `script.js` — prevent default, validate the email format, trigger the button's loading state, then render success/error feedback in an `aria-live="polite"` region.

**2.4 FAQ & Modal/Dialog**
* **FAQ must use native `<details>`/`<summary>`** — no modal, no JavaScript: full-width items separated by `1px solid var(--border-default)` rules; the custom marker is a Material Symbol (`add`) that swaps to `remove` via the `[open]` attribute in pure CSS — instantly, with no height animation; `summary` receives the standard focus-visible ring.
* **Modal (conditional):** no modal is required for this build. If you introduce any overlay anyway, it must implement: opening/open/loading/success-error/closing states (all instant, 0ms), a centered fixed overlay (`align-items: center`), a backdrop, a Material Symbol `close` button, keyboard focus trapping, close via `Esc` and backdrop click, `role="dialog"`/`aria-modal`, and `z-index: var(--z-modal)`.

## 3. CORE UX & MICRO-INTERACTION RULES

* **Responsive by default:** fluid `clamp()` typography, breakpoint-driven stacking, zero horizontal overflow from 320px up.
* **Instant, always-visible feedback:** every hover, click, focus, and submission triggers an immediate visible state change (inversion, border shift, icon, or message). Never leave an interaction silent.
* **Motion policy:** keep the mandatory `transition: var(--transition-normal)` declarations on all state changes, but the tokens resolve to 0ms — states snap like an e-ink refresh. Set `scroll-behavior: auto` so anchor navigation jumps instantly (page-flip feel). No fades, no smooth scrolling, no continuous animations.
* **Reduced motion:** `@media (prefers-reduced-motion: reduce)` sets `animation: none !important` globally (this also disables the `steps()` blinks).
* **Grain texture:** implement as `body::before` — `position: fixed; inset: 0; pointer-events: none; z-index: var(--z-noise);` — with a `background-image` set to an SVG `feTurbulence` data-URI defined only inside `style.css`; opacity ≈ 0.04 in light mode and ≈ 0.06 in dark mode. It must never intercept interaction or harm readability.
* **Accessibility:** semantic landmarks (`header`, `nav`, `main`, `section`, `footer`), exactly one `h1`, logical heading order, a skip-to-content link, visible keyboard focus on every interactive element, and full keyboard operability (nav, theme toggle, FAQ, form). Contrast ≥ 4.5:1 for all text in both themes (ink-on-paper is ~16:1; explicitly verify the grey secondaries and the dark-mode pen tokens). Never communicate state by color alone — always pair color with an icon, border change, or text. All dynamic feedback uses `aria-live` regions. The theme toggle exposes correct `aria-pressed`/`aria-label`.
* **Destructive actions:** any `.btn-danger` or delete/unsubscribe-style link must be visually distinct in both light and dark themes.

## 4. DELIVERABLE & OUTPUT FORMAT

* **Files:** exactly three — `index.html`, `style.css`, `script.js`. The HTML contains only one script reference: `<script src="script.js" defer></script>`. No inline `<script>` blocks, no inline styles, no external assets beyond Google Fonts and Google Material Symbols.
* **`script.js` scope (vanilla JS only):** theme toggle + `localStorage` persistence; mobile nav toggle (hamburger with correct `aria-expanded`); CTA email validation with the loading/success/error flow. FAQ stays CSS-native. No libraries, no analytics, no dead code.
* **Naming convention:** strict BEM (`.block__element--modifier`) across the entire deliverable — never mix conventions, and never use value-based class names (`.text-yellow` is forbidden — use the semantic `.hl` or `<mark>`).
* **Section map (build all, in order):**
  1. **Header (sticky):** wordmark, anchor nav (Features / How It Works / Pricing / FAQ), theme toggle, compact CTA; `1px solid var(--border-default)` bottom rule; collapses to a Material Symbol `menu` hamburger below the breakpoint.
  2. **Hero:** mono eyebrow, one large serif `h1` with a yellow `<mark>` on the key phrase, subcopy within reading measure, a `.btn--solid` + `.btn--outline` pair — purely typographic, no photos.
  3. **Features:** `h2` plus three `.card`s, each with a Material Symbol, serif title, and left-aligned prose.
  4. **How It Works:** three numbered steps (`01 / 02 / 03` in mono) joined by `1px` rules, stacking vertically on mobile.
  5. **Testimonials:** serif `<blockquote>` cards with large typographic quotation marks (CSS `content`), mono attribution (name + role), at most one yellow `<mark>` phrase per quote.
  6. **Pricing:** three tier cards with plausible values; the middle tier uses `.card--featured` (inverted) with a highlighted badge; every tier gets a `.btn`.
  7. **FAQ:** six or more native `<details>` items with real, thematic questions.
  8. **Final CTA:** a large serif statement plus the `.input-group` email capture with the full loading/success/error flow.
  9. **Footer:** `border-top` rule, secondary link columns, small print in mono, and copyright — all links must be real in-page anchors or plausible hrefs.
* **Copy:** all English, coherent with the invented product, specific and human. Placeholders are only allowed where content is genuinely unspecified — none are expected here.
* **Completion:** every section built, every component state styled, and both themes verified — complete on the first attempt.