# Design Language for politics.quest ## Aesthetics and Tone politics.quest is a **risograph protest broadsheet that argues with itself** — a single-sheet, ink-soaked political pamphlet that has been folded, mimeographed, taped to a lamppost, rained on, and re-printed in two spot colors that never quite register. It is not a campaign site, not a think-tank, not a "civic engagement platform." It is the *quest* part: politics treated as an open, unfinished investigation — a wall of pinned index cards, redacted memos, overheard arguments, and tally marks that never resolve into a clean answer. The tone is **edgy-rebellious** but disciplined — angry the way good editing is angry: every glyph chosen, nothing decorative-for-decoration's-sake. Think 1970s samizdat, Polish Solidarity poster art, the Atelier Populaire silkscreens of May '68, the photocopied zines of riot-grrrl, and the cold institutional gray of a declassified FOIA packet — collided. The site should feel like it was *made under deadline pressure by someone who cares*, not designed in a studio. Warmth comes from the **ink itself** — the bleed, the misregistration, the fingerprint at the corner — not from rounded corners or soft gradients. Mood words: *insistent, dog-eared, hand-set, slightly damp, unresolved, loud-but-literate.* ## Layout Motifs and Structure A **broken grid** — deliberately. The page is built on a 12-column newsprint grid, but every section *violates* it in a specific, intentional way: a headline that runs off the right edge, a column that's two characters too narrow so words hyphenate badly, a pull-quote rotated 2.5° as if a sticker were slapped down crooked. There is **no centered max-width "content well"** and no hero-with-a-button. Instead the document reads as one continuous **folded sheet** scrolling vertically through seven *Folds* (sections), each a full-bleed spread: - **Fold 0 — The Masthead.** Oversized condensed nameplate, a fake issue number ("Vol. ∞ · No. 03 · Price: Your Attention"), a typewritten dateline that types itself on load. A thin black rule, thick black rule, thin black rule — the classic newspaper triple-rule — but the rules are slightly wavy, like a worn printing plate. - **Fold 1 — The Wall.** A pinboard of index cards, torn-paper scraps, and a redacted memo, scattered on a broken grid with magnetic hover. Each card is a *question*, never an answer ("Who counts the count?", "Whose quiet is this?"). Cards cast hard offset shadows like physical paper. - **Fold 2 — The Tally.** A vertical column of hand-drawn five-bar gates (||||̸) that draw themselves stroke-by-stroke as you scroll. The numbers never add up to anything; a marginal note in the gutter reads "(figures disputed)." - **Fold 3 — The Margins.** Two columns of badly-justified body text — an essay-fragment — with **handwritten marginalia** overflowing into the gutters and a few words struck through with a single red line and "corrected" above. Footnotes are physical: little numbered slips taped to the bottom edge. - **Fold 4 — The Misprint.** A full-bleed spread where the cyan and the red plate are visibly *off-register* by 4–6px, producing chromatic fringing on every letterform; a headline reads "We Reprint Ourselves." This is the deliberate "broken" centerpiece. - **Fold 5 — The Stack.** Overlapping translucent sheets — earlier "editions" of the same paragraph, each slightly reworded, fanned like a stack of carbon copies, the topmost legible, the ones beneath ghosting through. - **Fold 6 — The Colophon.** Printer's marks (registration crosshairs, color bars, crop marks), a list of "type set in…", a single embossed-looking quest sigil, and the closing line. No newsletter signup. No share buttons. The sheet just *ends*, with a torn bottom edge. Spatial rules: hard 90° corners only; generous but *uneven* gutters; everything sits on visible baseline grid lines that show through like a printer's guide; elements are allowed to overlap and collide; nothing is ever perfectly aligned. ## Typography and Palette **Typefaces (all on Google Fonts):** - **Anton** — the nameplate and primary display. Ultra-condensed, jet-black, screaming-newsprint headline weight. Used at 8–18vw, tracked tight, sometimes set in all caps running off the edge. - **Oswald** (300/400/600) — secondary headlines, kickers, deck text, captions. Condensed grotesque; the workhorse "wire-copy" voice. - **Special Elite** — the typewriter face. Used for datelines, the self-typing intro, footnote slips, "stamped" labels (REDACTED, DISPUTED, DRAFT), and anywhere the site quotes a document. - **Source Serif 4** (variable, 400/600 + italics) — the body essay in Fold 3 and the Stack. A sober editorial serif that makes the long-read fragments feel like a real op-ed; badly justified on purpose. - **Caveat** — handwritten marginalia, struck-through "corrections," pin-board card annotations, the "(figures disputed)" note. **Palette — two-spot-color risograph + paper + ink:** - `#F4F1E8` — **Newsprint** (the paper). Warm, slightly gray-yellow, never pure white. The base. - `#1A1714` — **Press Black** (ink). Not #000 — a soft, slightly warm carbon black, the way ink soaks newsprint. - `#E63327` — **Riso Red** (spot #1). Hot, flat, vermilion protest-poster red. Used for the struck-through corrections, the "DISPUTED" stamp, one rule line, and the off-register fringe. - `#1F6FB2` — **Riso Blue** (spot #2). A muted cyan- blue, the other plate. Used for crosshair registration marks, some marginalia, and the second half of the misregistration fringe. - `#C9C3B2` — **Pulp Gray** (a third, mixed tone — black ink at ~25% on newsprint). For baseline guide lines, secondary rules, redaction bars (drawn as solid Press Black bars *over* the gray), and quiet UI. - Optional 6th: `#EAB94D` — **Highlighter Ochre**, used at most twice, as a translucent marker swipe over a single phrase. Color logic: paper + black do 80% of the work; red is *anger and error*; blue is *the apparatus / the official mark*; they only ever overlap at misregistration seams. Never a gradient. Never a glow. ## Imagery and Motifs - **Data-viz, hand-rendered.** Charts exist but are drawn like chalk on a blackboard or pen on a napkin: a "poll" as a wobbly bar chart with the error bars bigger than the bars; a "turnout" line that's been scribbled over; the tally-gate motif (████̸) as the recurring unit of counting. Every chart carries a marginal disclaimer. - **Grid-lines motif.** Printer's registration grids, baseline guides, crop marks, and color calibration bars are *decorative structure* throughout — the scaffolding is the ornament. - **Redaction & rubber stamps.** Solid black bars over phantom text; circular and rectangular "stamps" (DRAFT, REDACTED, DISPUTED, FILE COPY) rotated a few degrees, slightly faded, ink-bleeding at the edges. - **Torn & taped paper.** Section edges torn (irregular SVG paths), index cards held by little SVG "tape" rectangles at 30–45° with a faint shadow. - **Halftone & grain.** A subtle CSS/SVG halftone dot texture in the spot colors at low opacity; a fine paper-grain noise overlay on the whole document (~6% opacity) so nothing looks digitally clean. - **Misregistration / chromatic fringe.** The signature visual tic: any element can be "printed twice" — a red ghost 3px up-left, a blue ghost 4px down-right — especially on hover and in Fold 4. - **Icons:** none from an icon set. Only typographic / printer's marks: ¶, §, †, ‡, ※, ◇, registration crosshairs (✛), em-dashes used as rules, asterisks as bullets. ## Prompts for Implementation Build politics.quest as **one long full-bleed HTML document** — seven Folds, no SPA/router, no modals, no sticky nav bar, no cookie banner UI, no "get started" CTA, no pricing table, no testimonial carousel, no stat-grid of big numbers, no email capture, no footer link farm. It is a **broadsheet you scroll through**, not a product page. Prioritize *typographic voice and printed-object texture over information density*; *one slow vertical descent over branching navigation*; *tension and imperfection over polish*. **Load sequence (≈2.5s, skippable on scroll):** newsprint paper fades in → the triple-rule under the masthead draws left-to-right (thin, thick, thin) → the typewriter dateline types itself character-by-character with a blinking block cursor and faint key-clack via Web Audio (optional, muted by default) → a faint "ka-chunk" press-thud as the masthead settles into place with a 2px overshoot. Respect `prefers-reduced-motion`: skip the type-on, just fade. **Scroll behavior:** - Baseline guide lines and the broken 12-col grid are faintly visible at all times (1px Pulp Gray), like a printer's layout sheet. - Each Fold reveals with a **stagger**: elements don't fade — they *snap* in with a tiny 1–2px positional overshoot and a 40ms ink-settle, as if stamped down. - **Path-draw-svg** for: the triple-rules, the tally-gates (each five-bar gate draws stroke 1→2→3→4→diagonal), the wobbly chart lines, the torn edges. - **Typewriter-effect** for: the dateline, footnote slips, and any "quoted document" block. - **Magnetic / cursor-follow:** index cards on The Wall lean toward the cursor (≤6° tilt, spring back); the cursor itself can be a small red registration crosshair (✛) that leaves a faint 200ms ink trail. Disable on touch. - **Misregistration on hover:** headlines and cards split into a red ghost + blue ghost on hover, snapping back on leave (a 120ms spring). This is the primary micro-interaction. - Fold 4 ("The Misprint"): as you scroll *through* it, the red and blue plates drift further out of register (scroll-linked), peaking at ~6px, then settle as you exit. - Fold 5 ("The Stack"): the translucent carbon-copy sheets fan out on scroll (each rotates 1–3° and offsets a few px), and the underlying ghost text becomes slightly more legible as you hover the stack. **Texture & finish:** apply a full-page SVG paper-grain noise (~6%) and a low-opacity halftone-dot layer in the spot colors; give every "paper" element (cards, slips, sheets) a hard offset box-shadow (no blur, or ≤2px blur) in a 20%-black so they sit *on* the page physically. Type is set with real bad justification in the body columns (`text-align: justify` with tight `hyphens: auto` and a slightly-too-narrow measure). Headlines may overflow `100vw` with `overflow-x: clip` on the body. All corners 0px. No rounded anything. No drop-shadow glow. No gradient. **Voice of the copy:** every section asks more than it answers. Headlines are imperatives or questions ("Count Again." / "Whose Quiet Is This?" / "We Reprint Ourselves."). Charts carry disclaimers ("(figures disputed)", "(source: a guy)", "margin of error: yes"). The colophon lists the "type set in…" and ends on a single quiet line — then a torn bottom edge. Nothing sells; the page is a *position*, not a funnel. ## Uniqueness Notes Differentiators from sibling designs: 1. **The misregistration mechanic as the core interaction.** No other site treats *two-color print misalignment* as both the loading metaphor, the hover micro-interaction, and a scroll-linked centerpiece (Fold 4). The signature glitch here is analog (offset printing plates), not digital (RGB-split glitch art) — flat spot colors, no scanlines, no chromatic-aberration shader. 2. **Counting that never resolves.** The recurring unit is the hand-drawn five-bar tally gate that draws itself stroke-by-stroke, and every figure on the site is explicitly disputed. The site is *about* the unresolvability of political accounting — a thesis baked into the motifs, not just decoration. 3. **Self-arguing broadsheet structure.** "Folds" instead of sections; "The Stack" of carbon-copy re-edits; marginalia that overflows gutters; struck-through "corrections." The page literally contradicts and re-prints itself — an editorial-process aesthetic almost nothing else in the corpus uses. Chosen seed/style: `aesthetic: brutalist, layout: broken-grid, typography: condensed, palette: high-contrast, patterns: typewriter-effect, imagery: data-viz, motifs: grid-lines, tone: edgy-rebellious` (a risograph protest-broadsheet reading of "brutalist"). Avoided patterns from frequency analysis: no glassmorphism, no hand-drawn-cute illustration, no warm-earthy gradient palette, no card-grid-of-services, no hero-dominant CTA layout, no parallax-postcard photography, no pastoral-romantic or warm-inviting tone, no cursor-follow blob, no stat-grid, no pricing/testimonial/newsletter blocks. Brutalist (7%), edgy-rebellious tone (4%), condensed type (13%), broken-grid (10%), grid-lines motif (7%), typewriter-effect (13%) are all underused; this design leans into that combination rather than the 80–98% defaults (warm gradient / mono / parallax / glassmorphism / photography).