# Design Language for politics.day ## Aesthetics and Tone politics.day is **a risograph-printed civic almanac for a single day of public life** — imagine a one-room municipal print shop where, every morning before dawn, a tired volunteer hand-cranks a Riso duplicator to produce the day's "people's bulletin": who is governing, what is being decided, which clocks are ticking. The aesthetic is **anti-design civic ephemera** in the lineage of community-board flyers, mimeographed union newsletters, ballot sample cards, and Eastern European agitprop posters — but rinsed of any partisanship. politics.day is *deliberately non-partisan to the point of being almost clinical*: it does not editorialize, it does not rage; it simply lays out the architecture of a political day with the flat, almost tender precision of someone who has decided the most radical act available is to make civic time legible. The tone is **grounded-earthy meets raw-authentic** — printerly, slightly weary, quietly insistent. Nothing glows. Nothing is glassy. The mood is the smell of toner and recycled paper at 6am, the soft *thunk-thunk* of a drum cylinder, the way a Riso print is never quite registered so the cyan ghosts a millimeter off the black. This is **honest, misregistered, ink-on-newsprint** — a website that looks like it was *printed*, not rendered. It is the opposite of a campaign landing page: no urgency, no donation thermometer, no countdown to outrage — just the day, set in type, slightly smudged, handed to you. The "day" in politics.day is literal: the entire site is organized around **the 24-hour civic clock** — sessions, hearings, votes, deadlines, briefings — treated as a printed daily schedule the way a newspaper once printed tide tables and train times. It is reference, not feed. Almanac, not news cycle. ## Layout Motifs and Structure The page is a **broken-grid broadsheet** — a single-column civic broadsheet *deliberately knocked out of alignment*, the way a Riso master sheet shifts on the drum. The reference canvas is **a folded foolscap broadsheet: 1100 × 1560 effective area at 1.0 zoom**, scaling fluidly but always preserving the **tall folio ratio (≈ 1 : 1.414, the √2 of a folded sheet)**. On wide viewports (≥ 1100px) the broadsheet pins centered with **generous oat-colored margins** that read as the trimmed paper edge and the print-shop table beneath it — never as empty UI chrome. On narrow viewports (< 700px) the broadsheet reflows into a **single tall ribbon**, the way a long galley proof unspools. **Structural rules:** - **The masthead is a stamped block, not a logo.** "POLITICS.DAY" set in heavy condensed caps inside a hand-ruled rectangle, with a smaller line beneath: the date, set as `THE DAY · [WEEKDAY] · [DATE] · EDITION No. ___`. The masthead is intentionally **printed 1.5° off-square** — a CSS `rotate(-1.5deg)` on the whole block — as if the platen wasn't locked. A faint **cyan ghost copy** of the masthead sits 2px down and 2px right, slightly transparent: the misregistration. - **The day is a vertical ledger.** The body is one long **24-row ledger** — hours of the day down the left in a narrow gutter column (set in mono), civic events laid into the wide column to the right. Hours with nothing scheduled are not empty: they get a printed **rule line and a small typographic dingbat** (a ❡ pilcrow, an asterism ⁂, a manicule ☞) so the page never has a blank stretch — every hour is *accounted for*, even the quiet ones. - **Broken alignment as content hierarchy.** More consequential entries are set in a **larger type body and indented less** (closer to the gutter rule); minor entries are smaller and indented further. Some entries are **rotated ±0.75°** individually, as if pasted up by hand. A handful of entries are **stamped diagonally** across the column in outline caps — `ADJOURNED`, `IN RECESS`, `RESCHEDULED`, `SINE DIE` — like a clerk's rubber stamp. - **Marginalia rail.** The right margin of the broadsheet carries **printed marginalia**: tiny hand-numbered footnotes, a "corrections" box (always containing one wry correction about a misregistered word), and a vertical **"set and printed" colophon** running bottom-to-top up the edge. - **Footer is the press run line.** The bottom of the broadsheet is a single printer's line: `RUN OF [N] · CYAN + BLACK ON OAT · NEXT EDITION AT MIDNIGHT · NO PART OF THIS DAY IS FOR SALE`. No card-grid. No bento boxes. No hero image. No nav bar — navigation is a small printed **"folio map"** in the corner (just text links set like a table of contents in a pamphlet). ## Typography and Palette **Type stack — Google Fonts only, four faces, one civic-mono spine:** - **Bebas Neue** — the masthead and all stamped/diagonal display words (`ADJOURNED`, `EDITION No.`). All caps, hyper-condensed, the unmistakable voice of mid-century official posters and protest placards. Used *only* at large sizes (≥ 38px) and always with **tight tracking (−0.01em)** and a slight cyan misregistration shadow. - **Archivo** — the workhorse body face for civic-event entries: a sturdy, slightly grotesque humanist sans (a Google-Fonts staple of governmental and civic-tech design) set at **15.5px / 1.5 leading / 0.005em**. Its squarish, no-nonsense letterforms read like a well-set municipal notice. Bolder weights for consequential entries; the italic for the wry marginalia. - **Spectral** — a single elegant serif used *sparingly* for **pull-quotes of plain civic text** (a constitutional clause, a procedural rule, a definition of "quorum") set large and ragged-right, the way an old broadsheet would set a "TEXT OF THE LAW" box. Spectral's calm, screen-tuned serif gives those moments weight without pomp. - **JLS Smart Tape Mono** is *not* available — instead the **gutter clock, footnotes, colophon, and press-run line** are set in **Spline Sans Mono** (Google Fonts): a tidy, slightly soft monospace that reads like a thermal-printed receipt or a clerk's tally sheet. Tracked at **0.02em**, small (11–13px), in pure black. **Palette — a two-color Riso job on uncoated stock, plus the rare warm overlap:** - `#F2EBD9` — **Oat Stock**: the paper. A warm, slightly greyed cream like recycled 60lb offset. The dominant field of the entire page. - `#171512` — **Press Black**: near-black with a hair of warmth, the "key" plate. All primary type, ledger rules, the masthead box. Never pure #000. - `#0E8FD8` — **Riso Cyan (Blue 70)**: the second plate. Misregistration ghosts, the stamped diagonal words, footnote numbers, the colophon rail, hour ticks. Bright and slightly chalky, exactly like Riso's "Federal Blue" / "Blue" ink — *not* a digital blue. - `#E84B2E` — **Riso Fluoro Orange** (accent, used at most twice per page): a single hot orange "third pass" — reserved for the *one most time-critical thing of the day* (a closing deadline, a vote in the next hour). Used like a librarian's red date stamp: rare, loud, never decorative. - `#C8BFA6` — **Trim Shadow**: a desaturated olive-grey used only for the table-beneath-the-paper margin and for hairline rules at 40% — the color of cardboard and pencil. - `#5C5848` — **Pencil Note**: a soft brown-grey for the smallest marginalia and the "corrections" box text. Overlap rule (the Riso trick): wherever Press Black and Riso Cyan layers cross, the blend is rendered with `mix-blend-mode: multiply` so a **darker teal-black naturally appears** — never hand-pick that color, let the multiply make it. ## Imagery and Motifs **No photographs. No raster images. No icon fonts. No emoji.** Everything is **drawn at runtime** from SVG, CSS, and typographic primitives, so the whole page reads as one continuous duplicator print job. Carrying motifs: 1. **Riso grain & misregistration.** A single tiled `feTurbulence` filter (baseFrequency ≈ 0.9, numOctaves 2, seed 7) drives a **toner-speckle layer at 6% opacity** multiplied over Oat Stock — uneven, like ink density variation across a Riso drum. Every cyan element additionally renders a **2px offset ghost copy** at ~30% alpha: the registration never lands. This is the single most identity-defining detail — *the page is always slightly out of register*. 2. **Hand-ruled boxes.** All "boxes" (masthead frame, corrections box, pull-quote box, folio map) are drawn with **hand-jittered SVG `` rectangles** — corners overshooting by 2–4px, edges with a faint sine wobble — like a ruler-and-pen line, never a crisp CSS border. 3. **Printer's dingbats as the lexicon of quiet hours.** Pilcrows ❡, asterisms ⁂, manicules ☞, section marks §, fleuron sprigs — used as **structural punctuation** for empty hours and section breaks. They are content, not decoration: each marks "nothing scheduled / business continued / see margin." 4. **The rubber stamp.** A reusable SVG "stamp" component: outline-caps text inside a jittered double-ruled rectangle, rotated 6–14°, in Riso Cyan or (rarely) Fluoro Orange, with the ink slightly *broken up* (a mask of speckles eating into the strokes) — applied to `ADJOURNED`, `IN RECESS`, `QUORUM PRESENT`, `SINE DIE`. 5. **Crop marks & a fold line.** Faint **printer's crop marks** at the four corners of the broadsheet, and a single **horizontal dashed "FOLD HERE" line** across the middle of the page (with the words set tiny in mono along it) — the page knows it is a folded sheet. 6. **The civic clock face.** In the gutter, hours aren't just numbers — every 6th hour (00, 06, 12, 18) gets a tiny **SVG sundial-tick / clock-hand glyph** drawn in cyan, so the day visibly *turns* as you scroll. ## Prompts for Implementation Build politics.day as **one HTML file, one CSS file, one ES module** — no framework, no router, no service worker, no fetch, no build step. **Total uncompressed bundle target: under 95KB.** No raster images, no icon fonts, no Lottie, no canvas/WebGL. SVG + CSS only. **The experience is a slow scroll down a printed day** — full-screen, narrative, almost meditative. No CTAs, no pricing, no stat-grids, no donation widget, no countdown-to-outrage. The "story" is simply: *here is the architecture of one civic day, set in type, slightly smudged.* **Page event timeline (first paint → steady state):** - **0.00s — first paint.** Oat Stock (`#F2EBD9`) fills the canvas. The toner-speckle grain layer renders immediately at 6%. Crop marks fade in at the corners. *Nothing moves yet.* (Respect `prefers-reduced-motion`: if set, the entire sequence below renders instantly in final state, no motion.) - **0.15s — the press passes.** The page "prints" the way a Riso does: a **two-pass reveal**. First the **Riso Cyan plate** sweeps top-to-bottom (~600ms) — masthead ghost, hour ticks, stamps, footnote numbers, colophon rail appear *first and slightly mispositioned*. Then the **Press Black plate** sweeps top-to-bottom (~700ms, starting at 0.4s) — masthead, all body type, ledger rules land *over* the cyan, mostly-but-not-quite registered. The misregistration you see at the end is permanent. (Implement as two stacked layers with `clip-path: inset()` animated, or a soft mask wipe.) - **~1.3s — the day settles.** Individual ledger entries do a tiny **stagger "drop into place"** — each rotated ±0.75° with a 4–10px translate settle, springy but very short (≤ 250ms each, 30ms stagger), as if pasted up by a quick hand. The diagonal stamps land *last* with a single sharp **"thunk"** scale-down (1.15 → 1.0, 120ms) — the rubber stamp hitting the page. - **steady state — the living print.** Almost nothing animates on its own. The **only ambient motion** is an extremely subtle "drum drift": the cyan ghost layer shifts its offset by ≤1px on a slow 8s ease-in-out loop — the page breathing like a duplicator that never quite holds register. The Fluoro Orange element (if present) has one tiny **ink-pulse** every 6s: opacity 1.0 → 0.85 → 1.0, like the stamp ink still wet. **Scroll & interaction:** - **Scroll is the day passing.** As you scroll, a thin **cyan "now line"** (a hairline rule with a tiny ▸ marker and the literal current wall-clock time set in mono) tracks down the gutter — its position derived from the actual time of day, so the line sits where "now" is on the printed schedule. Entries *above* the now-line get a faint pencil **strikethrough** drawn in (SVG path-draw, 300ms) — "this hour has passed." This is the core scroll-triggered moment. - **Hover on a ledger entry:** the entry **un-rotates to true horizontal** (rotate → 0deg, 180ms spring) and a faint cyan **underline draws** left-to-right beneath it — like flattening a pasted-up strip with your thumb to read it. No lift, no shadow, no scale. - **Hover on a stamp:** the stamp **re-stamps** — quick scale 1.0 → 0.92 → 1.0 with a fresh speckle mask, 150ms. The "thunk." - **The folio map (nav):** clicking a section name doesn't smooth-scroll generically — it **"turns the page"**: the broadsheet does a fast horizontal `translateX` slide (200ms) like flipping a galley, landing on that section. A tiny mono label flashes top-right: `→ FOLIO ___`. - **Cursor:** a faint **registration-cross cursor** (a small + in cyan) replaces the default over interactive elements only. Subtle. Not a glowy follower. - **Footnotes:** hovering a superscript footnote number ¹²³ pops the marginalia note into the right rail with a tiny **typewriter reveal** (≤ 400ms) in Pencil Note color. **Layout build notes:** CSS Grid for the broadsheet (a 2-column grid: narrow mono gutter + wide body, plus a marginalia rail on wide viewports). Individual entry rotations via `rotate()` with per-element custom properties (`--skew: 0.6deg`). The masthead's `-1.5deg` is on a wrapper, the cyan ghost is a `::before` with `transform: translate(2px, 2px); color: var(--riso-cyan); opacity: .35; mix-blend-mode: multiply`. Hand-jittered boxes: pre-author the SVG paths with deliberate coordinate noise — do not try to randomize at runtime beyond the 1px drum drift. Keep all motion short, springy, and *rare* — the page should feel printed and still, not animated. ## Uniqueness Notes Distinct departures from the corpus and from generic civic/political web design: 1. **A political website with zero partisanship and zero urgency.** The entire genre of "politics" web design is CTA-driven: donate, sign, share, the-stakes-have-never-been-higher. politics.day is the inversion — **a non-partisan civic almanac that treats a political day as a printed train timetable.** No donation thermometer, no countdown, no outrage. The most "active" element is a now-line that moves because *time* moves, not because you should be alarmed. This editorial stance *is* the design. 2. **Risograph misregistration as the core identity, not a texture filter.** ~3% of the corpus uses noise-texture and another sliver does grain-overlay, but they use it as a flat aging veneer. Here the **two-pass cyan-then-black "print" reveal**, the permanent 2px ghost, the slow 1px "drum drift," and the `multiply`-derived teal-black overlaps make the page behave like an actual Riso job. The site is *always slightly out of register* — that's the brand. 3. **The 24-row hour-ledger as the whole layout.** Not a card-grid (91% of corpus), not a feed, not a hero. The page is literally **a printed daily schedule, hour 00 to hour 23**, where empty hours are filled with typographic dingbats rather than whitespace. Civic time as the spatial system. 4. **Bebas Neue + Archivo + Spectral + Spline Sans Mono** — a deliberately *municipal* type quartet (protest-placard display + civic-tech grotesque + plain-law serif + receipt mono) rather than the corpus-default mono+humanist+handwritten. No handwritten face anywhere. 5. **Rubber-stamp components and printer's marks as functional content** — `ADJOURNED` / `SINE DIE` stamps, crop marks, a "FOLD HERE" line, a press-run colophon. The chrome of physical printing carries the information architecture. Avoided overused patterns flagged by frequency analysis: **no glassmorphism (81%), no hand-drawn-illustration aesthetic (96%), no photography (98%), no card-grid (91%), no full-bleed gradient palette (95% gradient), no cursor-follow glow blob (89%), no parallax-heavy storytelling (91%)**. Warm palette is present but as *uncoated paper stock*, not a sunset gradient. Motion is intentionally minimal and "printerly" rather than spring-everywhere (84% spring in corpus). Chosen seed/style: **"asymmetric bold grid news"** — reinterpreted as a risograph-printed, deliberately-misregistered, anti-design civic broadsheet (aesthetic: anti-design / risograph; layout: broken-grid magazine-spread; typography: bebas-bold + grotesque-neo; palette: duotone Riso cyan + press black on oat, rare fluoro-orange; patterns: scroll-triggered now-line, underline-draw, short spring "thunk"; imagery: noise-texture as toner grain + path-draw-svg; motifs: vintage print-shop; tone: grounded-earthy / raw-authentic).