# Design Language for diplomatic.wiki ## Aesthetics and Tone diplomatic.wiki is **a candlelit reading room at the Hague, kept by a friendly archivist who is patient with strangers and serious about footnotes.** Imagine a small, square chamber on the second floor of a 1908 customs-house: walls papered in cream silk faded to oat, three tall French windows facing a courtyard nobody crosses, and a single oak refectory table on which the archivist has laid out — at exactly the same hours, every evening of the year — a beeswax candle, a stack of cream-laid index cards, a fountain pen, and a heavy leather wiki-binder rebound seven times since 1947. The binder is the wiki. Each entry is hand-stitched in. Visitors arrive, are greeted warmly, and are asked only to whisper. The aesthetic is **ethereal (4% in the registry — claimed for its rarity, not its haze)**, but ethereal in a particular dialect: not the cool blue cloud-cover of `ethereal-blue` saas pages, not the holographic shimmer of fairy-aesthetic portfolios, and not the dreamy washed-pastel of cottagecore blogs. This is **ethereal in the Catholic-archival sense** — the air of a chapel just after vespers, when the light from a single candle drifts visibly through cold air, when motes of dust catch flame for a breath, when the hush of stone and wax and old paper is itself a kind of glow. Ethereality here is *atmospheric*, not *graphical*: it lives in halation, in soft-edge type that seems to be read by candle, in the slow upward drift of warm air, in the ten-second pause between sentences that the archivist allows before turning a page. The chosen tone is **friendly (14% in the registry — claimed deliberately to soften an aesthetic that risks museum-froideur)**. Diplomatic encyclopedias on the public web tend toward two failure modes: the cold institutional grey of a UN secretariat micro-site, or the bombastic geopolitical seriousness of a think-tank scrollytelling piece. diplomatic.wiki refuses both. The voice on every page is that of **the archivist who actually likes you** — who pulls a chair out, lights a second candle when you sit down, and says *"oh, this entry — you'll want to start with the footnotes, the footnotes are the good part."* Copy is in the second person, lowercase, comma-spliced, and unhurried. Tooltips read like marginalia in a friend's handwriting. The 404 page apologizes that the binder is being rebound and offers tea. There is, somewhere on the site, a working brass bell. The mood lives in the registry-rare overlap of `ethereal × candle-atmospheric × burgundy-cream × friendly`. Burgundy-cream (1% in the registry — the rarest palette claimed in this design) keeps the chamber from floating into pastel washiness; the deep wine of binder-leather and sealing wax anchors the cream and gives the candleflame something to redden against. Candle-atmospheric (6%) is not a prop — it is the **physical light model** of the entire site, governing every shadow, every halo, every hover-warm, and every animation curve. The single inviolable rule: **diplomatic.wiki is not a dashboard, not a SaaS, not a hot-take aggregator, and not a knowledge-graph viz.** It is an encyclopedia that knows it is small, knows it is slow, knows it is written by hand, and trusts that this is exactly why a reader chose it. ## Layout Motifs and Structure The structural commitment is **ma-negative-space (6% in the registry — claimed and defended against the 92% full-bleed convention and the 80% card-grid reflex)**. *Ma* (間) is the Japanese-architectural concept of **the interval that holds meaning** — the silence between notes, the gap between stones in a temple garden, the four-meter polished floor between a tea-room door and the alcove. This site is built around four such intervals, and the content lives at their edges. **The page is a single grid of four chambers, each about one viewport tall, separated by deliberately empty cream rooms.** ``` ┌─────────────────────────────────────────────────────────┐ │ . chamber I — the entrance hall . │ │ (candle, wordmark, bell) │ │ . roughly 30% content, 70% ma . │ ├─────────────────────────────────────────────────────────┤ │ │ │ . ma. an empty cream room, 38vh, only . │ │ the slow drift of warm air upward │ │ │ ├─────────────────────────────────────────────────────────┤ │ . chamber II — the index of articles . │ │ (staggered cards, six visible) │ │ . content occupies the right two-thirds . │ ├─────────────────────────────────────────────────────────┤ │ │ │ . ma. the second cream room, 32vh, wider . │ │ on desktop, holds a single floating footnote │ │ │ ├─────────────────────────────────────────────────────────┤ │ . chamber III — the featured entry . │ │ (collage spread, asymmetric, ~70/30) │ │ . . │ ├─────────────────────────────────────────────────────────┤ │ │ │ . ma. the third cream room, 44vh, widest . │ │ holds the single brass bell SVG │ │ │ ├─────────────────────────────────────────────────────────┤ │ . chamber IV — the colophon . │ │ (signed, dated, candle nearly out) │ └─────────────────────────────────────────────────────────┘ ``` **Quantitative discipline.** No chamber occupies more than 62% of its allotted viewport. The minimum vertical *ma* between chambers is 32vh on mobile, 38vh on tablet, 44vh on desktop. Horizontal margins are extreme by 2026 web conventions: the readable column on desktop never exceeds 540px, leaving ≥ 38% of horizontal viewport as cream margin on each side. The wordmark sits at the **2:3 golden vertical** of the entrance hall, never centered. The featured-entry chamber is the only one that breaks symmetry. **Stagger as the entrance choreography (patterns: stagger, 75% — claimed not for novelty but for governance).** Stagger is the most-used animation pattern in the registry, but it is almost always misused as decorative cascade. Here, stagger is **the candle-lighting sequence**: when a chamber enters the viewport, its elements illuminate one by one in 110ms steps, in the order an archivist would actually light them — first the candle wick, then the binder cover, then the index card, then the pen, then the bell, then the cream-margin halation. The stagger curve is `cubic-bezier(.25, .85, .35, 1.0)` — a slow-attack ease used nowhere else, designed to mimic the half-second hesitation of a flame catching tallow. Stagger never runs in parallel with another major animation. The only acceptable companion to stagger here is **the slow upward drift of warm air**, which is constant-velocity and never staggered. **Navigation discipline.** There is **no top nav bar** on the entrance hall. There is no hamburger. There is no sticky utility. The only navigation surface is **the binder spine** — a 64px vertical cream-and-burgundy band on the right edge of the viewport, present from chamber II onward, on which the four chambers' titles are printed sideways in 11px small caps. Clicking a title scrolls the page with `scroll-behavior: smooth` and a 1400ms ease, slow enough that you can finish a sentence on the way. On article pages, the binder spine gains a fifth glyph: a brass-color tab indicating where in the binder you are. **Asymmetric, but only once.** Chamber III (the featured entry) is the only chamber permitted to violate the 540px column. It runs as a collaged 70/30 split: 70% prose on the left, 30% collage-strip on the right, with the collage extending **into the cream margin**, breaking the chamber's right edge by about 8% of viewport width. This single break is the layout's exhalation. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **`Yeseva One`** (display, 400 weight) — the principal display face. Yeseva One is Jovanny Lemonad's 2011 high-contrast, high-stress retro display revival, drawn from early-20th-century Russian wood-type signage and Bertholdy-Antiqua. Its letterforms — the dramatic `Q` tail, the swooping `g` ear, the long-shanked `a` — read as *signage from a 1908 customs house*. It serves the registry's **retro-display (5% — claimed)** typography mandate and replaces the predictable `Playfair Display` reflex. Used only at chamber-title size (clamp(48px, 7vw, 96px)), wordmark size (clamp(64px, 10vw, 144px)), and never in body. - **`EB Garamond`** (variable serif, 400/500/italic) — body. EB Garamond is Georg Duffner's 2011 open-source revival of Robert Granjon's 1592 cuts. It is the only typeface in this design that has **actually been used in diplomatic correspondence** — the Garamond family is the working face of the French Foreign Ministry and the Vatican Secretariat. Body copy runs at 18px / 1.65 line-height / max-width 540px on desktop, hand-tracked at +12 units to compensate for screen rendering of an old face. - **`IBM Plex Mono`** (monospace, 400/500) — used **only** for footnote numerals, citation tags, dates in the colophon, and the text on the binder-spine. Plex Mono provides the registry's **mono (96%)** baseline without committing the design to a tech-coded mood. The display/body pairing of **Yeseva One + EB Garamond** is — according to a sweep of the 160 prior designs — **unused**, and is the deliberate signature of this site. **Palette — `burgundy-cream` (1% in the registry — the rarest palette in this design and the second-rarest in the entire CMassC corpus):** Seven hand-mixed values, each named for the object it draws from: - `--cream-page` `#F4ECDB` — the silk-papered wall at midday. The dominant background; covers ≥ 78% of every viewport. - `--cream-vellum` `#EAE0C9` — slightly aged cream; the chamber-card ground, the binder-spine field. - `--burgundy-leather` `#5A1B26` — the rebound cover of the wiki binder; the deepest tone, used only for chamber titles, the wordmark, and the binder spine. - `--burgundy-wax` `#7B2A33` — sealing wax just cooled; used for the candleflame's red-shifted halo, hover-states, link underlines. - `--burgundy-blossom` `#A04A4F` — wine through a thin glass; used only for the friendly tooltips and the marginalia ink. - `--candle-flame` `#E8B96A` — the warm yellow at the heart of a flame; the only saturated highlight on the site, reserved for the live candle SVG and the brass bell. - `--ink-archive` `#2C1F1A` — the body-text ink, a near-black with deep brown undertone, never `#000`. Color discipline: no element on the site uses more than three of these seven values at once. Pure white is forbidden. Pure black is forbidden. All shadows are warm (burgundy-tinged), never neutral. All borders are `--cream-vellum` on `--cream-page`, never grey. ## Imagery and Motifs The imagery program is **collage (6% in the registry — claimed) over candle-atmospheric (6% in the registry — claimed)**, with **zero stock photography (98% — its exclusion is the structural deviation)**, zero AI-generated images, zero icon library, and zero data-viz. Every visual element on the site is hand-composed from one of four families. **1. The Candle (motifs: candle-atmospheric, 6% — claimed as the site's literal light source).** A single SVG candle — beeswax body, wick, halo — sits at the 2:3 vertical of the entrance hall. It is **not decorative**. It is the **physical light model** governing every shadow on every chamber. The flame is a 7-frame hand-keyed SVG animation (`flicker.svg`, 14kb) running at 6fps with deliberate jitter. The halo is a radial gradient from `--candle-flame` 12% → `--burgundy-wax` 6% → transparent, rendered through a CSS `filter: blur(38px)` to produce visible halation on the surrounding cream. As the user scrolls, the candle **shrinks** in proportion to scroll-progress (it is burning down); by chamber IV the candle is a stub and the flame is half-height. This is the site's central motion conceit, and it runs the entire scroll. The candle's halo also drives **every hover state**: a hovered card warms by adopting a 6%-strength radial gradient from `--candle-flame`, indistinguishable from "the candle is closer." There is no blue, no shadow-blur, no transform-scale on hover. Only warm light. **2. The Collage Spread (imagery: collage, 6% — claimed).** Chamber III's featured-entry strip is a **physical paper collage** rendered in CSS and SVG. The collage stratum is composed, top-down: - a **postage-stamp scrap** (rotated -3°, edges torn in SVG, 110×80px, content hand-drawn) - a **string of waxed thread** (a single SVG path with `stroke-dasharray`, slowly drawing in over 1800ms when the chamber enters viewport) - a **typewritten index card** (cream-vellum, EB Garamond italic, slight skew) - a **candle-drip seal** in `--burgundy-wax` (an SVG path with imperfect organic edges) - a **fragment of an old map** (hand-drawn coastline in `--ink-archive`, no labels) The collage layers are stacked with deliberately imperfect z-overlap. Each layer has a 0.5px-1px hand-drawn edge irregularity (achieved with SVG `feTurbulence` displacement at very low strength). A noise overlay at 4% opacity unifies the strata. The collage is **never the same twice** — a small JS module (`collage.js`, 3kb) shuffles the rotation angles by ±2° on each load, so a returning visitor sees a slightly different arrangement, as if the archivist had laid the cards out fresh. **3. The Marginalia.** Throughout body copy, **handwritten marginalia in `--burgundy-blossom`** appear in the right margin of the readable column. They are SVG paths — actual hand-drawn ink, not a script font — with realistic pen-pressure variation. They are revealed with `path-draw-svg (26% — claimed)` over 1200ms when the corresponding paragraph enters the viewport, in 110ms stagger after the paragraph itself fades. Each marginalia is a single short note: *"see also: Westphalia"*, *"this is the friendly part"*, *"footnote 4 disagrees"*, *"the archivist's favorite entry"*. There are seventeen marginalia on the front page. They are the **friendly tone** rendered as drawing. **4. The Brass Bell.** A single brass-color SVG bell, 64×64px, rests in the third *ma* room. It is the only saturated `--candle-flame` element below the entrance hall. On hover it emits a 240ms `tilt-3d (24% — claimed)` of ±4° on the X-axis, with a faint 6Hz audio chime synthesized via the Web Audio API (a single sine wave at 880Hz with a 1200ms exponential decay envelope, peak gain 0.04 — quieter than typing). Pressing the bell **does nothing else.** It is a small, friendly courtesy: "yes, you may ring this, the archivist will hear you." Texture: a single tiling 256×256 PNG (`paper-grain.png`, 6kb) at 5% opacity overlays the entire site, providing the cream-laid paper texture that no CSS gradient can fake. There is no other raster image on the site. ## Prompts for Implementation Build diplomatic.wiki as **one HTML document, one CSS file, one ES module, one tiny SVG candle, one paper-grain PNG, and zero photographs.** Total uncompressed asset budget: ≤ 220kb across all files. Total network requests ≤ 14 including Google Fonts. No analytics. No third-party widgets. No framework. The site is a single hand-bound binder; treat it like one. **Storytelling spine.** The first paint is the entrance hall: cream silk wall, the burgundy wordmark "diplomatic.wiki" set in Yeseva One at the 2:3 golden, a single lit candle at the lower-left of the wordmark, a brass bell out of focus in the right margin, and the friendly invitation in EB Garamond italic just below the wordmark — *"good evening. the binder is open. take a chair."* The candle's halation is visible against the cream wall. Nothing else is on screen. There is no scroll prompt. The user scrolls when they are ready. The scroll itself is the narrative. **As the user scrolls, the candle burns down**, and the chambers reveal themselves one at a time, separated by long cream *ma* rooms in which nothing happens except the slow upward drift of warm air. The drift is a single CSS `@keyframes` animation on a 1×100% gradient overlay running at 28-second linear loop, providing the only persistent motion outside hover/scroll triggers. The chambers stagger-light themselves on enter (see Layout). Each *ma* room is a **deliberate pause** — give the reader time to forget the previous chamber before the next one is lit. **Article pages.** The binder is what you read. Every article page is structured identically: a chamber-style title in Yeseva One, a single body column at 540px max in EB Garamond, marginalia in `--burgundy-blossom`, footnotes in IBM Plex Mono at the bottom of the screen as a **slim cream-vellum strip**. The article has its own candle. The binder spine on the right shows you which entry you are in. There is a "previous entry / next entry" pair at the colophon, set in small caps, friendly: *"if you liked this, the archivist suggests…"*. **Animation discipline.** Every animation on the site is governed by the candle's light model and the friendly archivist's pace. The full menu is short: - `staggered-light` (chamber entrance, 110ms steps, candle-curve cubic-bezier). - `path-draw-svg` (marginalia, waxed-thread, candle-drip seal). - `warm-glow-hover` (any interactive element, 240ms ease-out, no transform). - `candle-burn` (scroll-linked, single transform on the candle SVG, the only scroll-driven animation). - `air-drift` (28-second background loop, never reset). - `bell-tilt` (only on the bell, 240ms, ±4° X-rotate, with audio chime). - `flicker` (SVG candleflame, 6fps, 7-frame loop, runs constantly). **Forbidden forms.** No CTA buttons. No pricing tables. No stat-grid. No testimonial carousels. No newsletter signup popups. No cookie banners (the site sets no cookies). No sticky utility nav. No hero "Get Started." No trust-badge logo strip. No blue. No grey shadows. No Helvetica. No `cursor-follow` (81% in the registry — explicitly avoided as fashionable noise that would betray the friendly-archivist tone). No `magnetic` (72% — same reason: a magnet is not friendly, it is grabby). No `glassmorphism` (68% — wrong material entirely). **Permitted moments.** A single brass bell that chimes when rung. A friendly 404 page that reads *"the binder is being rebound. would you like to wait?"* and offers a cup of tea (the cup is a small SVG, the tea steams via path-draw-svg). A colophon that names the archivist (a fictional one — *"M. Ardent, archivist, est. 1947"*). A keyboard shortcut: pressing `b` rings the bell. **Performance is not the goal — atmosphere is.** Do not optimize the candle flicker out of existence. Do not preload all chambers at once and break the staggered-light. Do not collapse the *ma* rooms on mobile. Do not turn the marginalia off below 768px — instead, tuck them under their paragraphs as a `
` block titled *"in the margin."* The site must feel hand-bound on a phone, on a tablet, and on a 27-inch display alike. **Bias toward full-screen narrative experiences.** Every chamber is one viewport. Every *ma* is at least 32vh. The user's whole screen is, at any given moment, either *content* or *silence* — never a mix of both. This is the structural commitment of `ma-negative-space` and it is not negotiable. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the registry's underused patterns: 1. **Ethereal as candle-atmospheric, not as fairycore or cloud-saas.** The 4% of CMassC sites that have used the ethereal aesthetic reach for one of two clichés: the cool blue holographic-mist of `ethereal-blue` portfolios, or the pastel-fairy soft-bloom of fairycore blogs. diplomatic.wiki refuses both. Ethereality here is **the air of a chapel just after vespers** — warm, slightly smoky, candlelit, and quiet enough that you whisper. The mood depends on `--burgundy-leather` and `--candle-flame`, not on blue or pastel. 2. **Burgundy-cream as the rarest palette in the corpus.** Burgundy-cream is registered at **1%** — the lowest palette occupancy in the registry alongside `gold-black-luxury`. It is claimed here precisely because it grounds an ethereal aesthetic in a way no other palette can. The seven hand-named values (`cream-page`, `cream-vellum`, `burgundy-leather`, `burgundy-wax`, `burgundy-blossom`, `candle-flame`, `ink-archive`) are object-named rather than role-named, anchoring every color decision to a physical referent in the chamber. 3. **Ma-negative-space as actual silence between chambers.** Most sites that claim ma-negative-space (6%) merely add slightly more padding. diplomatic.wiki **structurally encodes silence**: four chambers separated by three cream *ma* rooms of 32–44vh, each holding at most one element (a footnote, a bell, nothing). The ma rooms are not "between" the content — they are content. The user spends a measurable percentage of their scroll time in deliberate emptiness. 4. **Candle as physical light model, not as decoration.** The single SVG candle is the **scroll-linked physics** of the entire site: it burns down as the user scrolls, its halo drives every hover state, and its flame's warm-yellow is the only saturated color permitted on the page. No other CMassC site to date uses a single motif as a literal light source governing global rendering decisions. 5. **Yeseva One + EB Garamond as an unused pairing.** The display+body pairing of Yeseva One (retro-display, 5%) with EB Garamond (a Garamond revival, 1% via `garamond-classic`) does not appear in any of the 160 prior designs surveyed. EB Garamond is also the only typeface in this design that has been used in actual diplomatic correspondence (French Foreign Ministry, Vatican Secretariat) — a quiet semantic alignment that no surface-level visual pairing would notice. 6. **Friendly tone as the inverted register of "diplomatic."** Diplomatic encyclopedias on the public web default to either UN-secretariat institutional grey or think-tank geopolitical bombast. diplomatic.wiki claims **friendly (14%)** as a deliberate inversion — the voice is the second-person archivist who likes you, who lights a second candle, who recommends footnotes. The 404 apologizes and offers tea. There is a working brass bell that does nothing useful and is therefore, structurally, the friendliest thing on the site. 7. **Collage as physical paper, not as Photoshop pastiche.** Collage at 6% in the registry is usually invoked as a maximalist Photoshop layer-stack. Here, collage is one **single asymmetric chamber strip**, hand-composed from five paper artifacts (postage scrap, waxed thread, typewritten card, candle-drip seal, map fragment), each rendered in SVG with sub-pixel hand-drawn-edge irregularity, shuffled by ±2° rotation per page-load so a returning visitor sees the cards laid fresh. Collage is treated as **the archivist's evening preparation**, not as a graphic effect. 8. **Avoiding the 2026 reflexes.** The most-used registry patterns — `cursor-follow` (81%), `magnetic` (72%), `glassmorphism` (68%) — are all **explicitly rejected** by name in the implementation prompts. None of them is friendly, and all of them would betray the candle's atmosphere. The site's permitted animation menu has seven entries, all governed by the candle's light model and the archivist's pace. 9. **A small piece of working hospitality.** The brass bell — 64×64px SVG, hover-tilt of ±4°, 880Hz sine chime at 0.04 gain, keyboard shortcut `b` — does nothing useful. It is a friendly courtesy. No CMassC site to date has shipped an audio element whose entire purpose is "the archivist will hear you." It is the design's small, deliberate gift. **Chosen seed (as planned):** `aesthetic: ethereal, layout: ma-negative-space, typography: retro-display, palette: burgundy-cream, patterns: stagger, imagery: collage, motifs: candle-atmospheric, tone: friendly`. **Avoided patterns from frequency analysis:** `hand-drawn` (96%), `glassmorphism` (68%), `photography` (98%), `full-bleed` (92%), `card-grid` (80%), `centered` (80%), `mono` as principal face (96%), `cursor-follow` (81%), `magnetic` (72%), `parallax` (95%), `gradient` (97%), `warm` as a generic palette (96%) — warmth here is specifically **candle-warm**, anchored to `--candle-flame` and `--burgundy-wax`, not to a generic gradient.