# Design Language for political.bar ## Aesthetics and Tone **political.bar** occupies a tension that defines its name: the genteel drawing room where power is quietly negotiated, rendered through the visual grammar of digital decay. The aesthetic is **neubrutalism filtered through pastoral-romantic sensibility** — thick black borders and raw block geometries softened by faded damask undertones, crumbling gilt edges, and the kind of watermarked parchment that reeks of old money and older secrets. The mood is a 19th-century political salon reimagined as a corrupted BIOS screen: serif authority disrupted by glitch artifacts, velvet-draped walls flickering with scan-line interference. Think William Morris wallpaper running as a shader, or a Edmund Burke treatise printed on a VGA monitor. The tone is simultaneously pastoral and menacing — the meadow is beautiful, but someone buried something under it. Inspiration references: - Théodore Géricault's "The Raft of the Medusa" — compositional drama, figures arranged like corrupted data blocks - Vintage British political cartoons (Gillray, Rowlandson) — grotesque sincerity beneath decorative frames - Soviet-era propaganda posters rendered with neubrutalist flat fills - The visual language of leaked government documents: redaction bars, classification stamps, bureaucratic serif typography pierced by glitch noise The experience should feel like reading a primary-source archive that has been hacked — authoritative yet compromised, beautiful yet broken. ## Layout Motifs and Structure **HUD-Overlay composition** — the page has two visual strata that never fully merge: 1. **The Pastoral Ground Layer** (fixed, slow-drifting): A full-viewport SVG landscape — rolling hills, bare winter trees silhouetted in `#2C1810`, distant church spires rendered in hairline strokes at `#8B7355`. This layer breathes at 0.3x parallax speed. Every tree and hill is a real SVG path, not a texture. 2. **The Political HUD Layer** (scroll-driven, stacked): Chunky neubrutalist content blocks float above the ground, connected by visible guide-lines (2px `#1C1C1C` rules) as if placed by a cartographer. Each block has: - Asymmetric 4px–8px solid black borders (thicker on left and bottom — the "weight" side) - A classification-stamp header in small-caps (`UNCLASSIFIED`, `RESTRICTED`, `EYES ONLY`) that glitches on scroll entry - Content inside set in Libre Baskerville, tight leading, justified **Floating-elements choreography**: Decorative objects orbit the content blocks — wax seal SVGs, ribbon fragments, compass roses — each on its own `transform: translate` keyframe loop, moving at different rates (7s, 11s, 13s) to avoid synchrony. They cast soft box-shadows on the pastoral ground below. **Grid logic**: No CSS grid. Instead, each content block is absolutely positioned with JS-calculated coordinates that respect a loose 12-column system but deliberately break it at every third placement — one block bleeds 15% left, the next is indented 8% right. The scroll-trigger fires at 20% viewport intersection and lifts each block from `opacity: 0, translateY(40px)` into place. **Navigation**: A thin horizontal band fixed at the very top — 36px tall, `background: #1C1C1C`, white text in Libre Baskerville italic, showing only the current "document section" label. Like a document header, not a nav bar. ## Typography and Palette ### Fonts (Google Fonts only) - **Primary Display**: `Libre Baskerville` — used at 72px–120px for section titles, tracked at -0.02em, color `#1C1C1C`. Heavy authority, old-world gravitas. - **Body / Running Text**: `Libre Baskerville` regular 400, 16px/1.75 leading, justified, color `#2C1810`. The same family at reading size creates continuity without needing a second serif. - **Accent / Stamps**: `IM Fell English SC` (small-caps variant) — for classification stamps, pull-quotes, and bureaucratic labels. Color `#6B2D2D`, size 11px, letter-spacing 0.2em. - **Glitch fragments**: `Share Tech Mono` — used only for corrupted text overlays, redacted-text replacements, and the HUD coordinate readouts. Color `#8B7355`, size 13px. ### Color Palette — Muted Vintage | Role | Hex | Description | |------|-----|-------------| | Document Ground | `#F2EDDF` | Aged vellum — the primary background of all content blocks | | Deep Ink | `#1C1C1C` | Near-black for borders, titles, and neubrutalist block fills | | Oxblood Accent | `#6B2D2D` | Stamps, seals, alert states, and hover fills | | Umber Earth | `#2C1810` | Body text, tree silhouettes, shadow depths | | Tarnished Gold | `#8B7355` | HUD guide lines, decorative ornaments, distant landscape strokes | | Fog Mist | `#D9D2C0` | Block shadows, secondary surfaces, pastoral sky fill | | Verdigris Trace | `#4A6741` | Rare accent — only on wax seals and "verified" state indicators | | Glitch Intrusion | `#C8FF00` | Used sparingly (≤3% of surface area) — only in glitch states | ### Color Application Rules - Content blocks: `#F2EDDF` background, `#1C1C1C` 4–8px border, `#2C1810` text - Hover state: fill shifts to `#6B2D2D`, text inverts to `#F2EDDF` - Glitch moments: `#C8FF00` flickers in for 80–120ms, never longer - Pastoral ground: gradient from `#D9D2C0` (sky) to `#F2EDDF` (meadow base) ## Imagery and Motifs ### Glitch-Art System Glitch effects are **scroll-triggered, not hover-triggered**. Each content block, as it enters the viewport, plays a 400ms intro sequence: 1. **Phase 1 (0–80ms)**: The block's title renders in `Share Tech Mono` with random character substitution (`P0L1T1C4L` → `POLITICAL`) 2. **Phase 2 (80–200ms)**: A CSS clip-path slice animation cuts horizontally across the block — 3 slices, each offset by 4–8px in X — held for 30ms each 3. **Phase 3 (200–400ms)**: Slices close, Libre Baskerville fades in, block settles into final position The glitch never loops. It fires once on first entry, and that's it — the document is "loaded." ### Floating Decorative Elements Five recurring motifs float throughout the layout, each as an inline SVG: 1. **Wax Seals**: Circular, 48px diameter, in `#6B2D2D` with a star-burst edge pattern. Each seal has a unique letter in `IM Fell English SC`. Float animation: `translateY(0px) rotate(0deg)` → `translateY(-8px) rotate(3deg)`, 9s loop. 2. **Ribbon Bands**: Horizontal strips, 120px wide × 18px tall, striped `#1C1C1C`/`#8B7355`, folded at 8° tilt. Float: 11s, subtle X drift ±4px. 3. **Compass Rose**: Single instance, 64px, bottom-right corner of the viewport, fixed position. Hairline strokes in `#8B7355`. Rotates 0.5° per scroll pixel. 4. **Redaction Bars**: Pure `#1C1C1C` rectangles, 100–180px wide × 12px tall, placed randomly over body text paragraphs. They slide in 300ms after the parent block settles, obscuring 1–3 words deliberately (JS selects words in the 30th–70th percentile of frequency in the paragraph). 5. **Topographic Rings**: Three concentric SVG ellipses per block, `#D9D2C0` at 1px stroke, placed behind content in the ground layer. They suggest map contour lines and ground the floating blocks spatially. ### Pastoral SVG Landscape The fixed background layer renders: - **Hill silhouettes**: 3–4 rolling bezier curves in `#D9D2C0`/`#F2EDDF` gradient fills - **Winter trees**: 6–8 SVG trees, each unique (recursive-branch algorithm seeded by the domain name hash), in `#2C1810` at 0.6px stroke - **Church spire**: Single spire at far right, 180px tall, hairline `#8B7355` - **Mist bands**: 2–3 horizontal `rgba(217, 210, 192, 0.4)` filled rectangles that drift at 0.1x scroll speed ## Prompts for Implementation ### The Conceptual Frame Build this page as **a classified political dossier that has been leaked, slightly corrupted in transmission, and rendered as a webpage**. The visitor is not browsing — they are reading intercepted correspondence. Every design decision reinforces this: the classification stamps on every block, the redacted words, the glitch-on-load sequence that suggests file corruption, the pastoral landscape visible behind the documents as if they were laid out on a country-house desk. There are **no calls to action**. There are no buttons labeled "Learn More" or "Sign Up." The page asks nothing of the visitor — it only presents, with the quiet authority of a primary source. ### Implementation Architecture **HTML Structure:** ``` body div#pastoral-ground (position: fixed, z-index: 0) svg#landscape div#hud-compass (position: fixed, z-index: 3) div#document-strip (position: fixed top, z-index: 4) div#scroll-container (position: relative, z-index: 1) section.dossier-block (×N, each absolutely positioned via JS) div.classification-stamp div.block-content svg.wax-seal (floating) div#topographic-layer (z-index: 0) ``` **Scroll-Trigger Logic (vanilla JS, no libraries):** Use a single `IntersectionObserver` with `threshold: 0.2`. On first intersection, fire the 3-phase glitch intro for that block. Store a `WeakSet` of already-animated blocks to prevent re-fires. The scroll container has `height: 400vh` minimum — content scrolls against the fixed pastoral ground. **CSS Architecture:** - CSS custom properties for all palette values - No utility classes — semantic class names only (`.dossier-block`, `.classification-stamp`, `.wax-seal`) - Neubrutalist borders via `border: 4px solid #1C1C1C; box-shadow: 6px 6px 0 #1C1C1C` — the shadow is always offset toward bottom-right at 1.5× the border width - The `#glitch-intrusion` color (`#C8FF00`) only appears in `@keyframes glitch-slice` and never in static CSS **Floating Elements Animation:** Each floating SVG element gets a unique `animation-duration` (prime numbers: 7s, 11s, 13s, 17s, 19s) and `animation-delay` offset (0s–4s) so they are always slightly out of phase with each other. Never synchronized. Use `will-change: transform` on each. **Glitch Text Effect:** Use a small JS function (`glitchText(el, targetString, duration)`) that cycles through random characters from a set of confusable glyphs (`P0L1T1C4L4B@R`) before settling on the correct text. The character set must include numerals, `@`, `#`, and similar "corrupted" substitutes. **Pastoral Ground Parallax:** The `#pastoral-ground` SVG uses CSS `transform: translateY(calc(var(--scroll-y) * -0.3))` driven by a `scroll` event listener that writes to a CSS custom property on `:root`. The trees and hills move at different rates: foreground trees at `0.5x`, background hills at `0.15x`, sky at `0x` (fixed). **Typography Rhythm:** - `h1`: Libre Baskerville 700, 96px, line-height 1.0, color `#1C1C1C` - `h2`: Libre Baskerville 400 italic, 48px, line-height 1.2, color `#2C1810` - `h3`: IM Fell English SC, 14px, letter-spacing 0.25em, color `#6B2D2D`, text-transform: uppercase - `p`: Libre Baskerville 400, 16px, line-height 1.75, color `#2C1810`, text-align: justify **No frameworks. No build tools. Single HTML file with embedded CSS and JS.** ### What NOT to Build - No pricing tables, no feature grids, no testimonial carousels - No hamburger menus or sticky nav with links - No hero section with a centered headline and subheadline over a photo - No "cards" in the sense of equal-sized repeated units - No animations that loop continuously and visibly (floating elements loop, but subtly — never distracting) ## Uniqueness Notes **Chosen seed:** aesthetic: neubrutalism, layout: hud-overlay, typography: baskerville-refined, palette: muted-vintage, patterns: scroll-triggered, imagery: glitch-art, motifs: floating-elements, tone: pastoral-romantic **Three-plus differentiators:** 1. **The glitch fires once and stops.** Most glitch designs loop endlessly. Here, the corruption is the loading state — once "read," the document is stable. This creates a narrative arc (corrupt → resolved) rather than ambient decoration. 2. **The pastoral landscape is a real SVG, not a texture or photo.** Winter trees are procedurally generated from the domain name hash — they are unique to `political.bar`. A visitor who inspects the SVG source will find that the branching algorithm is seeded with the domain's UTF-8 byte values. The landscape is literally about this domain. 3. **Neubrutalism + Victorian pastoral is an unrealized combination.** Frequency analysis shows neubrutalism is only 7% (not overused), hud-overlay is rare, and baskerville-refined is only 3%. The combination of thick black borders and crude block geometry with aged-vellum color and serif authority has no precedent in the registry. 4. **Redaction as interaction.** The redaction bars that slide over specific words are not decorative — they use readability-weighted word selection (avoiding stopwords). The visitor can never read the full sentence. This creates genuine information tension, not just visual interest. 5. **Avoided patterns per frequency analysis:** hand-drawn (58% — most overused), editorial (51% — second most overused), botanical (28% — third most overused). This design uses none of these dominant patterns. The "pastoral" in the tone refers to landscape, not botanical illustration.