# Design Language for diplomatic.wiki ## Aesthetics and Tone diplomatic.wiki inhabits the visual atmosphere of a private diplomatic library in a European foreign ministry -- the kind of room where leather-bound treaty volumes line walnut shelves from floor to vaulted ceiling, where a green-shaded banker's lamp casts a pool of warm light across a mahogany reading table, and where the air itself seems to carry the weight of centuries of statecraft. The aesthetic is **light academia** in its truest diplomatic register: not the romanticized study-session aesthetic of social media, but the real institutional gravitas of places where language is wielded with surgical precision and where the arrangement of a room communicates hierarchy before a single word is spoken. The mood draws from the visual language of diplomatic archives: the creamy vellum of official correspondence, the deep jewel tones of wax seals and ribbon-bound dossiers, the precise geometry of protocol seating charts, and the quiet authority of institutional typography carved into limestone facades. There is an atmosphere of **studied composure** -- nothing is accidental, every element is placed with the deliberation of a diplomat choosing their words at a bilateral summit. The site should feel like turning the pages of a beautifully bound compendium of international relations, where knowledge is organized not for speed but for depth, and where the reader is assumed to be intelligent, patient, and worthy of the material. The visual inspiration comes from three specific sources: (1) the reading rooms of the Quai d'Orsay in Paris, with their gilded moldings and bottle-green surfaces; (2) the marginalia and cross-reference systems of 18th-century diplomatic encyclopedias, where knowledge was mapped through intricate networks of annotation; (3) the typographic traditions of official government publications -- the Gazette, the White Paper, the Blue Book -- where authority was communicated through restraint rather than ornamentation. ## Layout Motifs and Structure The layout follows an **editorial-flow** architecture inspired by the dual-column format of diplomatic reference works and scholarly journals. The primary reading column occupies 58% of the viewport width and is positioned with a slight leftward bias, while a secondary annotation column (28% width) sits to the right, separated by a thin vertical rule rendered as a 1px line in deep sapphire (#1B3A5C). This annotation column carries supplementary context, cross-references, and marginal glosses -- the digital equivalent of scholarly marginalia. On viewports below 900px, the annotation column collapses beneath the primary text, introduced by a subtle horizontal rule and a shift in background tone. **Grid-Line System:** The entire page rests atop a barely visible grid of fine lines -- a 60px vertical rhythm grid rendered in rgba(27, 58, 92, 0.04) that echoes the ruled lines of diplomatic ledger paper. This grid is not decorative background; it is the structural skeleton of the page, and every element aligns to it with bureaucratic precision. Horizontal grid lines mark every baseline; vertical lines define the column boundaries, the gutter, and the margins. At certain scroll positions, the grid momentarily increases in opacity (to 0.12) with a slow 800ms transition, as if the underlying structure of the page is briefly revealing itself to the attentive reader. **Section Architecture:** Content is organized into discrete **dossier sections** -- full-width blocks separated by generous vertical space (120px minimum). Each dossier section begins with a section number rendered in the annotation column (styled as "I.", "II.", "III." in EB Garamond at 1.2rem, weight 400, color #8B2252) and a section title in the primary column. Between dossier sections, a decorative **diplomatic separator** appears: a thin horizontal rule flanked by a small diamond glyph (Unicode U+25C6) centered on the line, all rendered in #8B2252 at 40% opacity. This separator is not a border; it is a typographic element that echoes the ornamental rules found in treaty documents. **Navigation:** Navigation is minimal and positioned as a fixed narrow band at the very top of the viewport -- a 48px-tall strip in #F7F3ED with a 1px bottom border in rgba(27, 58, 92, 0.15). It contains only the site title "diplomatic.wiki" flush-left in EB Garamond Italic at 1.1rem, and a maximum of four text-only navigation links flush-right in Crimson Pro at 0.85rem with 32px spacing. No hamburger menus, no dropdowns, no icons. The navigation disappears on scroll-down (translateY(-100%) over 400ms) and reappears on scroll-up. ## Typography and Palette **Typography:** - **Display / Headlines:** "EB Garamond" (Google Fonts) -- the definitive digital revival of Claude Garamond's 16th-century typefaces, chosen for its historical authority and its exceptional quality at large sizes. Used at weight 500 for primary headlines (2.8rem-5rem) and weight 400 italic for secondary headings. EB Garamond carries the exact visual weight of institutional scholarship -- it is the typeface of published dissertations, of Oxford University Press volumes, of the kind of text that assumes its own importance without needing to shout. All headings use **oldstyle figures** (font-feature-settings: "onum" 1) and **ligatures** (font-feature-settings: "liga" 1, "dlig" 1) to achieve authentic typographic richness. Letter-spacing is set to 0.01em for display sizes -- just enough to breathe without losing the tightness of text composition. - **Body / Prose:** "Crimson Pro" (Google Fonts) -- a contemporary Garamond-influenced serif optimized for screen reading at body sizes. Used at weight 400 for body text (1.05rem / 1.72 line-height) and weight 600 for inline emphasis. Crimson Pro's x-height is slightly taller than EB Garamond, which makes it more readable at small sizes while maintaining visual kinship. Body text is set with `text-rendering: optimizeLegibility` and `font-variant-numeric: oldstyle-nums`. Paragraph spacing is 1.4em. Block quotes are indented 2.5rem from the left with a 3px left border in #8B2252 at 40% opacity, set in Crimson Pro Italic at weight 400. - **Annotations / Marginalia:** "Source Sans 3" (Google Fonts) -- a humanist sans-serif that provides clear contrast against the serif body while remaining warm and institutional. Used at weight 400 for the annotation column (0.82rem / 1.55 line-height) and weight 600 for annotation labels. Color is #5C6B7A (a muted blue-gray that recedes visually, establishing the annotation column as secondary). Source Sans 3 is also used for navigation links, metadata labels, date stamps, and any UI-level text. - **Monospace / Data:** "IBM Plex Mono" (Google Fonts) -- used sparingly for reference codes, treaty identifiers, or any text that requires fixed-width alignment. Weight 400 at 0.85rem, color #3D5A80. **Palette:** The palette is built on a foundation of **jewel tones** -- the deep, saturated colors of diplomatic regalia, wax seals, and illuminated manuscripts -- set against warm off-white and parchment backgrounds. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background (primary) | Vellum White | #F7F3ED | Warm off-white with a yellow-ivory undertone, like aged diplomatic stationery | | Background (secondary) | Parchment Cream | #EDE7DA | A slightly deeper warm tone for the annotation column and alternating sections | | Text (primary) | Diplomatic Ink | #2C2C2C | Near-black with warm undertones, never pure #000 | | Text (secondary) | Slate Commentary | #5C6B7A | Muted blue-gray for annotations, metadata, secondary text | | Accent (primary) | Seal Crimson | #8B2252 | Deep rose-crimson, the color of diplomatic wax seals and margin rulings | | Accent (secondary) | Treaty Sapphire | #1B3A5C | Deep navy-blue, the color of diplomatic blue books and formal bindings | | Accent (tertiary) | Archive Gold | #B8860B | Dark goldenrod, the color of gilt lettering on leather spines and official crests | | Highlight | Emerald Protocol | #2D6A4F | Deep emerald green, the color of ministerial desk surfaces and protocol ribbons | | Border / Rule | Ledger Line | rgba(27, 58, 92, 0.15) | A translucent sapphire for all structural lines | **Color Usage Rules:** - Seal Crimson (#8B2252) is used ONLY for: section numbers, the active state of navigation links, the left border of blockquotes, and the diamond separator glyph. It is never used for backgrounds or large surface areas. - Treaty Sapphire (#1B3A5C) is used for: the vertical column rule, link text on hover, and the grid-line system. Links at rest are in Diplomatic Ink (#2C2C2C) with a 1px bottom border in Treaty Sapphire at 30% opacity; on hover, the text color transitions to Treaty Sapphire over 250ms and the border opacity rises to 100%. - Archive Gold (#B8860B) is used for: drop caps, pull-quote attribution marks, and the occasional gilded horizontal rule that marks a major section transition. - Emerald Protocol (#2D6A4F) appears sparingly: in data labels, in the fill of certain decorative elements, and as an alternate accent for interactive states. ## Imagery and Motifs **Photography:** The imagery mode is **photography**, but not stock photography of handshakes and conference rooms. The photographic language of diplomatic.wiki draws from three specific traditions: 1. **Architectural Photography of Diplomatic Spaces:** Close-up, desaturated photographs of ornate doorways, marble corridors, chandelier details, carved wooden panels, and the geometric patterns of parquet floors in foreign ministry buildings. These images are processed with a warm tone curve (shadows shifted toward #2C2C2C, highlights toward #F7F3ED) and reduced saturation (desaturated 30-40%) so they integrate with the page palette rather than dominating it. They are used as section backgrounds at 8-12% opacity behind the grid-line overlay, creating a sense of place without visual noise. 2. **Document Close-Ups:** Macro photographs of handwritten script on parchment, wax seal impressions, embossed letterheads, fountain pen nibs, the edges of stacked papers, and the spines of bound volumes. These images appear in the annotation column as small thumbnail illustrations (max-width: 180px, border-radius: 0, with a 1px border in rgba(27, 58, 92, 0.2)). They function as visual marginalia -- accompanying the text the way a scholar might place a relevant artifact beside their notes. 3. **Map Fragments:** Cropped segments of historical diplomatic maps -- boundary lines, cartographic labels, compass roses, latitude markings. These are used as decorative elements: a compass rose watermark behind a pull-quote, a fragment of boundary line as a section divider, a cartographic grid underlying a data table. **Grid-Line Motifs:** The grid-line system is the primary decorative motif and extends beyond the background rhythm grid: - **Diplomatic Grid Overlay:** At the top of each dossier section, a fine grid of intersecting lines (rendered in SVG) fills the first 200px of vertical space before fading to transparent via a linear-gradient mask. The grid lines are in Treaty Sapphire at 6% opacity, creating the impression that the text emerges from a structured field of analytical coordinates. - **Cross-Reference Lines:** When the reader scrolls to a passage that references another section, a thin animated line (1px, #8B2252 at 30% opacity) draws itself from the reference in the primary column to the corresponding annotation in the margin column, tracing a path that bends at a 90-degree angle (horizontal then vertical). This line animates over 600ms with an ease-out timing function and fades after 3 seconds. - **Ledger Ruling:** All tables in the design use a ledger-paper style: alternating rows with backgrounds of #F7F3ED and #EDE7DA, with horizontal rules in Ledger Line color only (no vertical cell borders). Column headers are set in Source Sans 3 at weight 600 with a 2px bottom border in Treaty Sapphire. **Decorative Elements:** - **Drop Caps:** The first letter of each dossier section's opening paragraph is rendered as a large drop cap in EB Garamond at 4.5rem, weight 500, color #B8860B (Archive Gold), floating left with a 12px right margin and a 4px bottom margin. The drop cap sits within the text flow for exactly 3 lines of body text. - **Section Numbering:** Roman numerals in the annotation column, styled as Seal Crimson circles -- the numeral centered inside a 32px diameter circle with a 1px border in #8B2252 at 50% opacity and no fill. - **Pull Quotes:** Set in EB Garamond Italic at 1.6rem, color #2C2C2C, with an Archive Gold guillemet (Unicode U+00AB / U+00BB) at 2.2rem flanking the text. Left-aligned within the primary column with 40px top/bottom margins. - **Footnote Markers:** Superscript numerals in Crimson Pro at weight 600, color #8B2252, linking to footnote text in the annotation column via the cross-reference line animation described above. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport foyer that establishes the diplomatic atmosphere before any content appears. On load, the screen is Vellum White (#F7F3ED) with the background grid at 0% opacity. Over 1200ms, the grid fades in to its resting 4% opacity using a staggered reveal: vertical lines first (0-600ms), then horizontal lines (400-1000ms), creating the impression of a coordinate system assembling itself. At 800ms, the site title "diplomatic.wiki" fades in at center-viewport, set in EB Garamond at 4.5vw, weight 500, color #2C2C2C, letter-spacing 0.08em. Below it, after a 200ms delay, a subtitle appears in Crimson Pro Italic at 1.1rem: a single-line descriptor. At 1800ms, a thin horizontal rule extends from the center outward (width animating from 0 to 40vw over 600ms) in Archive Gold (#B8860B) at 60% opacity. At 2600ms, the entire foyer begins to scroll upward as the first dossier section enters from below, and the foyer title scales down smoothly to become the fixed navigation title. **Scroll-Triggered Behaviors:** - Each dossier section enters the viewport with a subtle fade-and-rise animation: opacity from 0 to 1 and translateY from 30px to 0, triggered when the section's top edge crosses the 75% viewport threshold. Duration: 700ms, easing: cubic-bezier(0.25, 0.46, 0.45, 0.94). This is the ONLY scroll-triggered entrance animation -- no stagger delays between child elements, no separate animations for headings vs. body text. The section animates as a single unit to preserve the composed, unhurried quality of the design. - The background grid opacity shifts subtly as the user scrolls between sections: from 4% (default) to 8% during section transitions, creating a rhythmic "breathing" effect that marks passage through the document. This is achieved via Intersection Observer on section boundaries with a 600ms CSS transition. - Drop caps animate their color from #2C2C2C to #B8860B (Archive Gold) over 400ms when their parent paragraph enters the viewport, as if the illumination is being applied in real time. - The annotation column items (marginalia, thumbnails, section numbers) fade in 300ms after their corresponding primary-column content, creating a gentle left-to-right reading sequence. **Interactive Behaviors:** - Hovering over a footnote marker triggers the cross-reference line animation and simultaneously highlights the corresponding footnote text in the annotation column with a background transition to rgba(139, 34, 82, 0.06) over 200ms. - Hovering over any navigation link draws a 1px underline from left to right (width animating from 0% to 100%) in Seal Crimson over 300ms, positioned 2px below the text baseline. - Scrolling past 200vh causes a small "return to top" element to fade in at the bottom-right: a 36px circle with a 1px border in Treaty Sapphire, containing an upward-pointing chevron in Source Sans 3 at 0.9rem. **CSS Architecture:** - All colors are defined as CSS custom properties on `:root` for easy theming. - Typography uses a modular scale based on 1.25 (Major Third): 0.82rem, 1.05rem, 1.3rem, 1.6rem, 2rem, 2.5rem, 3.125rem, 3.9rem, 4.88rem. - The grid-line background is rendered as a repeating CSS `linear-gradient` (not an image), with horizontal and vertical lines layered via `background-image` stacking. - All transitions use the diplomatic timing function: `cubic-bezier(0.25, 0.46, 0.45, 0.94)` -- unhurried, deliberate, with no bounce or overshoot. - AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero images with overlaid text, gradient backgrounds, card shadows deeper than 2px, any element with border-radius greater than 4px (except the circular section numbers and return-to-top button), emoji, stock photography, animation durations shorter than 200ms. **Bias Toward Full-Screen Narrative:** The site is conceived as a single continuous document -- a scrollable diplomatic brief -- rather than a collection of discrete pages. Each section flows into the next with the rhythm of a well-argued position paper. There are no "landing page" patterns (no hero/feature/pricing/CTA stack). The structure is: foyer, then dossier sections, then a closing colophon. The reading experience should feel like sitting down with a carefully prepared briefing document in a quiet ministry reading room. ## Uniqueness Notes **Differentiators from other designs:** 1. **Dual-Column Marginalia System:** No other design in the portfolio implements a true annotation-column layout with cross-reference line animations. While sidebar layouts exist (27% frequency), none treat the secondary column as a scholarly marginalia space with its own typographic hierarchy, thumbnail imagery, and interactive cross-referencing behavior. The annotation column is not a sidebar of navigation or metadata -- it is an active scholarly apparatus that enriches the primary text. 2. **Diplomatic Grid-Line as Living Structural Element:** Grid-line motifs appear in only 3% of existing designs, and none use the grid as a responsive, breathing element that changes opacity on scroll transitions. Here, the grid is both the structural skeleton and the primary decorative motif -- a single system serving dual purposes. The grid-reveal animation in the foyer and the breathing opacity shifts during scroll create a sense that the page's underlying order is a living system, not a static background. 3. **Jewel-Tone Palette with Institutional Restraint:** While jewel-tones appear in 4% of designs, none combine them with the light-academia institutional context. The palette here is not decorative -- each color has a specific semantic role tied to diplomatic artifacts (wax seals, blue books, gilt lettering, ministerial green). The restraint in color application (Seal Crimson only for section markers and accents, Archive Gold only for drop caps and attribution, Emerald Protocol as a rare highlight) prevents the jewel tones from becoming overwhelming and maintains the scholarly composure of the design. 4. **Garamond-Classic Typography with Oldstyle Figures and Ligatures:** garamond-classic typography appears in only 2% of existing designs. This design goes further by specifying oldstyle figures, discretionary ligatures, and a precise typographic hierarchy across four font families (EB Garamond, Crimson Pro, Source Sans 3, IBM Plex Mono) that mirrors the layered authorship of a diplomatic document -- the official voice (EB Garamond), the analytical voice (Crimson Pro), the administrative voice (Source Sans 3), and the reference voice (IBM Plex Mono). 5. **Scholarly-Intellectual Tone Without Academic Cliche:** scholarly-intellectual tone appears in only 1% of existing designs. diplomatic.wiki achieves this tone through typographic and structural choices rather than through content or copywriting conventions. The tone is communicated by the marginalia system, the Roman numeral section markers, the drop caps, the footnote cross-references, and the deliberate pacing of the scroll -- not through any explicit claim of intellectualism. **Chosen seed/style:** aesthetic: light-academia, layout: editorial-flow, typography: garamond-classic, palette: jewel-tones, patterns: scroll-triggered, imagery: photography, motifs: grid-lines, tone: scholarly-intellectual **Avoided patterns from frequency analysis:** - Avoided "playful" aesthetic (98% overused) -- replaced with composed institutional gravity - Avoided "centered" layout (99% overused) -- used leftward-biased dual-column editorial flow instead - Avoided "mono" typography (99% overused) -- IBM Plex Mono used only for reference codes, never as a display or body face - Avoided "warm" palette as a dominant descriptor (100% overused) -- while the background tones are warm, the accent palette is built on cool jewel tones (sapphire, crimson, emerald) that cut against generic warmth - Avoided "friendly" tone (97% overused) -- the tone is scholarly and institutional, assuming reader competence rather than courting reader comfort - Avoided "vintage" motifs (71% overused) -- while the visual references are historical, the motif system (grid-lines, cross-reference animations, breathing opacity) is contemporary and interactive - Avoided "minimal" imagery (97% overused) -- the photography and document close-up imagery system is specific, purposeful, and richly described