# Design Language for diplomacy.boo ## Aesthetics and Tone **diplomacy.boo** is a name that holds two worlds in tension: the cold, procedural formality of statecraft — communiqués, treaties, back-channel negotiations — and the blunt, bathetic internet suffix `.boo`, a sound made by ghosts, sports crowds, and toddlers. The site inhabits that gap with deliberate strangeness: a **glassmorphism-driven city intelligence terminal** that treats the urban skyline as a data surface, as if every tower were a diplomatic station sending encrypted transmissions through frosted glass. The aesthetic is **glassmorphism**, but not the pastel, friendly, SaaS-UI glassmorphism that has colonized 32% of the corpus. This is **cold glassmorphism** — the glass of embassy windows at 2 a.m., shot through with midnight-blue city light, carrying the reflections of towers whose names you are not supposed to know. The frost is not decorative; it is operational. Things are blurred behind it because they are meant to be blurred. Tone: **futuristic-cutting-edge** — no warmth, no friendliness, no CTA urgency. The voice is the city itself: indifferent, vast, operating on protocols the visitor is only beginning to decode. A visitor scrolling this page is not a customer; they are a signal intercepted mid-transmission, being processed by a system that was already running before they arrived. Mood references: the LED-lit glass lobby of a foreign ministry at midnight; a satellite image of a city grid with each building labeled in a typeface that was designed for radar screens; the blue-white glow of a terminal screen reflected in rain-wet pavement; a skyline seen through the frosted glass of a conference room where the meeting ended an hour ago and the chairs have not been moved. ## Layout Motifs and Structure The page is built as a **single editorial-flow column** — not a marketing column, but a **declassified intelligence briefing**: dense, left-aligned, typographically layered, with each section presented as a separate glass panel floating at a slightly different depth from the city backdrop. The editorial-flow here means: the page reads like a long-form document intercepted and rendered in real-time, with each panel arriving as if transmitted sequentially. **Macro structure (scroll order):** 1. **HEADER / INTERCEPT ZONE** — Full-viewport panel. A frosted glass slab over a live city grid (pure CSS/SVG, no photographs). The domain name `diplomacy.boo` is rendered in a monospaced display face at 14vw, cold-white, with a subtle chromatic aberration on the terminal cursor. Behind the glass: an isometric city grid of extruded rectangles in deep midnight-blue, rendered in pure CSS 3D transforms — no canvas, no WebGL. The grid breathes: buildings pulse once every 4–7 seconds with a cold blue interior glow, randomized by JS. 2. **SIGNAL INTERCEPT PANEL** — A narrower glass card (max-width 780px, centered) that contains the site's core proposition, written as a classified document header: `CLASSIFICATION: OPEN`, `SOURCE: diplomacy.boo`, `TRANSMISSION DATE: [current date]`. Body text below follows the document format — short, dense paragraphs, no bullet lists, no subheadings, no emoji. 3. **CITY GRID DATA PANELS** — Three glass panels arranged in a staggered editorial flow: first panel right-aligned, second left-aligned, third centered. Each contains abstract-shape data glyphs (SVG: circles, rectangles, diagonal lines) that look like redacted map overlays. Text inside each panel describes one facet of the domain concept, in the register of a briefing document: terse, precise, no adjective that doesn't carry weight. 4. **SIGNAL LAYER** — A full-width glass strip with very high blur (backdrop-filter: blur(32px)) containing a single line of monospaced text that scrolls horizontally — the domain name alternating with coordinates and timestamps — like a radio intercept ticker. Infinite CSS marquee, controlled speed. 5. **TERMINAL FOOTER** — A narrow, low-luminosity glass strip at the bottom. Left: the domain name as a system path (`/diplomacy/boo/v1`). Right: a UTC timestamp rendered in monospaced type, updating live via JS. No navigation, no social links, no copyright block. **Spatial rules:** - All panels have `backdrop-filter: blur(16px–32px)` and `background: rgba(8, 18, 48, 0.4)` — cold navy glass. - No panel touches the viewport edge; minimum 32px inset on all sides (desktop), 16px mobile. - Vertical rhythm: 80px gap between panels on desktop, 40px mobile. - No horizontal rules, no solid dividers — glass depth is the separator. - The city grid backdrop is `position: fixed`, creating a parallax effect as the user scrolls through the floating panels. **No grid columns for content.** The stagger of the three data panels is achieved by alternating `margin-left: 0` / `margin-left: auto` / `margin-left: auto; margin-right: auto` — not by a CSS grid system. This makes the layout feel editorial, not interface-y. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Domain Wordmark**: [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono) — weight 400 (the only weight available). This is a military-communications monospaced face designed for readability on amber radar screens. Set the wordmark at `clamp(4rem, 12vw, 11rem)`, letter-spacing `0.04em`, color `#E8F4FF` (cold near-white). Render in the header intercept zone only. Do NOT use for body. - **Section Labels / Classification Headers**: [`Major Mono Display`](https://fonts.google.com/specimen/Major+Mono+Display) — weight 400 (only weight). Set at `0.7rem`, all-caps, letter-spacing `0.3em`, color `#4A90D9` (signal blue). Used for classification tags, panel labels (`SECTION 01`, `TRANSMISSION`, `DATA OVERLAY`), and the horizontal ticker. - **Body / Briefing Text**: [`Space Mono`](https://fonts.google.com/specimen/Space+Mono) — weight 400 for body (line-height 1.8, max 68ch), weight 700 for emphasis. Set at `clamp(0.85rem, 1.1vw, 1rem)`. Color: `#C8D8E8` (pale steel). This is the diplomatic cable text — monospaced, precise, never casual. - **Data Glyphs / Coordinate Labels**: [`Roboto Mono`](https://fonts.google.com/specimen/Roboto+Mono) — weight 300, set at `0.65rem`, color `#3A6A9A` (dim signal blue). Used only for coordinate strings, timestamps, and redacted-text placeholders (`████ ████ ██`). **Palette (hex, named):** | Name | Hex | Use | |---|---|---| | Void | `#060D1E` | Body background, city grid base | | Midnight | `#0D1B38` | City building faces (dark side) | | Station | `#122450` | City building faces (lit side), panel glass base | | Signal Blue | `#4A90D9` | Active elements, glow, labels | | Cold Steel | `#C8D8E8` | Body text | | Near-White | `#E8F4FF` | Wordmark, hero text | | Ice Glass | `rgba(12, 28, 72, 0.38)` | Panel background fill | | Frost | `rgba(100, 160, 220, 0.08)` | Panel border, glass edge highlight | **No warm colors anywhere.** No gradients using orange, yellow, or red. The only "warmth" in the palette is the blue — which is still cold. The corpus uses `warm` at 96% and `gradient` at 89%; this design uses neither warm nor generic gradients. ## Imagery and Motifs **All imagery is generative SVG and CSS.** No photography (corpus: 92% — abstaining entirely). No stock assets. No icon fonts. **City-urban motifs:** - **Isometric city grid** (pure CSS 3D, `transform-style: preserve-3d`, `perspective: 1200px`): approximately 40–60 rectangular prisms arranged in a grid, each a `
` with three visible faces (top, front, right side). Heights randomized per building (JS `Math.random()` on load, seeded by domain name hash for consistency). The grid occupies the full viewport at `position: fixed, z-index: 0`. Buildings never animate continuously — they pulse with a cold blue interior glow (box-shadow: inset) once every 4–9 seconds, staggered. The effect is a city that is alive but not performing aliveness. - **Abstract-shape data overlays** (inline SVG inside glass panels): each data panel contains a 240×120px SVG with a custom composition of: - Thin horizontal lines spaced irregularly (stroke `#3A6A9A`, stroke-width 0.5px) - Filled rectangles with `fill: rgba(74, 144, 217, 0.15)` suggesting redacted sections of a map - A single diagonal line crossing the composition at a precise angle (not 45°; use 31° or 67° — angles that feel instrumental, not decorative) - One small circle, `r="3"`, `fill="#4A90D9"` — the target marker - No text inside the SVG. All labels are in HTML outside the SVG frame. - **Redaction motifs**: scattered through the body text, inline `` elements that render as `████` in Roboto Mono, color `#3A6A9A`. These are not decorative — they appear at semantically appropriate moments (place names, dates, agent names within the fictional briefing text). On hover, the redacted block reveals its content with a 200ms fade. - **Ticker / signal strip**: the horizontal scrolling strip in the SIGNAL LAYER section uses `Major Mono Display` to render repeating sequences: `diplomacy.boo · 48.8566° N, 2.3522° E · 2026-05-06T02:17:41Z · ` — coordinates cycle through six real cities (Paris, Seoul, Geneva, Cairo, Nairobi, Mexico City), one per loop. The scroll is CSS `animation: ticker linear infinite`, not JS. Speed: `40s` per cycle. - **Chromatic aberration on the wordmark**: achieved with CSS `text-shadow: -1px 0 rgba(74, 144, 217, 0.6), 1px 0 rgba(232, 244, 255, 0.4)` — a blue ghost to the left, a white ghost to the right. Static, not animated. The effect reads as a signal slightly out of alignment, a transmission that has traveled too far. ## Prompts for Implementation **The fiction.** The visitor has received a transmission from a system they did not contact. The domain `diplomacy.boo` is the address of a network node that monitors cities — not for surveillance, not for commerce, but as a form of attention. The site is the node's public-facing interface: a read-only terminal that shows the operator what it is watching, without explaining why. The visitor scrolls through the panels as if reading a document that was already in progress when they arrived. Nothing is addressed to them directly. Nothing asks for their action. The page is a fact, not an invitation. **Implementation bias:** - **No JavaScript frameworks** — vanilla JS only. The city grid, the ticker, and the timestamp are all achievable in under 80 lines of JS. - **Tilt-3d on glass panels**: each panel (`.glass-panel`) gets a `mousemove` listener that applies `transform: perspective(800px) rotateX(Xdeg) rotateY(Ydeg)` based on cursor position relative to the panel's center. Max tilt: ±6° on X, ±8° on Y. Transition: `transform 0.15s ease-out` (fast enough to feel physical). The tilt reveals that the glass has depth — the city grid visible behind the panel shifts slightly as the panel tilts, because the grid is `position: fixed` and the perspective changes. This is the single most important interaction on the page; implement it on every panel. - **CSS custom properties for the glass system**: `--glass-bg: rgba(12, 28, 72, 0.38)`, `--glass-border: rgba(100, 160, 220, 0.08)`, `--glass-blur: 18px`, `--glass-shadow: 0 4px 32px rgba(6, 13, 30, 0.6)`. All panels use these variables — changing `--glass-blur` on `body` adjusts the entire system. - **City grid construction (CSS 3D)**: wrap a `
` in a `
` with `perspective: 1200px`. Rotate the grid on the X axis (`rotateX(50deg)`) and Z axis (`rotateZ(-20deg)`) to create the isometric-like aerial view. Each building is a `
` with CSS custom property `--h` (height in px) set by JS. The building's three faces are `:before` (top), `:after` (right), and the element itself (front). Use `transform-origin: bottom center` on each face. - **Scroll behavior**: `scroll-behavior: smooth` on `html`. Panels use `animation: fade-rise 0.6s ease-out both` triggered by `IntersectionObserver` — they start at `opacity: 0, transform: translateY(24px)` and arrive at `opacity: 1, transform: none`. The city grid is always visible; only the panels animate in. - **The redaction reveal**: `.redacted { cursor: pointer; transition: color 0.2s, background 0.2s; }` — on hover, background shifts from transparent to `rgba(74, 144, 217, 0.15)` and the `████` characters are replaced by the real text via a `data-content` attribute read in CSS `content`. (Use a `████` pattern with `.redacted:hover::before { content: attr(data-real); }` and the original text hidden.) - **Mobile**: at `max-width: 768px`, disable the tilt-3d (too hard to trigger on touch without scroll conflict), reduce `--glass-blur` to `10px` (performance), and stack the three data panels vertically, all left-aligned. The city grid scales via `transform: scale(0.7)` on `.city-viewport` to fit narrower viewports. The ticker speed adjusts to `28s`. - **Avoid**: hero CTAs, "Get started" buttons, pricing tables, stat grids, testimonial blocks, social proof, logo bars, navigation menus, hamburger menus, sticky headers, any footer with links. The page has no navigation because the page is a terminal, not a website. ## Uniqueness Notes 1. **City grid as backdrop, not decoration.** The corpus uses `city-urban` motifs at under 2% (extremely rare). More importantly, every prior use of urban motifs in the corpus is photographic (skyline photography, aerial photos). This design generates the city in pure CSS 3D — no photographs, no images, no canvas — making the city a live, interactive structural element of the page rather than a mood backdrop. When panels tilt via tilt-3d, the fixed city grid shifts behind them, creating a parallax depth that is impossible with photography. 2. **Cold glassmorphism over midnight-blue, not pastel.** Glassmorphism appears in 32% of the corpus, but frequency analysis shows it almost exclusively paired with warm pastels (lavender, cream, coral) or high-saturation gradients. `midnight-blue` palette appears at only 3%. The combination of cold glassmorphism + midnight-blue + monospaced type is unprecedented in the registry and produces a reading experience that is closer to embassy architecture than SaaS UI. 3. **Monospaced-only typography at display scale.** The corpus uses `mono` typography at 94%, but almost always for code blocks or small UI labels — not for display-scale hero type. Setting `Share Tech Mono` at `12vw` in the hero intercept zone is a commitment to keeping the entire typographic system within the monospaced register, which no other design in the registry does at this scale. The effect is that the entire page reads as a terminal output, including the largest text. 4. **Redaction as interactive motif.** The corpus uses `progressive-disclosure` at 3%, and never in the form of text redaction. The `████`-on-hover pattern brings the diplomatic/intelligence fiction into the interaction model itself — visitors can choose to read what is "classified," but the default state withholds it. This is content that participates in the aesthetic rather than merely being styled by it. 5. **Planned seed:** aesthetic: glassmorphism, layout: editorial-flow, typography: tech-mono, palette: midnight-blue, patterns: tilt-3d, imagery: abstract-shapes, motifs: city-urban, tone: futuristic-cutting-edge. Avoided overused patterns from frequency analysis: photography (92% — abstained entirely), warm palette (96% — cold only), parallax (92% — replaced by fixed-background city grid which achieves similar depth without the cliché), gradient (89% — no decorative gradients, only functional rgba overlays).