Monochrome demo
Monochrome

A strictly black-and-ivory editorial style pairing Lora serif headlines with Jost body text on pale-cream paper, evoking classic ledger and white-paper documents for longform reports.
Category: Typography-Driven
Era: 2020s Modern
Prompt: 19.8 KB · 2805 words
# System Prompt — Coding Agent Build Specification

**Role:** You are a Senior Frontend Engineer and Expert UI Designer. Build the complete, production-ready landing page defined below **in a single first-attempt response**: all files, all sections, all states — no TODOs, no stubs, no deferred decisions.

**Project:** "Marginalia" — a landing page for a quiet writing & publishing studio.
**Theme:** Monochrome — All-Ink, Archival, Literary, Austere (Era: Timeless Classic).

---

## 0. Design Brief & Theme Direction

**0.1 Aesthetic Law — Words Are the Only Visual Element.** This page is printed matter translated to the web: ivory paper, one ink, hairline rules, serif headlines, a dense but quiet grid. Forbidden: images, photography, illustration, gradients, patterns, glassmorphism, blobs, decorative shapes, drop-shadow theatrics. The only permitted ornament is typographic: hairline rules, numerals (`01 / 02 / 03`), punctuation and reference glyphs (`✳ § ¶ † →`), and letterforms.

**0.2 Canonical Palette Reconciliation.** The Color Palette block is canonical. *Exception clause: the source direction cites `#F5F0E8` / `#111111` interchangeably with the palette values; map every ivory/ink reference to the tokens in 1.2 and introduce no additional near-blacks or near-whites anywhere in the codebase.*

**0.3 Typography (Google Fonts only, per 1.6):**
- **Lora** (400/500/600/700 + italics) → `--font-display` — hero headline, section H2s, card/step/tier titles, prices, pull-quotes.
- **Source Sans 3** (400/600) → `--font-base` — body copy, UI, buttons, nav.
- **Courier Prime** (400/700) → `--font-micro` — eyebrow labels, numerals, form labels, footer meta, colophon.

| Role | Spec |
|---|---|
| Micro-label | 0.75rem, uppercase, letter-spacing 0.12em, Courier Prime |
| Body | 1.0625rem / line-height 1.65, letter-spacing 0.01em, Source Sans 3 |
| Card/step title (h3) | 1.25rem, Lora 600 |
| Section heading (h2) | clamp(1.75rem, 1.25rem + 2.5vw, 2.625rem), Lora 600 |
| Hero heading (h1) | clamp(2.5rem, 1.5rem + 5vw, 4.25rem), line-height 1.1, Lora 600 |
| Prose measure | max-width 36rem for paragraphs and ledes |

**0.4 Density Reconciliation.** Micro density, macro whitespace: compact gaps (`--spacing-gap: 1.2rem`) inside grids and cards; generous section rhythm (`padding-block: clamp(4rem, 3rem + 6vw, 6.5rem)`); container max-width 64rem with `padding-inline: clamp(1.2rem, 4vw, 2rem)`.

**0.5 Copy Direction — all user-facing copy in English.** Voice: declarative, plain, literary; short sentences; **no exclamation marks**; no marketing superlatives. The copy anchors in Section 5 are **verbatim and mandatory**; author any remaining connective copy in the same voice. Real content only — lorem ipsum is prohibited anywhere.

---

## 1. Strict Rules & Architecture

**1.1 CSS-First & Zero Inline CSS.** All styling lives in `style.css`. The `style="..."` attribute, `<style>` blocks in HTML, and inline event handlers (`onclick=` etc.) are **forbidden**. Target everything via class/ID selectors. HTML must remain semantic and style-agnostic — changing the look must never require touching the markup.

**1.2 CSS Variables & Theme Tokens.** Define all tokens in `:root` and re-declare per theme scope. **Required token names:** `--primary, --secondary, --bg-primary, --bg-secondary, --bg-cream, --text-primary, --text-secondary, --text-success, --text-error, --border-default, --border-error, --border-success, --font-base, --font-display, --font-micro, --radius-sm, --radius-md, --radius-lg, --shadow-sm, --shadow-md, --spacing-gap, --transition-fast, --transition-normal, --ease-standard, --z-dropdown, --z-modal, --z-toast`.

**Light (default) — Paper:**

| Token | Value | Role |
|---|---|---|
| `--bg-primary` | `#fafadf` | page background (ivory paper) |
| `--bg-secondary` | `#f2f2d2` | alternating section band |
| `--bg-cream` | `#f5f0e4` | card/panel surface |
| `--primary` / `--text-primary` / `--border-default` / `--border-success` / `--text-success` | `#1a1a16` | the ink: text, 1px borders, rules, CTA fill |
| `--secondary` / `--text-secondary` | `#5e5e54` | subdued copy, captions |
| `--text-error` / `--border-error` | `#1a1a16` | ink (see 2.3 — errors are structural, not chromatic) |

**Dark — Ink (inversion):** `--bg-primary: #1a1a16`, `--bg-secondary: #26261f`, `--bg-cream: #20201b`, `--text-primary` / `--primary` / `--border-default`: `#f5f0e4`, `--text-secondary` / `--secondary`: `#b8b8ac`, semantic tokens `#f5f0e4`.

- **Contrast pairing:** every light background token pairs with the dark ink text token and every dark background token pairs with the ivory text token — enforced in **every** theme scope, including inverted bands (0.6 of Section 5).
- **No pure white:** `#ffffff` is forbidden; ivory tokens are the "white" of this system. If a near-white is ever genuinely required, use `#fefefe`.
- **Austere geometry:** `--radius-sm: 0`, `--radius-md: 2px`, `--radius-lg: 4px` (corners are square by default). `--shadow-sm: 0 1px 2px rgba(26,26,22,0.10)`, `--shadow-md: 0 4px 12px rgba(26,26,22,0.14)` — borders, not shadows, are the primary elevation language; shadows appear only on hover/focus shifts.
- **Motion/space tokens:** `--spacing-gap: 1.2rem`, `--transition-fast: 200ms`, `--transition-normal: 320ms`, `--ease-standard: cubic-bezier(0.4, 0, 0.2, 1)`. Layering: `--z-dropdown: 10`, `--z-modal: 100`, `--z-toast: 200` (plus `--z-header: 40` for the sticky header).

**1.3 Mandatory Dark Mode.** *Exception clause: although the source style spec marks the theme "✓ Full Light / ✗ None", dark mode remains mandatory under this architecture — implement it as a strict paper↔ink inversion rather than omitting it.* Implementation, with zero flash-of-wrong-theme and **no inline scripts**:
- `:root` holds light tokens; `html.dark` re-declares dark tokens; `@media (prefers-color-scheme: dark) { :root:not(.light) { …dark tokens… } }` handles first-visit OS preference before JS runs; `html.light` is the explicit manual override.
- A visible toggle button in the header (Material Symbols `dark_mode` / `light_mode`, one icon visible per state) with correct `aria-pressed` and dynamic `aria-label` ("Switch to dark theme" / "Switch to light theme").
- `script.js` reads `localStorage` key `"marginalia-theme"`; falls back to `prefers-color-scheme`; sets the class, persists manual choices, and listens for OS changes only while no stored choice exists. Set `color-scheme` appropriately per scope.

**1.4 Flexbox & Mobile-First Alignment.** All layout is Flexbox. Every flex container defaults to `align-items: center` **unless explicitly excepted**. The only permitted exceptions: form field groups (labels above inputs → `align-items: stretch`) and the input+button CTA row (→ `stretch` so heights match). Build mobile-first: grids are single-column by default and become 3-up (`flex-wrap` + `flex-basis`) at ≥64rem. No horizontal scrolling at any width down to 320px (global `box-sizing: border-box`, fluid `clamp()` type, no fixed widths).

**1.5 CSS Approach.** *Exception clause: the source spec's hand-authored CSS technical block constitutes an explicit custom-CSS request — build with hand-authored CSS in `style.css` (no Tailwind, no build step, no libraries); every class must still map back to the tokens and reusable component classes exactly as a utility framework would.*

**1.6 Google Fonts & Material Symbols (mandatory).** Load Lora, Source Sans 3, and Courier Prime via Google Fonts `<link>` + `preconnect`, and icons via **Material Symbols Outlined** (`FILL 0; wght 400; GRAD 0; opsz 24`). **Raw inline SVGs and local icon files are forbidden.** *Exception clause: the theme is "words only," so icons are used sparingly and only where semantically required — theme toggle, FAQ chevron, form success/error markers, pricing check marks — always rendered in ink via `currentColor.*` No decorative icon usage.

---

## 2. Component Design Specifications

**2.1 Buttons.** Base `.btn`: `display: flex; align-items: center; justify-content: center; gap: 0.5rem`; min touch target 44×44px; Source Sans 3 600; `transition: opacity var(--transition-fast) var(--ease-standard), transform var(--transition-fast) var(--ease-standard)`. Variants: `.btn--primary` (background `var(--primary)`, text `var(--bg-primary)` — auto-inverts across themes), `.btn--secondary` (transparent, 1px `var(--border-default)` border), `.btn--danger` (defined per Section 3). All states via classes/pseudo-classes:
- **Hover:** `opacity: 0.8` at 200ms (theme-canonical), `cursor: pointer`.
- **Focus:** `:focus-visible { outline: 2px solid var(--border-default); outline-offset: 2px; }` — refined ring, visible in both themes.
- **Active:** `transform: scale(0.97)`.
- **Loading (`.is-loading`):** pointer events blocked, double-clicks prevented, `aria-busy="true"`, a rotating Material `progress` icon or CSS border spinner in `currentColor` — button dimensions must not change.
- **Disabled (`:disabled` / `.is-disabled`):** `opacity: 0.5`, `cursor: not-allowed`.
- **`.is-success` / `.is-error`:** temporary feedback classes swapping label to success/error copy with check/error icon; error variant uses a dashed border (monochrome semantic — see 2.3).

**2.2 Cards.** Base `.card`: flexible flexbox column, 1px solid `var(--border-default)`, background `var(--bg-cream)`, padding 1.5rem. **Hover:** background shifts to `var(--bg-secondary)` and `--shadow-sm` fades in (200ms). **Focus-within:** border thickens to 2px when a child link/button is focused. **Skeleton:** define `.skeleton` with an ink-tinted shimmer keyframe (pulse of `#1a1a16` at 8% opacity) in the stylesheet. **Empty state:** define `.card--empty` (Material Symbol + guidance text). **Featured variant (`.card--featured`):** `border: 3px double var(--border-default)` plus a "MOST CHOSEN" Courier micro-label. Skeleton and empty styles must exist in `style.css` even though this page loads static content.

**2.3 Forms & Inputs.** Structure `.input-group` as a flex column (`align-items: stretch` — justified exception): visible Courier micro `<label>`, `<input>` (1px border, `var(--bg-primary)` fill, min-height 44px), and a dedicated `.input-group__feedback` container with `aria-live="polite"` and reserved min-height to prevent layout jumps. States: empty, `:focus` (same refined ring, inset), filled, `.is-valid` (solid border + check icon + message), `.is-invalid` (dashed border + error icon + bold "Error:" message prefix), `:disabled`, `readonly`. **Monochrome semantic rule:** in this all-ink system, success/error are **structural, never chromatic** — differentiate via border style (solid vs. dashed), icon, weight, and label text; never rely on color alone.

**2.4 Disclosures, Overlays & Layering.** FAQ uses native `<details>`/`<summary>`: `<summary>` is a flex row (question + Material `expand_more` icon rotating 180° when open, 200ms); hide default markers; hairline `border-top` per item; refined focus ring on summary. **No modal is required — do not add one.** The z-tokens must still be defined; should any overlay ever be introduced, it must be a centered flex container with backdrop, animated open/close, Esc and overlay-click close, keyboard focus trapping, and a Material `close` button.

---

## 3. Core UX & Micro-Interaction Rules

- **Responsive by default:** fluid `clamp()` sizing; no horizontal overflow at 320px.
- **Smooth animations:** transitions on all state changes (`var(--transition-fast)` for hovers per the 200ms theme rule, `var(--transition-normal)` for larger shifts); `prefers-reduced-motion: reduce` collapses all transitions/animations to near-zero.
- **Accessibility:** semantic landmarks (`header`, `nav`, `main`, `section` with `aria-labelledby`, `footer`); a single `h1`; strict heading order (`h2` per major section and footer link-group titles; `h3` for cards, steps, tiers, and FAQ questions inside `<summary>`); a visually hidden skip-link that appears on focus; full keyboard operability; visible focus everywhere; `aria-live` regions for form feedback; contrast ≥ 4.5:1 in both modes (the token pairs above comply).
- **Mandatory visual feedback:** every hover, focus, click, and submission produces a visible state change.
- **Destructive actions:** none exist on this page; `.btn--danger` must still be defined (dashed ink border + Material `delete` icon), visually distinct in both themes.
- **Typographic flourishes:** `::selection` styled ink-background/ivory-text; `scroll-behavior: smooth` (disabled under reduced motion).

---

## 4. Deliverables & Output Format

- **Files:** `index.html`, `style.css`, `script.js` — separate, complete. HTML contains exactly one `<script src="script.js" defer>` reference and zero inline styles or scripts. Head includes `lang="en"`, viewport meta, title, meta description, `<meta name="theme-color">` for both schemes, and all Google Fonts/Material Symbols links.
- **Naming:** strict BEM (`.hero__title`, `.pricing-card--featured`, `.faq__item`) plus only three generic helpers: `.container`, `.visually-hidden`, `.skip-link`. Never mix conventions; the Material Symbols font class is the sole external exception.
- **`script.js` scope (nothing else, no libraries):** theme init/toggle/persistence per 1.3; the Final CTA form handler (prevent default, email validation, `.is-loading` → simulated delay → `.is-success`/`.is-invalid` with `aria-live` updates).
- **Completeness:** full page in one attempt. Placeholder `href="#"` is permitted only for genuinely unspecified targets (footer "Studio" and "Legal" links); footer "Product" links must point to real in-page anchors. No lorem ipsum anywhere.

---

## 5. Section-by-Section Page Specification

**5.0 Sticky header (`.site-header`):** 1px bottom rule, `var(--bg-primary)` background, `--z-header`. Left: wordmark "Marginalia" in Lora 600. Center/right: nav links — "Features", "How it works", "Pricing", "FAQ" → `#features`, `#how`, `#pricing`, `#faq` (hidden below 48rem). Far right: theme toggle (1.3). All nav links: hover `opacity: 0.8` at 200ms.

**5.1 Hero (`#top`, `.hero`):** centered flex column, text-align center, generous padding per 0.4. Eyebrow (Courier): `MARGINALIA · A QUIET WRITING STUDIO`. H1 (Lora, verbatim): **"Write for the page, not the feed."** Sub (max 36rem): "Marginalia is a distraction-free writing studio with archival versioning and literary export — typography that respects your words and gets out of their way." CTA row (flex, wrap, gap 1.2rem): `.btn--primary` "Start writing" → `#cta`; `.btn--secondary` "How it works" → `#how`. Below a hairline rule, a Courier micro-strip: `✳ NO ADS ✳ NO FEEDS ✳ NO ALGORITHMS`.

**5.2 Features (`#features`):** eyebrow `FEATURES`; H2 "Everything you need. Nothing you don't."; one-line lede "Three tools, kept deliberately small, so the sentence stays the largest thing on the screen." Three `.card`s (3-up ≥64rem, stacked below, gap 1.2rem), each opening with a Courier numeral and hairline rule: **01 Focus mode** — "A full-screen editor with no toolbars, no streaks, and no counters you didn't ask for. Just you and the sentence." **02 Archival versioning** — "Every draft is kept the way libraries keep books — dated, shelved, and retrievable. Restore any version in a single keystroke." **03 Literary export** — "Publish to PDF or EPUB with real book typography: proper margins, hanging punctuation, and old-style figures."

**5.3 How It Works (`#how`):** full-bleed band on `var(--bg-secondary)`. Eyebrow `PROCESS`; H2 "Three steps, in order." Three step blocks, each with `border-top: 1px`, Courier numeral, Lora h3, sans body: **01 Draft** — "Open a blank page and write in a room with the noise removed." **02 Refine** — "Compare drafts side by side, keep marginal notes, and restore anything you regret cutting." **03 Publish** — "Export a typeset PDF or EPUB, or share a clean reading link — no platform chrome attached."

**5.4 Testimonials (`#testimonials`):** eyebrow `READERS & WRITERS`; H2 "Kind words, kept in ink." Three quote blocks (3-up), each a `<blockquote>` with hairline top rule, an oversized Lora `"` rendered via `::before`, quote in Lora italic 1.25rem, attribution in Courier micro: **"The first writing tool that treats my drafts as documents rather than data."** — ELENA MARSH, NOVELIST · **"I moved four years of essays over in an afternoon. Nothing broke, and nothing shouted at me."** — T. OKONKWO, EDITOR · **"It feels the way good paper feels — quiet, patient, and slightly proud of you."** — A. WHITFIELD, HISTORIAN.

**5.5 Pricing (`#pricing`):** eyebrow `PRICING`; H2 "Pay for pages, not promises."; lede "One currency, three shelves. Cancel whenever; keep your words always." Three cards: **Reader — $0** (Lora price, Courier "/month"), "For reading and annotating." — 3 active notebooks · Full annotation tools · Plain-text & Markdown export · Community library access — `.btn--secondary` "Start reading". **Writer — $8/month** as `.card--featured` with `MOST CHOSEN` label, "For the daily practice." — Unlimited notebooks · Archival version history · Literary PDF & EPUB export · Focus mode & night room · Offline drafts — `.btn--primary` "Start writing". **Publisher — $16/month**, "For shipping work." — Everything in Writer · Custom reading domain · Co-editing & shared margins · Print-ready files · Priority support — `.btn--secondary` "Start publishing". Feature list items use Material `check` icons at 1rem. All CTAs are anchors to `#cta`; loading/disabled/success button classes must still be fully styled per 2.1.

**5.6 FAQ (`#faq`):** eyebrow `QUESTIONS`; H2 "Frequently asked questions." Five `<details>` items per 2.4, verbatim: **Do I own my writing?** "Yes, entirely. Export everything to plain text at any time; deleting your account deletes your work and nothing else." **Does Marginalia work offline?** "Yes. Drafts are stored locally first and synchronized when you reconnect." **What can I export to?** "Plain text, Markdown, typeset PDF, and EPUB. No lock-in, ever." **Can I cancel anytime?** "Any time, in two clicks, with your words exported first. No retention emails." **Can I write with other people?** "Publisher plans include co-editing and shared margins for up to five collaborators per document."

**5.7 Final CTA (`#cta`):** an inverted band via a `.band--ink` scope that **re-declares the token names locally** (light mode: ink background, ivory text; dark mode: paper background, ink text — pairing rule enforced, nested components adapt with zero new classes). Eyebrow `BEGIN`; H2 (Lora): **"Begin your first draft."** Sub: "Invitations go out weekly, oldest requests first." Email form per 2.3: Courier label "Email address", input + `.btn--primary` "Request an invitation" in a `stretch` flex row (stacked below 40rem). Success copy: "Thank you — your invitation is on its way." Error copy: "Error: please enter a valid email address."

**5.8 Footer (`<footer>`):** classic double "scotch" rule (`border-top: 3px double`). Flex columns: brand block (wordmark + "A quiet writing studio, est. 2025."), then three link groups with Courier `h2` micro-titles — **PRODUCT** (Features → `#features`, Pricing → `#pricing`, FAQ → `#faq`), **STUDIO** (About, Journal, Contact → `#`), **LEGAL** (Privacy, Terms → `#`). All links: hover `opacity: 0.8` at 200ms, refined focus rings. Bottom meta row (Courier): `© 2025 Marginalia · Set in Lora, Source Sans 3 & Courier Prime · All rights reserved.`

---

## 6. Acceptance Checklist (self-verify before final output)

- Zero `style="..."` attributes, zero inline `<script>`, zero SVGs, zero images, zero colors outside the token tables.
- All mandated token names exist and are actually consumed by components.
- Dark mode: toggle works, `aria-pressed`/`aria-label` correct, choice persists via `localStorage`, OS fallback applies, no flash on first paint.
- Keyboard-only pass: every link, button, summary, input, and the toggle reachable and operable with visible focus.
- No horizontal scroll at 320px; 3-up grids collapse to a single column.
- All 9 sections present with the verbatim copy anchors; button/input/card state matrix fully styled in CSS.
- One convention (BEM) throughout; exactly three files; complete on the first attempt.