# Design Language for politics.bar ## Aesthetics and Tone politics.bar is a **fractured broadsheet projected onto smoke** — a political intelligence surface that refuses to look like one. The aesthetic is **anti-design weaponized into authority**: raw, deliberately uncomfortable, yet rigorously professional. Think of a classified document printed on a Soviet-era press, then photographed through the smoke of a burning courthouse, then digitized, desaturated, and served cold. The domain name is read as two things simultaneously: the place where politics is discussed over drinks ("the bar") and the legal bar of judgment ("passed the bar"). The design holds both: the hushed amber-lit back room of a whiskey bar where power brokers trade intelligence, and the stark document tray of a courtroom where evidence is admitted. The mood is **controlled aggression through restraint**. There are no smooth gradients, no softening radius. Borders are hard. Columns are hard. The typography is confrontational — Bebas Neue bold headers that read like screaming headlines from a 1970s newspaper, paired with Libre Baskerville body type that carries the measured, deliberate weight of a legal brief. The color palette is muted and weathered: bone parchment, tobacco amber, iron-gall black, faded crimson, and cold slate. Colors from photographs taken at dusk through a dirty window. The bokeh background imagery — out-of-focus legislative halls, blurred protest crowds, soft parliament chamber lights — creates depth and atmosphere without showing anything specific, keeping the content dominant and context implied. The aurora-lights motif is reframed entirely: no Nordic nature fantasy here. Instead, aurora colors (deep green, cold violet, sulfurous amber) appear as spectrum-analysis artifacts — the ghostly color bleed of a CRT monitor displaying classified text at 3 AM, or the spectral haze above a city where something has just happened. Tone: **sober, unapologetic, professionally menacing**. Like a newspaper that has already won the Pulitzer and knows it. ## Layout Motifs and Structure The layout is a **strict two-pane split-screen** — a vertical divide at 55%/45% that never wavers. This is not the equal-half split of a marketing page; it is the asymmetric evidence board of a prosecutor: the larger left panel holds the **primary record** (the main news surface, the primary content column), and the narrower right panel holds the **intelligence margin** (live feed, annotations, contextual data, secondary navigation). **The Divide.** - A single 1px line in `#3a3028` (tobacco-dark) bisects the viewport vertically. - The line does not animate; it is a fact. It existed before the page loaded. - On scroll, the left panel scrolls continuously; the right panel is position-sticky until its own content overflows, then it catches up. - On mobile (< 768px), the right panel collapses into a drawer accessible via a corner toggle; the divide becomes a horizontal rule. **Left Panel — The Record.** - Full-bleed bokeh photograph behind a `0.82` opacity `#1c1710` overlay — barely visible, just enough to suggest an out-of-focus legislative chamber at dusk. - Content sits above the overlay in a single column, 680px max-width, left-aligned with a 48px left gutter. - Sections are demarcated by double horizontal rules (2px + 1px, separated by 4px) in `#3a3028` — the typographic convention of a legal brief. - No cards, no rounded tiles. Content is raw text on a surface. **Right Panel — The Margin.** - Background: `#141209` — darker than the left, as if the lamp doesn't quite reach here. - A tight 320px column of terse, stacked line items: headlines without images, sorted by recency, each preceded by a 4-character timestamp in monospace. - Every 7th item carries a thin left-border accent in CRT-green (`#3d6b47`) — a visual interrupt, not a category signal. - No scroll within the right panel at desktop; content is always visible above the fold. **Progressive Disclosure Mechanics.** - Each headline in the right margin is one compressed line. On hover, a 180px expansion panel slides down beneath it, revealing a 2-sentence synopsis and a "Read →" link. - The left panel's feature stories reveal their byline, date-stamp, and pull-quote via a 320ms ease-in opacity reveal triggered on the story entering the viewport (IntersectionObserver, threshold 0.2). - Secondary navigation items collapse behind a single "SECTIONS" toggle in Bebas Neue 14px; clicking expands a full-width overlay menu in 220ms. **Global Grid.** - No border-radius anywhere. `border-radius: 0` as a manifest, not a style choice. - 8px base unit. All spacing is multiples of 8. - Horizontal rules are the primary sectioning device — no background-color blocks, no card shadows. ## Typography and Palette **Typography — bebas-bold register, all from Google Fonts.** Three typefaces only, chosen for confrontational contrast: - **Display / Headlines:** `Bebas Neue` — weight 400 (the only weight; Bebas is always bold). Used for all section headers, the site logotype, category labels, and any pull-quote that stands alone. Set at fluid sizes: `clamp(2.4rem, 5vw, 6rem)` for feature heads, `clamp(1.2rem, 2.5vw, 2rem)` for section heads. All caps always. Letter-spacing `0.04em`. Color: `#e8dfc8` (bone parchment). On the right panel: `#a89f8c` (dimmed ivory). - **Body / Brief Text:** `Libre Baskerville` — weight 400 for body, weight 700 for emphasis. Used for all running text, article bodies, captions, bylines. Line-height 1.72. Set at `clamp(0.95rem, 1.1vw, 1.1rem)`. Color: `#d4cab6` (aged paper). This is the measured, judicial voice of the site. - **Data / Timestamps / Metadata:** `JetBrains Mono` — weight 400 only. Used for timestamps (format: `HH:MM`), source codes, and any data-label. Size: `0.78rem`. Color: `#4d7c5a` (CRT terminal green) on dark backgrounds, `#7a6a52` (faded ink) on lighter areas. This typeface signals: this datum is precise, this time is verifiable. **Color Palette — muted-vintage, seven named tokens:** | Token | Hex | Usage | |-------|-----|-------| | `--parchment` | `#e8dfc8` | Primary text on dark; headline color | | `--aged-paper` | `#d4cab6` | Body text; secondary surfaces | | `--tobacco` | `#3a3028` | Borders, rules, the divide line | | `--vault` | `#1c1710` | Left panel overlay; near-black | | `--midnight` | `#141209` | Right panel background; absolute base | | `--crt-green` | `#4d7c5a` | Data labels, every-7th accent, JetBrains text | | `--crimson-ash` | `#7d3232` | Alert states, breaking-news indicators, rare accent | | `--cold-slate` | `#4a5568` | Inactive states, de-emphasized metadata | | `--aurora-violet` | `#3d2f5e` | CRT spectral bleed; used as a gradient terminus behind hero text | | `--amber-smoke` | `#8c6a2e` | Hover states on right-panel items; tobacco warmth | **Aurora Motif as CRT Bleed.** The only gradient on the page: a radial gradient at the top-left corner of the left panel, `radial-gradient(ellipse at 0% 0%, rgba(61,47,94,0.18) 0%, transparent 55%)`. This is the aurora-violet CRT bleed — the only concession to atmospheric color, kept at near-invisible opacity so it reads as monitor bleed, not decoration. ## Imagery and Motifs **Bokeh Background — controlled and purposeful.** The single photograph behind the left panel is a high-contrast bokeh image of an out-of-focus legislative chamber or public assembly hall: circular light bokeh from chandeliers and desk lamps, a crowd-blur, a suggestion of tiered seating. The image must be desaturated 70% (CSS `filter: saturate(0.3)`) before the `#1c1710` overlay is applied, reducing it to a ghost of itself. The bokeh circles must be visible — they are the motif, not the image itself. The message is: *power is happening somewhere just out of focus; we are reporting on what you cannot quite see.* **No other photography.** The right panel has no images. Feature story slots in the left panel use no inline photographs — text only, with a single decorative rule above each story instead of a photo. **CRT Spectral Artifacts — the aurora remapped.** Aurora-lights reappear throughout the interface as monitor phenomena: - A faint scan-line texture over the right panel: `repeating-linear-gradient(to bottom, transparent 0px, transparent 2px, rgba(0,0,0,0.18) 2px, rgba(0,0,0,0.18) 3px)` applied as a CSS background on the `.margin-panel` element. This simulates old CRT vertical scan lines. - The Bebas headline on a feature story occasionally receives a `text-shadow: 1px 0 0 rgba(77,124,90,0.4), -1px 0 0 rgba(61,47,94,0.3)` — a 1px lateral color-fringe, like chromatic aberration on a CRT. Applied to every third headline via `:nth-child(3n)`. - Breaking news indicators: a `--crimson-ash` pulse animation (`opacity: 1 → 0.4`, 1.8s ease-in-out infinite) on a 6px × 6px square dot to the left of a headline. Not a spinner, not a badge — a dying ember. **Motif Grammar — the document vocabulary.** - Double horizontal rules as section dividers (see Layout). - The site logotype: `POLITICS` in Bebas Neue at 3.6rem, flush left, with `.BAR` in JetBrains Mono at 0.9rem, tracking 0.3em, vertically aligned to the baseline of the `.` that completes POLITICS. The period is shared. The logo is a visual sentence: `POLITICS.BAR` — journalism and verdict, one mark. - Page footer: a 1px rule, then a single line of JetBrains Mono 0.72rem in `--cold-slate`: `© YYYY • politics.bar • ALL CONTENT UNDER EDITORIAL REVIEW`. No more, no less. ## Prompts for Implementation Build politics.bar as a **two-pane intelligence surface that the visitor reads like a document, not a website**. There is no hero CTA, no pricing, no testimonials, no stat-grids, no signup flows. The experience is entirely journalistic: arrive, orient, read. The split-screen is permanent and structural — it is not a mobile responsive grid that happens to have two columns. **Macro Structure (full viewport, no scroll on first paint):** 1. **Top Bar (48px fixed, full width).** Background `--midnight`. Left: logotype `POLITICS.BAR`. Center: `JetBrains Mono` timestamp ticking live (JS `setInterval`, updates every 60s). Right: `SECTIONS` toggle in Bebas Neue 14px, `--parchment`. The top bar does not hide on scroll. 2. **Split Pane (100vh minus 48px, position fixed container, children scroll independently).** - Left panel (55vw): bokeh photograph at `position: absolute; inset: 0; z-index: 0` with the desaturation filter and the `--vault` overlay. Content column sits above at `z-index: 1`, 680px max-width, 48px left gutter. - Right panel (45vw): `--midnight` background, scan-line texture as a CSS `::before` pseudo-element. Content: stacked timestamped headlines, JetBrains Mono timestamps, Libre Baskerville headline text, progressive-disclosure expansion panels. - The 1px divide line: `border-right: 1px solid var(--tobacco)` on the left panel container. 3. **Left Panel Content Flow (scrollable):** - Section A — LEAD (the single most important story): Bebas Neue 5rem headline, 3-paragraph Libre Baskerville lede, double-rule below. - Section B — PRIMARY RECORD (4–6 secondary stories): Bebas Neue 2.2rem per story, 1–2 paragraph summary, double-rule below each. - Section C — DISPATCHES (brief one-line items, JetBrains Mono for location/timestamp): Bebas Neue 1.4rem per item, single paragraph, single-rule below. - Section D — FOOTER: the single-line footer described above. 4. **Right Panel Content (sticky then scroll):** - 24 timestamped headlines, newest first. - Every 7th: `--crt-green` left-border 2px. - On hover: 180px expansion panel, `background: rgba(58,48,40,0.6)`, synopsis text, `Read →` in Bebas Neue `--crt-green`. - A thin sticky subheader: `LIVE MARGIN` in Bebas Neue 11px, `--cold-slate`, tracking 0.18em. Position-sticky at top: 0 within the right panel. 5. **Sections Overlay Menu:** On click of `SECTIONS` toggle, a full-viewport overlay descends in 220ms (`translateY(-100%) → translateY(0)`, `ease-out`). Background: `rgba(20,18,9,0.97)`. Content: Bebas Neue 8vw section names in a single centered column, each preceded by a 2-digit index in JetBrains Mono. Pressing `Escape` or clicking anywhere closes it. 6. **IntersectionObserver Reveals:** Each story in the left panel starts at `opacity: 0, transform: translateY(12px)` and transitions to `opacity: 1, transform: translateY(0)` over 320ms `ease-in` when threshold 0.2 is met. No other animation on the left panel. 7. **Hover States:** - Left panel headlines: `color` transitions from `--parchment` to `#ffffff` in 150ms. No underline. - Right panel items: background tint `rgba(140,106,46,0.12)` fades in in 120ms (`--amber-smoke` at low opacity). 8. **JavaScript Notes:** - Live timestamp in top bar: `new Date().toLocaleTimeString('en-US', {hour:'2-digit', minute:'2-digit', hour12:false})`, updated on minute boundary via `setInterval`. - Progressive disclosure panels: toggle via `aria-expanded` attribute and a CSS `max-height: 0 → 180px` transition on `[aria-expanded="true"] + .expansion-panel`. - No libraries required. Vanilla JS only. **DO NOT implement:** - Any pricing, CTA buttons ("Sign Up", "Subscribe Now"), testimonial blocks, stat counters, or feature comparison grids. - Any photography in the right panel or within individual stories. - Any border-radius, box-shadow (shadows are forbidden — only rules and flat surfaces). - Any gradient beyond the single aurora-violet CRT bleed at top-left. ## Uniqueness Notes **Differentiators from the existing registry:** 1. **Split-screen as a permanent, functional intelligence instrument, not a visual effect.** The frequency report shows `split-screen` at only 1% across all registered designs. politics.bar uses split-screen not as a stylistic flourish but as an architectural commitment: the left panel is the scrollable record, the right panel is the live margin. They are structurally different things that happen to share a viewport — a display format borrowed from wire services and legal document review tools, not from marketing sites. 2. **Anti-design applied to a professional political context, not to art or culture.** Anti-design (3% frequency) is almost always applied to creative agency portfolios or art showcases in the registry. Here it is deployed in a domain that demands authority and trust — politics — which creates productive cognitive tension. The page refuses ornamentation precisely because it is taking itself seriously, not because it is being ironic. The absence of rounded corners, the double-rule dividers, the confrontational Bebas Neue headlines: these are editorial choices that say *this outlet does not perform credibility, it inhabits it*. 3. **Aurora-lights remapped as CRT monitor spectral artifacts.** Aurora-lights (4% frequency) in the registry always appears as literal atmospheric light effects — Nordic gradients, soft greens and purples over landscapes. politics.bar uses the same color family (green, violet, amber) but recontextualizes them as the phosphor bleed of an aging CRT terminal — the spectral fringe on a headline, the scan-line texture, the 3 AM monitor glow. The aurora is internalized into the machine rather than projected onto the sky. 4. **Bokeh background as editorial redaction, not as romantic ambiance.** Bokeh photography (3% frequency) in the registry appears as soft-focus nature or lifestyle imagery, warm and inviting. Here, the bokeh is of legislative architecture — parliament light fixtures, chandelier bokeh over tiered assembly seating, deliberately desaturated to near-monochrome before overlay. The blur is editorial: *something is happening just out of frame. We are reporting on what you cannot quite see.* This gives the same technique a completely opposite emotional register. 5. **Progressive-disclosure in the right margin as a wire-service reading mode.** Progressive disclosure (3% frequency) in the registry is used for FAQ accordions and feature descriptions. politics.bar uses it as a reading-mode mechanic for a live news margin — terse one-line headlines that expand to 2-sentence synopses on hover, mimicking the reading behavior of wire service monitoring consoles. This is progressive disclosure as professional journalistic workflow, not as UX convenience. **Chosen Seed:** `aesthetic: anti-design, layout: split-screen, typography: bebas-bold, palette: muted-vintage, patterns: progressive-disclosure, imagery: bokeh-background, motifs: aurora-lights, tone: professional` **Avoided Patterns (from frequency analysis):** - `full-bleed` (66%) — the right panel breaks full-bleed dominance with its contained, non-photographic surface - `editorial` (51%) — while the left panel is editorial in spirit, the split-screen structure departs from the standard single-column editorial flow that dominates the registry - `asymmetric` (40%) — the fixed 55/45 split is a deliberate asymmetric structure, but used architecturally rather than as a layout flourish - `vintage` (37%) and `muted` (32%) — the palette uses these but combines them with CRT-technology references and political context, preventing them from reading as nostalgic decoration