# Design Language for political.bar

## Aesthetics and Tone

political.bar is **the ward-room chalkboard, three minutes before the count is announced** — a single tall slate board mounted on a wall of a borough hall, on which a returning officer with chalk-dusted cuffs has been tallying precinct returns by hand all night, while a brass desk-lamp throws one warm cone of light across the bottom third of the surface and the rest fades into cold graphite dark. The domain word is *political* and the TLD is *.bar* — so the page is literally built around **bars**: not chart-bars from a dashboard library, but **hand-chalked tally bars**, the four-strokes-and-a-slash gate marks that humans have used to count things since before there were spreadsheets. The mood is **after-midnight, civic, slightly weary, entirely earnest** — the opposite of the shouting, animated, infographic-saturated way politics is usually rendered on the web. There is no triumphalism here, no red-vs-blue cable-news urgency, no countdown clocks. Instead: the patience of someone who counts every ballot twice, the quiet of a room where the only sounds are chalk on slate and a radiator ticking. The aesthetic is **editorial-meets-blackboard**: the typographic discipline of a serious broadsheet, executed entirely in the materials of a 1950s tally room — slate, chalk, gummed paper labels, a rubber stamp, a single steel ruler. Tone words: *grounded-earthy, scholarly-intellectual, calm-serene with a low hum of consequence underneath.* It should feel like the page knows that counting is sacred and that the result, whatever it is, deserves to be written down carefully.

## Layout Motifs and Structure

The page is **one continuous vertical slate** — a single immersive-scroll surface, not a sequence of cards or sections-with-backgrounds. Think of it as **looking up at a chalkboard that is taller than the room**, and walking closer as you scroll. The reference frame is a **fixed slate ratio of 4 : 7** (a tall classroom board), centred on wide viewports with a **dark oak-frame border** (a 14px bevelled wooden edge drawn purely in CSS box-shadow + linear-gradient) and beyond the frame a near-black wall (`#0E0F11`) so the slate reads as a real object hung on a real wall, never as a full-bleed background. On narrow viewports the oak frame thins to 6px and the slate goes edge-to-edge.

The vertical rhythm is a **hand-ruled column structure**: a single faint chalk vertical line runs down the left at the 1/8 mark (the "margin rule" a clerk would snap before writing), and all headings hang their first letter *into* that margin rule the way ledger entries do. The board is divided into **four horizontal "registers"** by faint chalk horizontal rules, each register a distinct act:

1. **THE HEADER REGISTER (top, in the cold dark)** — the wordmark `political.bar` written large in chalk-script, slightly uneven baseline, with a chalk-underline drawn as if by a ruler held a degree off true. A small gummed-paper label pinned at top-right reads the date in rubber-stamp type. No nav bar. Navigation, if any, is three tiny chalk-circled words at the very bottom of register 1.

2. **THE TALLY REGISTER (the heart, where the lamp-cone begins)** — this is the signature. A wide field of **hand-chalked gate-marks** (||||̸ groups of five), arranged in irregular rows, each group of five drawn with a slightly different chalk pressure and angle. As you scroll into this register, **new tally strokes are chalked in, one at a time, with a faint chalk-dust puff** — the page is *counting in front of you*. Short editorial captions sit beside clusters of marks, hand-set, hanging off the margin rule.

3. **THE LEDGER REGISTER (mid, fully in the warm lamp-light)** — a hand-ruled two-column ledger: left column a list of plain-language entries in chalk; right column their tally in gate-marks plus an Arabic numeral stamped in red rubber-stamp ink. The ledger lines are *drawn* (SVG path-draw) as you arrive, ruler-straight, with the faint scrape of chalk along a steel edge implied by a thin highlight that travels the line.

4. **THE FOOTER REGISTER (bottom, the lamp dims, dark returns)** — a single chalked sentence, a horizontal rule, the wordmark in small chalk again, and a half-erased smear in the corner (a real `<svg>` smudge) where something was rubbed out and rewritten. The brass lamp itself is drawn here, bottom-right, a small warm ellipse of light and a thin stand.

No bento boxes. No hero-with-CTA. No stat-grid (the tallies *are* the stats, but they are physical marks, not metrics). The whole page is roughly **3.5 viewport-heights** of slate.

## Typography and Palette

**Type stack — Google Fonts only, three faces, each with a job:**

- **Caveat** (variable wght 400–700) — the **chalk hand**. Every heading, every tally caption, every ledger entry, the wordmark itself. Caveat is a casual upright handwriting face with natural stroke-pressure variation and slightly irregular baselines; rendered in chalk-white with a 1px feather-blur it reads convincingly as chalk on slate. Headings: 44–72px, `letter-spacing: 0.01em`, baseline-shifted ±2px at random per word via inline style for the hand-written wobble. Body captions: 19px / 1.6.
- **Spectral** (wght 400, 500, italic) — the **editorial register**: any passage longer than two lines (the opening paragraph, the footer sentence, the longer ledger annotations). Spectral is a screen-first serif with generous spacing and a calm, newspaper-leader feel; set at 17.5px / 1.7 / `letter-spacing: 0.003em` in a soft chalk-grey (`#C7C2B6`) so it reads as *printed-and-pinned-to-the-board* rather than chalked. Italic Spectral is the byline / dateline voice.
- **Xanh Mono** (wght 400, italic) — the **rubber-stamp / ledger-numeral** voice: the date label, the Arabic numerals beside each tally, the tiny legal line at the very bottom. Xanh Mono is a typewriter-flavoured slab monospace; printed in `#B33A2E` (stamp red) at 14–22px with a slight `transform: rotate(-1.5deg)` and a multiply blend so it looks like a hand-pressed rubber stamp, ink unevenly inked.

**Palette — slate, chalk, lamp, and the two old political inks, all muted:**

- `#171A1C` — **Slate** (the board, top and bottom, in shadow)
- `#21262A` — **Slate, lamp-warmed** (the board surface in the lamp-cone; subtle warm shift)
- `#0E0F11` — **Hall wall** (beyond the oak frame, near-black)
- `#3A2A18` — **Oak frame** (the bevelled wooden border, with a `#5C4327` highlight edge)
- `#E9E4D7` — **Chalk** (primary chalk-white, headings and tally marks; never pure #FFF)
- `#C7C2B6` — **Chalk-grey** (editorial Spectral body, faint rules, dust)
- `#B33A2E` — **Stamp red** (rubber-stamp numerals, date label, the one accent that means "official")
- `#2E5A6E` — **Ledger blue-grey** (the *other* political ink, used only for the margin rule and the ledger column divider — quiet, never competing with the red)
- `#D9A441` — **Lamp glow** (the brass-lamp cone; a soft radial wash at 14% over register 2–3 only)

Contrast is deliberately *low in the dark registers and higher in the lamp-cone* — the page literally rewards scrolling into the light.

## Imagery and Motifs

**No raster images. No photographs. No icon fonts. No emoji. No charting library.** Everything visible other than type is drawn at runtime in SVG and CSS, in the visual language of *chalk and a tally room*:

1. **The gate-mark glyph.** A reusable SVG group: four near-vertical strokes (each a `<path>` with a hand-jittered control point and a `stroke-linecap:round`, stroke ~3.5px, colour Chalk) plus a fifth diagonal slash across them. No two instances identical — a tiny PRNG seeded once at load perturbs each stroke's endpoints by ±2px and its width by ±0.6px. Drawn with a `stroke-dasharray` reveal so each stroke *appears* with a 120ms ease, trailed by a 3-particle chalk-dust puff (tiny `#E9E4D7` circles, opacity 0.5→0, drifting down 8px). These gate-marks are the site's hero imagery — clustered in register 2, used as bullet-markers in register 3.

2. **Chalk texture.** A single SVG `feTurbulence` (baseFrequency 0.9, numOctaves 2) drives a subtle grain mask applied *inside* the chalk strokes' fill via `mask`, so chalk has a powdery, broken-edge quality rather than a clean vector look. The slate itself gets a separate, larger-scale turbulence at 4% opacity for the cast-and-troweled surface mottle.

3. **The margin rule and ledger rules.** Thin (1px) lines in Ledger blue-grey at 35% opacity, drawn with `path-draw-svg` on scroll, each with a 1px white highlight that travels the line's length once (the "steel ruler scrape").

4. **The gummed-paper date label.** A small off-white (`#EDE7D6`) rectangle with one slightly torn edge (an SVG `<path>` with a jagged top-right corner), a faint drop-shadow, rotated -1.5deg, bearing the date in stamp-red Xanh Mono. Looks pinned, not designed.

5. **The half-erased smear.** Bottom-left corner of the footer: an SVG ellipse filled with a low-opacity chalk-grey radial gradient and a `mask` of soft horizontal streaks — the ghost of erased writing. Optionally a single faint chalked letter still visible underneath.

6. **The brass lamp.** Bottom-right of the footer: a small CSS-drawn lamp — a thin metallic stand (linear-gradient `#7A6A4B`→`#3A2E1A`), a half-ellipse shade, and a `radial-gradient` cone of Lamp-glow that is *the same light source* responsible for the warm slate shift in registers 2–3. Turn the lamp "off" on a click and the whole page goes uniformly cold dark for 1.5s before it flickers back — an easter egg.

Motif vocabulary: *tally gate-marks, the snapped margin line, gummed labels, rubber stamps, chalk dust, the lamp-cone, the erased smear, the oak frame.* Everything is a thing you could touch in a room.

## Prompts for Implementation

Build political.bar as **one HTML file, one CSS file, one ES module**. No framework, no router, no build step, no canvas, no WebGL, no Lottie. SVG + CSS only. Target bundle under 95KB uncompressed. No raster assets whatsoever.

**Document structure:**

```
<body>                          <!-- hall wall #0E0F11 -->
  <main class="board">          <!-- the slate, oak-framed, 4:7, centred -->
    <div class="grain"></div>   <!-- turbulence overlay -->
    <div class="lampcone"></div><!-- fixed radial wash, registers 2–3 -->
    <span class="margin-rule"></span>

    <section class="register r-header">
      <h1 class="wordmark">political.bar</h1>     <!-- Caveat, chalk, ruled underline -->
      <p class="opener">…</p>                      <!-- Spectral, the only long paragraph up top -->
      <label class="gummed">11 · MAY · 2026</label><!-- Xanh Mono, stamp red, torn paper -->
      <nav class="circled">the count · the ledger · the room</nav>
    </section>

    <section class="register r-tally">            <!-- the heart: a field of <svg> gate-marks -->
      <div class="tally-field" data-target="…"></div>
      <p class="caption">…</p> …
    </section>

    <section class="register r-ledger">
      <table class="ledger">                       <!-- ruled, 2 cols: entry / gate-marks + stamped numeral -->
        <tr><td class="entry">…</td><td class="count"><svg class="gates">…</svg><span class="numeral">37</span></td></tr> …
      </table>
    </section>

    <section class="register r-footer">
      <p class="closing">…</p>                      <!-- Spectral italic -->
      <hr class="ruled">
      <span class="wordmark sm">political.bar</span>
      <svg class="smear"></svg>
      <div class="lamp"></div>                      <!-- CSS brass lamp, the light source -->
      <small class="legal">…</small>                <!-- Xanh Mono -->
    </section>
  </main>
</body>
```

**The page is a narrative, told by scrolling into a counted room. Storyline beats:**

- **0.0s — first paint.** Cold slate (`#171A1C`), oak frame, the hall wall beyond. The wordmark is *not yet written* — the board is blank except for the snapped margin rule, already there. A beat of stillness (600ms).
- **0.6s — the wordmark is chalked.** `political.bar` writes itself left-to-right via `stroke-dasharray` on an SVG outline of the Caveat letterforms (or, simpler: a `clip-path: inset()` wipe of the rendered text plus a moving chalk-tip highlight). Then the ruler-underline draws under it, a degree off true, with a chalk-dust puff at the end.
- **1.4s — the opener fades up** (Spectral, `#C7C2B6`, a 700ms `fade-reveal`), as if a printed slip was just pinned below the title.
- **scroll into register 2 — the count happens in front of you.** As `.tally-field` enters viewport, gate-marks are chalked **one stroke at a time**, in irregular rows, accelerating then decelerating like a real hand counting (ease the inter-stroke delay 90ms→40ms→110ms). Each completed group-of-five lands with a soft dust puff. The running total is *not* shown as a number here — only the physical marks. Captions hang off the margin rule and `fade-reveal` beside their clusters. Honour `prefers-reduced-motion`: render all marks instantly, no dust.
- **scroll into register 3 — the lamp.** The `.lampcone` radial wash (Lamp-glow `#D9A441` at 14%) is `position: fixed`, anchored to the bottom-right where the lamp will be, so as register 3 scrolls *through* it the slate visibly warms (`#171A1C`→`#21262A` via a `mix-blend-mode: soft-light` overlay). Ledger rules draw with the steel-ruler highlight. Each ledger row: entry text `fade-reveal`s, then its gate-marks chalk in, then — last — the red Xanh Mono numeral *stamps down* (a 120ms `transform: scale(1.15) rotate(-1.5deg)` → settle, with a brief ink-too-heavy darken). 
- **scroll into register 4 — the lamp dims, dark returns.** The slate cools back toward `#171A1C` as the lampcone scrolls off. The closing sentence in Spectral italic. The small wordmark, chalked again, lighter pressure. The half-erased smear sits in the corner. The CSS brass lamp is drawn bottom-right; clicking it toggles the lampcone off (1.5s of uniform cold dark) then flickers back on.

**Micro-interactions:** hovering a gate-mark group makes it brighten ~8% and shed two extra dust particles (a fingertip touching chalk). The cursor, anywhere on the slate, leaves a *very* faint trailing chalk-dust mote (one tiny circle, opacity 0.25→0 over 500ms) — restrained, not a particle storm. The gummed date label, on hover, lifts 2px and its shadow deepens (a `hover-lift`). Section headings get an `underline-draw` on enter.

**AVOID, hard:** no CTA buttons, no "sign up / subscribe / contact" blocks, no pricing, no stat-grid of big animated counter numbers (the only numerals are the small stamped ledger figures), no red-vs-blue partisan colour war, no dashboard chrome, no glassmorphism, no neon, no hero image. The bars on this site are **chalk tally bars**, never CSS-`width`-animated chart bars. Keep it a *room*, not a *product page*.

## Uniqueness Notes

Deliberate departures from the designs already in the registry and from the seed's defaults:

1. **The `.bar` TLD is read as *tally bars*, not a *navigation bar* and not a *cocktail bar*.** This domain-pun resolution — politics rendered as the literal four-strokes-and-a-slash gate-mark, the oldest counting notation there is — is not present in any sibling design. The site's hero "imagery" is hand-chalked tally clusters generated by a seeded PRNG, every one unique, drawn stroke-by-stroke. Nothing in the corpus uses tally marks as a primary visual system.

2. **Chalk-on-slate as a *material*, fully built from `feTurbulence` masks and `stroke-dasharray` reveals — no images.** The corpus is saturated with `photography` (98%) and `glassmorphism` (81%) and `hand-drawn` (96% as a tag, but almost always whimsical-doodle hand-drawn); a *cold dark blackboard lit by a single warm brass lamp*, where the only colours are chalk-white, stamp-red, and a quiet ledger blue-grey, is a register no sibling occupies. Avoided the over-used warm/gradient palette default — this is graphite-dark with one controlled warm cone.

3. **A page that *counts in front of you* and is structurally weary, not triumphant.** Politics on the web is overwhelmingly rendered as urgency, infographics, and CTAs; this is the antithesis — an immersive-scroll down a tall slate, paced like a returning officer who counts every ballot twice, ending with a half-erased smear and a dimming lamp. Avoided: stat-grids, counter-animate big-numbers, dashboard layout, bento-box, hero-with-CTA. Layout is `immersive-scroll` (12%) on a tall framed slate object, not `card-grid` (91%) or `full-bleed` (89%).

Chosen seed / style: **vintage newspaper layout** — *aesthetic: editorial (with a brutalist undertone in the unstyled chalk rules), layout: immersive-scroll, typography: handwritten (Caveat chalk) paired with serif-revival (Spectral) and tech-mono (Xanh Mono stamp), palette: monochrome-dark + duotone red/blue inks + one warm lamp glow, patterns: path-draw-svg + stagger + fade-reveal + underline-draw, imagery: generative-art (tally-marks) + noise-texture (chalk grain), motifs: vintage (the tally room) + grid-lines (ruled ledger), tone: grounded-earthy / scholarly-intellectual / calm-serene.*

Referenced frequency analysis — avoided the dominant `glassmorphism` / `photography` / `card-grid` / `full-bleed` / `warm` / `gradient` / `parallax` / `cursor-follow` cluster; leaned on the underused `immersive-scroll`, `monochrome`, `editorial`, `path-draw-svg`, and `handwritten`-as-chalk-not-doodle.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:55:55
  domain: political.bar
  seed: unspecified
  aesthetic: political.bar is **the ward-room chalkboard, three minutes before the count is a...
  content_hash: 4344c530b7c0
-->