# Design Language for political.day

## Aesthetics and Tone

political.day is a **dopamine newsroom bled onto marble** — the collision of ancient civic authority with the unhinged energy of contemporary political spectacle. It reads as if the Parthenon frieze were reprinted as a tabloid broadsheet, then smacked with a highlighter and crumpled into a politician's coat pocket. The aesthetic is **dopamine-editorial**: saturated primary slabs interrupted by marble-vein hairlines, raw ink-bleeds at the margin, and deliberate errors left visible as political punctuation marks. The site does not hedge or soften. Headlines arrive at full velocity. Color does not decorate — it accuses.

The tone is **raw-authentic**: no stock imagery, no corporate polish, no diplomatic ambiguity. Every element is either a direct statement or a visible crack in a statement. The marble-classical motif is not aspirational — it is ironic infrastructure, the white columns holding up a screaming headline. Dopamine is not the goal; it is the weather. The site exists to make the visitor feel the full weight and absurdity of a single political day.

Inspiration sources: Italian newspaper La Republica's front-page architecture from the 1980s, Greek red-figure pottery translated to flat silhouette, constructivist Soviet political posters, the visual language of protest signage.

## Layout Motifs and Structure

The macro-structure is a **corrupted editorial flow** — a classical newspaper column grid (five columns at desktop, three at tablet, one at mobile) where the columns do not honor their own rules. Every third element bleeds past its column boundary. Gutters exist but are occasionally violated by a headline that spans the full bleed width and stops two columns short on the other side.

**Structural zones:**

- **Masthead (100svh hero):** Full-bleed marble-veined background (#F5F0E8 with #C8B89A veins at 0.6px). A single ultra-compressed headline punches through the marble in geometric-sans at 18vw. The date "TODAY" renders in 48px mono beneath. No imagery. No button. Just type and stone.
- **Column Grid Body:** Five-column editorial grid. Articles flow across columns with irregular spans (1-col, 2-col, 3-col, 5-col full-bleed) — never symmetric. Columns alternate between ink-white (#FAFAF7) and a saturated accent slab to create a rhythmic horizontal beat.
- **Error Zone:** Strategically placed shake-error panels. Three to five times on the page, a block of content shakes and corrupts for 0.4s when it enters the viewport — as if the news cannot contain itself. The animation is a horizontal CSS translate oscillation: ±6px, 8 cycles, ease-in-out, triggered once per scroll entry.
- **Frieze Band:** Between major sections, a full-width 120px band carries a looping horizontal line-illustration — a procession of classical figures abstracted to pure geometric stroke, marching left-to-right in a single continuous line.
- **Footer:** Single column. Black ground (#111111). White geometric-sans type. No softness.

**Spatial logic:** Columns are 1fr each with 24px gutters. Margin-note annotations (pulled quotes, dates, corrections) live outside the grid in the far left gutter at 11px size. The page never centers itself — everything is left-anchored, like a broadsheet dropped on a table.

## Typography and Palette

**Primary palette (analogous — red-orange-amber axis):**
- Marble ground: `#F5F0E8`
- Vein grey: `#C8B89A`
- Ink black: `#111111`
- Primary red: `#D42B2B`
- Analogous orange: `#E8611A`
- Analogous amber: `#F0A500`
- Accent cobalt (contrast anchor): `#1A3A8F`
- Correction green (error state): `#1E7A4B`

**Typography — geometric-sans, all Google Fonts:**

- **Display / Masthead:** *Barlow Condensed* — weight 800, tracking -0.02em. Used for primary headlines at 10–18vw. All caps. The extreme compression mimics protest signage and tabloid front pages simultaneously.
- **Body text:** *Barlow* — weight 400/500. Set at 17px/26px line-height. Columns justify left. No hyphenation. Paragraphs separated by a 1px `#C8B89A` rule.
- **Pull quotes / Annotations:** *Barlow Semi Condensed* — weight 600, italic. Set at 22–28px. Used when a quote jumps its column.
- **System mono (dates, corrections, bylines):** *IBM Plex Mono* — weight 400, 13px. Used for all meta-information: datelines, page numbers, correction notices. Color `#E8611A`.
- **Section flags / Category labels:** *Barlow Condensed* — weight 600, all caps, 11px letter-spacing 0.15em. Rendered in the accent cobalt `#1A3A8F` on white, or inverted on a colored slab.

**Type scale:** 144px masthead → 72px section lead → 36px article head → 22px subhead → 17px body → 13px annotation. Each step is approximately 1.618 × the step below.

## Imagery and Motifs

**All imagery is line-illustration** — no photographs, no gradients in imagery, no filled silhouettes. Every visual element is drawn with a single-weight stroke (1.5px) in either ink black `#111111` or primary red `#D42B2B` on the marble ground.

**Core visual subjects:**

- **Classical frieze figures:** Human figures derived from the Parthenon frieze rendered as geometric abstraction — heads as circles, bodies as rectangular blocks, limbs as angled line segments. A horizontal procession of 12–20 such figures forms the repeating frieze band between sections. The figures carry modern political props (microphones, briefcases, protest signs) rendered in the same single-stroke idiom.
- **Architectural column fragments:** Partial Doric column shafts appear at section boundaries — just the fluting lines, never a complete column, as if the institution is perpetually under renovation or demolition.
- **Error glyphs:** When the shake-error animation fires, a small red ✕ stamp (28px) appears at the top-left corner of the shaking block for the duration of the animation, then disappears. It is a correction mark, a fact-check, a veto.
- **Marble vein overlays:** CSS-rendered marble veining on the hero background — achieved through layered `radial-gradient` and `conic-gradient` with `#C8B89A` at 0.6px stroke equivalent, pseudo-random angle distribution. Not a texture image; pure CSS geometry.
- **Ink bleed marks:** At unpredictable intervals on body columns, a single thin horizontal line of red (#D42B2B) at 1px extends full column width — a press-proof registration mark that also reads as an underline of history.

**Motifs — marble-classical vocabulary:**
The marble motif is architectural, not decorative. It anchors the masthead and the frieze bands as substrate. The classical figures in the frieze carry modern objects. The column fragments appear broken, not pristine. The overall effect is a civilization that has been renovated too many times and is crumbling at the joints.

## Prompts for Implementation

Build political.day as a **single continuous broadsheet** that unfolds from masthead to footer without chapters or navigation breaks. The visitor scrolls through a living front page. No hamburger menus. No cards with hover states that invite exploration. One direction: down.

**Masthead (100svh):**
- Full-bleed marble CSS background using layered gradients: `background: #F5F0E8` with three overlaid `radial-gradient` pseudo-veins in `rgba(200,184,154,0.4)` at varied orientations.
- Headline text: `BARLOW CONDENSED 800` at `clamp(72px, 14vw, 160px)`. Text color: `#111111`. Position: left-anchored, vertically centered at 45% viewport height.
- Dateline below headline: `IBM PLEX MONO 400` in `#E8611A` → `FRIDAY. MAY 09. 2026.`
- No hero image. No CTA. No scroll indicator.
- On page load, headline letters enter one word at a time from left, with a 0.12s stagger, transform: `translateX(-40px)` → `translateX(0)`, opacity 0→1. Duration: 0.3s per word, ease-out.

**Column body sections:**
- CSS Grid: `grid-template-columns: repeat(5, 1fr)` at ≥1200px, `repeat(3, 1fr)` at 768–1199px, `1fr` at <768px. Gap: 24px.
- Articles use `grid-column: span N` where N is 1, 2, 3, or 5 (full bleed). Never 4. Odd spans only in the main flow.
- Every full-bleed (span-5) article has a red left border: `border-left: 4px solid #D42B2B; padding-left: 20px`.
- Color slab articles: `background: #D42B2B; color: #FAFAF7` for the primary red variant. `background: #1A3A8F; color: #FAFAF7` for the cobalt variant. Appear at most twice per section.

**Shake-error animation:**
```css
@keyframes shake-error {
  0%, 100% { transform: translateX(0); }
  12.5%    { transform: translateX(-6px); }
  25%      { transform: translateX(6px); }
  37.5%    { transform: translateX(-5px); }
  50%      { transform: translateX(5px); }
  62.5%    { transform: translateX(-3px); }
  75%      { transform: translateX(3px); }
  87.5%    { transform: translateX(-2px); }
}
.shake-trigger {
  animation: shake-error 0.4s ease-in-out 1;
}
```
Trigger via IntersectionObserver: when block enters at 80% threshold, add class `shake-trigger`, remove after 500ms. Fire once per element only.

**Frieze band:**
- A `<div>` with `overflow: hidden; white-space: nowrap; height: 120px`. Inside: an `<svg>` containing the procession of 16 geometric figures (circles + rectangles + line-segment limbs, all at 1.5px stroke in `#111111`). The SVG is duplicated inline so it loops seamlessly. Animation: `transform: translateX(0) → translateX(-50%)`, linear, 24s, infinite.

**Margin annotations:**
- Elements with class `.margin-note` use `position: absolute; left: -140px; width: 120px` relative to a `position: relative` column wrapper. Font: IBM Plex Mono 11px, color `#C8B89A`. Hidden on mobile.

**Scroll transitions:**
- Section headings use `IntersectionObserver` to fire a one-shot `color` transition from `#C8B89A` → `#111111` over 0.2s when they enter viewport. No repeated animation.
- DO NOT use scroll-driven animation APIs broadly — support is still uneven. Use IntersectionObserver throughout.

**DO NOT build:** hero CTA buttons, pricing tables, testimonial carousels, stat counters, newsletter signup forms, sticky navigation bars, or any element that exists to convert. This is a broadsheet, not a product page.

## Uniqueness Notes

1. **Dopamine applied as journalistic violence, not pleasure-seeking UX.** Where other dopamine-aesthetic sites use dopamine colors to reward engagement (bright hover states, satisfying microinteractions), political.day uses dopamine's saturated red-orange-amber palette as editorial accusation — the colors are not rewarding, they are alarming. This inverts the expected valence of the aesthetic category.

2. **Marble-classical used as ironic infrastructure, not luxury signaling.** Marble-classical motifs in the frequency registry appear in luxury or heritage contexts. Here the marble is the substrate that is being cracked, printed on, and defaced by the political content layered over it — the classical tradition as a crime scene backdrop. The frieze figures carry microphones and protest signs. The columns appear broken.

3. **Shake-error as political fact-check, not UI error state.** The shake-error pattern in the registry appears as a UI feedback mechanism (form validation, failed interactions). Here it is a narrative device: blocks of political content shake as they enter view, signaling that the content itself is unstable, contested, or under correction. The red ✕ correction mark further extends this metaphor.

4. **Five-column broadsheet grid with deliberate column-boundary violations.** The editorial-flow layout in other registry entries uses editorial conventions respectfully. Here the grid is established and then visibly broken — headlines that span 3 of 5 columns and stop mid-gutter, asymmetric span progressions that never resolve — mirroring the content's subject matter (political systems that break their own rules).

5. **Zero photography, zero gradients in imagery — pure line-illustration on marble CSS.** The line-illustration frequency in the registry is only 2%. Combining it with CSS-rendered marble (no texture images) and geometric political figures creates a visual language with no close precedent in the current registry.

Chosen seed: `aesthetic: dopamine, layout: editorial-flow, typography: geometric-sans, palette: analogous, patterns: shake-error, imagery: line-illustration, motifs: marble-classical, tone: raw-authentic`

Avoided overused patterns: `editorial` aesthetic (51% — used as corruption of the form, not straight application), `minimalist` (45% — explicitly rejected), `card-grid` layout (most common layout pattern — not used), `sans-grotesk` typography (6% — Barlow family is geometric-sans subfamily, distinct from grotesque), `monochrome` palette (most common — replaced with analogous red-orange-amber).
<!-- DESIGN STAMP
  timestamp: 2026-05-10T11:58:26
  domain: political.day
  seed: unspecified
  aesthetic: political.day is a **dopamine newsroom bled onto marble** — the collision of anc...
  content_hash: a9619797441f
-->