# Design Language for political.quest ## Aesthetics and Tone **political.quest** is built as a **broadsheet press-room mid-deadline** — the moment a newspaper is being typeset, plates wet, columns still being rearranged on the stone, hot lead cooling, a copy-editor's blue pencil hovering. It is the aesthetic of the **vintage newspaper**: rag-paper cream, halftone dots blown up until they become a texture, smudged ink, hairline column rules, screaming Didone headlines and quiet Caslon body. But it is **not nostalgic for its own sake** — the conceit is that "the political quest" is an ongoing dispatch, a story that is never put to bed, so the page behaves like a press that keeps reprinting itself: editions update, headlines reset, the late edition slams a new banner over the morning's. The tone is **raw-authentic** with a streak of **edgy-rebellious** — a samizdat broadsheet, an underground gazette, the kind of paper that names names. Think *The Pentagon Papers* facsimiles, 1930s WPA Federal Theatre "Living Newspaper" placards, Polish solidarity-era poster typography, the front page of a paper the morning after an election that nobody called correctly, and the deliberately over-inked, off-register two-color printing of cheap pamphlets. There is grit on the platen. Nothing here is glassy, gradient-meshed, or hand-drawn-cute. It is **printed**, and the print is imperfect on purpose. ## Layout Motifs and Structure **Magazine-spread / broadsheet column grid as the load-bearing structure.** The page is a continuous **full-bleed broadsheet folio** that scrolls vertically the way a long-roll proof sheet would. The base lattice is a strict **12-column newspaper grid** with thin vertical rules between columns (`1px solid` in faded ink), but content deliberately **straddles and breaks** those columns: a "lead story" headline spans columns 1–8 while a "stop-press box" in columns 9–12 carries a boxed bulletin with a heavy 3px black border. Sections are framed as **named departments** — *FRONT PAGE*, *THE WIRE*, *EDITORIAL*, *DISPATCHES*, *THE BACK PAGE* — each introduced by a full-width **masthead rule**: a thick rule, the department name in spaced small-caps, a thin rule below, and a dateline (`VOL. MMXXVI · NO. ∞ · LATE EDITION`). Pull-quotes break the column flow as **inset boxes with hanging indents**. Photographs (where used) sit inside **keyline boxes with a caption rule** and a credit in 8px italics. A persistent **folio bar** runs along the bottom edge: page-number-style ("PAGE 3 OF ∞"), a running headline of the current section, and a tiny printer's-mark colophon. Scrolling past a department threshold triggers a **"REPLATE"**: the top banner headline visibly resets — old type slides up and out, new slug slams down with a faint ink-spread bloom — reinforcing the never-put-to-bed conceit. No bento boxes, no card-grids, no dashboards. ## Typography and Palette **Type stack (Google Fonts only, names verified):** - **Banner headlines & mastheads:** `Playfair Display` — a high-contrast Didone, used enormous: 96–140px for the front-page banner, all-caps, tight tracking (`letter-spacing: -0.01em`), weight 900, with an optional 800 italic for "second-coming" decks. This is the screaming-broadsheet voice. - **Section heads & decks:** `Oswald` — a tall, condensed grotesque, used for department names and sub-headlines in spaced small-caps (`letter-spacing: 0.18em`), weights 300–600. It does the work of old wood-type condensed sans. - **Body / editorial columns:** `Libre Caslon Text` — a warm transitional serif with a true italic, set at 17px / 1.55 line-height, justified with hyphenation on, first paragraph of each story gets a **2-line drop cap** in Playfair Display. - **Datelines, captions, credits, folio bar, "stop press":** `Courier Prime` — a typewriter mono, 9–11px, uppercase for labels, used to evoke wire-copy and the proof-stamp. Occasional rotated `[ MUST RUN ]` / `[ SPIKED ]` editorial stamps in this face. **Palette (minimum three, with hex):** - `#F4EFE2` — *newsprint cream*, the base paper (a hair warmer and dingier than white). - `#1A1714` — *press black*, not pure black — slightly brown, like worn ink. All headlines and rules. - `#B22B1F` — *late-edition red*, the second printing color: stop-press boxes, [BREAKING] flags, the one accent. Used sparingly, always feels urgent. - `#6E6655` — *faded ink grey* — column rules, secondary captions, the halftone-dot texture base. - `#D8CFB8` — *aged margin* — a darker paper tone for sidebars, "from our archives" boxes, and the gutter shadow. Optional fifth: `#3A4A3F` — *proof-pencil green* — the rare "corrections" / editor's-mark color, used only for tiny annotation flourishes. ## Imagery and Motifs **Print-process imagery only — halftone, keyline, ink.** No photography in the glossy sense; where images appear they are **coarse-screened halftones** (large dot pattern, ~40–60 LPI feel) sitting inside hard keyline frames with a one-line italic credit. Core motif inventory: - **Blown-up halftone dot field** as a subtle background texture on every section (CSS `radial-gradient` dot tiling at ~6px pitch in faded ink grey at 6–10% opacity), denser behind hero blocks. - **Column rules and cut-off rules** — hairline verticals between columns; "30" or "—30—" printer's end-mark at the close of stories. - **Editorial stamps** — rotated rubber-stamp graphics in late-edition red: `BREAKING`, `LATE EDITION`, `EXCLUSIVE`, `EMBARGOED`, `RETRACTION` — slightly rough-edged, ~5° tilt, partially overlapping headlines. - **Masthead furniture** — a flag-style nameplate at the very top: ornate flanking rules, the domain set as a newspaper title in Playfair, weather-ear and dateline-ear boxes on either side ("CIRCULATION: EVERYONE / WEATHER: UNSETTLED"). - **Wire-service teleprinter strip** — a horizontal scrolling ticker in Courier Prime under the masthead: `· · · DISPATCH · · ·`, faint paper-feed perforations top and bottom. - **Ink imperfections** — occasional faint over-ink bloom around heavy type, a barely-visible registration mis-offset on the red layer (red text shifted ~1px), a coffee-ring SVG in one corner of the back page. - **Ballot/box-tick glyphs** rendered as printers' ornaments, never as UI checkboxes — used as bullet marks in lists. ## Prompts for Implementation Build political.quest as **one continuous broadsheet that re-prints itself as you scroll** — a narrative full-screen reading experience, not a marketing page. The reader starts at the **masthead/front page** (huge Playfair banner, drop-capped lead story), scrolls down through **THE WIRE** (the teleprinter ticker plus short stacked dispatches in tight columns), **EDITORIAL** (a single justified Caslon column flanked by wide margins with proof-pencil annotations), **DISPATCHES** (a true 12-column spread with straddling headlines, halftone keyline images, pull-quote inset boxes), and ends at **THE BACK PAGE** (colophon, "—30—", coffee ring, printer's mark, and — if a call to action is unavoidable — a single classified-ad-style line: small-caps, ruled box, "FILED BY ___ · SET IN HOT METAL · ALL EDITIONS"). Animation and storytelling notes: - **REPLATE transition** on department thresholds: as a new section enters, the bottom folio bar's running-headline and "PAGE n OF ∞" update, the top banner slug does a fast vertical type-swap (old line `translateY(-100%)` + fade, new line slams in `translateY(0)` with a ~120ms ease-out and a one-frame ink-bloom box-shadow). Make it feel mechanical, not springy. - **Teleprinter ticker:** Courier Prime text scrolling left at a steady, slightly-too-fast newsroom pace; perforation strips above/below; pause-on-hover so a reader can actually catch a line. - **Headline set-on-load:** the front-page banner "types in" letter by letter once (typewriter-effect, ~25ms/char), cursor block blinks, then settles — happens only on first load. - **Stop-press box:** the red-bordered bulletin in the upper columns gets a subtle, infrequent **shudder** (2–3px translate, 1 cycle, every ~20s) as if a new bulletin just landed; the `BREAKING` stamp fades in rotated. - **Drop caps & rules draw on scroll:** column rules and the masthead's thick/thin rule pairs draw in via `path-draw-svg` / width-grow as their section enters; drop caps fade up a beat after their paragraph. - **Halftone reveal for images:** keyline-framed halftones start as a coarse dot pattern at low resolution and "develop" — dots tighten / image sharpens — over ~600ms when scrolled into view, mimicking a photo coming off the press. - **Registration jitter (rare, tasteful):** every so often the red layer (`color: #B22B1F` elements) nudges ~1px and snaps back, as if the press momentarily slipped — never on text the reader is mid-sentence on. - Respect `prefers-reduced-motion`: kill the ticker auto-scroll, the replate slam, the shudder and the jitter; keep static. - **AVOID:** CTA-heavy hero buttons, pricing tiers, stat-counter grids, testimonial walls, trusted-by logo bars, card-grid feature sections, dashboard chrome, glassmorphism panels, hand-drawn doodle decoration, gradient-mesh backgrounds. If something must "convert," it is a one-line classified ad in Courier Prime inside a ruled box on the back page. ## Uniqueness Notes **Differentiators against the existing corpus (per frequency analysis of 464 designs):** 1. **Vintage-newspaper / broadsheet as the structural foundation, not a texture overlay.** The corpus is dominated by hand-drawn (96%) and glassmorphism (81%); this design explicitly rejects both and instead commits fully to a print-press metaphor — column grids, mastheads, halftone dots, editorial stamps, "—30—". Magazine-spread layout sits at only 6% and a literal newspaper treatment is rarer still. 2. **The "REPLATE" / never-put-to-bed scroll mechanic.** Instead of generic parallax (91%) or cursor-follow (89%), the signature interaction is a *typographic re-plating*: the banner headline and folio bar mechanically reset at each department threshold, dramatizing "the quest" as an endless dispatch. The motion vocabulary is deliberately mechanical (slam, shudder, registration jitter) rather than the corpus-standard spring/magnetic/elastic feel. 3. **Two-color "late-edition" printing with deliberate mis-registration.** Where 95% of the corpus reaches for gradients and 98% for "warm" gradient palettes, this site uses a flat, two-ink scheme — press-black + late-edition-red on newsprint cream — and treats imperfect registration (the red layer shifted ~1px) as a feature. Imagery is exclusively coarse halftone, not photography (98% in corpus) or gradient-mesh. 4. **Department/dispatch information architecture.** Content is organized as named newspaper sections (FRONT PAGE / THE WIRE / EDITORIAL / DISPATCHES / THE BACK PAGE) with mastheads, datelines, drop caps, pull-quote inset boxes and a persistent folio bar — an editorial-flow structure rather than the ubiquitous card-grid (91%) or bento-box (15%). **Chosen seed/style:** `vintage newspaper layout` (from seeds.json). **Avoided overused patterns from the frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (81%), photography imagery (98%), card-grid layout (91%), full-bleed-as-default + centered defaults, parallax (91%), cursor-follow (89%), spring (85%), magnetic (82%), warm-gradient palette (95–98%), mono-as-everything (94% — Courier Prime is used here only for wire-copy/labels, not body). Embraced underused territory: magazine-spread layout, condensed/Didone typography pairing, duotone high-contrast print palette, halftone/grain imagery, typewriter-effect and path-draw used purposefully rather than decoratively.