# Design Language for diplomacy.day ## Aesthetics and Tone diplomacy.day is **a forest-floor reading room where every plant has a passport and every passport has a plant pressed inside it.** The site treats diplomacy not as a state ceremony but as the daily, almost domestic, work of two parties sitting under a beech canopy and choosing — between bites of bread, in the long green light of late afternoon — to extend the next sentence rather than the next sanction. The visual world is **maximalist (6% in the registry — claimed and held)**, but it is the *botanical maximalism of a Victorian herbarium*, not the Memphis-shapes-and-confetti maximalism that overpopulates the dopamine catalogue. The page is *crammed with green* — sixteen distinct ferns layered behind the type, eight pressed leaves taped to the margins, four tiny inlaid plates of moss with handwritten Latin binomials, a corner where a fold-out map of the Rhine showing 1814 customs posts has been glued on top of a pistachio swatch — and yet the typographic spine running through it all stays disarmingly **conversational (6% in the registry — claimed)**, the way two old negotiators talk to each other in the garden after the cameras leave. The mood is *not solemn, not corporate, not heroic, not photographic.* It is **the mood of a slow walk through a botanical greenhouse with a person you used to disagree with, where the plants are louder than either of you and that turns out to be the point.** The reference family is unusual on purpose: the **Padua orto botanico in late September**, *Maria Sibylla Merian's Metamorphosis Insectorum Surinamensium* (1705), the *fold-out plates inside Humboldt's Personal Narrative*, the *back rooms of the Lindley Library* at the RHS, the **interior of Geoffrey Bawa's office in Colombo** with its open courtyards and pressed-leaf walls, the *Treaty of Westphalia broadside in the Münster archive*, and *Wendell Berry essays read aloud at dusk*. There is no sleek, no chrome, no glow. The page should *smell like a herbarium drawer* — old paper, dried sage, beeswax envelopes, a faint vegetal damp. Diplomacy here is the *patient cultivation of a garden across a fence*, and the visual language commits to that metaphor without irony, without quotation marks, and without the frosted-glass dashboards that have come to define every other treaty-related interface on the open web. The keyword across every surface is **uncrowded crowdedness** — every square centimetre is occupied by a leaf, a marginal note, an oxidised brass tack, a margin-running fern, a hand-stamped folio number — yet the eye is led, breath by breath, along a single conversational ribbon of text that never raises its voice. ## Layout Motifs and Structure The structural commitment is **editorial-flow (1% in the registry — the most underused layout pattern, claimed and held)**, not the conventional card-grid (80%) or full-bleed (92%) or asymmetric (53%) compositions that dominate the catalogue. The page is composed as **a single continuous gardener's journal**, an unbroken vertical column of varying width that meanders down the screen the way a footpath meanders through a planted bed — never straight, never gridded, never cropped to a card. The principal column lives at **a baseline of 612px wide on desktop**, but it *physically migrates* across the viewport as the reader scrolls: it begins flush-left at the top of page (margin 96px, column 612px, gutter 612px on the right where pressed-leaf marginalia accumulate), drifts gently rightward across the first 1800px of scroll until it sits flush-centre under a fern arch, then migrates further to flush-right (with marginalia now on the left) before returning to centre at the page's quiet conclusion. The migration is **not a parallax effect**, it is a CSS-grid composition where each section of the journal occupies a different column-track in a 12-column grid that runs the full document height. Vertical rhythm is set by a **golden-ratio interval (89px / 144px / 233px / 377px)** rather than a regular 8/16/24/32 baseline — sections breathe at unequal intervals the way plant beds in a real garden are spaced by what each species needs, not by a tape measure. The scroll choreography is **botanical, not cinematic**: as the reader descends, the surrounding marginalia (specimens, stamps, footnotes, hand-drawn diagrams of multilateral treaty structures rendered as plant-root systems) *do not animate in*; they are *already there*, drawn at full opacity, simply revealed by the reader's downward path. There is no hero. There is no "above the fold." The first paint shows the **top of the journal's first leaf** — a deckle-edged sheet of cream paper at column-width, headed `diplomacy.day — a quiet field manual`, with three living ferns trailing from the right margin and a hand-pressed *Asplenium scolopendrium* taped at 7° rotation in the upper-left bleed. The reader's first instinct is to lean in and read, not to click. There are **zero call-to-action buttons** in the conventional sense; navigation is provided by **eight hand-stamped folio tabs** running along the right edge of the document, each labelled in Cormorant italic with the section's Latin tag (`I. de fundamentis`, `II. de hortis`, `III. de pacto cotidiano`, `IV. de marginibus`, `V. de longanimitate`, `VI. de silentio`, `VII. de litteris`, `VIII. colophon`). The footer is not a footer — it is a **colophon plate**, a single illuminated capital letter `D` constructed from interlaced fern fronds, beneath which a short paragraph in 13px Cormorant italic explains the typography, the paper stock the site is imitating (Hahnemühle Bugra Bütten, 130gsm, deckle), and the herbarium that supplied the source pressed-leaf scans (a fictional but plausible *Hortus Diplomaticus, Münster*). The structural deviation that anchors the whole design is this: the page is **a single document, not a collection of sections**, and that singularity is the layout's primary statement. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Familjen Grotesk`** (variable: weight 400–700, italic) — the principal typeface, holding down the **sans-grotesk (3% in the registry — claimed and held)** typography mandate. Familjen Grotesk is Olivia King's 2021 humanist grotesque drawn for the Swedish public-service broadcaster's family identity; it is *warm, slightly rustic, conversational without being cute*, and reads exceptionally well at long-form body sizes. It carries every paragraph of the gardener's journal at **17px / 1.72 line-height / -0.005em tracking**, and every section heading at **34px / 1.18 / -0.012em / weight 540** (set as a variable axis, not a discrete weight). Familjen avoids the cool industrial neutrality of Inter and the sharp geometric perfection of Space Grotesk — it has **slightly canted terminals, an open `e`, a humanist `a` with a curling tail**, and reads, in long passages, like someone who has spent the morning in the garden and is now telling you what they thought about while they were there. - **`Cormorant Garamond`** (italic, weight 400 and 500) — the marginalia and Latin-tag voice. Cormorant is Christian Thalmann's 2015 revival of Claude Garamond's 16th-century roman, with the contrast and ductus of an actual herbarium label. It is reserved exclusively for *italic* setting, never roman, at **15px / 1.45 line-height / +0.012em tracking**. Every marginal annotation, every section's Latin tag, every footnote, every plant binomial, and the colophon plate is set in Cormorant italic. The pairing of Familjen Grotesk's body voice with Cormorant's italic margin voice produces the **conversational tone (6% in the registry — claimed)**: one voice that thinks out loud, another that murmurs the references in the gutter. - **`Caveat`** (weight 500) — used **only seven times across the entire document**, and only for hand-marginalia: a circled correction, a line struck through with a wavy underline beneath it, a question mark in a margin, a friendly arrow connecting one paragraph to a leaf-photo. Caveat is Pablo Impallari's 2018 casual handwritten — drawn from his own handwriting — and on this site it functions as **the diplomat's pencil**, the sound of a reader who has already been here and has left their notes for the next reader. **Palette — forest-green (5% in the registry — claimed), eight values, every hex confirmed:** - `#0E1A14` — *Yew Shadow*, the deepest reading text colour, used for body type instead of pure black. - `#1F3A2C` — *Hemlock Bough*, used for section headings and the column rule that runs down the journal's spine. - `#3B6A4F` — *Polypody Frond*, the principal accent; folio tabs, the inlaid moss-plate borders, the hand-stamped folio numbers, the underline of every internal link. - `#6B8F71` — *Lichen Sage*, secondary accent; the second voice in the marginalia, the colour of every Latin binomial in italic. - `#A8B89A` — *Bleached Grass*, used for the hairline rules between margin notes and for the dotted line of every pressed-leaf stem-trace. - `#D8DCC1` — *Pistachio Vellum*, the fern-arch wash that sits behind the migrating column at golden-ratio intervals. - `#F1EBD7` — *Hahnemühle Cream*, the page background, **never pure white**; this is the colour of 130gsm Bugra Bütten paper warmed by an afternoon lamp. - `#5C3A1E` — *Walnut Ink*, the singular warm accent; reserved for the deckle-edge shadow, the brass tack heads, and the four oxidised stamp-impressions ("RECEIVED — HORTUS DIPLOMATICUS — XII MAY") that punctuate the document. The palette commitment is to **forest-green as a habitat, not a hue**. Every green is mixed against the cream background to produce the optical sensation of *light filtering through leaf canopy at four in the afternoon*, which is the only kind of light this site is willing to be lit by. ## Imagery and Motifs The visual world is built from layered SVG, a small library of high-resolution scanned pressed-leaf PNGs (released into the public domain by US herbaria), CSS gradients, and a single tiny WebGL ripple shader at the page's middle plate — **zero stock photography (98% in the registry — its exclusion is the structural deviation)**, zero icon library, zero illustration. The imagery and motif catalogue commits to four registry-claimed families: **1. Bokeh-background (imagery: bokeh-background, 6% in the registry — claimed and held).** Behind the gardener's journal sits a **single full-document bokeh field**, generated as a 1600×9000px CSS-and-SVG composition: 240 soft circular discs in eight values of forest-green (the palette above), positioned by a low-discrepancy Halton sequence, blurred at varying radii from 8px to 96px, with the largest discs (radius 240px) sitting furthest back at 4% opacity and the smallest (radius 24px) brightest at 22% opacity. The bokeh field is **not a photograph** of a real bokeh — every disc is mathematically placed and CSS-blurred — but its optical effect is exactly **late-afternoon sunlight diffusing through a planted hedge**, the effect a 50mm lens at f/1.8 produces in a real garden. The field drifts at 12% scroll-velocity behind the journal column, so as the reader descends, the *light itself appears to wander* between the leaves. There are no stars, no glints, no bokeh of car headlights at night; this is botanical bokeh, photographed by no one. **2. Leaf-organic (motifs: leaf-organic, 5% in the registry — claimed).** The site is dressed in **pressed leaves** — sixty-two of them across the document, drawn from real herbarium specimens (sourced from the Smithsonian National Museum of Natural History's open-access botanical collections, all CC0). The leaves are positioned as *marginalia*, not as decoration: a *Quercus alba* taped at 7° in the upper-left of section I, a *Salvia officinalis* with its stem touching the column rule at the start of section III, a *Ginkgo biloba* fan opening into the right gutter beneath the section IV folio tab, a long curling *Pteridium aquilinum* frond running the full length of section V's right margin. Every pressed leaf has a **handwritten ID tag in Cormorant italic** — `Q. alba — Münster, May 1648` — which is a quiet historical joke (the date of the Treaty of Westphalia) that the design never explains. Some of the leaves are *physically interactive*: hovering them rotates them gently around their stem (max 3°, ease 800ms) and reveals their full Latin binomial in a small inlaid plate beneath. None of the leaves animate on entry. They are already pressed, already there, already centuries old. **3. Ripple (patterns: ripple, 15% in the registry — claimed and held but used in a botanical idiom).** At a single point in the document — the colophon plate where section VIII opens — there is a **square inlaid plate of dark water (160×160px)**, rendered as a tiny WebGL fragment shader (28 lines), into which a single golden leaf has just fallen. The ripple expands across the plate over 6.4 seconds in a slow concentric pattern, then a second leaf falls, then a third — the cycle never repeating exactly. The ripple is **the only kinetic element on the entire page**, and its meaning is *patience*: every diplomatic gesture is a small disturbance whose meaning is read in widening circles. Hovering anywhere over the plate slows the ripple to half-speed and casts a dimmer leaf-shadow into the shader; clicking the plate freezes a single ripple-frame in place for ten seconds, allowing the reader to *examine the disturbance*. The ripple is rendered against the *Yew Shadow* (#0E1A14) base, with the highlight of each ring picked out in *Polypody Frond* (#3B6A4F). It does not loop visibly. It is the slowest interactive element on any CMassC site to date. **4. The marginal apparatus.** Around the journal column, **twenty-eight footnote-stamps** in *Walnut Ink* (#5C3A1E) sit on the page like wax-seal impressions: each is a 64×64px SVG circle with the document's title and a section number around the rim, set in 9px Familjen Grotesk small-caps, struck at a 4° rotation with a slight ink-bleed gradient. There are **four full-page fold-outs** rendered as expanding marginalia: a 1814 customs-post map of the Rhine (section II), a root-system diagram of multilateral treaty structures (section IV), a hand-drawn timeline of the Westphalian peace negotiations as a vine (section V), and a tracing of *Ginkgo biloba* leaf-venation overlaid with a network diagram of mid-20th-century diplomatic cables (section VII). Each fold-out is a static SVG, drawn at 9.6kb each, and *unfolds* on click via a CSS transform — `rotateX(0deg)` from a starting `rotateX(86deg)` — over 1.8 seconds, eased with a custom `cubic-bezier(0.32, 0.72, 0, 1)` to mimic stiff paper. There are **no icons** anywhere on the site. Every visual element is either a leaf, a stamp, a margin-note, a hand-drawn diagram, or a piece of typography. ## Prompts for Implementation Build diplomacy.day as **one HTML document, one CSS file, one ES module of approximately 280 lines, one 28-line WebGL fragment shader, and one folder of 62 pressed-leaf PNGs at an average 18kb each.** The asset budget is: `leaves/` (62 PNGs, ~1.1MB total, all CC0 from Smithsonian and US herbaria sources), `bokeh.svg` (the static SVG layer of 240 discs, 14kb), `stamps.svg` (the 28 wax-impression stamps as a single sprite sheet, 22kb), `foldouts/` (4 SVG fold-out plates at 9-12kb each, 42kb total), `paper.png` (a 512×512 tiling Bugra Bütten paper texture at 8% opacity, 6kb), `noise.png` (a 256×256 fine grain at 3% opacity, 4kb). No analytics, no third-party widgets, no fonts beyond the three Google Fonts. Implementation prompts, in priority order: - **The page is a single document, not a series of sections.** The HTML should be one `
` element that runs the full vertical length, with `
` children only used to switch CSS-grid column tracks. There is no `
`, `