# Design Language for political.wiki ## Aesthetics and Tone A civic broadsheet pressed under glass — political.wiki is rendered as a living newspaper from a republic that never went to print, a "morning edition" of the body politic that resets every time someone edits an entry. The mood is that of a quiet press room at 5 a.m.: ink not yet dry, columns being recomposed by invisible hands, the smell of paper and machine oil. We deliberately reject the slick neutrality of contemporary knowledge platforms. Instead we lean into letterpress imperfection, hot-metal typesetting, registration marks, and the dignified seriousness of a record being kept. The tone is scholarly-intellectual but never cold — it is the tone of an editor who believes that careful documentation is itself an act of citizenship. Information here feels *deposited* rather than *served*: every article is a clipping, every cross-reference a thread of red string between dossiers, every revision a marginal note in a librarian's hand. There is gravity, but also the faint warmth of a reading lamp. Nothing flashes. Things settle. ## Layout Motifs and Structure The page is a true newspaper grid: a rigid 12-column letterpress frame with thin hairline column rules (0.5px, ink-black at 70% opacity) running floor-to-ceiling, and a heavy masthead band across the top. Composition reads as a front page that scrolls: - **The Masthead** — a full-bleed nameplate ("POLITICAL.WIKI") set in a Fraktur-adjacent bold serif, flanked by a "Vol." and an auto-incrementing edition number tied to total edit count, plus a dateline ("Recorded today") and a weather-style "civic conditions" strip (e.g. "Discourse: turbulent · Visibility: contested"). - **Above-the-fold lead** — one dominant article occupies columns 1–8: an oversized headline, a deck, a single duotone halftone illustration, and a "continued on..." rule that physically draws a line to where the article resumes deeper in the scroll. - **The rail** — columns 9–12 form a standing sidebar: "Stop Press" bulletins, a "Most Revised" ledger, an "On This Day" historical box, all separated by ornamental printer's-fist dividers (☞). - **Below the fold** — a masonry of clipped articles, each in its own ruled box, intentionally varying in column-span (2, 3, 4) so the grid breathes like a real layout desk. Boxes occasionally overlap by 2–4px with a subtle drop-shadow, as if pasted by hand. - **The morgue (footer)** — styled as a flat-file archive drawer: tabbed dividers, accession numbers, a faint card-catalog texture. - A persistent thin "wire ticker" runs along the very bottom edge: a slow horizontal marquee of recent edit summaries in mono, like an AP wire feed. ## Typography and Palette **Typefaces (all Google Fonts):** - Nameplate / masthead: **"UnifrakturMaguntia" used sparingly** — only the wordmark, to evoke the engraved newspaper nameplate; everywhere else we use bold weights of the serif below. - Headlines & decks: **"Playfair Display"** (700–900), tight leading (1.05), with true small-caps decks in **"Playfair Display SC"**. - Body / article text: **"Source Serif 4"** at 18px, 1.6 leading, hyphenation on, justified in multi-column blocks with a ragged-right fallback on narrow boxes. - Metadata, bylines, kickers, the wire ticker, accession numbers: **"IBM Plex Mono"** at 12–13px, letter-spaced +0.04em, uppercase. - Marginalia / editor's notes: **"Spectral"** italic, 15px, set in the gutter at 80% opacity. **Palette:** - Newsprint ground: `#F4F1E8` (warm pulp paper) - Ink black: `#1B1B17` (never pure #000 — slightly warm, like real ink) - Press red (registration marks, "Stop Press", red-string links): `#B5232A` - Faded archival blue (rubber stamps, revision timestamps): `#2E4A6B` - Margin pencil grey: `#7C7768` - Highlight wash for "you are here" / active cross-references: `#E8DFC0` (a pale yellow legal-pad tint) - Halftone duotone pair for imagery: ink black `#1B1B17` over a `#D8CFB8` midtone. ## Imagery and Motifs - **Duotone halftone illustrations**: every image is processed as a coarse halftone dot screen (visible 4–6px dots), two-color, as if reproduced on a rotary press. No photographs in full color, ever. - **Registration & crop marks**: corner crop marks and circular registration targets bleed off section edges — purely decorative, signalling "this is a printed object." - **Printer's ornaments**: fists (☞), section marks (§), pilcrows (¶), and 19th-century fleuron dingbats as dividers and list bullets. - **Red string / dossier threads**: cross-references between entries are drawn as literal taut red threads (SVG paths) that animate-draw when an article scrolls into view, connecting a footnote to its source box. - **Rubber stamps**: timestamps and statuses appear as slightly-rotated, ink-bled stamps ("REVISED", "STUB", "VERIFIED", "DISPUTED") in faded archival blue with imperfect edges. - **Marginalia hand**: hovering a paragraph reveals a pencil-grey margin note in Spectral italic — an editorial aside, a "[citation needed]" in a human hand. - **Paper grain & foxing**: a 3% opacity SVG noise/fiber texture over the ground, with faint brownish "foxing" blotches near the corners that intensify subtly toward the footer/archive. - **The fold**: a soft horizontal gradient-and-shadow line approximately one viewport down, mimicking a physically folded broadsheet — content above and below it is composed differently. ## Prompts for Implementation Build this as a single, immersive full-screen "front page that never stops printing." It is a narrative artifact, not a product page — there are no calls to action, no pricing tiers, no stat-grids, no testimonials, no signup hero. The visitor *reads*; they do not *convert*. - **Opening sequence**: on load, the masthead "prints" — the Fraktur nameplate ink-stamps down (a 1px ink-bleed blur resolving to crisp over ~600ms), the column rules draw downward like guillotine cuts, then articles fade-reveal in staggered order top-to-bottom as if pulled off a press one at a time. Subtle paper-rustle motion (2–3px settle) on each block. - **Scroll as press run**: scrolling is the only navigation affordance. As you scroll, the bottom wire-ticker streams new edit summaries; the "edition number" in the masthead increments at meaningful scroll milestones; "continued on" rules literally connect a lead headline to its continuation block far below by drawing an SVG path along the gutter as that block enters view (path-draw-svg). - **Cross-reference threads**: when an article box with references scrolls into the viewport, animate red string paths from its footnote markers to the cited entry-boxes (spring-eased draw, ~800ms, stagger per thread). Hovering a thread highlights both endpoints with the legal-pad wash. - **Marginalia on hover**: paragraph hover reveals a margin note (fade + 4px slide from the gutter); cursor near the gutter shows a faint "pencil" custom cursor. - **Stamps**: status stamps rotate in with a slight overshoot (elastic) and a momentary ink-spread, settling at a random ±3° tilt. - **Halftone on demand**: images load as flat midtone then resolve their dot screen via a CSS/SVG filter transition, like a photo developing. - **Respect the grid, then break it gently**: keep the 12-column hairline frame visible and honest; let article boxes overlap by a few px and cast hand-paste shadows; never center everything — asymmetry is the point. - **Performance/JS**: prefer IntersectionObserver-driven reveals and CSS transforms; the red-string SVG and ticker can be lightweight vanilla JS. No heavy carousels. The whole thing should feel like turning the pages of something printed, not clicking through an app. - Color is restrained: newsprint ground everywhere, ink black type, press red used *only* for live/disputed/cross-reference signals, archival blue *only* for timestamps and stamps. ## Uniqueness Notes Differentiators from other designs in the batch: 1. **Literal hot-metal newspaper**: not "editorial-inspired" but a fully committed letterpress broadsheet — visible column rules, crop/registration marks, the physical fold, duotone halftone-only imagery, a wire-feed ticker. Most "editorial" sites in the batch are just clean serif blogs; this is a printed object you scroll through. 2. **Red-string dossier cross-references**: cross-links between wiki entries are rendered as taut, animate-drawn red threads connecting footnotes to source boxes — an investigation-board metaphor used as the navigation grammar, not decoration. 3. **Marginalia-as-interaction**: hovering text surfaces handwritten-style editor's notes in the gutter ("[citation needed]", asides), encoding the wiki's collaborative-editing soul as a hover affordance rather than chrome. 4. **Rubber-stamp status system & auto-incrementing "edition number"** tied to edit activity — the page's identity literally changes with the corpus, like a real morning edition. 5. **Paper materiality**: foxing blotches that intensify toward the archival footer, ink-bleed-then-crisp text printing animation, hand-paste box overlaps with shadows — a tactile decay/freshness gradient no other site uses. Chosen seed/style: **vintage newspaper layout** (from seeds.json). Avoided per frequency analysis: no glassmorphism (81%), no hand-drawn aesthetic (96%), no full-color photography (98% imagery), no card-grid-as-default (91%) — though we subvert it with a ruled letterpress masonry; no cursor-follow gimmickry beyond the gutter pencil cursor (89%); no gradient-warm palette cliché (98%) — the warmth here is paper pulp, not a CSS gradient; no parallax storytelling tropes (91%) — motion here is "press run" mechanics instead.