# Design Language for polytics.club ## Aesthetics and Tone polytics.club is **a risograph-printed civic bulletin board for people who argue in good faith** — the website rendered as if it were a three-colour screen-printed broadside pinned to the cork wall of a neighbourhood discussion society. The name is "politics" with the *L* and *I* swapped: **poly-** (many) + **-tics** (the nervous twitches of an argument). It is not a campaign, not a think-tank, not a news aggregator. It is the imagined home page of an informal club where strangers gather once a week, draw lots for which side they'll argue, and leave less certain than they came. The tone is **dry, generous, slightly mischievous** — the voice of a moderator who has seen every rhetorical trick, names them out loud, and still believes the conversation is worth having. Reference points: the over-inked Gestetner mimeograph zines of 1970s political collectives; Polish poster-school agitprop drained of its certainty; the printers' registration-mark crosses in the margin of a not-quite-aligned riso pull; the typeset agendas of Quaker business meetings ("the sense of the meeting"); and the hand-numbered raffle ticket. The mood is **anti-design** in the sincere sense — it refuses the smooth, the gradient-glazed, the conversion-funnelled. Edges are slightly off-register. Ink sits *on top* of the paper, never blended into it. Things are stamped, not styled. Crucially: this is a **club**, so the page should feel like *membership*, not *marketing*. No CTA pyramid. No "join now" urgency. The visitor is treated as someone who has already wandered in and is reading the noticeboard while the kettle boils. ## Layout Motifs and Structure The page is a **broken-grid corkboard**, not a feed and not a card stack. The governing structure is a **deliberately misaligned 12-column riso registration grid**: every block snaps to the columns, but each block is also offset by a small "misprint" delta — between −14px and +14px on both axes, seeded once per block and stable across reloads (so it reads as a *physical* misalignment, not a glitch). The visual canvas is **1280px wide at 1.0 zoom**, centred on a warm newsprint field with generous unprinted margins (≥120px on wide viewports) that read as the bench around the noticeboard. Vertical rhythm is organised as **seven pinned sheets**, each a self-contained riso pull: 1. **The Masthead Sheet** — the wordmark "POLYTICS" set enormous, the *L*/*I* swap drawn as a literal pencil correction mark (caret + transposition loop) hand-over the letters. Underneath, a single line: *a club for arguing on purpose.* A registration-mark cross sits in the top-left corner of every sheet from here down. 2. **The House Rules Sheet** — five numbered rules in a hand-stamped list ("1 — Steel-man before you strike. 2 — Cite or concede. 3 — The chair may interrupt anyone, including the chair."), each number set in a circle as if rubber-stamped, ink bleeding past the rim. 3. **The Standing Motions Sheet** — a vertical ledger of debate topics rendered as raffle-ticket stubs with perforated dotted edges; hovering a stub "tears" it slightly along the perforation and reveals the count of members who've signed up for each side ("FOR · 14 / AGAINST · 11 / UNDECIDED · 9") — *the only numerals on the page, and they are always close, never landslide.* 4. **The Method Sheet** — a hand-drawn flow of how a session runs (draw lots → 8 min opening → 6 min cross → 4 min from the floor → silent re-vote), laid out as a printer's imposition diagram with fold-lines and crop-marks. 5. **The Glossary of Bad Moves** — a two-column riso spread naming rhetorical fouls (motte-and-bailey, the Gish gallop, concern-trolling, the isolated demand for rigour) each with a one-line plain definition; the column gutter is intentionally crooked. 6. **The Chair's Note** — a single long paragraph, set ragged-right like a typed memo, signed with an ink-stamp date that updates to the real current date. 7. **The Colophon Sheet** — printing credits in the voice of a riso studio ("pulled in three passes — slate, oxblood, and a thin run of chartreuse — on 90gsm newsprint; misregistration left in on purpose"), plus the only navigation: a row of seven punch-holes, one per sheet, the active one ringed in oxblood. No top nav bar. No hamburger. No footer beyond the colophon. No sidebar. Scrolling *is* the act of leafing down the noticeboard. On narrow viewports (<720px) the broken grid collapses to a single column but the misprint deltas shrink to ±6px and the registration crosses stay. ## Typography and Palette **Type system — Google Fonts only, three faces, one job each:** - **Archivo Black** — the masthead and all sheet headlines. A grotesque so heavy it behaves like an ink-flooded stencil; at display sizes (clamp 56px–148px) it reads as a screen-printed poster letterform. Tracking pulled tight (−0.02em). This is the "slate" pass. - **Newsreader** (variable, weights 300–600, with its true italic) — all running text, definitions, the Chair's Note, glossary entries. A Google revival in the Times-Recutting lineage with a warm, slightly soft serif that photographs like newsprint body type; body set at **17px / 1.62 leading / 0.003em**, with the italic doing real work for *named fouls* and *asides*. - **Space Mono** — the structural furniture: rule numbers, the raffle-stub counts, crop-mark labels, fold-line callouts, punch-hole nav labels, the colophon. A fixed-width typewriter face that stands in for the duplicator's own ribbon. Used uppercase at micro sizes (10–12px, 0.14em tracking) for labels; at normal size for the FOR/AGAINST tallies. **Palette — three printed inks on one paper, high-contrast riso duotone-plus-one:** - `#F4EEDC` — **Newsprint** — the unprinted ground. Warm, faintly grey-yellow, the colour of cheap recycled stock. Everything sits on this. - `#2B2A28` — **Slate Ink** — the dominant first pass. Near-black with a cool warmth; all body text, the masthead, rules, the grid lines. Never pure `#000`. - `#8A2B1E` — **Oxblood** — the second pass. A dried-blood brick red used for the *L*/*I* correction mark, the active punch-hole ring, the registration crosses, perforation tears, and the word "AGAINST" in the tallies. - `#B7C233` — **Chartreuse Run** — the thin third pass, deliberately under-inked (used at 60–85% opacity, never solid). Highlights behind *named fouls* in the glossary, the "FOR" count, the fold-lines in the Method sheet, and a single misregistered ghost-offset of the masthead 4px down/3px right. - `#5C5A52` — **Ash** — a muted supporting tint (slate at reduced strength) for secondary captions, crop-mark hairlines, and the "UNDECIDED" tally — used sparingly so it reads as a lighter ink coverage, not a separate colour. Misregistration is structural: the masthead, the rule-circles, and the raffle stubs each render a faint duplicate of themselves offset 2–4px in chartreuse or oxblood at low opacity, so every heavy element looks like a slightly-off print pull. ## Imagery and Motifs **No photographs. No icon fonts. No emoji. No raster images at all.** Every mark is drawn at runtime from SVG and CSS so the whole page reads as one printing operation: - **The registration-mark cross** — the classic printer's target (a `+` inside a thin circle) in oxblood, 18px, pinned to the top-left of every sheet below the masthead. It is the page's recurring signature. - **Crop / trim marks** — short right-angle hairlines at the four corners of the canvas, in ash, as if the page were a sheet waiting to be guillotined. - **The transposition mark** — the editor's "swap these" symbol (a curved loop linking two letters) drawn over the *LI* of POLYTICS in oxblood pencil-stroke, the single most important graphic on the page. - **Perforation lines** — dotted/dashed SVG strokes along the edges of the Standing-Motions raffle stubs; on hover the stub rotates 0.6° and a torn-paper edge (a jagged SVG path in newsprint with an oxblood under-ghost) is revealed. - **Rubber-stamp circles** — the rule numbers and the Chair's date sit inside hand-wobbled circles (an SVG ellipse path with slight irregularity), ink density uneven, edge broken in one or two spots — the look of a stamp pressed by hand. - **Imposition / fold diagram** — in the Method sheet, dashed mountain/valley fold-lines in chartreuse with tiny Space Mono labels ("FOLD", "8 MIN", "RE-VOTE"), arranged like a printer's signature layout. - **The paper grain** — a single SVG `feTurbulence` filter (baseFrequency ~0.9, 2 octaves) tiled at ~6% opacity in slate, multiplied over the newsprint, plus a faint horizontal "ribbon banding" gradient at 3% to suggest uneven roller pressure. - **The punch-hole nav** — seven small circles (true holes — newsprint colour with an inner shadow ring) along the right margin, the active one ringed in oxblood, each labelled with a Space Mono numeral on hover. ## Prompts for Implementation Build polytics.club as **one HTML file, one CSS file, one ES module** — no framework, no router, no build step, no service worker, no fetch. **Target under 95KB uncompressed.** No raster images, no icon fonts, no Lottie, no web-component libraries. SVG and CSS only. Honour `prefers-reduced-motion` by freezing all motion to its end-state (misregistration offsets stay; everything else stills). **This is a noticeboard you leaf down, not a funnel you fall through.** There is **no hero CTA, no "join the club" button stack, no pricing, no testimonials carousel, no stats dashboard, no logo wall, no email-capture modal, no cookie banner, no chatbot, no FAQ accordion.** The closest thing to a join action is one quiet line in the Colophon: *"meetings are Thursdays; the door is the email below"* with a single mailto link set in Space Mono, unstyled as a button. **Page event timeline (first paint → steady state):** - **0.00s — first paint.** Newsprint `#F4EEDC` fills the canvas. The turbulence grain renders immediately at 6%. Crop marks ink in at the corners. *Nothing animates yet.* - **0.15s — the slate pass.** The masthead "POLYTICS" stamps in: it does not fade — it **drops on** in two beats, like a press platen closing: scale from 1.03→1.00 over 220ms with a hard cubic ease, no blur. 30ms later its chartreuse ghost-offset appears 4px down/3px right at 70% opacity. - **0.45s — the oxblood pass.** The transposition mark draws itself over the *LI* with an SVG path-draw (stroke-dashoffset) over 500ms, ending with a tiny 1px "press wobble". The registration cross appears top-left with a 90ms scale-pop. - **0.7s onward — sheets reveal on scroll.** Each pinned sheet, when its top crosses 80% of viewport height, performs a **"pull" reveal**: the whole sheet translates up 18px and its content un-clips top-down over 380ms (stagger children 40ms), and its own registration cross pops last. No opacity-only fades — content arrives the way a print pull is lifted off the bed: from one edge. - **Raffle stubs (Standing Motions).** On pointer-enter a stub: rotate to a seeded angle in [−0.8°, +0.8°], reveal the torn perforation edge, and **count the FOR/AGAINST/UNDECIDED numerals up** from 0 with a stepped (not smooth) increment — like a tally counter clicking. On pointer-leave it snaps back with a small elastic overshoot (≤4%). The numbers must always be close to each other; never animate a blowout. - **Cursor.** A faint oxblood registration-cross trails the cursor at ~12% follow-lag, 14px, screen-blend — as if the reader's eye were itself a print target. It vanishes on touch devices. - **Punch-hole nav.** Scrolling moves the oxblood ring from hole to hole with a 160ms snap; clicking a hole smooth-scrolls to that sheet. On hover, the Space Mono numeral fades in 10px to the left of the hole. - **The Chair's date** stamps the *real current date* into its rubber-stamp circle on load with a 1° random rotation and a brief "press" scale. - **Microinteractions:** glossary "named fouls" get a chartreuse marker-swipe behind them on hover (a clip-path wipe left→right, 180ms, under-inked); the kettle conceit can surface as a single line in the masthead that swaps between three phrasings every 9s with a typewriter retype of just the last clause. **Storytelling spine:** the visitor arrives mid-conversation, reads the house rules, sees that real motions are evenly split (the club's whole ethos: certainty is the enemy), learns the method, learns the names of the tricks they'll be tempted by, hears the Chair admit they're often wrong, and finds — only at the very bottom, in printer's small-caps — the day and the door. The page should leave them *less sure and more curious*, which is the entire point of the club. ## Uniqueness Notes Distinct departures from the other designs in this registry and from generic political/club sites: 1. **Risograph misregistration as a structural system, not a filter.** Most "riso" or "anti-design" sites in the wild apply grain and call it done. Here every heavy element carries its own seeded 2–4px ink-offset ghost, the whole grid is *intentionally* misaligned by stable per-block deltas, and the printer's registration cross is the recurring brand mark — the imperfection *is* the layout. 2. **A politics site with exactly one set of numerals — and they're always close.** The page deliberately refuses stat-grids, vote-share charts, polling dashboards, and percentage badges. Its only numbers are the FOR/AGAINST/UNDECIDED tallies on the raffle stubs, engineered to always be near-even. This is content-as-thesis: the club exists because the question is genuinely open. 3. **Membership voice, not marketing voice.** No CTA pyramid, no join button, no urgency, no funnel. The single join affordance is a mailto link in the colophon styled as plain monospace text. The visitor is treated as already-inside, reading the noticeboard. 4. **Editorial-correction iconography (the L/I transposition loop) as the wordmark's defining graphic** — the site's name is literally a typo, and the page owns it with a hand-drawn proofreader's swap mark animated on load. No other design uses proofreading marks as primary imagery. 5. **The "print pull" reveal motion** — sheets arrive by un-clipping from one edge with a hard platen-press ease, never by opacity fade — borrowing the physics of lifting a screen-printed sheet off the bed, distinct from the parallax/spring/fade-reveal conventions dominant in the corpus. **Chosen seed / style:** *vintage newspaper layout* (riso-bulletin reading) — recombined as `aesthetic: anti-design, layout: broken-grid, typography: slab-serif/grotesque-display, palette: high-contrast duotone (riso slate+oxblood+chartreuse), patterns: path-draw-svg + counter-animate (stepped) + cursor-follow, imagery: noise-texture + line-illustration (no photography), motifs: grid-lines (registration marks), tone: raw-authentic / dry-mischievous.* **Avoided overused patterns from frequency analysis:** no glassmorphism (81%), no hand-drawn-cute aesthetic (96%), no photography (98% — this page has none), no card-grid (91%) or centred hero (83% — broken-grid instead), no warm-gradient palette (95%/98% — flat printed inks only), no spring/magnetic/tilt-3d motion clichés (replaced with platen-press easing and stepped tally counters), no parallax storytelling.