# Design Language for diplomatic.boo
## Aesthetics and Tone
The domain lives inside a productive paradox: **diplomatic.boo** is both the ghost in the state dinner and the unmanned orbital relay station overgrown with wildflowers. The visual premise is a **decommissioned diplomatic satellite fallen to earth in a meadow** — its hexagonal solar panels cracked, its telemetry screens still flickering pale blue, wild thyme and foxgloves threading through its antenna lattice, dewdrops on the HUD glass. The aesthetic is cottagecore colonised by the far future: handwritten field-notes tucked under a defunct comms array, embroidered signal-strength badges, a moisture-warped dossier that still has an active connection.
The tone is **futuristic-cutting-edge**, but the future arrived thirty years ago and went feral. Nothing is shiny or minimalist. The HUD elements are real and functional — scan lines animate, frequencies pulse — but they are framed by pressed botanical specimens and watercolour wash. This is not steampunk (no brass, no Victorian gears). It is specifically the **soft-invasion of wildflowers into derelict precision instruments**: the organic reclaiming the technical, but the technical still running.
Mood reference: a watercolour field journal kept by a botanist attached to a deep-space treaty commission. Each page has a spectrum-analyser reading in the margin, a hand-painted meadow plant in the centre, and a redacted-but-legible transmission fragment at the bottom. Colour temperature is consistently cool — thin aerial blues and pale celadons — with one warm ochre accent that reads as sunlight through rain.
## Layout Motifs and Structure
The page is a **single narrow column**, 620–680 px wide, floated on a fog-white field. The column is not a card or a container — it has no border and no shadow. It is simply the page's single thread of content, the way a field dispatch is typed on a single sheet: there is nothing to the left or right but margin.
**The HUD layer is a persistent overlay**, not part of the document flow. Three lightweight HUD elements are pinned to the viewport:
- Top-left: a **coordinates readout** in monospaced variable font (`diplomatic.boo / 51°28′N, 0°0′W / freq 423.7 MHz`) updating via CSS counter animation.
- Bottom-right: a **signal-strength bar** — five horizontal bars at 1px each, animating a slow heartbeat between 3 and 5 active bars. No colour — just `#B8D4E8` on the base.
- Top-right: a **status glyph** — a thin SVG hexagon, 24×24px, that slowly rotates once every 12s. Its six vertices represent six treaty signatories; at any given moment, two are lit.
These HUD elements are `position: fixed`, `z-index: 10`, `pointer-events: none`, opacity 0.6. They exist outside the reading experience and create a sense that the page itself is monitored equipment.
**Content column cadence (top to bottom):**
1. A tall hero space — 90svh — mostly empty, with the wordmark `diplomatic.boo` set at the vertical midpoint, painted in the watercolour treatment below. Above the wordmark: a single horizontal scan-line that draws itself from left edge to right edge on load (the underline-draw animation applied to a 1px ``). Below the wordmark: a four-line prose fragment about the satellite's location, set in `font-size: clamp(0.8rem, 1.2vw, 1rem)`, italic.
2. Five content sections — each introduced by a **watercolour specimen header**: the section title is overlaid on a pale watercolour wash that bleeds slightly past the column edges at left. The wash is an inline SVG `` filter (feTurbulence + feColorMatrix) applied to a `` — not a raster image.
3. A foot — the decommission date and final transmission, set in the coordinate monospace, centred at bottom.
No grid. No sidebar. No sticky nav. No floating CTAs. No sections with background-color swaps. The single-column discipline is absolute.
## Typography and Palette
**Typography — all Google Fonts, verified:**
- **Wordmark and section frontispieces:** [`Playfair Display`](https://fonts.google.com/specimen/Playfair+Display), weight 400 italic. Set at `clamp(3.2rem, 7vw, 6.5rem)` for the wordmark, `clamp(1.6rem, 3vw, 2.8rem)` for section titles. Playfair's high-contrast serifs carry both literary gravity and the optical fragility of a typed dispatch.
- **Body / field-notes:** [`Source Serif 4`](https://fonts.google.com/specimen/Source+Serif+4) — a **variable font** with `wght` (200–900) and `opsz` (8–60) axes. Body runs at `wght 350, opsz 14`, giving it the weight of handwritten annotation. Pull-quotes step up to `wght 500, opsz 20`. Caption/metadata steps down to `wght 200, opsz 10`. The variable axis is the typographic engine — no separate font loads for different weights.
- **HUD / coordinates / metadata:** [`Space Mono`](https://fonts.google.com/specimen/Space+Mono), weight 400 regular only. Used exclusively for the three fixed HUD elements and inline frequency/coordinates callouts. Size locked at `0.72rem` — small enough to be ambient.
**Palette — ethereal-blue:**
| Token | Hex | Use |
|-------|-----|-----|
| `--fog` | `#F2F5F8` | Page background — a barely-blue white, the colour of early morning mist |
| `--aerial` | `#B8D4E8` | Primary blue — HUD elements, underlines, scan lines, signal bars |
| `--celadon` | `#C8DDD0` | Secondary — watercolour wash tint for section headers |
| `--ink` | `#2C3A47` | Primary text — dark blue-grey, not black |
| `--ochre` | `#D9A84E` | Sole warm accent — one lit hexagon vertex, one underline variant, never used more than once per viewport |
| `--ghost` | `#E8EFF5` | Borders, HUD idle state, pressed-specimen outlines |
| `--transmission` | `#7AAFC4` | Active HUD state, hovered underlines, coordinate readout highlight |
Background: `--fog` solid. No gradients. No dark mode. The page is consistently daylit-aerial.
## Imagery and Motifs
**All imagery is inline SVG** — no raster photographs, no stock illustrations, no icon fonts, no external sprite sheets.
**Watercolour specimen blocks** (one per section, five total): Each is a `