# Design Language for polytical.club

## Aesthetics and Tone

**polytical.club** is imagined as a neighborhood political café — the kind of place where screen-printed campaign posters from three different decades are pinned to a corkboard above a mismatched set of wooden chairs, where someone has left a dog-eared copy of a pamphlet next to a half-drunk cup of espresso, and where conversation is the only agenda. The aesthetic is **pop-art civic** — Roy Lichtenstein's bold outlines and Ben-Day dots pressed into service for local democracy rather than consumer culture. Not the slick ad-agency pop-art pastiche that makes everything chrome and ironic; this is *earnest* pop-art, the kind that believes in its subject matter.

The tone is **approachable-casual** with genuine warmth. No podium rhetoric, no manifesto preamble. The site speaks the way a trusted neighbor speaks — direct, curious, occasionally funny. The visual language mirrors this: heavy black outlines define shapes clearly (you know exactly what you're looking at), bright forest-green anchors every composition like the common ground of a town square, and accent yellows and warm reds feel less like alarm and more like chalk on a sidewalk.

Inspiration: Soviet agitprop posters minus the authoritarian content; Saul Bass title card geometry; 1960s American civic campaign graphics; hand-lettered protest sign typography crossed with serif editorial gravitas.

## Layout Motifs and Structure

The layout is **minimal-navigation** — a single descending spine with no persistent header clutter, no hamburger accordion, no mega-menu. Navigation is a single slim row of three text links at the top, then the page belongs entirely to the content. This is rare in the corpus at 3%, and polytical.club claims it specifically: navigation as a whisper, content as the shout.

The structural metaphor is the **campaign broadside** — a single large printed sheet, read top to bottom, that contains everything you need to know about one cause. The page is built as five full-viewport panels, each the height of one `100svh` screen. Each panel is a self-contained scene in the broadside sequence:

1. **Panel I — The Nameplate.** Full-screen forest-green field. The domain name `polytical.club` set in oversized serif-revival type, slightly letterspaced, centered. A single Ben-Day dot halftone circle pulses behind the text like a political button badge growing in slow CSS animation. The word "polytical" uses custom CSS underscoring: a thick red-accent underline drawn across only the root "polit-" fragment, the ligature break making the pun visible.

2. **Panel II — The Issue.** Off-white newspaper stock texture (CSS `noise` filter plus a warm `#FAF6EE` base). A pop-art speech bubble (thick 4px black stroke, white fill, comic-book tail) contains a single provocative civic question in medium-weight Playfair italic. Below it, three columns of body copy set in regular weight — each column is a different perspective on the question. The columns are separated by thick 2px rules.

3. **Panel III — The Map.** A stylized SVG ward-map outline — generic enough to read as "a city" — rendered with thick black strokes and flat forest-green fills for districts. Scale-hover interaction: each district polygon scales to 102% on hover with a brief spring animation, and a tooltip (styled as a campaign sticker) names a fictional civic topic. No actual geodata — this is illustration, not GIS.

4. **Panel IV — The Faces.** Six duotone-photo portraits (forest-green / warm-cream duotone treatment via CSS `mix-blend-mode: multiply` over colored divs). Each portrait is circular, framed in a thick black ring, with a speech-bubble caption in pop-art style. Scale-hover: the hovered face scales to 108% and the ring swaps to red-accent. The six faces rotate through on scroll using IntersectionObserver — no JavaScript framework needed.

5. **Panel V — The Closing Line.** Full-screen deep forest-green. One sentence, enormous, set in Playfair Display italic at `12vw`. A join-the-conversation prompt appears below as a minimal text link, underline-draw animated on hover. No form, no email capture, no CTA button.

Spatial grammar: generous negative space between elements, 8px grid everywhere, sections breathe rather than pack.

## Typography and Palette

**Typography (Google Fonts only):**

- **Display — [Playfair Display](https://fonts.google.com/specimen/Playfair+Display)**, weight 700–900, italic axis for headlines. The editorial serif-revival voice. Set at 8–14vw for Panel nameplate, 4–6vw for Panel callout lines. Tight letter-spacing (-1.5% to -2%) makes it feel like a quality newspaper masthead, not a wedding invitation.
- **Body — [Lora](https://fonts.google.com/specimen/Lora)**, weight 400 regular and 600 semibold. Lora is a contemporary serif designed for screens with warm stroke modulation — it reads comfortably at 16–18px column width and feels humanist without being fussy. All body copy, captions, tooltip text.
- **Label / UI — [DM Sans](https://fonts.google.com/specimen/DM+Sans)**, weight 400 and 500. Used exclusively for navigation links, panel numerals (I–V), and the domain handle in the closing panel. The contrast between Playfair's high-modulation serif and DM Sans's geometric rationality creates the tension that makes pop-art typography interesting.
- **Typographic treatment:** panel numerals (I, II, III, IV, V) appear as 400px ghosted Playfair Display characters at 4% opacity behind each panel's content — structural watermarks that give depth without competing.

**Palette:**

| Role | Color | Hex |
|---|---|---|
| Ground / primary | Forest green | `#2D5016` |
| Ground / mid | Leaf green | `#4A7C2E` |
| Background / paper | Warm cream | `#FAF6EE` |
| Accent / pop | Signal red | `#C8281E` |
| Accent / highlight | Campaign yellow | `#F5C842` |
| Text / line | Ink black | `#1A1A16` |
| Text / secondary | Warm gray | `#6B6558` |

The forest-green dominates: Panels I and V are fully green. Panels II, III, IV use the cream as base with green as structural accent. Red and yellow appear only as micro-accents (underlines, hover states, selected states, speech-bubble tails) — never as backgrounds, which keeps them maximally charged.

## Imagery and Motifs

**Duotone photographs.** All photography is processed with a strict two-color duotone: shadows are rendered in `#2D5016` (forest green), highlights in `#FAF6EE` (warm cream). In CSS: place the original grayscale `<img>` inside a div with `mix-blend-mode: multiply` over a forest-green background. This makes every photographic element feel like a vintage political printing press ran out of colors — exactly right for the civic pop-art tone.

**Ben-Day dots.** SVG radial dot patterns at three scales: large (40px grid, 28px dot radius), medium (20px grid, 14px radius), small (8px grid, 5px radius). Used as: background texture on Panel I (large, 12% opacity in campaign yellow), as border fills on the portrait rings (medium, green), as decorative corners on the broadside panels (small, red). All rendered as inline SVG `<pattern>` elements — no raster images.

**Speech bubbles.** Comic-book style SVG speech bubbles with 4px `#1A1A16` stroke, white fill, and a geometric angular tail (not rounded, not curvy — the Lichtenstein flat-angle tail). Used for the Panel II question and Panel IV portrait captions. On hover, the tail direction animates (CSS transform rotate) so it seems to point more urgently at the hovered face.

**Leaf-organic accents.** Thin-stroke SVG leaf silhouettes (three varieties: oak, fig, fern) appear as marginal decorations on the broadside panels — single leaves placed in corners, slightly rotated at 12–22 degrees, `3px` black stroke, no fill (outline only). They connect the political "green" metaphor to actual organic matter without making the site feel like an environmental brand. Restraint: no more than two leaves per panel.

**Campaign button badge.** The large CSS-animated circle behind the Panel I nameplate is a stylized political button: a concentric ring in campaign yellow on the outer edge, then ink black, then the green field. The animation is a slow 8-second scale pulse from 90% to 102% (infinite, ease-in-out) — just enough motion to feel alive.

**Scale-hover interactions.** Every interactive element scales: portrait photos 108%, ward-map polygons 102%, nav links shift baseline by -2px. All use `transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)` — the spring overshoot is deliberate, like a physical object bouncing off your touch.

## Prompts for Implementation

Treat polytical.club as a **single broadside scroll** — a long printed sheet that the visitor reads from top to bottom, once. Every scroll action should feel intentional and unhurried. No lazy-loaded spinners, no skeleton screens, no cookie banners, no sticky headers, no modals, no pricing tables, no feature grids, no social proof rails, no testimonials.

**Panel I — The Nameplate (implementation):**
Full-viewport div with `background-color: #2D5016`. The campaign badge is a `div` absolutely centered with `border-radius: 50%`, `border: 12px solid #F5C842`, animated via `@keyframes badge-pulse { 0%,100% { transform: scale(0.9); } 50% { transform: scale(1.02); } }` at 8s infinite ease-in-out. The Ben-Day dot SVG `<pattern>` sits at z-index 1, the badge at z-index 2, the text at z-index 3. The underline on "polit-" is a `<span>` with `border-bottom: 6px solid #C8281E; padding-bottom: 2px` — not a `text-decoration`, so it clips to the literal text width.

**Panel II — The Issue (implementation):**
Background `#FAF6EE` with a CSS `filter: url(#paper-noise)` SVG feTurbulence filter for texture (feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" result="noise" — applied as a very subtle overlay at 4% opacity). The three-column body layout uses CSS `column-count: 3; column-gap: 2rem; column-rule: 2px solid #1A1A16` for panels wider than 768px, single column on mobile. The speech bubble SVG is hardcoded — not generated dynamically.

**Panel III — The Map (implementation):**
SVG element sized to 60% of viewport width, centered. Each `<path>` district element gets `cursor: pointer`, `transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1)`, and `transform-origin: center` via `transform-box: fill-box`. The campaign-sticker tooltip is a `<div>` with `position: absolute`, `background: #F5C842`, `color: #1A1A16`, `border: 3px solid #1A1A16`, `font-family: 'DM Sans'`, `font-weight: 700`, `border-radius: 4px`, `padding: 4px 10px`, shown/hidden via JS `mouseover`/`mouseout` on each path element.

**Panel IV — The Faces (implementation):**
Six `<div>` elements in a CSS grid `grid-template-columns: repeat(3, 1fr)` on wide screens, `repeat(2, 1fr)` on medium, single column on mobile. Each cell contains a `<img>` (grayscale, `filter: grayscale(1)`) inside a `<div class="duotone-wrapper">` styled with `background: #2D5016; mix-blend-mode: multiply`. The outer ring is a `div` sibling with `border: 6px solid #1A1A16; border-radius: 50%; position: absolute; inset: -6px` — on hover, border-color transitions to `#C8281E` in 0.15s. IntersectionObserver: each face cell gets `opacity: 0; transform: translateY(24px)` initially; when 40% in viewport, class `visible` applied with `opacity: 1; transform: none; transition: 0.5s ease` staggered by index × 80ms.

**Panel V — The Closing (implementation):**
Full-viewport `#2D5016`. The single sentence is Playfair Display italic 700 at `clamp(3rem, 12vw, 9rem)`, `color: #FAF6EE`, centered, max-width 80vw, line-height 1.1. Below it, the text link uses the underline-draw pattern: `position: relative; &::after { content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px; background:#F5C842; transition: width 0.3s ease; } &:hover::after { width:100%; }`. No button element anywhere on the page.

**JavaScript scope:** Vanilla JS only. No framework, no bundler. Two script blocks — one for IntersectionObserver (Panel IV stagger), one for tooltip positioning (Panel III map). Total JS should not exceed 80 lines.

**CSS approach:** Single stylesheet, CSS custom properties (`--green-deep`, `--green-mid`, `--cream`, `--red`, `--yellow`, `--ink`, `--gray`) defined at `:root`. No Tailwind, no preprocessor. `clamp()` for all fluid type sizes.

**Narrative arc:** The visitor arrives at a town square (Panel I — the nameplate is the town sign), reads the posted question on the community board (Panel II), studies the ward map of the neighborhood (Panel III), sees the neighbors who will be affected (Panel IV), and finally encounters the site's invitation to join the conversation (Panel V). The broadside tells one story in five beats.

## Uniqueness Notes

1. **Pop-art at 1% frequency, deployed earnestly rather than ironically.** Every other pop-art reference in the corpus (where it appears at all) uses the aesthetic for playfulness or nostalgia. polytical.club is the first design that uses pop-art's graphic vocabulary (Ben-Day dots, heavy outlines, speech bubbles, flat color, bold type) in service of genuine civic content — democratic culture rendered in Lichtenstein's visual language without self-congratulation. The approachable-casual tone prevents it from ever feeling like commentary on itself.

2. **Serif-revival paired with pop-art (unprecedented crossing).** Serif-revival typography (Playfair Display + Lora) is used in the corpus primarily for editorial, literary, or luxury contexts. Pairing a high-modulation classical serif revival with thick-stroke pop-art geometry creates a friction that mirrors the domain's pun: "polytical" — political, but measured and literate. The serif carries authority; the pop-art outlines make authority accessible. No other design in the corpus crosses these two.

3. **Forest-green as the complete ground color, not an accent.** At 2% frequency, forest-green appears in the corpus usually as a supporting or accent hue. polytical.club makes it the primary ground — two full-screen panels in `#2D5016`, and green structurally present in every other panel. This turns the political "green" connotation (environmental parties, growth, civic renewal) into a literal visual environment the visitor inhabits, not a color they notice in a logo.

4. **The ward-map SVG with campaign-sticker tooltips** is a unique interaction pattern not found in any analyzed design — a non-geographic, illustrative map used as a navigation/storytelling device with pop-art tooltip styling. The scale-hover spring animation on district polygons makes the map feel physical and tactile.

5. **Seed used:** `aesthetic: pop-art, layout: minimal-navigation, typography: serif-revival, palette: forest-green, patterns: scale-hover, imagery: duotone-photo, motifs: leaf-organic, tone: approachable-casual`

6. **Avoided patterns (per frequency analysis):** serif-revival is at 6% (the highest-frequency typography seed) — this design uses it but deliberately subverts its usual contexts (editorial/luxury) by pairing it with pop-art graphic elements. Avoided: sans-grotesk (6%), variable-fluid (6%), expressive-variable (6%), playful-rounded (6%) — all high-frequency typography patterns that would push the design toward a more generic contemporary feel.
<!-- DESIGN STAMP
  timestamp: 2026-05-10T12:03:55
  seed: used:
  aesthetic: polytical.club** is imagined as a neighborhood political café — the kind of plac...
  content_hash: e48aaaa9c5ab
-->