# Design Language for diplomatic.bar ## Aesthetics and Tone diplomatic.bar is the private reading room of an imagined attaché who has spent forty years moving between chancelleries, treaty archives, and dispatch corridors — a place where official cables share shelf space with hand-annotated communiqués, and the smell of aged paper and iron-gall ink is permanently present. The site's entire surface is treated as a document that has been handled: every panel carries a faint **grain** borrowed from 120gsm archival bond, edges show foxing, and text appears to have been set on a compositor's proof-press that was recently discovered to have aurora seeping through its leading. The visual grammar is **scholarly-intellectual** — dense with annotation, deliberate in silence, and built on the conviction that diplomatic language is always performing two conversations simultaneously: the one written and the one withheld. The color world lives at the intersection of **aurora borealis** and **aged chancery paper**: deep ink-blue-black as the ground, then layers of iridescent wash — not neon, not pastel, but the specific spectral green, violet, and rose of a Geiger ionization field photographed at long exposure. These aurora tones are contained inside the grain and appear only as vellum-filtered illumination, as though the paper itself is faintly radioactive with diplomatic knowledge. The effect reads as **cabinet-of-curiosities** seriousness shot through with barely-suppressed luminosity. The tone is **scholarly but conspiratorial** — footnotes that know too much, marginalia written in a second hand, section breaks marked with circuit-trace ornaments that suggest the analogue world was always being transcribed by something mechanical. ## Layout Motifs and Structure The defining structural choice is **horizontal scroll as treaty-table reading**: the viewport becomes a long conference table surface, and panels move left-to-right like consecutive pages of a folded accord being unrolled. There is no vertical scroll on desktop — the single axis is horizontal, and each panel represents one "article" of an imagined diplomatic instrument. **Panel logic:** Seven panels of exactly `100vw` × `100vh`, each one a discrete composition, arranged as a continuous horizontal track. The CSS scroll-snap aligns to full panels. No panel has a visible container edge — they bleed into each other with a subtle grain-matched seam. The horizontal scroll is driven by both trackpad gesture and a thin **custom scroll-rail** at the bottom of the viewport: a hairline ruled in `#2a1f3d` with a circuit-trace thumb that creeps left-to-right as the reader advances. **Internal composition:** Each panel uses a **diagonal text-block / image-field** split: the text column begins at approximately 12% from left at top and slopes toward 28% at bottom, while the imagery fills the remaining field. This diagonal division is not a CSS `clip-path` cutout but a deliberate typographic boundary — the text simply stops at the diagonal, and the field beyond it is imagery or ruled silence. No panel has a centered layout. **Marginalia rail:** A persistent 48px column on the far left edge of every panel carries **circuit-trace marginalia** — short annotation fragments, article numbers, date-references — in a condensed monospace at 9px. This rail does not scroll with the panel; it is fixed to the viewport left edge and updates its content as panels snap into view. **Navigation:** No nav bar. No hamburger. Progress is communicated only by the circuit-trace scroll-rail at bottom and a small **panel-counter** in the top-right corner: `§ 01 / 07` in Cormorant Garamond italic at 12px. ## Typography and Palette **Primary palette — five named values:** - `--ink`: `#0d0b14` — near-black with violet undertone, used as the base ground - `--parchment`: `#e8dfc4` — aged bond paper, used for body text fields and document-surface panels - `--aurora-green`: `#4dffc3` — spectral green, used sparingly as glow accent on circuit ornaments and hover states - `--aurora-violet`: `#b87fff` — deep spectral violet, used for headers and section-title illumination - `--aurora-rose`: `#ff6fa8` — rose-magenta from the ionization spectrum, used for emphasis marks and active states - `--foxing`: `#8b6f47` — brown oxidation tone, used for aged-paper texture overlays and marginalia text **Typography — Google Fonts only, three-voice system:** 1. **Display and diplomatic headers:** [`Cormorant Garamond`](https://fonts.google.com/specimen/Cormorant+Garamond) — variable, weights 300–700, italic and roman. Used for all panel titles, article headings, and the site wordmark. Cormorant's extreme contrast and old-style figures evoke 18th-century chancery documents without pastiche. Size range: `clamp(48px, 7vw, 112px)` for wordmark, `clamp(28px, 3.5vw, 56px)` for panel titles. 2. **Body and diplomatic body-text:** [`EB Garamond`](https://fonts.google.com/specimen/EB+Garamond) — 400 roman and 400 italic. All body paragraphs, marginalia, and footnote blocks. Set at `clamp(14px, 1.1vw, 17px)`, leading 1.72, measure 56ch maximum. The iron-gall-ink feel of EB Garamond at small optical sizes on a `--parchment` ground is the site's core textural anchor. 3. **Circuit marginalia and mechanical annotation:** [`JetBrains Mono`](https://fonts.google.com/specimen/JetBrains+Mono) — weight 400 only. Used exclusively in the 48px marginalia rail, panel-counter, and circuit-trace ornament labels. Never larger than 11px. The contrast between Cormorant's calligraphic curves and JetBrains Mono's engineering precision is the deliberate typographic collision that defines the scholarly-circuit aesthetic. **Type rules:** No system fallback stacks beyond `serif` and `monospace`. No web-safe font fallbacks visible in final render. Letter-spacing on Cormorant headers: `-0.02em`. EB Garamond body: `0em` tracking, `font-feature-settings: "onum" 1, "liga" 1, "kern" 1`. ## Imagery and Motifs **Grain overlay — the primary surface treatment:** Every panel has a full-bleed SVG `` noise filter applied as a pseudo-element layer at `opacity: 0.035` in light panels and `opacity: 0.055` in dark panels. This is not a PNG grain tile — it is a live SVG filter that renders at native screen resolution, ensuring the grain reads as paper fiber rather than digital texture. The filter parameters: `type="fractalNoise" baseFrequency="0.68 0.72" numOctaves="4"`. **Circuit-trace ornaments:** Section breaks, marginalia decorations, and the scroll-rail thumb are all built from hand-constructed SVG `` elements that mimic PCB trace routing — 90° and 45° angles only, with via-pad terminations (small filled circles, 3px radius) at each junction. The traces are rendered in `--aurora-green` at 40% opacity against dark panels and in `--foxing` at 50% opacity against `--parchment` panels. No Bezier curves in circuit elements. **Aged-paper document fragments:** Panels 2, 4, and 6 include a single photographic fragment — a partial image of a handwritten diplomatic cable, a wax seal, or a stamped archival envelope — treated with a CSS `sepia(0.4) contrast(1.1) brightness(0.92)` filter and layered beneath a `--foxing`-tinted radial-gradient vignette. These fragments are never full-bleed backgrounds; they occupy at most 35% of their panel's area, positioned at the diagonal boundary between text-field and image-field. **Aurora light-leak micro-interaction:** On hover over any Cormorant Garamond header, a 400ms CSS animation fires that sweeps an aurora shimmer — a `conic-gradient` from `--aurora-violet` to `--aurora-green` to `--aurora-rose` — across the text's `background-clip: text` mask, then fades back to solid `--parchment`. This is the site's single most visible micro-interaction, used precisely because it is the only moment the aurora colors appear at full saturation. **Diplomatic seal motif:** The site wordmark "diplomatic.bar" is accompanied by a custom SVG monogram: a circle (64px diameter) containing two overlapping letter-forms `D` and `B` in Cormorant at weight 300, constructed as a ligature-simulation using SVG `` elements with calculated offsets. The circle is stroked in `--aurora-violet` (1.5px) and filled with a radial gradient from `--ink` center to `#1a1230` edge. This seal appears in panel 1 and in the fixed top-right counter area at 24px. ## Prompts for Implementation Build diplomatic.bar as **a classified document being slowly unrolled across a conference table**, read left-to-right as a horizontal scroll of seven full-viewport panels. The page is a single HTML file with no routing, no anchor links visible to the user, no modal overlays. Each panel is one `
` inside a `
` with `display: flex; flex-direction: row; width: 700vw; height: 100vh`. **Scroll mechanism:** Horizontal scroll via `scroll-snap-type: x mandatory` on `
`. Each `
` is `scroll-snap-align: start`. Keyboard arrow-left/right keys advance panels. Trackpad two-finger horizontal swipe works natively. The custom scroll-rail is a fixed-position `
` at `bottom: 24px; left: 48px; right: 24px; height: 1px; background: #2a1f3d` with a `
` that transforms `translateX` as `scrollLeft / (scrollWidth - clientWidth) * (railWidth - thumbWidth)`. **Panel content arc (seven panels, no placeholder text):** 1. **`§ 01 — Communiqué`** — Full dark panel (`--ink` ground). Site wordmark "diplomatic.bar" in Cormorant at hero scale. Below, three lines of EB Garamond italic body text establishing the site's premise as an archive of unofficial diplomatic correspondence. Diplomatic seal SVG centered below wordmark. Aurora-shimmer micro-interaction armed on wordmark hover. 2. **`§ 02 — First Article`** — `--parchment` panel. Left-diagonal text block: a short prose fragment about the nature of diplomatic language, set in EB Garamond body at 56ch measure. Right-field: faded archival cable fragment image. Circuit-trace section ornament at top of text block. 3. **`§ 03 — Cipher Room`** — Dark panel. Large Cormorant display header: "The Silence Between Words." Below: three columns of JetBrains Mono annotation text at 11px, arranged as if they are parallel transcript columns from a multilateral negotiation — each column in a different aurora tone. 4. **`§ 04 — Protocol`** — `--parchment` panel. A single central EB Garamond quotation at `clamp(22px, 2.8vw, 38px)`, 52ch measure, indented 6ch from left. Source attribution in JetBrains Mono below. Wax seal image fragment at lower-right. Full-panel grain at 0.055 opacity. 5. **`§ 05 — Dispatch`** — Dark panel transitioning to deep aurora-violet. Circuit-trace diagram filling the right 60% of the panel: a schematic of an imagined communications routing network, built from SVG circuit-trace paths, with node labels in JetBrains Mono. Text column left: three short paragraphs in EB Garamond describing the routing logic as diplomatic metaphor. 6. **`§ 06 — Annexe`** — Split panel: left half `--parchment`, right half `--ink`. EB Garamond body text left, Cormorant display right. Archival envelope fragment image centered at the panel seam. The foxing grain is heavier on the left half (0.07 opacity). 7. **`§ 07 — Archive`** — Full dark panel. Bottom of the document. Cormorant italic: "End of Classified Correspondence." JetBrains Mono timestamp in the marginalia rail. A single circuit-trace path runs from the marginalia rail across the full panel width, terminating at a filled via-pad at the right edge. **Micro-interaction inventory (five total, implemented in vanilla CSS + minimal JS):** 1. **Aurora header shimmer** — `background-clip: text` conic-gradient sweep on Cormorant header hover, 400ms ease-out. 2. **Circuit-trace draw-on** — SVG `stroke-dashoffset` animation on panel enter: traces draw from left terminus to right terminus over 600ms cubic-bezier(0.4, 0, 0.2, 1). 3. **Marginalia fade-update** — When scroll-snap settles on a new panel, the marginalia rail content cross-fades (opacity 0→1, 250ms) to the new panel's annotations. 4. **Scroll-rail thumb** — Live `translateX` tracking of horizontal scroll position, updating on `scroll` event with no debounce. 5. **Aged-paper fragment parallax** — Document fragment images move at 0.85× the panel scroll speed during the snap transition, creating a 15% parallax depth relative to the text layer. **AVOID:** No sticky navigation bars, no hero CTAs, no pricing tables, no testimonial carousels, no card grids, no vertical scroll on desktop, no parallax background-attachment (use the SVG filter grain instead), no modal dialogs, no cookie banners, no footer-as-section patterns. ## Uniqueness Notes Seed: aesthetic: grainy-textured, layout: horizontal-scroll, typography: eclectic-hybrid, palette: aurora-gradient, patterns: micro-interactions, imagery: paper-aged, motifs: circuit, tone: scholarly-intellectual **Three or more deliberate differentiators from the existing corpus:** 1. **Horizontal-scroll as diplomatic reading, not product showcase.** The frequency analysis shows horizontal-scroll at 5% — rare but not absent. What is entirely absent is horizontal-scroll used as a *document-unrolling* metaphor tied to diplomatic narrative. Every horizontal-scroll precedent in the corpus is a feature carousel or portfolio row. diplomatic.bar treats the horizontal axis as a treaty's articles — each panel is a numbered article of an imagined accord, with its own authority and silence. The reading direction itself is argument. 2. **Aurora palette contained by grain — not displayed.** Aurora-gradient appears at 4% in the corpus, and in every prior instance it functions as a visible gradient wash. Here the aurora tones (`--aurora-green` `#4dffc3`, `--aurora-violet` `#b87fff`, `--aurora-rose` `#ff6fa8`) are structurally suppressed: they appear only inside SVG-filter grain at fractional opacity and in the single header-hover micro-interaction. The grain acts as a diffusion filter that makes the palette feel archival rather than digital. This is the first corpus design to use aurora-gradient *primarily as a texture component* rather than a surface color. 3. **Circuit motifs as chancery infrastructure, not tech-aesthetic.** Circuit appears at 10% in the corpus — the highest-frequency motif in the entire vocabulary — and in every instance it reads as "this is a technology site." diplomatic.bar recasts the circuit trace as *diplomatic routing infrastructure*: the same 90°/45°-angle PCB trace grammar is used to represent the invisible cables-and-pouches network that underlies formal correspondence. The via-pads become classification seals. The trace paths become courier routes. This is a semantic inversion: circuit meaning *secret information infrastructure* rather than *computation*. 4. **Eclectic-hybrid typography as a deliberate collision, not variety for variety's sake.** The corpus uses eclectic-hybrid at 4%. diplomatic.bar's three-voice system — Cormorant (chancery display), EB Garamond (diplomatic body), JetBrains Mono (mechanical annotation) — is structured as a deliberate anachronism: 18th-century letterpress cut, 15th-century humanist roman, and 21st-century engineering terminal. These three voices represent three layers of diplomatic work: the public declaration, the private record, and the technical transmission. Typography is character, not decoration. 5. **Frequency-avoided patterns explicitly rejected:** This design avoids `centered` (93% corpus), `full-bleed` backgrounds (80%), `scroll-triggered` animations (43%), and `parallax-sections` (15%) — replacing all of them with horizontal snap-scroll, SVG-filter grain surfaces, circuit-trace draw-on animations, and diagonal text-field composition.