# Design Language for polytical.club ## Aesthetics and Tone polytical.club is the digital headquarters of an invented members-only debate salon — a "poly-tical" club where polyhedral thinking, polyphonic argument, and poly-positional stances are practiced as a performance art. The site reads like the **printed program of an avant-garde fashion show that has been hijacked by a riso-printed political pamphlet** — and neither side won. The dominant mood is **edgy, rebellious, and theatrically self-aware**: think a 1968 student-union broadsheet folded into a Comme des Garçons lookbook, photocopied until the blacks bloom and the registration drifts. Nothing here sells anything; the club has no product, no tiers, no signup-now urgency. Instead the page *stages* a sequence of "positions" — short manifestos, counter-manifestos, and a closing motion to adjourn — the way a runway stages looks. The tone is confident, allergic to corporate gloss, and faintly absurd: every heading is set as if shouted through a megaphone, every body paragraph whispers a footnote contradicting it. It should feel like you wandered into a meeting that is half costume rehearsal, half filibuster, entirely on purpose. Inspirations: Wolfgang Weingart's deconstructed typography, Barbara Kruger's red-bar agitprop, the warped grids of Yokoo Tadanori posters, mimeographed zine bleed, and the cold catwalk geometry of a brutalist runway with a single hot spotlight. ## Layout Motifs and Structure The composition is a **magazine-spread engine**: the page is divided into full-viewport "spreads," each one a numbered recto/verso pair (Spread I, Spread II …) that the visitor scrolls through like turning the leaves of an oversized programme. Each spread uses a **deliberately broken 7-column grid** — columns are not equal; column 4 is a narrow "gutter of dissent" only 28px wide, holding a vertical hairline rule and a rotated annotation. Headlines straddle 3–5 columns and are allowed to collide with image blocks; baselines are intentionally misaligned by 6–14px between adjacent text columns to mimic mis-registered print. Structure, spread by spread: 1. **Spread I — The Masthead.** Oversized warped wordmark "POLYTICAL CLUB" running edge to edge, the word fractured across two baselines, a red censor-bar swiping through the middle third on scroll. A tiny "Members & Provocateurs Only" stamp tucked bottom-left, rotated −7°. 2. **Spread II — The Charter (a contradiction in five clauses).** A two-column manifesto; the left column states the clause, the right column footnotes its own undoing. A diagonal slash of negative space cuts the spread corner to corner. 3. **Spread III — The Lookbook of Positions.** A horizontal filmstrip *inside* the vertical scroll: 6 "position cards," each a poster-portrait of an abstract figure (no real photography) labelled like a runway look — "Look 01 — Centrist in a Burning Coat." 4. **Spread IV — The Floor Debate.** A split spread; the top half is "Motion," the bottom half is "Amendment," divided by a thick black bar carrying scrolling ticker text of objections. 5. **Spread V — The Roll Call.** A list of fictional committee names rendered as a vertical marquee of mismatched type sizes, each name on its own misaligned baseline, like signatures on a petition. 6. **Spread VI — Motion to Adjourn.** Near-empty spread: one centered line "All in favour of nothing," a gavel glyph, and a slow fade of the red bar to nothing. No contact form, no newsletter — the meeting simply ends. No sticky top nav. Navigation is a left-margin **spread-index ladder** (I · II · III · IV · V · VI) drawn as small letterpress-style numerals; the active spread's numeral inflates and gains a red underline that draws itself. ## Typography and Palette **Type system (Google Fonts only):** - **Display / megaphone face:** `Anton` — ultra-condensed grotesque used for spread headlines and the warped wordmark, set in ALL CAPS at clamp(3rem, 11vw, 9rem), letter-spacing −0.01em, occasionally skewed via CSS `transform: skewX(-6deg)` and split across two `::before/::after` baselines for the fractured effect. - **Expressive variable secondary:** `Familjen Grotesk` (variable) — used for clause text, position-card labels, ticker copy; weights swing 400→700 within a single line on hover to fake kinetic emphasis. Set at 1.05–1.35rem, line-height 1.28. - **Contrarian footnote face:** `IBM Plex Mono` — every footnote, annotation in the "gutter of dissent," stamps, and the spread-index ladder; 0.72rem, letter-spacing 0.04em, often rotated 90° or −7°. - **Petition-signature accent:** `Caveat` (handwritten) — used sparingly for the Roll Call "signatures" and margin scrawls, varied size 1.4–3rem, rotated randomly between −5° and 4°. **Palette (high-contrast riso-agitprop):** - `#F2EBDD` — Pamphlet Cream (primary paper background) - `#111014` — Press Black (type, rules, bars) - `#E2342B` — Agit Red (censor bars, active underline, the single hot spotlight) - `#1B3A8F` — Roneo Blue (secondary print pass, links, ticker on dark bars) - `#E8C53A` — Mimeo Yellow (highlight smears behind select words, the gavel glyph) - `#9A958A` — Faded Toner Grey (mis-registered ghost layer, disabled index numerals) Color logic: paper is always Pamphlet Cream; ink is Press Black; **only one accent screams per spread** — never red and blue and yellow shouting together. Mis-registration is faked by offsetting a 92%-opacity Toner Grey duplicate of headlines by 2–3px. ## Imagery and Motifs - **Poster-portraits (the "Looks"):** six abstract figures built purely from CSS/SVG — bold flat shapes (a coat as a single black trapezoid, a head as a cream circle with a red bar for a mouth), halftone-dot fills generated via `radial-gradient` tiles, each cropped hard at the spread edge. No real photography anywhere on the site. - **Censor / agit bars:** thick red horizontal bars that slide across headlines on scroll, sometimes "redacting" a word entirely so only its shape remains. - **Mis-registration ghosting:** every major headline carries a faint Toner Grey echo offset diagonally, as if the print drum slipped. - **Halftone & toner-bloom textures:** subtle CSS noise + dot-grid overlays at 6–9% opacity over cream areas; edges of black blocks get a soft 1px bloom. - **Gutter of dissent:** a recurring 28px vertical channel down column 4 holding a hairline rule and one rotated mono annotation per spread ("see clause 3, which we retract"). - **Stamps & gavels:** circular rubber-stamp marks (slightly broken ink), a single line-drawn gavel glyph that appears only on the final spread. - **Ticker tape:** a black bar of endlessly scrolling Roneo-Blue objections on Spread IV, the only continuously-moving element on the page. - **Paper-fold seams:** faint horizontal crease lines between spreads, suggesting a folded programme. ## Prompts for Implementation Build polytical.club as a **single HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. It is a ~75-second scroll through six magazine spreads of an imaginary debate salon. There is **no CTA, no pricing block, no stat grid, no testimonials, no logo wall, no email capture, no FAQ, no cookie banner, no chatbot**. The "Motion to Adjourn" spread is the ending — the meeting closes; nothing is sold. **Storytelling structure (six spreads, scroll-driven):** 1. **Spread I — Masthead.** On load, the warped "POLYTICAL CLUB" wordmark assembles: Anton glyphs drop in with a short spring/elastic settle, top and bottom halves landing on slightly different baselines. As the user scrolls 1px, a red Agit Red censor bar wipes left-to-right across the middle third, briefly redacting "ITICAL". Toner Grey ghost echo of the wordmark trails 3px diagonally. 2. **Spread II — Charter.** Five clauses stagger-reveal from the left; each clause's self-refuting footnote fades up in IBM Plex Mono in the right column 200ms later. The diagonal negative-space slash is a `clip-path` reveal that draws as the spread enters. 3. **Spread III — Lookbook of Positions.** A horizontal-scroll filmstrip nested in the vertical flow (pin the spread, translate the strip on wheel/scroll). Six poster-portrait cards; hovering a card makes its label's Familjen Grotesk weight surge 400→700 and tilts the card −3° with a magnetic cursor pull. Halftone-dot fills animate a subtle 2px drift. 4. **Spread IV — Floor Debate.** Split top ("Motion") / bottom ("Amendment"), divided by a thick Press Black bar carrying a left-scrolling Roneo-Blue ticker of objections (CSS marquee, pauses on hover). On scroll into view, "Amendment" slides up to overlap "Motion" by 12px — the argument literally encroaching. 5. **Spread V — Roll Call.** A vertical marquee of ~14 fictional committee names ("Sub-Committee for Reversing Earlier Sub-Committees") in mismatched Anton/Caveat sizes, each on a misaligned baseline, scrolling slowly upward; a few names get a Mimeo Yellow highlight smear that wipes in behind them. 6. **Spread VI — Motion to Adjourn.** Near-empty Pamphlet Cream field; the line "All in favour of nothing." fades in centered, a line-drawn gavel glyph does one quick `path-draw-svg` stroke and a tiny knock-bounce, the standing Agit Red index underline drains to transparent. The page rests. Footer is one mono line: "polytical.club — minutes adjourned." **Interaction & animation notes:** - Left-margin spread-index ladder (I–VI) in IBM Plex Mono; active numeral inflates ~1.4× and grows a self-drawing Agit Red underline; clicking smooth-scrolls to that spread. - Headlines on scroll get their red censor-bar wipe via `scroll-triggered` width animation; one accent color per spread, never overlapping. - Use `spring`/`elastic` easing for the masthead assembly and gavel knock; `stagger` for clauses and roll-call lines; `magnetic` + `tilt-3d` only on the Lookbook cards; gentle `parallax` on the Toner Grey ghost layers (move 4–8px slower than their parents). - Fake print mis-registration everywhere with offset duplicate text/shapes at 88–94% opacity in Toner Grey; add a fixed 7% CSS noise overlay and a faint dot-grid; do NOT use real photographs. - Honour `prefers-reduced-motion`: drop the marquees, the horizontal pin-scroll becomes a normal vertical stack, headlines appear pre-redacted without the wipe. - Bias the whole thing toward a full-screen narrative programme, not a brochure: each spread owns the viewport, the visitor "turns pages," and the experience is a guided meeting that ends, not a funnel. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Avant-garde print as agitprop, not as fashion-gloss.** The corpus's rare avant-garde / magazine-spread sites lean elegant or moody; polytical.club is loud, contradictory, riso-bleeding agitprop — Barbara Kruger meets a student-union broadsheet. It fuses the underused `avant-garde` aesthetic (~2%) and `magazine-spread` layout (~6%) with an explicitly `edgy-rebellious` tone (~4%), three conventions rarely combined. 2. **"Mis-registration" as a first-class design system.** Almost every site here chases pixel-clean alignment; this one *engineers* misalignment — 6–14px baseline drift between columns, 2–3px Toner Grey ghost echoes, a 28px "gutter of dissent." The imperfection is the brand. 3. **Headlines that censor themselves.** Red Kruger-style bars wipe across headings on scroll and redact words to mere silhouettes — a structural motif, not decoration. Nothing comparable in the corpus. 4. **A site with no conversion intent, ending on "Motion to Adjourn."** No CTA, no pricing, no signup; the narrative deliberately closes the meeting. Counter to the CTA-heavy / stat-grid / hero-dominant majority. 5. **Zero photography, all CSS/SVG poster-portraits with halftone fills** — bucking the 98% photography imagery convention; the "Lookbook of Positions" is built from flat trapezoids and radial-gradient dot screens. **Chosen seed/style:** `avant-garde fashion lookbook` — *aesthetic: avant-garde, layout: magazine-spread, typography: expressive-variable, palette: high-contrast, patterns: scroll-triggered, imagery: collage, motifs: sharp-angles, tone: edgy-rebellious.* **Avoided patterns from frequency analysis:** no glassmorphism (81%), no hand-drawn whimsy (96%), no warm/gradient palette (98%/95%), no card-grid (91%), no cursor-follow-as-gimmick or generic magnetic everywhere, no photography (98%), no pastoral-romantic or warm-inviting tone — replaced with high-contrast cream/black/red riso, broken grid, and a rebellious editorial voice.