# Design Language for political.day ## Aesthetics and Tone political.day is a **constructivist agitprop broadsheet that prints itself fresh every dawn** — imagine a Rodchenko-era propaganda press relocated to a basement in 2026, still hand-cranking its plates, still smelling of lithography ink, but now feeding on the day's political churn instead of five-year-plan slogans. The mood is **two-color riso militancy**: stark, declamatory, slightly off-register, the kind of page that wants to be *posted on a wall*, not scrolled past. It is the opposite of the warm hand-drawn glassmorphism that saturates the corpus — there is no softness here, no frost, no gradient mesh, no pastoral romance. Every surface is a printed surface; every headline is set as if it will be screamed through a megaphone. The tone is **bold-confident bordering on edgy-rebellious**, but never partisan to any actual party — political.day is a *meta*-publication, a daily ledger of the political weather itself: who said what, what moved, what cracked. The voice is that of a wry, exhausted, fiercely literate printmaker who has seen every cycle and still shows up at 5 a.m. to set the type. Think *Wieden+Kennedy meets El Lissitzky meets a stubborn small-press zine*. Slightly grainy, slightly loud, entirely deliberate. The day is the protagonist: the site is a single broadsheet edition, dated, numbered, and replaced. ## Layout Motifs and Structure The composition is a **constructivist diagonal broadsheet** — a hard rejection of the card-grid (91% of corpus). The page is built on a **9-column rigid newspaper grid that is then violently raked**: the master grid stays orthogonal, but the *content blocks* are rotated to two canonical angles only — **−7° and +14°** — never anything in between. Headlines, rules, photo-blocks, and pull-quotes all snap to one of those two rakes, so the page reads as a stack of printed slips slapped down by a tired hand and never straightened. - **The Masthead Slab.** Top of page: an oversized `POLITICAL.DAY` wordmark spanning the full 9 columns, set in heavy condensed caps, with the edition number (`No. 0517`), the date, and a single horizontal hairline-rule of exactly 3px below it. This slab is the *only* element that stays perfectly level — it is the press itself, the fixed plate. - **The Diagonal Stack.** Below the masthead, the body is a **vertical timeline of "dispatches"** — each dispatch is a raked block: a numbered marker (`01`, `02`, `03…`), a screaming headline in condensed caps, a short body paragraph in a workhorse serif, and one halftone-treated geometric block (never a photograph). Dispatches alternate rake direction down the page, creating a zigzag spine. - **Margin Furniture.** The far-left and far-right gutters carry **running "wire ticker" text** set vertically (rotated 90°), in mono, scrolling slowly — fragments of the day's noise: timestamps, place names, fragmentary quotes. - **The Colophon Footer.** A black slab at the bottom, set like the imprint line of an old newspaper: who printed this, when, the press run ("Edition refreshed daily at 06:00"), and a Bauhaus-grid of small geometric pictograms standing in for "sections." - **No CTAs, no pricing, no stat-grid, no testimonials.** This is a publication, not a funnel. The only "interaction" is reading the edition top to bottom. Layout choices deliberately claim underused corpus territory: **timeline-vertical (4%)**, **diagonal-sections (5%)**, **single-column-spine reading flow** rather than the ubiquitous full-bleed centered card-grid. ## Typography and Palette **Fonts (Google Fonts only — three voices, each with a clear job, in the constructivist tradition of pairing a shout, a speaker, and a stamp):** - **Masthead & Headlines — *Oswald* (wght 600–700, all-caps, letter-spacing −0.01em).** Oswald is a tall, narrow, faintly grim revival of a classic gothic news face — it stacks like a propaganda poster and survives being rotated to a rake without falling apart. Used at 64px–140px for the wordmark and 32px–72px for dispatch headlines. Tracking tight, lines packed close, so a three-word headline reads as a *block*, not a sentence. - **Body & Dispatches — *Spectral* (wght 400 / 500, opsz body).** A robust, slightly inky workhorse serif with a newspaper temperament — generous x-height, sturdy serifs that hold up against the loud headlines. Set at 17px–19px, measure capped at ~62 characters per line, ragged-right, never justified (justification would feel too tidy for this press). - **Wire Ticker, Datelines, Colophon — *Space Mono* (wght 400, used sparingly).** The "stamp" voice: timestamps, edition numbers, place codes, the imprint line. Always uppercase, slightly tracked-out, the only sans/mono on the page. It plays the role of the printer's metadata pencil-marks in the margins. **Palette — high-contrast duotone riso, three inks plus the paper (NO gradient, NO warm beige wash — this is the anti-corpus palette):** - `#F3EFE3` — **Newsprint Cream.** The paper. Not white — a faintly grey-yellow pulp tone, the background everywhere. - `#141414` — **Press Black.** Near-black ink for body text, the masthead, the colophon slab, all hairlines and grid rules. - `#D7261E` — **Agit Red.** The single hot accent — vermilion riso red. Used for the dispatch numbers, one or two words inside each headline, the timeline spine, the off-register "ghost" layer behind halftone blocks. Bold but rationed: never more than ~12% of any viewport. - `#1B4D8C` — **Plan Blue.** A deep cobalt used *only* as the second riso layer in halftone blocks and as the rare secondary marginal accent — it gives the duotone its constructivist red/blue tension without ever competing with Agit Red for the eye. - `#8C8678` — **Ink Wash Grey.** A muted greige for de-emphasized text, the wire-ticker furniture, dividing rules between dispatches. Optional film: a **fine paper-grain noise overlay** at ~6% opacity across the whole page, plus a **0.5px–1px channel mis-registration** (red shifted up-left, blue shifted down-right) on halftone blocks to fake the press misalignment. No drop shadows anywhere — flatness is the rule; depth is implied only by overlap and overprint, the way real screen-printing stacks. ## Imagery and Motifs **No photography. No 3D renders. No stock anything.** Every visual is SVG or canvas, hand-built, two-ink, halftone-textured — the vocabulary of a small political press. - **Halftone Geometric Blocks.** In place of photos, each dispatch carries one bold geometric form — a circle, a triangle, a diagonal bar, a fist-as-abstract-wedge, a megaphone-as-cone — rendered as a **CSS/SVG halftone dot pattern** in Press Black, with an offset Agit Red or Plan Blue duplicate behind it (the mis-registration ghost). These are the "illustrations": stark, posterish, instantly readable at thumbnail size. - **Constructivist Diagonal Bars.** Thick raked bars (−7° / +14°) used as section dividers and as compositional weight — pure Rodchenko/Lissitzky structural lines, sometimes piercing a headline block, sometimes underlining a dispatch number. - **The Wire Ticker.** Marginal vertical text rivers — slow-scrolling fragments of the day's political noise, set in Space Mono, greyed, like the AP wire chattering in the background of a newsroom. - **Numbered Markers.** Each dispatch is stamped with an oversized two-digit numeral in Agit Red, set in Oswald, half-overlapping its headline block — like the section numbers struck onto a printed broadsheet with a hand-press. - **Bauhaus Pictogram Strip.** In the colophon: a row of tiny reductive geometric glyphs (square, circle, triangle, slash) standing in for "categories" — never literal icons, always abstract marks. - **Datestamp / Edition Furniture.** A circular "rubber-stamp" graphic — concentric rings, the date arced inside, slightly rotated and faintly smudged — sits near the masthead, reinforcing the "this is today's edition" conceit. ## Prompts for Implementation Build political.day as **a single-route vertical broadsheet** — one HTML file, one CSS file, one JS module. Treat the whole page as *one printed edition of a newspaper that exists for exactly one day*. There is no nav menu beyond the masthead, no CTA, no pricing block, no stat grid, no testimonial row, no email capture. There is only the edition: masthead → diagonal stack of dispatches → colophon. **Storytelling structure (top-to-bottom, ~70-second read):** 1. **The Press Warms Up (load).** Cream paper fills the screen. The masthead `POLITICAL.DAY` *prints in* — the wordmark arrives in two ink passes: first a faint Plan-Blue ghost slides in from the upper-left, then the Press-Black layer slams down on top a beat later, settling into register with a tiny overshoot. The hairline rule draws left-to-right. The edition number and date stamp in last, in mono. (Use **slide-reveal**, 3% in the corpus — these slabs *slide* into place like sheets onto a press bed, they do not fade.) 2. **The Diagonal Stack (scroll body).** As the reader scrolls, each dispatch block **slides in from the side it's raked toward** — a +14° block enters from the right, a −7° block from the left — travels a short distance, and *snaps* with a 1–2px overshoot, like a printed slip dropped onto a stack. The Agit-Red dispatch numeral arrives a half-beat after its headline, overlapping it. Halftone blocks reveal their second ink layer with a quick 80ms offset (the red/blue ghost lands slightly after the black). Use **scroll-triggered** reveals (25% in corpus — fine) and **stagger** within each dispatch (headline → number → body → halftone block). Keep easing crisp and slightly mechanical — `cubic-bezier(.2,.8,.2,1)` with a small overshoot — never bouncy, never elastic-jelly. 3. **The Wire Ticker (ambient).** The left and right marginal mono tickers scroll continuously and slowly (a full cycle ~60s), independent of page scroll — the newsroom noise that never stops. On a coarse pointer (mobile) they shrink to a single thin top-running ticker. 4. **Reading State.** The dispatch currently centered in the viewport gets a subtle treatment — its headline's accent word switches from Press Black to Agit Red, its diagonal divider bar thickens by 2px — so the eye always knows which "story" it's in. No modals, no flyouts. 5. **The Colophon (footer).** A full-width Press-Black slab unfurls from the bottom: the imprint line ("Set and printed daily · refreshed 06:00 · No. 0517"), the Bauhaus pictogram strip, and a final raked Agit-Red bar that runs off the edge of the page — the press ending mid-stroke. **Implementation notes:** - Halftone: generate with layered `radial-gradient` background tiles or an inline SVG `` of dots scaled by "density"; duplicate the shape, offset it 4–8px, tint it Agit Red or Plan Blue, place it *behind* with `mix-blend-mode: multiply` to fake overprint. - Channel mis-registration: on `:root`, define `--reg-x`/`--reg-y`; apply tiny `transform: translate()` offsets to the red and blue pseudo-layers of the masthead and halftone blocks. Optionally jitter them ±0.5px on a slow interval so the "press" feels alive. - Rake discipline: define exactly two transform utilities, `--rake-a: rotate(-7deg)` and `--rake-b: rotate(14deg)`. Every raked element uses one of them — no freehand angles. Counter-rotate inner text only where legibility demands it, but prefer leaving headlines on the rake. - Grain: one fixed full-viewport `::after` with an SVG `feTurbulence` noise at ~6% opacity, `pointer-events: none`. - Type: lock `Oswald` headlines to uppercase + tight tracking; never justify `Spectral`; keep `Space Mono` uppercase and rationed to metadata only. - Respect `prefers-reduced-motion`: kill the wire-ticker scroll, the registration jitter, and the slide-ins — render the edition as a static printed page. - Strictly no: drop shadows, blur/frost, gradient meshes, glassmorphic cards, photographs, cursor-follow blobs, magnetic buttons, parallax depth layers, counters, stat grids. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the frequency analysis: 1. **Riso-duotone constructivist printing-press aesthetic in a corpus drowning in hand-drawn glassmorphism.** Hand-drawn sits at 96% and glassmorphism at 81%; this site uses *neither* — it is flat two-ink lithography with deliberate mis-registration, a printmaker's surface, not an illustrator's doodle or a frosted-glass card. The visual language (Rodchenko/Lissitzky/El Lissitzky agitprop) appears essentially nowhere in the corpus. 2. **High-contrast duotone palette with zero gradient and zero warm-beige wash.** 95% of designs use gradients and 98% lean "warm"; political.day's palette is Newsprint Cream + Press Black + Agit Red + Plan Blue + Ink Wash Grey — flat inks, hard contrast, *overprint* instead of blending. No gradient appears anywhere. 3. **Two-angle rake discipline (−7° / +14°) over a rigid newspaper grid** — claiming the near-empty diagonal-sections (5%) territory, but in a *constructivist* register rather than the usual decorative slant, and pairing it with a timeline-vertical reading spine (4%). 4. **No photography, replaced entirely by SVG halftone geometric blocks** — directly counter to the 98%-photography corpus norm; the "images" are screen-printed shapes with offset ghost layers. 5. **Slide-reveal as the core motion language** (3% in corpus) — content *slides onto a press bed* and snaps with a mechanical overshoot, explicitly rejecting the ubiquitous spring (85%), magnetic (82%), and cursor-follow (89%) interactions, none of which are used. 6. **It's a publication, not a product page** — no CTA, no pricing, no stat-grid, no testimonial row anywhere; the site *is* a single dated, numbered broadsheet edition. Chosen seed/style: **high contrast duotone brand** — interpreted as a constructivist agitprop riso-print daily broadsheet (aesthetic: brutalist/swiss-constructivist · layout: diagonal-sections + timeline-vertical · typography: condensed/bebas-bold news gothic + serif-revival workhorse + tech-mono metadata · palette: high-contrast duotone, riso red/blue on newsprint cream · patterns: slide-reveal + scroll-triggered + stagger · imagery: geometric-abstract halftone, no photography · motifs: sharp-angles + grid-lines + vintage press · tone: bold-confident / edgy-rebellious). Avoided patterns from the frequency analysis: hand-drawn (96%), glassmorphism (81%), photography (98%), card-grid (91%), full-bleed-centered default, warm (98%), gradient (95%), mono-as-everything (94% — here mono is rationed to metadata only), parallax (91%), cursor-follow (89%), spring (85%), magnetic (82%), tilt-3d, drop shadows, stat-grids, CTA-heavy layouts.