# Design Language for diplomatic.wiki ## Aesthetics and Tone **Design Thesis: The Spectral Dispatch** diplomatic.wiki is built on one formal premise: every act of diplomacy leaves a document, and every document is a transmission that changes color depending on who holds the light. The site reads as a reference archive seen through a spectral filter — text that appears to be black-on-white until the aurora overhead bends the wavelength and reveals a second layer of ink beneath. This is not decoration; it is the visual argument that diplomacy is always two things at once — the public record and the private channel. The tone is **chancellery-luxurious**: the weight and gravitas of a foreign ministry building in Helsinki or Oslo, where marble floors and high ceilings exist not for ostentation but for acoustic and moral authority. The atmosphere is cold northern light, not Mediterranean warmth. The surfaces are lacquered paper, not stone — surfaces that hold print precisely, that catch spectral iridescence only at oblique angles. The holographic quality is achieved structurally: a `#090d1a`-to-`#0e1528` depth field as the ground, with a duotone overlay cycling between `#1b6ca8` (deep diplomatic blue) and `#c8a96e` (aged-vellum gold). The aurora motif enters as a refraction strip — a horizontal band of slow-shifting spectral light (`#6ab4f5` → `#a78bfa` → `#f0abfc` → `#86efac`) that bleeds through the page at a fixed vertical position, staining the content it touches the way sunlight through a window stains a treaty table. This strip is not a hero gradient; it is a physical interference phenomenon embedded in the document itself. The result feels nothing like a dashboard, a marketing site, or a wiki template. It feels like a dispatched document from a chancellery that moonlights as a museum of light. ## Layout Motifs and Structure The page is composed as **stacked dispatch leaves** — a vertical sequence of full-width sections, each one a single dispatch leaf with a fixed left margin indent of `6.4vw` for body text, a bold section-number stamp in the top-left corner (`01`, `02`, `03`…), and a hairline border-bottom of `1px solid rgba(200, 169, 110, 0.25)` separating each leaf. **Stagger logic — interval-based, not random:** The stagger pattern is not applied as random offset decoration. Each leaf's body-text column alternates position on a strict two-step interval: odd leaves anchor the text block to the left two-thirds of the viewport; even leaves push it to the right two-thirds, leaving the opposite gutter as white (dark) space weighted by a large off-margin section numeral. The mass of the numeral balances the body column through visual-weight opposition rather than tilt. No element is rotated or skewed. **Structural layers (top to bottom):** 1. **Masthead Leaf (`100svh`).** A single full-height leaf with the wordmark `diplomatic.wiki` set in the display face at `14vw`, left-aligned, sitting at 38% from top. Behind it, the aurora refraction strip pulses once per 8 s at exactly `55vh` — a horizontal band `3px` tall, blurred `40px` outward, cycling the spectral sequence. The masthead contains only the wordmark, a sub-line in small-caps (`THE OPEN RECORD OF DIPLOMATIC PRACTICE`), and a scroll-cue glyph. 2. **Index Leaf.** A full-width two-column table: left column is a `400px` fixed-width dispatch-number column; right column is the article-category label in variable font optical size `20`. This leaf uses the left-anchored stagger position. No cards, no bento grid — a clean ledger. 3. **Featured Article Leaves (alternating).** Each featured article occupies one leaf. Odd leaves: text left, aurora-lit blob SVG right (never a photograph — always a procedurally-generated interference glyph, an organic rounded polygon in monochromatic `#1b6ca8` at `12% opacity`). Even leaves: text right, numeral-stamp left. The blob is not background decoration — it is the section's visual anchor, a seal or sigil shape that is unique per article category. 4. **Aurora Strip (fixed position).** At `55vh` from top of viewport, a `position: fixed` spectral strip persists across all scrolling. It has `pointer-events: none` and `mix-blend-mode: screen`, which causes the text it overlaps to pick up the aurora tint without masking it. As the visitor scrolls, different leaves pass through the aurora strip — each one briefly stained with spectral color before returning to the duotone ground. This is the holographic effect: the same content reads differently depending on where it sits in the scroll. 5. **Deep Archive Leaf.** A dark-field leaf (`#060912` ground) presenting a dense grid of article stubs — text only, no blobs, ultra-small type at `10px`, packed into a 5-column justified grid that echoes a printed index. The duotone shift here goes cold: `#1b6ca8` becomes the primary ink, `#c8a96e` is suppressed to `8%` opacity for secondary labels. 6. **Foot Leaf.** Left-anchored colophon, dispatch number `00`, the domain wordmark repeated at `6vw`, and a single line of metadata (`OPEN WIKI · EST. MMXXIV · SPECTRAL DISPATCH`). **Rhythm:** Each leaf has a minimum height of `100svh`. Scroll-triggered entrance: leaves slide up `32px` and fade from `opacity: 0.2` to `opacity: 1` over `0.6s ease-out`. This is the only animation besides the aurora strip and the blob interference glyphs. ## Typography and Palette **Typography — expressive-variable, all Google Fonts.** The font system has three roles and two families, both variable. - **Display / Numerals:** [Fraunces](https://fonts.google.com/specimen/Fraunces) — a variable optical-size, weight, and "wonk" axis serif. Used for section numerals (`01`–`06`) at `18vw`, for the wordmark at `14vw`, and for pull-quote leads. Axis settings: `opsz 144, wght 700, WONK 1`. At this size the "wonk" axis introduces subtle inktrapped character that references letterpress printing without mimicking it literally. Color: `#c8a96e`. - **Body / Index:** [Instrument Serif](https://fonts.google.com/specimen/Instrument+Serif) — a fine-cut serif for all body text, labels, and the index table. Regular weight, set at `17px` / `1.65` line-height, tracked at `0.01em`. Used at `optical-size: 14` for running text, `optical-size: 18` for standalone category labels. Color: `#dde3ee`. - **Utility / Metadata:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — fixed-width for dispatch stamps, coordinates, dates, section sub-labels, and the aurora-strip legend. Set at `10px` / `1.4`. Color: `#6ab4f5` (the aurora's cold-blue anchor tone). **Palette — duotone, spectral-anchored:** | Role | Hex | Name | |---|---|---| | Ground deep | `#060912` | Vault black | | Ground mid | `#090d1a` | Dispatch ground | | Ground lift | `#0e1528` | Leaf surface | | Primary ink | `#dde3ee` | Dispatch paper | | Accent ink | `#c8a96e` | Vellum gold | | Diplomatic blue | `#1b6ca8` | Chancery blue | | Aurora cold | `#6ab4f5` | Refraction blue | | Aurora mid | `#a78bfa` | Spectral violet | | Aurora warm | `#f0abfc` | Interference rose | | Aurora green | `#86efac` | Boreal green | | Blob silhouette | `#1b6ca8` at 12% | Seal ghost | The duotone is strict: every design element uses only `#1b6ca8` and `#c8a96e` as the two color channels. The aurora is the only element that breaks the duotone — it is explicitly framed as an external physical phenomenon (light through the chancellery window) rather than a design color. ## Imagery and Motifs **No photographs.** The site's visual lexicon is entirely constructed from two sources: typographic mass and organic interference glyphs. **Organic-blob seals:** Each article category has an associated SVG blob — a closed organic polygon with 8–12 bezier control points, generated to look like a wax seal that has been pressed imprecisely. The blob is always monochromatic (`#1b6ca8`), filled at `12% opacity`, with a `1px` border in `#1b6ca8` at `60% opacity`. The blob's shape is unique to each category (Foreign Policy, Treaties, Mediation, Protocol, etc.) and functions as that category's sigil. It is sized at `380px × 380px` maximum, always placed in the gutter opposite the text block, never overlapping text. On hover, it slow-fills to `22% opacity` over `0.4s`. **Aurora refraction strip:** The aurora is implemented as a CSS `linear-gradient` cycling through `#6ab4f5`, `#a78bfa`, `#f0abfc`, `#86efac` with a `background-size: 400% 100%` animated via `@keyframes aurora-shift` at `8s linear infinite`. The strip is `3px` tall, blurred via `filter: blur(40px)` to produce a soft horizontal halo `~80px` tall visually. `mix-blend-mode: screen` causes it to tint overlapping text without obscuring it. **Dispatch numerals:** The large section numbers (`01`–`06`) in Fraunces at `18vw` are the primary decorative mass. They sit `40px` outside the text-block boundary, bleeding into the gutter, at `opacity: 0.18`. They are the counterweight that makes the stagger-based layout feel balanced rather than off-kilter. **Interference pattern background:** At `opacity: 0.04`, a repeating SVG pattern of overlapping thin rings (like a dropped stone in water, or like a radio interference diagram) tiles behind every leaf. This pattern is the visual encoding of the diplomatic concept that every dispatch creates ripples. It is never prominent — only visible when the eye relaxes from the text. **No icons, no illustrations, no photographs, no stock images.** Everything visual is either a glyph, a numeral, a blob, or a spectral strip. ## Prompts for Implementation Build diplomatic.wiki as a **single-scroll vertical archive** — a reference site that reads like a living dispatch book. There is no hero CTA, no pricing, no testimonials, no stats grid. Every implementation decision should reinforce the dispatch-leaf metaphor. **Macro structure (top to bottom, 6 leaves):** 1. **Masthead (`100svh`):** `#090d1a` ground. Fraunces wordmark `diplomatic.wiki` at `14vw`, left-aligned at `8vw` from left edge, positioned at `38vh`. Sub-label in Space Mono `10px` small-caps. Aurora strip pulses once at `55vh`. Scroll-cue: a single downward chevron in Space Mono `→` rotated 90°, no label. 2. **Index (`min 100svh`, left-anchored stagger):** Dispatch number `01`. A two-column ledger: left column `380px` fixed, dispatch numerals for each category in Fraunces `32px`; right column category labels in Instrument Serif `20px` optical-size 18. Row height `56px`, `1px` separator at `#c8a96e` 15% opacity. Category blob seals appear at right edge of viewport, partially cropped, at `opacity: 0.06` resting. 3. **Featured Article A (`min 100svh`, left-anchored stagger):** Dispatch number `02`. Text block in left two-thirds. Blob seal in right gutter, `380px`. Article title in Fraunces `opsz 72`, body in Instrument Serif `17px`. A single pull-quote rendered in Fraunces italic at `3.2vw` spans the full text-block width before the body copy. 4. **Featured Article B (`min 100svh`, right-anchored stagger):** Dispatch number `03`. Text block in right two-thirds. Dispatch numeral `03` in left gutter at `18vw opacity: 0.18`. Blob seal in left gutter, behind numeral, `opacity: 0.10`. 5. **Deep Archive (`min 100svh`, dark-field `#060912`):** Dispatch number `04`. A 5-column justified grid of article stub lines: title in Instrument Serif `10px`, category code in Space Mono `8px`. No blobs. No images. `#1b6ca8` as primary ink. Aurora strip still passes through at `55vh`, tinting whichever stubs it touches cold blue. 6. **Foot (`min 40svh`, left-anchored):** Dispatch number `00`. Wordmark at `6vw`. Colophon line in Space Mono: `OPEN WIKI · EST. MMXXIV · SPECTRAL DISPATCH`. No nav links, no social icons. Single hairline border-top in `#c8a96e` at `25%`. **Animation protocol:** - Scroll entrance: `translateY(32px) → translateY(0)`, `opacity: 0.2 → 1.0`, `0.6s ease-out`, triggered once per leaf via `IntersectionObserver` at `threshold: 0.15`. - Aurora strip: CSS keyframe `background-position` animation, `8s linear infinite`. - Blob hover: `opacity` transition only, `0.4s ease`. - No parallax. No scroll-jacking. No JS-powered scroll velocity effects. **Explicit prohibitions:** Do not implement hero CTAs, feature cards, testimonials, newsletter modals, sticky navigation, dropdown menus, pricing tables, stat counters, search bars visible by default, social proof rails, or masonry grids. Do not use gradients as backgrounds on individual text blocks — the only gradient is the aurora strip and the ground depth field. Do not rotate or tilt any element. Do not use box-shadows on cards — there are no cards; use leaf separators only. ## Uniqueness Notes **Seed:** `aesthetic: holographic, layout: stacked-sections, typography: expressive-variable, palette: duotone, patterns: stagger, imagery: organic-blobs, motifs: aurora-lights, tone: luxurious` 1. **Stagger as interval discipline, not randomness.** The frequency report shows `stagger` at 68% — the most overused pattern in the registry. diplomatic.wiki transforms it: stagger here is a strict two-position alternation (left-two-thirds / right-two-thirds) driven by a visual-weight logic — the off-side gutter is always occupied by a massive numeral as counterweight. This is not "cards offset slightly" or "elements staggered on scroll." It is a compositional system borrowed from typographic spread layout in scholarly monographs, where recto and verso pages carry different mass distributions. No other design in the registry applies stagger as a bilateral weight-balancing system with explicit counterweight elements. 2. **Aurora as a fixed spectral stain, not a background gradient.** The frequency report shows `aurora-lights` at 3% and `aurora-gradient` at 4%. Every prior use treats aurora as a background color effect. diplomatic.wiki places it as a `position: fixed` horizontal strip with `mix-blend-mode: screen` — a physical phenomenon moving through an otherwise static document. The aurora does not set the mood; it interrupts and temporarily transforms any content that scrolls into it. This structural role — aurora as a moving filter over static content — has no precedent in the registry. 3. **Holographic through interference logic, not iridescent surfaces.** `holographic` appears at 7% in the registry, always interpreted as shimmer, iridescence, or chrome gradients on surfaces. diplomatic.wiki achieves holography through layered content logic: the same text reads differently under duotone-only light versus aurora-stained light. The page literally changes color in real time as you scroll, without any surface effect. The holographic quality is behavioral, not decorative. 4. **Organic-blob seals as categorization glyphs, not background decoration.** `organic-blobs` appears at 4%, always used as abstract background shapes. Here each blob is a unique sigil tied to a specific article category — a functional glyph system. The blob has a one-to-one semantic relationship with its category (Foreign Policy, Treaties, Mediation, Protocol), making it closer to a heraldic device than a background element. 5. **Dispatch-leaf structure with explicit architectural numerals.** The use of `18vw` section numerals as gutter counterweights is a compositional technique absent from the registry. It produces genuine asymmetry through visual mass and scale contrast without tilting, rotating, or overlapping primary content. The numerals are simultaneously a navigation system (counting the leaves), a typographic monument, and the primary decorative element — three functions, one element.