# Design Language for diplomacy.bar ## Aesthetics and Tone **diplomacy.bar** lives at the edge of two worlds: the slow gravity of scholarship and the liquid ease of water. The domain name is itself a riddle — a bar is a place of gathering and passage, but also a measure of pressure, and also the railing behind which advocates stand. Diplomacy is the art of language held in precise suspension, like minerals dissolved in deep ocean water, each word a compound of intention and restraint. The site is conceived as a **submerged illuminated manuscript** — a medieval scholar's codex that has been gently lowered into a tide pool and left there for a century. The vellum has not decayed; instead it has become luminous. Ink has bloomed outward into iridescent halos. Gold leaf still catches light, but refracted now through six fathoms of aquamarine. The site does not sell diplomacy; it inhabits it. **Generative underpinning:** Every page surface breathes. Behind all content, a continuous generative system produces slowly drifting water-bubble fields — not cartoon bubbles but physalis-membrane bubbles, each one a thin-walled sphere catching and scattering jewel-toned light, rendered as pure SVG/Canvas paths with dynamic radii, subtle internal caustic shimmer, and drift velocities drawn from a Perlin noise field. No two loads produce the same bubble arrangement. The bubbles are not decorative; they are the medium in which scholarship floats. **Tone:** Calm-serene, scholarly-intellectual — the composure of a diplomat who has read every treaty ever written and finds language endlessly interesting. No urgency, no selling, no breathlessness. Just the weight of considered words and beautiful things drifting through warm deep water. ## Layout Motifs and Structure The primary structure is **parallax-sections** — not the overused cinematic hero-image parallax (92% corpus usage), but a proprietary **depth-strata** variant: the page is composed of five distinct water-depth layers, each with its own parallax coefficient (from 0.05 near-surface shimmer to 0.35 slow deep-water drift). As the reader scrolls, content sections ascend through the water column like pages rising from a sunken library. **Macro structure:** - **Layer 0 — Surface (fixed):** Generative bubble field, full-screen Canvas, pointer-reactive surface tension ripple on hover. Z-index 0. - **Layer 1 — Just Below Surface (parallax 0.08):** The wordmark "diplomacy.bar" set in Caveat Brush, large-scale, positioned left-of-center, drifts slowly upward relative to scroll. A single luminescent line of secondary text ("words held in deep water") in Libre Baskerville. - **Layer 2 — Mid-Column (parallax 0.18):** Three **card-flip** panels arranged in a non-aligned broken stagger (not card-grid — offset by ±3vw and ±2vh). Each card is a folio leaf: front shows a single illuminated letter in jewel tones, back (revealed on hover/tap flip) shows an excerpt from a fictional diplomatic text. The flip axis is vertical. Transform-style: preserve-3d. The card backs glow faintly with bioluminescent green-amber light. - **Layer 3 — Deep Column (parallax 0.27):** An open book spread, centered, drawn in SVG. The left page shows a faux-illuminated map of an unnamed archipelago with hand-drawn coast contours. The right page shows calligraphic text in Caveat, annotated with marginalia in a smaller weight. Both pages tilt very slightly (±1.8°) via a continuous sin-wave transform — the book drifts. - **Layer 4 — Floor (parallax 0.35):** A colophon section — the only "real" text — in Libre Baskerville, centered, small. Domain registration date, a single contact link, nothing else. Below it, the SVG silhouette of a scholar's writing desk dissolving into seafloor sand. **No navigation bar.** No hamburger menu. No sticky headers. The single anchor is the wordmark itself (links to top). Reading the page is the navigation. **Scroll feel:** `scroll-behavior: smooth` with a custom JS easing override (quintic ease-out). The parallax layers update via `requestAnimationFrame` with capped delta. No jank, no layout shift. Tested to 60fps at all layers. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Wordmark / Card Fronts:** [Caveat Brush](https://fonts.google.com/specimen/Caveat+Brush) — the handwritten font of this design. Weight 400 only (the font has one weight). Used for the main wordmark at `clamp(5rem, 12vw, 11rem)`, for card-front illuminated letters at `clamp(8rem, 18vw, 16rem)`, and for the floating marginalia annotations at `0.75rem`. Caveat Brush is handwritten without being precious — it has the heft of a calligraphy pen on vellum, not the sweetness of a lettering artist's portfolio. - **Body / Diplomatic Texts / Colophon:** [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville) — weight 400 regular and 400 italic. The scholarly counterweight to Caveat Brush. Long-form card-back diplomatic excerpts and the colophon use Libre Baskerville italic at 1rem/1.75 line-height. It is the typeface of serious reading. - **Captions / Layer Labels:** [EB Garamond](https://fonts.google.com/specimen/EB+Garamond) — weight 400 italic at `0.8rem`. Used sparingly for the fictional map's legend labels and the card-back attribution lines. **Palette — Jewel Tones:** - `#1B2A4A` — **Abyss Indigo** — deepest background, the ocean floor. Used for body background. - `#0D3B4F` — **Deep Teal** — the mid-water background layer, 6% lighter than Abyss Indigo. - `#16697A` — **Lagoon** — active bubble membrane base color, mid-weight teal. Card flip border. - `#489FB5` — **Shallows** — text on dark backgrounds, bubble highlight rim. Layer 1 wordmark color. - `#82C0CC` — **Surface Light** — secondary text, EB Garamond captions, soft parallax layer elements. - `#E8C547` — **Amber Vellum** — the warm gold of illuminated manuscript gold leaf. Used for card-front illuminated letters, the floating wordmark accent dot after the period in "diplomacy.bar". - `#C25B56` — **Sealing Wax** — the deep crimson of a wax seal. Used for one-letter card-flip initial per card (rotating through three cards), drop cap on colophon. - `#3D8F7C` — **Bioluminescent** — the faint inner glow of card backs in flipped state. Used as `box-shadow: 0 0 24px 4px #3D8F7C40` on the card back face. - `#F4ECD8` — **Parchment** — the card face background, the SVG book spread pages, the scholar's desk silhouette. All color combinations maintain sufficient contrast for the body text use cases (dark background + `#489FB5` or `#82C0CC` text). ## Imagery and Motifs **Core imagery system — Water Bubbles (generative, not photographic):** The bubble field is implemented entirely in Canvas/SVG — zero photography (corpus: 92% photography; this design: 0%). Each bubble is a circle with: - Thin stroke: `#489FB5` at 0.6 opacity - Radial gradient fill: transparent center → `#16697A` at 0.08 opacity at edge - Single caustic highlight: a small white arc segment at 10 o'clock, `#F4ECD8` at 0.35 opacity, rendered as a Bezier arc - Slow autonomous drift: each bubble assigned a Perlin noise velocity vector, updating 60fps, rebounding softly at viewport edges - On pointer proximity (within 80px): bubble gently deflects away with spring physics, returns when pointer leaves **Book-Scholarly motifs:** - **Illuminated initials on card fronts:** Each of the three card-flip panels shows a single oversized capital letter (D, I, P — the first three letters of "diplomacy") rendered in Caveat Brush at enormous scale, filled with `#E8C547` Amber Vellum, surrounded by hand-drawn SVG vine-and-leaf border tracery in `#3D8F7C`. The vine tracery is drawn as SVG `` elements with `stroke-dasharray` path-draw animation on card flip reveal — but this is on the card front, not overused. - **The Open Book SVG:** A large-format inline SVG (~80vw wide) of an open folio. Left page: freehand-traced archipelago map with island outlines in `#489FB5`, depth-soundings written in EB Garamond italic (`0.65rem`), a compass rose in `#E8C547`. Right page: Libre Baskerville italic faux-diplomatic text in seven paragraphs, with red-ink marginalia in Caveat Brush (`0.7rem`), tilted ±10° relative to the main text baseline. The book has a visible spine crease drawn in `#1B2A4A` with soft shadow. - **Scholar's desk silhouette:** Pure SVG silhouette at the bottom of the page — a writing desk with quill, inkwell, spectacles, and an open folio — drawn in `#489FB5` at 0.4 opacity against the `#1B2A4A` seafloor. It dissolves upward into the bubble field. - **Wax seal:** A single SVG wax seal in `#C25B56` with "d.b" monogram in the center (EB Garamond italic, tiny), positioned floating on the Layer 1 near-surface area to the right of the wordmark. It rotates very slowly (one full rotation per 90 seconds, CSS animation). Not a CTA — purely atmospheric. **No stock photography. No icon fonts. No emoji. No external image files.** ## Prompts for Implementation **The story being told:** A scholar who specialized in the language of international agreements has died and left their library to the sea. The sea has accepted the gift. The books do not rot; they glow. A visitor who finds this site has swum down to the library. They are browsing. The site does not ask them to sign up, buy anything, or share on social. It simply exists as a beautiful drowned collection. **Build guidance — Parallax depth system:** Implement a JS class `DepthStrata` with five layers, each a `
` with `position: fixed` (layers 0–1) or `position: absolute` in a `will-change: transform` container. On `scroll` event (throttled via `requestAnimationFrame`), compute `translateY` for each layer as `scrollY * parallaxCoefficient`. Layer 0 (bubble canvas) does not translate — it is fixed and reacts only to pointer. Layer 1 translates at 0.08× scroll, Layer 2 at 0.18×, Layer 3 at 0.27×, Layer 4 at 0.35×. This creates the sensation of looking down into a water column that opens as you scroll. **Build guidance — Card flip panels:** Three panels, `display: grid; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.4, 0.0, 0.2, 1)` on the `.card` container. Flip on `:hover` / `:focus` / touch-tap via adding class `is-flipped` → `rotateY(180deg)`. Front face: `backface-visibility: hidden; background: #F4ECD8`. Back face: `rotateY(180deg); backface-visibility: hidden; background: #0D3B4F; box-shadow: inset 0 0 40px #3D8F7C30`. The back face text (faux diplomatic excerpt) fades in after the flip completes (CSS delay 0.4s). Panel stagger: translate(-3vw, 2vh), translate(0, 0), translate(3vw, -2vh) — not a regular grid. **Build guidance — Generative bubble field:** `` sized to 100vw × 100vh, `position: fixed; z-index: 0; pointer-events: none`. Initialize 60–90 bubbles with randomized `r` (12–55px), position, and Perlin-derived velocity. On each `requestAnimationFrame`: clear canvas, update positions (bounce at edges with damping 0.7), draw each bubble as radial-gradient circle + arc highlight. Perlin noise from a small inline noise function (~40 lines). On `pointermove`: compute distance from each bubble to pointer; if `< 80px`, apply repulsion force proportional to `1/distance²`. Spring return: reduce velocity by 0.97 each frame. **Build guidance — SVG Book:** Inline SVG, `viewBox="0 0 1200 800"`. Left page rect `fill="#F4ECD8"`, right page rect same. Spine: a vertical rectangle `x="580" width="40"` with a radial gradient from `#1B2A4A` at center to `#0D3B4F`. Page tilt: the whole `` wrapped in a `` rotating ±1.8° over 8s, `additive="sum"`, `repeatCount="indefinite"` with sinusoidal timing. Map elements drawn with `` and `` elements in EB Garamond via `font-family="'EB Garamond', serif"`. **AVOID:** Hero CTAs, "Get Started" buttons, navigation bars, pricing tables, stat grids, feature cards, testimonial blocks, social proof rails, logo bars, sticky headers, cookie banners, pop-ups, progress loaders, skeleton screens, footer link columns, mobile hamburger menus. **AVOID from frequency analysis:** Overused parallax-as-hero-image pattern (use depth-strata variant instead), photography (0% target), centered-only layout (use depth-strata offset), gradient palettes (use jewel-tones with no gradients except for bubble fill), mono typography (use handwritten + serif combo). **Color application specifics:** - `body { background: #1B2A4A; }` - Wordmark: Caveat Brush, `color: #489FB5`, with `.` after "bar" in `color: #E8C547` - All card-back text: `color: #82C0CC` on `background: #0D3B4F` - SVG map strokes: `stroke: #489FB5; stroke-width: 1.5px` - Vine tracery SVG: `stroke: #3D8F7C; stroke-width: 1px; fill: none` ## Uniqueness Notes 1. **Generative bubble field as the page surface — not photography (0% vs corpus 92%).** Every other design in the registry uses photography as its primary imagery vehicle. This design uses zero photography. The entire visual weight is carried by generative Canvas bubble physics, SVG hand-drawing, and jewel-tone typography. The bubble system is not decorative backdrop — it is the environment the content inhabits. 2. **Depth-strata parallax variant — not the overused hero-image parallax (92%).** While `parallax` patterns appear in 92% of the corpus and `parallax-sections` layout in 14%, this design uses a proprietary five-layer depth-strata system with distinct parallax coefficients per layer (0.05 → 0.35), pointer-reactive surface ripple, and spring-physics bubble deflection. The metaphor (water column) is unprecedented in the registry. 3. **Card-flip as a scholarly manuscript reveal — not a feature comparison mechanic.** Card-flip appears in only 4% of the corpus and is used almost exclusively for feature/pricing reveals. Here, each card flip reveals a piece of faux diplomatic text from a fictional drowned library, with bioluminescent back-face glow and path-draw SVG vine tracery on the front. The flip is narrative, not commercial. 4. **Handwritten + classical serif combination with zero mono typography.** Mono appears in 94% of corpus designs. This design has none. The Caveat Brush (handwritten) + Libre Baskerville (classical serif) + EB Garamond (Renaissance humanist) trio is oriented entirely toward manuscript culture — all three fonts evoke written language before typewriters existed. 5. **Jewel-tones palette (0% analogue in corpus) on a deep-ocean background.** The corpus uses `warm` (96%) and `gradient` (89%) almost universally. This design uses a cool jewel-tone palette anchored in deep teal/indigo, with amber and crimson as the only warm accents — both referencing manuscript illumination rather than contemporary web trends. 6. **Planned seed:** aesthetic: generative, layout: parallax-sections, typography: handwritten, palette: jewel-tones, patterns: card-flip, imagery: water-bubbles, motifs: book-scholarly, tone: calm-serene.