# Design Language for diplomacy.day ## Aesthetics and Tone `diplomacy.day` is a **declassified signals archive rendered as a Cold War operations room that has been struck by neon lightning** — the visual vocabulary of a 1970s superpower intelligence terminal, its amber-phosphor CRTs and stamped manila folders now overlit by dopamine-neon circuitry that pulses with each incoming diplomatic dispatch. Think of a State Department situation room from 1973 in which every screen has been hacked by a present-day Taiwanese demo group: the furniture is still mahogany and brass, but the readouts bleed electric violet and acid lime. The tone is **authoritative without being cold** — the voice of a senior attaché who has read everything and is still somehow stunned by what the cables say today. Every element on the page carries classified weight: the typography is the kind printed on official communiqués, the colors are the kind that light up tote boards in secure facilities, the structure is the kind that organizes intelligence by threat tier rather than by narrative convenience. The **ambient texture** is a light grain overlay (film-scan noise, ~12% opacity) laid over every section, making the neon glow feel like it is radiating through old photographic emulsion rather than through a modern OLED. Bokeh-background imagery — large, shallow-focus photographs of embassy facades, treaty tables, handshakes in corridors — appears behind sections, massively blurred (blur: 48px), desaturated to near-monochrome, then recolored through a violet/teal duotone so they read as deep atmospheric fields rather than literal photographs. Circuit-trace motifs — thin SVG line drawings of motherboard traces, solder pads, and via-holes — are ghosted at 6–10% opacity across hero and section backgrounds, implying that the entire diplomatic network is underlaid by encrypted infrastructure that civilians are not permitted to see. The overall effect: **an official record that has been infiltrated by something alive and electric**. ## Layout Motifs and Structure The page is organized as a **vertical sequence of full-viewport parallax sections** — each section is a distinct intelligence "tier," advancing from broad geopolitical overview down to specific dispatch-level detail. There are exactly five tiers: 1. **Situation Room** (hero, full viewport) — oversized headline broadcast, bokeh embassy photo behind it, circuit traces ghosted in 2. **Today's Dispatches** (scroll-activated card grid) — a 3-column grid of card-flip panels, each representing an active diplomatic channel 3. **Signal Intercept** (horizontal scroll ticker + feature card) — a CRT-style running ticker of diplomatic communiqué fragments, with a single expanded feature card at center 4. **Deep Archive** (staggered masonry, 2 columns) — older dispatches rendered as manila-folder document cards, yellowed at edges 5. **Terminal** (full-viewport closing section) — a single oversized declaration and a blinking cursor, no further navigation **Parallax behavior:** Each section's bokeh background moves at 0.3× the scroll rate of the content layer, creating the sensation that the atmospheric field behind each tier belongs to a different depth plane. The circuit trace SVGs move at 0.6× scroll rate — faster than the photo but slower than text — creating a third depth layer. Content text moves at 1× (normal). **Card-flip anatomy (Dispatches section):** Each dispatch card is 340×420px. Front face: dark background (#0a0a14), top-left classification badge (RESTRICTED / CONFIDENTIAL / TOP SECRET in appropriate neon), a four-digit channel number in oversized monospace, and a one-line dispatch summary in display type. Flip trigger: hover or tap. Back face: full dispatch text in body type, source attribution, timestamp, and a "verify signal" button styled as a terminal prompt. The flip uses CSS `transform: rotateY(180deg)` on a `.card-inner` wrapper — the faces are `backface-visibility: hidden`. Flip duration: 600ms with `cubic-bezier(0.4, 0, 0.2, 1)` easing. **Grid and spacing system:** 12-column grid, 24px gutter, max-width 1440px. Section padding: 120px vertical on desktop, 64px on mobile. The hero has zero padding — content anchors to 50% viewport height (vertically centered). **Circuit trace decorations** are 1px SVG polylines with `stroke: #7B2FFF` at 8% opacity, tracing irregular L-shaped paths across each section background. They do not animate except for a 0.8s `opacity` pulse (8%→14%→8%) on a 6s loop — barely perceptible, like a slow heartbeat. ## Typography and Palette **Typefaces (Google Fonts only, verified):** - **Display / Hero headlines — `Big Shoulders Display`** (weight 900, uppercase, tracking +0.04em). Set at 96px on hero, 72px on section headers, 48px on card fronts. The ultra-compressed uppercase geometry evokes military stencils and broadcast chyrons — authoritative, space-efficient, slightly menacing. Big Shoulders Display is designed for exactly this kind of oversized declarative use. - **Body / dispatch text — `IBM Plex Mono`** (weight 400, 16px/26px on body; weight 500 for labels). IBM Plex Mono was designed for technical documentation and signals well. The monospaced rhythm implies teletype output — each character was transmitted individually and arrived at exactly this position. Used for dispatch text, timestamps, source attributions, and the terminal section. - **Secondary labels / classification badges — `Barlow Condensed`** (weight 600, uppercase, tracking +0.1em, 11–13px). Used for category labels, channel identifiers, and UI chrome. Its compressed proportion keeps labels slim without sacrificing legibility. **Palette:** | Role | Hex | Name | |------|-----|------| | Deep black ground | `#06060F` | Situation Room | | Primary neon — electric violet | `#7B2FFF` | Signal Violet | | Secondary neon — acid lime | `#B8FF2E` | Clearance Green | | Tertiary neon — hot cyan | `#00F5D4` | Channel Cyan | | Warm accent — dispatch amber | `#FF9500` | Communiqué Amber | | Document surface | `#0E0E22` | Dispatch Panel | | Muted mid-tone | `#2A2A48` | Archive Slate | | Highlight / reversed text | `#F0EDFF` | Cleartext White | **Neon glow treatment:** Primary interactive elements (buttons, active card states, ticker text) have a `text-shadow` or `box-shadow` with the relevant neon color at 60–80% opacity, 0px spread, 8–12px blur. This simulates CRT phosphor bloom. It is never applied to body text — only to UI elements and display headings. ## Imagery and Motifs **Bokeh photography system:** Each of the five parallax sections has a distinct background photograph, blurred to 48px and passed through a CSS duotone filter: - Situation Room: a wide angle of a treaty-signing table, duotone violet/black - Dispatches: embassy facade at dusk, duotone cyan/black - Signal Intercept: a satellite dish array, duotone amber/black - Deep Archive: stacked folders and filing cabinets, duotone green/black - Terminal: empty conference chair at a long table, duotone violet/teal The duotone is achieved via a CSS `filter: sepia(1) hue-rotate(Xdeg) saturate(3)` chain applied to a desaturated (`grayscale(0.9)`) base image. This keeps photographs recognizable as architecture but transforms them into glowing atmospheric fields. **Circuit trace SVG system:** Three SVG layers are positioned absolutely behind each section (z-index 1, content at z-index 10): - *Macro traces*: 2–4 long L-shaped lines spanning 40–80% of viewport width, `stroke-width: 1.5px`, Signal Violet at 8% opacity - *Micro traces*: 8–12 short stub lines (30–120px), `stroke-width: 1px`, Channel Cyan at 6% opacity - *Solder pads*: 6–10 small filled circles (r: 3–6px), Clearance Green at 10% opacity, placed at trace endpoints **Classification badge system:** Each dispatch card front face carries one badge in the top-left corner. The badge is a thin-bordered rectangle (1px border, rounded 2px) with monospace text: - `RESTRICTED` — amber border, amber text - `CONFIDENTIAL` — cyan border, cyan text - `TOP SECRET` — violet border, violet text, a faint outer box-shadow glow **Ticker tape element (Signal Intercept section):** A horizontal ``-replaced CSS animation (`translateX` from 0 to -100%) cycling six communiqué fragments in `IBM Plex Mono` 14px, Clearance Green color, on a single line against a `#0E0E22` strip with a 1px Signal Violet top border. Fragments are separated by `⬥` (U+2B25) dividers. Animation runs on a 40s linear loop, pausing on hover. **Cursor blink (Terminal section):** A single `_` character in Signal Violet that `opacity`-blinks at 0.8s interval using CSS keyframes. It sits at the end of the terminal declaration sentence, implying the broadcast is not yet complete. ## Prompts for Implementation Build `diplomacy.day` as a **five-tier intelligence brief** — not a product site, not a portfolio, not a dashboard. The visitor is a senior analyst arriving at 06:00 to read the overnight cable traffic. Everything on the page exists to convey information weight and signal authority. **Vow 1 — The neon is earned, not decorative.** Every neon element marks something significant: classification level, active signal, verified transmission. Never use neon for hover effects on body text or for decorative borders on neutral containers. Neon means something happened. **Vow 2 — Parallax depth is spatial, not theatrical.** The three depth layers (bokeh photo at 0.3×, circuit traces at 0.6×, content at 1×) must feel like looking through a window into a deep room, not like watching a parallax demo. The motion must be subtle — background layers should barely seem to move when content scrolls; the effect is registered more as depth than as motion. **Vow 3 — The card flip reveals, it does not animate.** The flip on Dispatch cards should feel like turning over a classified document — deliberate, irreversible until you flip back. The back face should have noticeably more text density than the front — the front is a classified subject line, the back is the actual content. Never flip multiple cards simultaneously. **Implementation specifics:** - Build the five sections as `
` elements with `position: relative`, `overflow: hidden`, and `min-height: 100vh` - Background bokeh: `
` with `position: absolute`, `inset: -10%`, `filter: blur(48px) grayscale(0.9) sepia(1) hue-rotate(Xdeg) saturate(3)`, `background-size: cover`, `z-index: 0` - Circuit traces: inline SVGs in each section, `position: absolute`, `inset: 0`, `z-index: 1`, `pointer-events: none` - Content layer: `position: relative`, `z-index: 10` - Parallax via `scroll` event listener: `section.bg-photo.style.transform = translateY(scrollY * -0.7)` (negative because photo moves opposite scroll direction at 0.3× — the content moves 1×, the photo only 0.3×, net difference 0.7×) - Card flip: `.card:hover .card-inner { transform: rotateY(180deg); }`, `.card { perspective: 1200px; }`, `.card-inner { transform-style: preserve-3d; transition: transform 600ms cubic-bezier(0.4,0,0.2,1); }` - Big Shoulders Display: `@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@900&display=swap')` - IBM Plex Mono: `@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap')` - Barlow Condensed: `@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600&display=swap')` - Grain overlay: a 200×200px noise texture tile at `background-blend-mode: overlay`, `opacity: 0.12`, `position: fixed`, `inset: 0`, `z-index: 999`, `pointer-events: none` - Ticker: `@keyframes ticker { from { transform: translateX(0) } to { transform: translateX(-50%) } }` — duplicate the text content to create seamless loop - For the five card-flip panels in the Dispatches section: channel numbers 0441, 0882, 1337, 2048, 0600, 1701 in Big Shoulders Display 48px - Terminal section declaration: use `IBM Plex Mono` 28px for the declaration text, `Big Shoulders Display` 900 for the city/date stamp above it **Avoid:** - Call-to-action buttons that look like SaaS signup prompts - Pricing tiers, feature comparison tables - Any layout that could be mistaken for a news site's homepage - Neon text on neon background — always maintain contrast with the `#06060F` ground - Parallax that causes layout shift or repaints (use `transform` only, never `top`/`margin`) ## Uniqueness Notes **Chosen seed:** aesthetic: retro, layout: parallax-sections, typography: oversized-display, palette: dopamine-neon, patterns: card-flip, imagery: bokeh-background, motifs: circuit, tone: authoritative **Differentiators from every other design in the registry:** 1. **Cold War intelligence operations room as the unifying metaphor is unprecedented in the registry.** Other retro designs use mid-century Americana, 1980s sci-fi, or 1960s editorial aesthetics. `diplomacy.day` uses the specific visual vocabulary of superpower intelligence infrastructure (situation rooms, tote boards, cable traffic, classification badges) as the structural logic — not just as surface decoration. 2. **The five-tier "intelligence brief" structure replaces both hero-and-sections and portfolio-grid.** No other parallax-sections design in the registry uses a strict five-tier classified-document hierarchy as the information architecture. The tiers have names (Situation Room, Dispatches, Signal Intercept, Deep Archive, Terminal) that carry intelligence-world meaning, not generic section names. 3. **Three-depth parallax (bokeh at 0.3×, circuit traces at 0.6×, content at 1×) creates a specific spatial illusion.** Most parallax-sections designs use two depths (background + content). The intermediate circuit-trace layer at 0.6× creates a "floating infrastructure" layer between the atmospheric backdrop and the readable text — implying that the network substrate is physically present in the room. 4. **Card-flip used as declassification gesture.** In the registry, card-flip patterns are decorative or used for product reveal. Here, the flip is thematically motivated: front face = classified summary, back face = full dispatch text. The interaction has diegetic meaning inside the site's fictional world. 5. **IBM Plex Mono as the body typeface (not as code/monospace accent) is underused in the registry.** Most designs relegate monospace to UI labels or code blocks. Using IBM Plex Mono as the primary body type for all dispatch text makes the teletype-transmission metaphor architectural rather than decorative — the spacing itself implies transmission.