# Design Language for diplomatic.bar ## Aesthetics and Tone A solemn, archival treatise that masquerades as a website. diplomatic.bar is conceived as **The Chancery Ledger of the Submerged Council** — a long, scrolling broadsheet recovered from the cabin of an embassy schooner that sank in 1887 off the Cape of Good Hope. The site reads as if its pages had spent decades pressed beneath ocean silt, then been catalogued by a patient, slightly obsessive provincial archivist who used Victorian ornament not for decoration but as a working notation system: corner flourishes mark treaties, leaf vignettes index witnesses, ruled chapter tabs identify maritime jurisdictions. The aesthetic is **victorian-ornate** filtered through brackish water — engraved lacework, stipple ornaments, and printer's flowers that have all been faintly bleached and edge-eaten by salt. The mood is not opulent and gilded (avoid the burgundy-velvet-and-gold cliche) but **grounded-earthy**: the tone of an old country solicitor's office where the carpets smell of pipe tobacco, the brass nameplates are pitted, and the windows look out onto a gunmetal harbour at dusk. Diplomats here speak slowly, measure their pauses, and value the weight of an unhurried sentence. Inspirations: the marbled endpapers of mid-19th-century shipping ledgers; the ornament catalogues of MacKellar, Smiths & Jordan; the Beagle's deck logs in Darwin's hand; the bookbinder's smell of glue and seaweed; the ASMR of a fountain pen scratching across Hammermill bond; Ottilie Maclaren Wallace's bronze maquettes of consuls; the deep cyan-green of a North Sea scrying mirror; the patient melancholy of W.G. Sebald's photographs of empty consulate corridors. Reject: any hint of cocktail-bar swagger, any gold-on-black "premium" sheen, any glassmorphic frosting, any neon. The .bar TLD here means *barristers and bar associations*, not nightlife. ## Layout Motifs and Structure The entire site is a **single, continuous vertical timeline** — a chancery scroll unrolled down the screen. There is no horizontal navigation in the traditional sense; the structure is a chronological river that the visitor descends. **Spine and Ribbon.** Down the dead-centre of the viewport runs a 2px hairline rule (color #2A4A52) acting as the chancery spine. Every event, ledger entry, witness mark, and treaty fragment is anchored to this spine by a small ornament: a fleuron, a leaf-pair, an asterism, or a pierced ring. Content alternates left and right of the spine like a folio book lying open and read from above. The spine itself is not straight — it kinks gently at chapter breaks, exactly as a real folded scroll would, with the kink rendered as a hand-drawn jog of approximately 12px. **Chapter Cartouches.** At the top of each section, a wide horizontal cartouche stretches almost full width, framed by twinned engraved rules and corner leaves. The cartouche carries the chapter Roman numeral (I., II., III.), a date set in the form *Anno Domini One Thousand Eight Hundred and Eighty-Seven*, and a one-line *colophon-subtitle* in italic small-caps. The cartouche is the only place where the page goes truly full-bleed — elsewhere, generous outer margins of 12-14vw on desktop reinforce the page-of-a-book feeling. **Marginalia Column.** A narrow 14ch column on the outer edge of every chapter holds running marginalia: tiny annotations in a different hand, footnote-style asterisks, weather observations, latitudes, fragments of overheard conversation. These are set in a smaller grotesque and printed in a **bleached sepia-on-teal**, as if the archivist's pencil had reacted with the seawater. **The Falling Leaves Pattern.** Between major sections, the spine briefly disappears and the layout breaks into an asymmetric scatter of small "fallen leaf" cards — each containing a single sentence-fragment of correspondence, a single date, a single seal stamp. These scatter-breaks act as transitions; they are deliberately sparse and quiet. **Reading Anchor.** A small floating timeline indicator (no more than 56px wide) sits flush left at the viewport's vertical centre. It is a single engraved feather pen tip whose ink-trail elongates as you scroll, leaving a sepia smear that mirrors your descent through the document. It is the *only* fixed-position element on the page. **No card-grids. No bento. No dashboard.** The entire site renders in one column logical structure (with timeline left/right swing) and would print as a 30-page chapbook if exported. ## Typography and Palette **Type pairing.** The pairing is a deliberate, slightly contrary collision: **grotesque-neo** sans for the body and chapter heads (the modern voice of the cataloguer) against an aged italic serif used sparingly for invocation and primary-source quotation (the voice of the recovered document). - **Display & Chapter:** **Space Grotesk** at weights 400 and 600. Used for chapter Roman numerals, cartouche titles, and section banners. Letter-spacing tightened to -0.02em on display sizes; opened to +0.18em on small-caps subtitles. - **Body:** **Inter** at 400/500. Set at a comfortable 17px / 1.7 leading on desktop. The grotesque-neo body is a deliberate choice: it gives the prose the cool, even tone of a modern editor's transcription, against which the ornament can sing without becoming pastiche. - **Quoted document fragments:** **Cormorant Garamond Italic** at 18-22px, used for direct quotations from "primary sources" inside the narrative (treaty excerpts, letters, marginalia). This is the *only* serif on the page — it appears rarely and feels like a found object. - **Marginalia & micro-copy:** **IBM Plex Sans** at 13px / 1.5, in the bleached sepia for glosses and footnotes. - **Chapter-numeral display:** **Space Grotesk** 600 set at 14vw, deeply tracked-in, with a thin (1px) engraved underline that breaks under the numeral. All faces are available on Google Fonts. No invented faces. **Palette — *Ocean Deep, Tideline Earth*.** The palette refuses the Victorian-cliche triad of burgundy/cream/gold. Instead it sits squarely in **ocean-deep** with grounded-earthy lowlights, as if the chancery had been lit by a single oil lamp in an underwater study. - `--abyss` `#0A1A22` — page ground; deepest ocean black-teal. - `--harbour` `#102B36` — chapter ground; ledger paper-shadow. - `--council-teal` `#1F4750` — spine, primary rule, chapter cartouche border. - `--brackish` `#2A6470` — hover/active states; oxidised brass. - `--tideline` `#5C8A8E` — body-text companion; secondary ornament. - `--silt-paper` `#D8CDB4` — primary text on dark; recovered-paper warm bone. - `--seafoam-ink` `#A6BBB5` — marginalia; bleached sepia-teal. - `--seal-rust` `#7A3A28` — single accent for treaty seals, footnote markers, the pen-tip ink. - `--leaf-olive` `#54603A` — botanical motifs; fleurons; chapter leaves. Body text sits on `--abyss` (dark-mode by default — this is a recovered-from-the-deep document; it would be wrong to render it on white). `--silt-paper` carries the prose. `--seal-rust` is the only warm accent and is used scrupulously: never more than one rust element visible per viewport-height of scroll. `--leaf-olive` carries every botanical ornament so the leaves feel pressed and dried, never freshly painted. ## Imagery and Motifs Everything visual is rendered as if printed on **paper-aged** stock that has spent time submerged: a constant, very low-opacity (0.06) noise-and-stipple texture overlays the entire page, with subtle vertical "tidemark" gradients down the outer 4vw of each side. Foxing spots — irregular ochre stains — are placed *deliberately and sparingly* (no more than seven across the entire scroll), each one anchored to an ornament so it reads as accident-of-archive, not decoration. **Botanical Spine.** The motif system is built around **leaf-organic** ornament drawn in the language of pressed-herbarium specimens: oak, olive, laurel, kelp, eelgrass. These are SVG line illustrations in `--leaf-olive`, hand-drawn rather than geometric, with the trembling line-weight of a drypoint etching. They never tile or repeat as wallpaper; each leaf is unique and placed with archival care. Twin leaf-pairs flank chapter Roman numerals. Single fallen leaves mark scatter-breaks. A long, twining laurel branch climbs the entire left margin of the masthead chapter and slowly fades by chapter three. **Engraved Cartouches and Fleurons.** Hand-drawn corner ornaments at every cartouche: not symmetric Victorian curlicues but more austere — the kind of restrained leafwork found on a 19th-century Admiralty chart's title block. Two small fleurons (printer's flowers) bracket every chapter date. **Wax Seals.** Three actual wax-seal impressions appear across the whole site, each rendered as a small (~80px) detail in `--seal-rust` against `--silt-paper`, with the ridge-detail of pressed wax simulated by SVG stipple. Each seal carries a different fictional consular crest (a leaf-and-anchor, a sextant-and-laurel, an inverted compass). Used to mark treaty fragments only. **Witness Marks.** Tiny pen-and-ink glyphs (asterisks, daggers, double-daggers, paragraph marks) appear in the marginalia column to footnote events. These animate in with a gentle counter-animation when scrolled past. **Tide-Pattern Dividers.** Between chapters, instead of a horizontal rule, an SVG tide-line — one continuous, slightly irregular, hand-traced wave running 60% of viewport width, in `--tideline`. The wave's trough-positions encode (subtly, as an Easter egg) the tide chart for the day the schooner sank. **No photography.** No stock imagery. No 3D renders. No isometric. No glassmorphism. Every visual is drawn line-art SVG or generated texture, befitting a hand-catalogued archive. ## Prompts for Implementation This is a **scroll-as-narrative** experience. The visitor is not a customer; they are a reader descending into a recovered document. Implement with that frame fixed in mind. **Storytelling spine.** Build the page as one long vertical narrative divided into seven chapters, each with its own cartouche, its own pair of leaves, and its own short prose passage. Chapters should read like a maritime ledger entry rather than a marketing section: sober, declarative, dated. Suggested chapters: 1. **I. *De Recordatione*** — Of remembrance: the schooner *Mercure* and what was found. 2. **II. *Of Tides and Talk*** — The chancery as a quiet room, not a podium. 3. **III. *The Practice of Slow Speech*** — Method and posture in difficult conversations. 4. **IV. *Treaties Folded Small*** — Five recovered fragments rendered in Cormorant italic. 5. **V. *The Witness Column*** — The marginalia and what they record. 6. **VI. *Of Leaves and Wax*** — The botanical and ceremonial vocabulary. 7. **VII. *Into the Tide*** — The closing colophon and contact ribbon. **Animation vocabulary — the *counter-animate* pattern.** Animation should never call attention to itself. The signature interaction is **counter-animate**: when the visitor scrolls *down*, the leaf ornaments and marginalia drift gently *upward* relative to the page (as if the document beneath were rising to meet the reader, not falling away). This is achieved via small inverse-translateY transforms (max 24px) keyed to scroll position. - **Pen-tip indicator** trails a sepia smear that grows during scroll-down and *retracts* during scroll-up — implementing counter-animate at the cursor as well. - **Leaf-pair flanks** the chapter numerals; they unfurl outward with a 600ms slow-ease as the cartouche enters viewport, then breathe with a 6s cycle (max 1.5° rotation). - **Chapter Roman numerals** fade in with a 1200ms tracking-tighten: they begin at +0.4em letter-spacing and ease to -0.02em. - **Witness-mark glyphs** stamp in with a tiny ink-bloom (filter: blur 4px → 0px over 240ms) when scrolled past. - **Wax seals** rotate ±2° with a slow micro-jitter when in viewport, as if light from a passing oil-lamp were flickering across them. - **Tide-pattern dividers** counter-draw their SVG path: stroke-dashoffset retreats *from right to left* as the visitor scrolls *down* — the tide pulling out as the reader descends. **Don'ts.** - **No CTA-heavy layouts.** No "Sign Up" buttons. There is one quiet contact ribbon in the final chapter, set as a single italic line with a hand-drawn underline. - **No pricing blocks. No stat-grids. No testimonials carousel. No hero-with-three-feature-cards.** - **No card-grid catalogues** of services. - **No dark/light toggle.** The document is dark; that is its nature. - **No video. No autoplay. No modal.** - **No emoji ornament** — all flourishes are SVG line-art. **Engineering notes.** - Pure HTML + CSS + a single small JS file for scroll-driven counter-animation (IntersectionObserver + requestAnimationFrame, no library required). - All ornaments inline SVG so stroke-dashoffset and currentColor work cleanly. - Texture overlay via a single tiled PNG at 4% opacity multiply-blended. - Long-form prose: aim for 4,000-6,000 words across the seven chapters. This is a document, not a brochure. - Mobile: the timeline collapses to a single column flush-left of the spine; cartouches reflow to stacked; marginalia drop *below* their referent paragraph rather than to the side. ## Uniqueness Notes **Chosen seed:** aesthetic: victorian-ornate, layout: timeline-vertical, typography: grotesque-neo, palette: ocean-deep, patterns: counter-animate, imagery: paper-aged, motifs: leaf-organic, tone: grounded-earthy. This combination is **rare across the corpus** — frequency analysis confirms: victorian-ornate (3%), timeline-vertical (1%), grotesque-neo (3%), ocean-deep (3%), counter-animate (11%), paper-aged (3%), leaf-organic (5%), grounded-earthy (0%). Several of these are at the floor of the distribution. The brief deliberately leans into the underused half of the catalogue. **Differentiators (at least three, listed below).** 1. **Victorian-ornate without the cliches.** The corpus's small handful of victorian designs reach reflexively for burgundy/cream/gold and gilded curlicues. This design replaces all three: the palette is ocean-deep teals on abyssal black; the ornament is austere Admiralty-chart leafwork rather than gilded scrollery; the tone is solicitor-quiet rather than opulent-grand. The result reads as Victorian *gravity* without Victorian *theatre*. 2. **Single vertical timeline as the entire site.** No nav, no card-grid, no hero-with-three-features. The document is one chancery scroll — a structure used in only ~1% of the corpus, and used here at full commitment (every section reflows along a central spine; the only fixed UI is a single pen-tip indicator). 3. **The counter-animate signature.** When you scroll down, ornaments drift up; when you scroll up, the ink retracts. This inversion is rare in the corpus (counter-animate appears in only ~11% of designs and rarely as a *governing* principle). Here it is the entire animation language — quiet, dignified, slightly uncanny. 4. **Grotesque-neo body against italic-serif primary sources.** The cool modern voice of the cataloguer (Space Grotesk + Inter) framing the warm aged voice of the document (Cormorant Garamond italic, used sparingly). Most editorial designs in the corpus pair serif body with sans display; this reverses the relationship. 5. **Paper-aged texture as substrate, not decoration.** The aged-paper imagery (3% of corpus) is implemented as a constant atmospheric overlay with deliberately placed foxing — never as a hero "old paper" background graphic. The ageing is in the air of the room, not on a stage prop. 6. **Tone: grounded-earthy at 0%.** This tone is at the absolute floor of the corpus (rounds to 0%). The site commits to it: every prose fragment is sober, declarative, slightly tired in the way a long-serving consul is tired. No exclamation. No marketing voice. The tone is the anti-dopamine. 7. **Leaf-organic motifs treated as taxonomy, not pattern.** Most leaf motifs in the corpus tile or repeat as wallpaper. Here each leaf is drawn unique and placed as if pressed into a herbarium — an indexing system, not a texture. **Avoided patterns (per frequency analysis).** - **Avoided hand-drawn (96%)** — this design is engraved-line, not hand-doodled. The line-quality is drypoint, not sketchbook. - **Avoided glassmorphism (68%)** — no frosted panels. Surfaces are paper or harbour-water, never glass. - **Avoided photography (98%)** — no photographic imagery whatsoever. - **Avoided full-bleed (92%)** as a default — the page sits inside a generous 12-14vw outer margin, like an open book. - **Avoided card-grid (80%) and centered (80%)** — replaced with the alternating timeline-spine. - **Avoided cursor-follow (81%) and magnetic (72%)** — the only cursor-aware element is the pen-tip indicator, and it follows scroll, not mouse. - **Avoided gradient (97%) and warm (96%) palettes** — no warm gradient tropes; the palette is cool, ocean-deep, and the only warmth is a single rust accent used sparingly. - **Avoided pastoral-romantic (30%) and warm-inviting (25%) tones** — replaced with grounded-earthy, the corpus's least-used tone. - **Avoided mono typography (96%)** — no monospaced typewriter cliche; the document is set in proper grotesque body, as a serious 19th-century chancery would have been transcribed.