# Design Language for diplomacy.boo ## Aesthetics and Tone diplomacy.boo is a **midnight planetarium reading-room for soft-spoken treaty enthusiasts** — a celestial **blobitecture** dome where the heavy word *diplomacy* is allowed to laugh at itself through the friendly mischief of `.boo`. The two halves of the domain refuse each other on purpose: "diplomacy" wants oak-paneled rooms and embossed letterhead, ".boo" wants a polite ghost behind a beanbag chair. The site collapses that tension into a single image — **a low, softly-blobbed observatory at 11pm where the diplomats have taken their shoes off, the star-charts on the ceiling are slowly drifting, and the negotiation is being conducted in whispers across a honeycomb of warm rooms**. The mood is not a press conference. The mood is a sleepover for nation-states. The aesthetic seed is **blobitecture (1% in the corpus — almost untouched, a clean territory to claim), realised through a hexagonal-honeycomb layout (3% — extremely under-claimed for a structural decision this distinctive), frutiger-clean typography (4% — the legible humanist Swiss-Germanic warmth that frutiger-aero wishes it could afford to commit to without the chrome), a midnight-blue palette (8% — present but not crowded, and deeper than the corpus's typical "ethereal-blue"), stagger patterning (75% — used here against the grain, as a celestial choreography of star-rise rather than the usual list-reveal), lens-flare imagery (7% — pulled inside the dome instead of slathered on a hero shot), star-celestial motifs (1% — the rarest decorative claim available, deliberate), and a friendly tone (14% — the softening agent that keeps "diplomacy" from becoming "diplomatic")**. The eight-axis combination, particularly the pairing of blobitecture + hexagonal-honeycomb + star-celestial, has not been claimed elsewhere in the corpus. The closest emotional reference points: **Future Systems' Selfridges Birmingham at dusk** with its blob skin going matte navy under sodium lights; **the lobby of the National Air & Space Museum at the moment they kill the daylight panels and the Pegasus constellation comes up on the inner ceiling**; **a Frutiger-set wayfinding sign at Charles de Gaulle Terminal 1 photographed in 1976 — gentle, certain, faintly magical**; the moment in *The Little Prince* where the fox explains that the stars are bells. The aesthetic is **soft-edged, but precise**. **Dark, but never severe**. **Round, but architectural**. **Friendly, but adult** — this is not a mascot site, it is a place where serious people are being kind on purpose. The voice across the site is the second load-bearing decision. The friendly tone is **delegation-friendly**, not customer-friendly: short, considered sentences in a humanist sans, lowercase used selectively for warmth, no exclamation marks, no marketing bromides, no "we believe", no "let's chat". A diplomat at a slumber party still chooses words carefully — they have just removed the lectern. The page invites the reader into a conversation already in progress between several constellations and asks them to add nothing more than their attention. **There is no CTA. No pricing. No "book a demo". No testimonials. No stats grid. No FAQ.** The page is a slow-rotating ceiling. The reader is the room. ## Layout Motifs and Structure The layout is built around **a single, full-bleed dark dome and a slow-rotating honeycomb of soft-blob rooms underneath**. The page is one continuous vertical experience, but it is composed in **seven canopy layers** that the reader passes through as if descending through cloud strata. The honeycomb is the only repeating geometry on the page; everything else is curve. **The seven canopies, top to bottom:** 1. **The Approach** — a 100vh hero set in deep midnight that opens with a single hexagonal aperture in the centre of the screen. Inside the aperture is a slow-drifting starfield. Around the aperture, six soft-blob shapes the colour of the surrounding sky breathe almost imperceptibly. The wordmark *diplomacy.boo* sits below the aperture, frutiger-clean, at a confident but unassertive 64px. No tagline. No nav-bar. The page is announcing itself only to people who are already paying attention. 2. **The Treaty Honeycomb** — a 7-cell hexagonal grid (one centre, six surrounding) where each cell is a blob-cornered hex (clip-path: polygon hex with corner-radius applied through SVG-filtering). The centre cell is the empty room. The six surrounding cells each hold one **principle of soft diplomacy** rendered in a single sentence — "be the room", "let the silence finish", "ask the question you actually want answered", "concede the small thing first", "name what you both want", "remember whose night it is", "the door is the point". The principles glow gently on hover; the centre cell never animates and never lights — its emptiness is the message. 3. **The Drifting Constellations** — a horizontal canopy of 12 named star-clusters that slow-pan across the screen as the reader scrolls (parallax-driven, but the parallax is **lateral**, not vertical, so the stars feel like they are passing overhead). Each constellation is named after a small, real, mostly-forgotten diplomatic gesture: "the pencil-share at Reykjavik", "the umbrella at Panmunjom", "the duet at Lake Vänern". Hovering a constellation traces its lines in pale star-white SVG and reveals the gesture's two-line story. 4. **The Honeycomb of Rooms** — a deeper hex grid (19 cells, three rings) where each cell is a frosted-glass blob-hex containing a single quiet thing: a couplet from a peace poem, a translated noun for "sleep" in a language with seven of them, a photograph of a delegate's empty teacup, a single-line sound-only excerpt from an oral-history archive. The grid is **stagger-animated as the reader scrolls into it** — but the stagger is celestial, not corporate: cells light cell-by-cell in the rotational order of the constellation Ursa Minor, beginning at Polaris, taking nine seconds to complete one full pass. 5. **The Lens-Flare Vestibule** — a quiet section where the screen darkens further and a single soft lens-flare drifts diagonally across the canopy from upper-left to lower-right over twenty seconds, in slow obedience to the cursor's last-recorded position. As it crosses, three short fragments appear in its wake — three things the host of a sleepover for nation-states might say to a guest who arrives early. 6. **The Slow Terms** — a single column of *terms of soft engagement* set in 22px frutiger-clean. Each term is one word — "patience", "veranda", "thaw", "kettle", "ceiling", "permission", "again" — and one sentence beneath it. The column is **centre-aligned and narrow** (52ch maximum) so the reader's eye does not have to travel. The page is being kind to the reader's neck. 7. **The Closing Window** — the page ends not with a footer but with a final hexagonal aperture identical to the opening one, this time slowly closing over fifteen seconds as the reader stops scrolling. When it has fully closed, only the wordmark remains, dimmed to 28% opacity. The page is a planetarium dome and you have been allowed to leave when the show ends, not before. **Composition rules:** - The hexagonal honeycomb is the only repeating geometric pattern; all other shapes are blobs (rounded super-ellipses, SVG metaballs, or clip-path random-corner-radius blobs). - Negative space is held generously — at least 30% of every viewport is sky, and the sky is never broken. - No straight horizontal lines except the bottom edge of the wordmark. No 90° corners. No drop-shadows that imply an inset rectangle. - The grid breathes: the honeycomb cells expand by 1.5% on a 12-second sine cycle, just inside the threshold of conscious perception. - The canopies are linked by **slow blob-morph dividers** rather than section breaks — one canopy's blob field melts into the next without a horizontal rule. ## Typography and Palette **Typography (Google Fonts only):** - **Inter** at variable weight 280–520 — the workhorse for body and UI metadata. Inter is the most fluent contemporary realisation of the *frutiger-clean* lineage on Google Fonts; it inherits the humanist warmth and the unambiguous letterforms (single-storey *a* in tight contexts, mathematically calm spacing) without the chrome of frutiger-aero. Used at 18px/1.65 for paragraphs, 14px/1.5 for metadata. - **Bricolage Grotesque** at weights 400 and 600, italic optional — the wordmark and the canopy headings. A modern, slightly soft grotesque with rounded humanist terminals; reads as Frutiger's cousin who became an architect. Used at 64px for the wordmark, 38px for canopy titles, with letter-spacing tightened to -0.012em. - **Fraunces** at weight 300, optical-size variable axis 14–144 — used only for the *constellation names* and the seven *terms of soft engagement*. Fraunces' soft-spoken display optical sizes give the celestial labels a held-breath quality without breaking the humanist temperament; it acts as the embroidered thread on a plain linen tablecloth. No third display family. No mono. Mono would betray the room. **Palette (10 colours, midnight-blue led):** - `#06091F` — *Vault Midnight*. The deepest sky, used as the page background and inside-of-aperture fill. Almost black, but unmistakably blue under any reasonable display. - `#0E1638` — *Treaty Indigo*. The next sky-layer up, used for the honeycomb cell fills at rest. - `#1A2654` — *Veranda Blue*. The blob-room fill colour and the colour of the constellation-cluster zones. - `#2C3F7E` — *Quiet Atlantic*. The mid-tone for blob-morph transitions and slow gradients between canopies. - `#5B7BC4` — *Reykjavik Pencil*. The quiet accent on hover-states and the constellation-line stroke before the line is fully drawn. - `#9DB5E8` — *Polaris Glow*. The luminous pale-blue used for lit honeycomb cells and the highlight inside lens-flare cores. - `#E6ECFA` — *Soft Treaty*. The body-text colour against the dark sky; deliberately not pure white, to avoid clinical glare. - `#F4D8A4` — *Kettle Light*. The single warm accent — used sparingly for the fully-lit star at the centre of a hovered constellation, the wordmark's underline-on-active, and the tea-cup imagery. This is the friendly half of the friendly tone, holding the whole palette back from going cold. - `#C77AB6` — *Late Diplomat Mauve*. A whisper of dusty rose used only twice on the page: the first hex of the third canopy and the closing fragment of the lens-flare vestibule. Asymmetric warmth, planted to be remembered. - `#1F3D5C` — *Pegasus Shadow*. The shadow colour used inside blob-shapes for soft inner-glow rather than drop-shadow. The palette obeys one rule: **no full saturation, no pure black, no pure white.** Everything is held one step inward from its extreme, the way a host lowers their voice when a guest arrives. ## Imagery and Motifs **Imagery is generative, mostly SVG, with deliberate restraint on photography.** - **Star-celestial motifs (the centerpiece):** a custom-drawn celestial map of *twelve forgotten diplomatic gestures*, each rendered as a real constellation-style cluster with named stars and SVG-stroke linework. The constellations are slow-panned, not parallaxed downward. The brightest star in each cluster is `Kettle Light`; the rest are gradient-stepped through `Polaris Glow` to `Reykjavik Pencil`. **Star sizes follow the magnitude convention** — a real magnitude-1.4 star is genuinely twice as bright as a magnitude-2.4 star, because honesty is part of the friendliness. - **Lens-flare imagery (used inside, not outside):** a single hand-built lens-flare component (not a stock asset) drifts through the *Lens-Flare Vestibule*. It is composed of seven anamorphic-style horizontal streaks, two soft circular ghosts at 50% and 75% along the streak axis, and a faint chromatic fringe in `Late Diplomat Mauve` at the leading edge. The flare is **camera-tracked to the cursor's last-stilled position** and drifts toward it, never reaching, over twenty seconds — the room is quietly aware of where the reader is looking. - **Blob-architecture forms:** every container that is not a hexagon is a **soft blob-corner shape** with SVG `` + `` rounding (the metaball trick). Blobs are sized for the human shoulder — never tiny, never cell-tight; they breathe. - **Hexagonal-honeycomb structure:** clip-path polygon hexes with a 14px softened corner. The honeycomb is *almost* regular; one cell in every 19-cell ring is rotated by 0.7°, just enough to make the eye aware that the room was made by hands. - **Photographic accent:** exactly **three** sepia-and-blue duotone photographs across the page: a delegate's empty teacup on a windowsill, the dim reflection of an overhead light in a polished negotiation table, and a long-exposure photograph of star-trails over a low-domed building. Photographs never appear edge-to-edge; each sits inside a blob-frame with a 22px feathered edge. - **Decorative pattern: drift-dust.** A thin scatter of 1px Polaris-Glow dots across the entire page, randomly distributed at ~80 dots per 1000²px, each with an independent slow upward drift over 60–120 seconds. This is the celestial pollen of the room; it sits at 14% opacity and is unmissable only after a minute of reading. - **What is forbidden:** flags, handshake icons, dove silhouettes, scales of justice, briefcases, podiums, suit-and-tie iconography, gavels, microphones at lecterns, "world map with connecting lines", isometric airplanes, anything that resembles a sticker about peace. ## Prompts for Implementation **Build it as a single full-screen narrative scroll, not a marketing page.** The HTML body is one long article composed of the seven canopies described above, each at a viewport-honest height (90–120vh). No nav-bar. No skip-links to product features. No footer with social icons. The end of the page is the closing of an aperture and that is the entire close. **Honeycomb construction.** Render the hexagons with `clip-path: polygon(...)` on absolutely-positioned tiles; arrange them with CSS grid using the standard hex-row offset trick (every odd row translated by 50% of cell width). For the soft blob-corner version, layer a 100% width/height SVG with a Gaussian-blur + threshold filter over a flat-coloured polygon; this gives the honeycomb cell the rounded, bubble-membrane edge that distinguishes blobitecture from regular hex-grids. **The constellations are SVG, not images.** Each named gesture is a `` with `` stars and `` lines. Star magnitude → radius: `r = 1.6 * (2.5 - magnitude)` clamped to [1, 9]. Constellation lines are drawn on hover with a path-draw animation (stroke-dashoffset → 0 over 1.4s, ease-out). Constellation names appear in Fraunces 18px after the line completes. **Stagger animation, but celestial.** When a hex grid enters the viewport, do **not** stagger left-to-right or top-to-bottom. Compute each cell's angular position relative to the grid centre and stagger by `phase = (angle / 2π) * 9000ms`, beginning at the cell that points toward Polaris (top-centre, angle = -π/2). Use `cubic-bezier(0.22, 1, 0.36, 1)` for the easing — a gentle settle, not a snap. **Cursor-tracked lens-flare.** Use `requestAnimationFrame` to LERP the flare's target toward `(lastMouseX, lastMouseY)` at a rate of 0.018 per frame — slow enough that the flare never *reaches* the cursor, only approaches it. The flare itself is an SVG with seven ``s (the streaks) and two ``s (the ghosts), all with `mix-blend-mode: screen` over the dark sky. **Slow breathing on the honeycomb.** Apply `transform: scale(calc(1 + 0.015 * sin(...)))` driven by a JS RAF loop with a 12-second period. Offset each cell's phase by 1/19 of the period so the breath visibly travels around the ring; the resulting effect is a soft pulse circling the grid like a draft moving through a domed room. **Drift-dust starfield.** A single fixed-position canvas covers the viewport; ~600 sub-pixel circles drift upward at 0.02–0.06 px/frame each, wrapping when they leave the top edge. Re-seed positions on resize but not on scroll. Render at `globalAlpha = 0.14`. Never let the dust get bright; bright dust is glitter, not pollen. **Story over interaction.** Every hover-state must reveal a sentence the reader did not have before — never a "more" link, never an icon-tooltip. The page is a small museum of soft diplomatic gestures; every interaction is an exhibit caption being lifted. **Refusals (do not implement, even if asked):** - No CTA buttons, anywhere. The wordmark is not a button. Nothing is a button. - No pricing. No tiers. No "starts at". - No stats grid. No "12,000+ diplomats trust us". - No testimonials. No avatars. No quote marks larger than 14px. - No FAQ accordion. The page does not anticipate questions. - No newsletter signup, no "stay in the loop", no email capture. - No social proof, no logo bar, no "as seen in". - No dark/light toggle. The room is always at 11pm. That is the room. - No micro-confetti, no celebratory bursts, no Lottie. The friendly tone is *quiet* friendly, not energetic friendly. - No cursor that follows with magnetic snapping. The cursor is the reader's, not the site's. **Motion budget.** Total continuously-running motion on the page: the dust drift (always), the honeycomb breath (always), the constellation pan (always, but very slow at ~3 px/sec lateral). Everything else is event-driven. No autoplay video. No looping background loop. The page is calm by default. ## Uniqueness Notes This design's differentiators against the 150-design corpus: 1. **The blob-architecture × hexagonal-honeycomb × star-celestial combination is not present anywhere else.** Blobitecture is at 1% in the corpus (almost untouched), hexagonal-honeycomb at 3%, and star-celestial at 1%. Their pairing makes a specific visual claim — *soft architecture holding a precise geometry holding a celestial register* — that no other site in the corpus is making. The probability of this triple appearing by random combination is roughly 0.0003. 2. **The hexagonal grid is used architecturally, not decoratively.** In the few corpus designs that use honeycomb, it is a card-grid skin. Here the honeycomb is the *room itself* — a domed planetarium ceiling whose individual cells house the seven principles, the nineteen quiet things, and the closing aperture. The hexagon is the building, not the wallpaper. 3. **Stagger is rotated against its corpus default.** Stagger appears in 75% of corpus designs as a left-to-right list-reveal — a corporate motion vocabulary. Here stagger is **angular**, beginning at Polaris and travelling around Ursa Minor's rotation in nine seconds. The animation is the same primitive; the meaning is inverted. 4. **The lens-flare is interior, not hero-stamped.** Corpus uses of lens-flare (7%) are almost universally as a hero-image overlay, a vestige of stock-photography habits. Here the flare lives inside its own canopy, drifts laterally over twenty seconds, tracks the cursor without ever reaching it, and exists as a *room* the reader passes through — the flare is the encounter, not the decoration. 5. **The friendly tone is held without a single mascot, exclamation mark, or rounded-cartoon element.** Corpus friendly-tone designs (14%) overwhelmingly reach for handwritten type, playful-rounded fonts, and bubble-playful motifs. Here the friendliness is delivered entirely through palette warmth (one warm accent), word choice (lowercase, no exclamation, sentences that end in periods), and refusal-to-shout. The friendliness is the *room temperature*, not a costume. 6. **The page refuses every standard marketing chrome.** No CTA. No pricing. No stats. No testimonials. No FAQ. No newsletter. No footer. The page ends with an aperture closing. Most corpus designs include at least three of these chrome elements; this design includes zero, on principle. 7. **The midnight-blue palette holds no pure black, no pure white, no full-saturation hue.** The deepest sky is `#06091F`, the lightest text is `#E6ECFA`, the warmest accent is a desaturated `#F4D8A4`. The corpus midnight-blue designs (8%) frequently push to #000 / #FFF for contrast; this design refuses both extremes, which produces the specific *softened-room* mood that distinguishes a sleepover from a press briefing. **Avoided patterns from frequency analysis:** - Did not use `hand-drawn` (96% — the runaway dominant aesthetic; using it again would be invisible). - Did not use `glassmorphism` (68% — overcrowded; the blob-rooms borrow only the optical softness, not the frosted-glass card vocabulary). - Did not use `card-grid` (79%) — the honeycomb is not a card grid; cells are not cards, they are rooms. - Did not use `mono` typography (96% — the corpus default; mono would betray the humanist temperament of the room). - Did not use `photography` heavily (98% — the corpus default; this design uses exactly three photographs and they are duotone-blob-framed). - Did not use `cursor-follow` magnetic interactions (80% — the cursor stays the reader's; only the lens-flare drifts toward it, and never arrives). - Did not use `parallax` in its standard vertical form (95% — the constellations parallax laterally instead, which is rare). - Did not use `warm` or `gradient` palette types (96% / 97% — the entire palette is cool-led with one warm accent; gradients exist only as canopy-to-canopy blob-melts, never as backgrounds). **Chosen seed (from assignment):** aesthetic: blobitecture, layout: hexagonal-honeycomb, typography: frutiger-clean, palette: midnight-blue, patterns: stagger, imagery: lens-flare, motifs: star-celestial, tone: friendly. The seed is honoured fully and without substitution; every axis is load-bearing in the final design and visibly distinguishable in the rendered page.