# Design Language for politics.quest ## Aesthetics and Tone politics.quest is a **crumbling broadsheet reassembled by hand** — the visual language of a 1970s newspaper morgue where someone has pulled clippings, pinned them at odd angles across a corkboard, and drawn connecting lines in graphite pencil between ideas. The retro aesthetic is not nostalgic kitsch; it is the serious, ink-stained atmosphere of old political reporting — Letraset headlines, correction fluid, folded paper margins, the physical residue of democracy at work. The mood is **professional but tactile**. Cool slate grays dominate the palette — the gray of newsprint, of concrete government buildings, of overcast civic mornings. Against this field, hand-drawn botanical motifs (oak branches, field grasses, seed heads) emerge as a counterpoint: nature as the measure against which institutions are judged. The tone is earnest without being earnest about being earnest — it does not moralize through bright colors or urgent CTAs. It simply bears witness. Inspiration draws from: Cold War-era government typography, 1960s–1970s political broadsheets, botanical survey illustration in the tradition of William Bartram, Swiss-influence editorial layout, and the ink-wash quality of corrected galley proofs. ## Layout Motifs and Structure The layout is a **broken-grid composition** — not chaotic, but deliberately off-register, as if typeset in a hurry on a hot-metal press where the furniture has shifted slightly. The grid is visible in its violation: you can sense the underlying columns precisely because some elements breach them. **Structural logic:** - A **5-column ghost grid** underlies the entire page. Columns are 1.5rem wide gutters, 17% each. Elements rarely respect column boundaries cleanly: primary panels may span 3 columns + 0.7 of a 4th; secondary panels begin 0.4 columns in. This creates the off-register quality without actual randomness. - **Rotation is deliberate and minimal.** Pull-quote panels rotate ±1.2°. A botanical SVG illustration in the hero rotates −2.4°. Nothing rotates more than 3°. The effect is analog, not chaotic. - **Three depth registers:** 1. Background field: cool-gray #E8EAED linen-textured surface 2. Content panels: white (#F7F8F9) cards with a faint 0.5px gray border, casting a soft 4px shadow 3. Annotation layer: graphite hand-drawn underlines, encircling loops, and connector lines at 80% opacity — drawn over the content as if someone marked them up after printing - **The hero panel** breaks left of center, placing the masthead ("politics.quest") at 38% from left — tilted text baseline runs at −0.6°, as if set on a slightly un-level composing stone. - **Navigation** is a single left-margin text list in 10px monospace uppercase, running vertically, like a broadsheet's section index. - **Negative space** is managed deliberately: each section has one full-width breathing margin of 12vh before the next content cluster begins. The page feels like separate printed sections, not one continuous web scroll. - **Two-column dispatch** layout for the main content area: a primary 60% editorial column and a 34% secondary column for annotation, pull-quotes, and botanical marginalia. ## Typography and Palette **Typography (Google Fonts only):** - **Display/Masthead (humanist serif):** `Libre Baskerville` — set at clamp(3.4rem, 6.8vw, 6.2rem), weight 700, tracking −0.02em. For the masthead, apply a very slight text-shadow (1px 1px 0 #B0B8C2) to simulate ink impression on newsprint. - **Body editorial:** `Source Serif 4` — variable optical size axis, body text at 18px / 29px line-height, weight 400. Paragraph lead line in weight 600 for the first sentence of each section. Long-form copy only; no body text in sans. - **Secondary labels / navigation / metadata:** `IBM Plex Mono` — 10–12px, uppercase, tracking +0.12em. Used for section labels, publication dates, issue numbers, and the vertical nav list. This monospace anchors the broadsheet fiction. - **Pull-quote / annotation font (humanist sans):** `Jost` — italic, 1.25rem, weight 300, used only for pull-quotes and annotation text that appears on the overlay layer, simulating pencil marginalia. **Palette (cool-grays foundation, total seven values):** - `#1C2128` — Deep Ink Black. Primary text, masthead. Near-black with a blue-gray cast, not pure black — the color of old newspaper type. - `#3D4A5C` — Slate Compositor. Secondary headings, section dividers. - `#7A8A9A` — Newsprint Mid. Metadata labels, caption text, rule lines. - `#B0B8C2` — Fog Gray. Borders, light rule lines, shadow hints. - `#D8DCE2` — Column Rule. Subtle column dividers and background tonal bands. - `#E8EAED` — Broadsheet Field. Page background — the exact tone of slightly aged newsprint under cool morning light. - `#F7F8F9` — Panel White. Card/panel backgrounds — crisp but not blinding, suggesting fresh print stock. - **Accent (botanical):** `#4A5E47` — Leaf Ink. Used only for botanical illustration strokes and the faintest tonal wash behind nature motifs. Never used for UI chrome or headings. **No gradients. No warm tones except `#4A5E47` botanical accent. Color is structural, not decorative.** ## Imagery and Motifs **Custom illustration is the only image type.** No photography. No stock imagery. No icon libraries. All imagery is **hand-drawn-feel SVG botanical illustration** in the tradition of 18th–19th century natural history plates, but rendered in the cool ink colors of the palette rather than watercolor. Line weight: 1.2px primary contour, 0.6px secondary cross-hatch for shadow volumes, 2px for specimen labels drawn as if in a field notebook. **Recurring illustration subjects and placement:** 1. **The Oak Branch** — the signature motif. A single, mature oak branch with three to five lobed leaves, drawn at ~340×220 final SVG size. Appears partially cropped by the right edge of the hero panel, as if growing into frame. Strokes in `#4A5E47`, hatching in `#4A5E47` at 35% opacity for depth. 2. **Seed-head cluster** — a bundle of 7–9 grass seed heads (resembling Juncus effusus) drawn as a loose sheaf, used as a section-break marker between major content clusters. Rotated −3° and placed in the left margin of the annotation column. 80×180 SVG. 3. **Single leaf, pressed** — a flat, ovate leaf (oak or hornbeam) rendered as if pressed between book pages: slightly curled at one edge, visible central vein and secondary veins, transparent fill. Used in the secondary column as a decorative anchor for pull-quotes. 60×90 SVG. 4. **Graphite underline animation** — not an illustration but a CSS animation simulating a hand drawing a graphite line under key headings. The underline travels left-to-right over 0.7s using a `clip-path: inset(0 100% 0 0)` → `clip-path: inset(0 0% 0 0)` transition triggered on scroll-entry. Line is 2px, color `#3D4A5C`, with a slight SVG `feTurbulence` displacement filter to give the line an organic, hand-drawn imprecision. 5. **Correction loop** — a looping oval annotation mark (like an editor's circling a word) drawn as an SVG path around a pull-quote container. Stroke `#7A8A9A`, 1px, dasharray `6 3`, animated to trace itself in over 1.2s on first scroll into view. 6. **Broadsheet nameplate rule** — a double horizontal rule (3px / 1px, 8px gap) in `#1C2128`, spanning full column width above the masthead. This is a direct reference to newspaper front-page nameplate rules. ## Prompts for Implementation Build politics.quest as a **single long-form broadsheet dispatch** — a single-page narrative that unspools like reading a Sunday newspaper from cover to back, but one that was printed partially wrong and then hand-corrected. Every scroll position should feel like turning a broadsheet's fold. **Structural blueprint (5 sections, each a "broadsheet fold"):** 1. **Nameplate (above the fold):** - Full-viewport-width panel, background `#E8EAED`. - Double rule (3px + 1px, `#1C2128`) at the very top, full width. - Masthead: "politics.quest" in `Libre Baskerville` 700, clamp(3rem, 6.8vw, 6.2rem), `#1C2128`. Baseline rotated −0.6° via CSS `transform: rotate(-0.6deg)` on the text element only. - Below masthead: a dateline in `IBM Plex Mono` 11px uppercase — "EST. — ISSUE NO. 001 — POLITICS IN PLAIN LANGUAGE" — spaced at +0.14em tracking. - The Oak Branch SVG illustration placed absolutely: right edge 0, bottom of panel, 320×200, partially clipped by `overflow: hidden` on the panel container. - On scroll into view, the graphite underline animation triggers under "politics.quest". 2. **The Editorial (primary dispatch):** - Two-column layout: 60% primary / 34% annotation (6% gutter). - Primary column: three editorial-length paragraphs in `Source Serif 4`. First line of first paragraph in weight 600. - Annotation column: one pull-quote in `Jost` italic, enclosed by the correction-loop SVG. One seed-head illustration below it. One `IBM Plex Mono` metadata label: "§ EDITORIAL — LONG READ" in 10px. - Panels for the two columns are white `#F7F8F9` with `border: 0.5px solid #B0B8C2` and `box-shadow: 0 4px 12px rgba(28,33,40,0.06)`. - The annotation column panel rotates `rotate(1.2deg)` relative to the primary column — as if pinned at a slight angle. 3. **The Index (below the fold 1):** - Full-width section, background tonal band `#D8DCE2`, height ~18vh — a pure visual breath between sections. - Three-column list of topic links in `IBM Plex Mono` 11px: no bullets, just plain text items set 1.9rem line-height. Topics separated by a thin 0.5px `#B0B8C2` rule between each column. - A section label "▸ INDEX" in `IBM Plex Mono` caps, positioned top-left of this tonal band. 4. **The Feature (below the fold 2):** - Broken-grid feature spread. A wide 68% panel anchored left with the lead feature text, and a 28% panel floating right but starting 3.5rem lower than the left panel (the offset creates the broken-grid break). - The right panel contains the pressed-leaf SVG illustration, a secondary headline in `Libre Baskerville` 600, and a two-sentence summary in `Source Serif 4`. - The left panel's heading underline-draws on scroll-entry. - A graphite correction-loop SVG circles the right panel's headline at 1.2s delay after the underline draws. 5. **The Colophon (back matter):** - Narrow centered column, max-width 540px, `#1C2128` text on `#E8EAED` background. - Publication meta in `IBM Plex Mono` 10px: domain, issue, date, editorial stance — one item per line. - A final seed-head illustration, 80×180 SVG, placed in the left margin, bottom-aligned with the last line of text. - A single sentence in `Jost` italic 300 at 1.1rem, centered below the meta block: the site's editorial philosophy in one line. - Final double rule (3px + 1px) at the very bottom, mirroring the nameplate rule. **Animation rules:** - Scroll-triggered only. No animations until element enters viewport (IntersectionObserver, threshold 0.15). - `underline-draw`: 0.7s ease-out, CSS clip-path. - `correction-loop`: SVG stroke-dashoffset animation, 1.2s ease-in-out, 0.3s delay after underline. - `panel-entry`: `opacity: 0 → 1, translateY(18px) → translateY(0)`, 0.5s ease-out. - Rotation jitter on annotation panels: set once at load via CSS, not animated — static analog quality. - No parallax. No scroll-jacking. No continuous motion. **Implementation constraints:** - Do NOT build: hero CTA buttons, pricing sections, sign-up forms, stat grids, testimonial blocks, sticky top nav, hamburger menus, modal overlays, notification banners. - Navigation is vertical, left-margin, static text list only. - Color usage must remain within the seven palette values + `#4A5E47` botanical accent. - All illustration SVGs must be inline in HTML for animation access and color inheritance. ## Uniqueness Notes **Differentiators from the existing design registry:** 1. **Cool-gray palette with zero warm tones** is essentially unprecedented in the registry. The frequency report shows `warm` at 89% — nearly every design uses warm amber, cream, or terracotta. politics.quest uses only cool slate-grays and a single muted botanical green (`#4A5E47`). This makes it immediately distinguishable from every other site in the corpus. 2. **Broadsheet-broken-grid** combines two approaches: a genuine broken-grid layout (6% in registry) used specifically to simulate hot-metal typesetting imprecision, not as a trendy design gesture. The off-register panels reference physical newspaper production constraints rather than aesthetic choice — a semantic use of the layout pattern not seen elsewhere. 3. **Botanical-over-political** is a conceptually distinctive imagery choice. The domain is "politics.quest" but the visual motifs are entirely from natural history (oak branches, seed heads, pressed leaves). This tension — nature's deep time against the urgency of political discourse — is the site's central metaphor, rendered without text explanation. No other design in the registry uses botanical illustration as its exclusive imagery type for a political/civic domain. 4. **Graphite annotation layer as interaction** — the underline-draw and correction-loop animations simulate the physical act of editorial markup rather than decorative animation. This gives the interactivity a narrative purpose: the site is being edited in real time as you read it. This animation logic is distinct from the parallax, particle, and color-shift animations dominant in the registry. 5. **IBM Plex Mono as the sole display sans** for all metadata, navigation, and labels is underused in the registry (monospace type is rare outside code-focused sites). Here it serves a civic/archival function — the monospace suggests typed dispatch cables and government communiqués, reinforcing the political journalism context. **Chosen seed:** aesthetic: retro, layout: broken-grid, typography: humanist, palette: cool-grays, patterns: underline-draw, imagery: custom-illustration, motifs: nature, tone: professional **Avoided patterns from frequency analysis:** - `warm` palette (89% registry usage) — explicitly avoided; all tones are cool - `gradient` (77%) — no gradients used anywhere - `humanist` typography (31%) — used but distinguished by pairing with IBM Plex Mono and Source Serif 4 rather than the common Jost/Inter combinations seen at high frequency - `retro` aesthetic (10%) — used but routed through broadsheet/newspaper reference rather than the more common retro-vapor/Y2K/vaporwave interpretation dominant in registry retro designs