# Design Language for diplomatic.boo ## Aesthetics and Tone diplomatic.boo is a **sunlit chancellery library at the edge of the aurora**, where the hush of treaty-drafting meets the wink of a polite ghost in a cardigan. The domain pulls in two directions on purpose. *"Diplomatic"* wants vellum, sealed envelopes, the smell of beeswax on parchment, the soft authority of someone who has read every footnote. *".boo"* wants a friend tapping you on the shoulder when you take it all too seriously. The site refuses to pick a side. It is a **light-academia reading-room rendered as a layered-depth diorama** — six panes of marble, paper, and glass stacked in z-space — where every page of correspondence is also a small stage for a translucent, well-mannered apparition. The mood is **the late-afternoon golden hour, three minutes before the aurora becomes visible through the high library windows**. Inside, dust motes float through warm slabs of horizontal sunlight. A reader leaves a teacup on a Carrara marble plinth. Somewhere just past the spine of the open volume, a **cursor-following soft glow** drifts across the page like an attentive ghost — never aggressive, never pursuing, always two beats behind the user's intent, as if it were a translator catching up. Outside the windows, **a slow aurora-gradient sky shifts from cantaloupe to pale pistachio to rose-quartz**, and the marble veins in every architectural slab pick up that sky's color the way a wet stone reflects a lantern. This is the **approachable-casual register of the genre**: scholarly furniture, but the cardigan is unbuttoned. Margins are generous. The voice in copy uses contractions and asks soft questions ("shall we begin?", "may we introduce you?"). The serifs are absent and the **rounded-sans softens every edge**, so the institution feels like a smart friend's flat. Tech motifs sit at the periphery — a discrete RFC-style citation grid, a tiny telegraph-tape ticker of "today's protocols," a faint monospaced caption under each marble plate — present but never dominant, because here the diplomacy is **between human warmth and machine precision**, not between nation-states. The site invites the visitor to **lean in and stay long**, the way one stays in a library because the chair is good. Nothing pings. Nothing pops. The aurora outside does the spectacle; the room does the welcome. ## Layout Motifs and Structure The layout is **a layered-depth diorama of six parallax planes**, each plane a horizontal slab of the same chancellery library, viewed from a fixed seated camera position. The user does not navigate so much as **breathe through the planes** — scrolling moves the planes at differential rates, with the foremost (a marble desk edge) moving fastest and the hindmost (the aurora behind the windows) drifting almost imperceptibly. There is no horizontal scroll, no card-grid, no hero-with-CTA-stack. There is a single seated viewpoint and six layers of translucency. **The six planes, foreground to background:** 1. **Plane Z+5: The Marble Desk Lip.** A slim band of Carrara marble across the bottom 8% of the viewport, with a single pewter inkwell, a fountain pen at rest, and a small folded card that reads `RSVP: yes`. This plane is where the **cursor-follow glow lives** — a ~340px diameter warm aurora caustic that lags the cursor by 180ms with a soft spring (stiffness 90, damping 22), as if a candle were following the reader's gaze. The plane has the strongest motion parallax (1.0× scroll speed). 2. **Plane Z+3: The Open Folio.** Center-anchored, this plane is the primary content surface — an open leather folio whose **left page is paper-aged ivory and whose right page is a translucent glass overlay** showing the marble behind it. All long-form copy lives here, set ragged-right at a comfortable 62-character measure. The folio breathes: every 11 seconds, both pages exhale by 0.4% scale and re-settle. Scroll speed 0.85×. 3. **Plane Z+1: The Reading-Lamp Cone.** A single warm cone of light (a CSS conic-gradient with feathered edges) descending from the top-right at a 28° angle, illuminating roughly the right two-thirds of the folio. The cone has a subtle dust-mote particle field drifting through it (40 motes, 1–3px, opacity 0.12–0.36, vertical drift 14–22s loop). Scroll speed 0.7×. 4. **Plane Z-1: The Marble Wall and Bookshelves.** A vast slab of **veined marble** running floor-to-cornice across the back wall, interrupted by built-in bookshelves on the right edge. The marble is a bespoke procedural texture (see Imagery). Books are **rounded-corner gradient slabs** in the aurora palette — no titles, no spines drawn, just color-blocks with tiny embossed monograms. Scroll speed 0.45×. 5. **Plane Z-3: The High Windows.** Three tall arched windows occupy the upper third of the back wall, each framed in patinated brass. Through them: **the live aurora-gradient sky**. Scroll speed 0.25×. 6. **Plane Z-5: The Aurora.** A full-width, full-height animated aurora-gradient surface that exists *behind* the windows. It shifts hue every 18s through a 7-stop gradient (see Palette). It is the slowest-moving plane and the only one that animates independently of scroll. Scroll speed 0.10×. **Vertical structure** is a **single-column long-scroll** with five "stations" — *The Welcome*, *The Protocol*, *The Correspondence*, *The Annex*, *The Sign-Off*. Each station occupies one viewport-tall pause where the parallax briefly slows by 30% (a "settle"), letting the content breathe. There is **no top navigation bar**; the only navigation is a thin **brass rail** down the right margin (16px wide) with five tiny embossed dots, which the cursor-follow glow snaps to magnetically when within 80px. There is no footer in the conventional sense — the page closes when the reading-lamp cone fades to black and a single line of text appears centered: *"the chancellery is closed for the evening. boo."* The grid beneath the diorama is a **12-column asymmetric layered grid** with a deliberate left-bias: the folio sits on columns 2–9, the brass navigation rail on column 12, and the reading-lamp cone falls across columns 7–12. The marble lip on plane Z+5 ignores the grid entirely and runs full-bleed. ## Typography and Palette **Typography (Google Fonts only):** - **Quicksand** at weights 400, 500, and 600 — the workhorse for headlines, station titles, and pull-quotes. Quicksand is the cleanest **rounded-sans** on Google Fonts that still reads "scholarly" rather than "preschool" — its terminals are gently rounded but its proportions are tall and confident, perfect for the light-academia register without leaning saccharine. Set headlines at clamp(2.4rem, 5.2vw, 4.8rem), tracking -0.012em, line-height 1.08. - **Nunito** at weights 300 and 400, with italic 400 — the body copy. Nunito's slightly more open counter-shapes pair with Quicksand without competing; together they read as one warm rounded family. Body text at 18px / 1.72, ragged-right, hyphenation auto. Italic Nunito carries all diplomatic terms in copy (*"démarche," "pro memoria," "boo"*). - **JetBrains Mono** at weight 400 — used **only** for the tiny monospaced captions under each marble plate, the brass-rail station markers, and the citation grid (*RFC-3114*, *VCDR-1961*). Set at 11px / 1.45, tracking +0.04em, color-shifted toward the aurora palette so it reads as belonging to the room rather than to a terminal. The pairing is **rounded-sans warmth + a single cool monospaced whisper of tech**. No serifs. No display fonts. The restraint is deliberate: in a layered-depth scene with this much atmospheric color, more typefaces would muddy the room. **Palette (aurora-gradient ground, marble-and-paper figures):** The palette has two registers: **the room** (warm, paper-and-stone, daytime) and **the sky** (the aurora, which shifts). *The room — fixed:* - `#F4ECDC` *Vellum* — the primary paper surface (folio left page, copy background) - `#E8DFCB` *Old Cream* — the secondary paper (envelopes, marginalia) - `#D9CDB3` *Sun-Bleached Linen* — soft separator color, the quiet cousin of vellum - `#C9B894` *Brass Patina* — accent for the nav rail, monograms, fountain-pen nib - `#8C7A5B` *Tobacco Leather* — the folio binding, headline emphasis on hover - `#3E3326` *Walnut Ink* — primary text color (chosen warm-near-black, never pure black) - `#FAF6EE` *Window Light* — the dust-mote color, the inside of the lamp cone *The marble — procedural, but sampled from these veins:* - `#EFEAE0` *Carrara Field* — base marble color - `#B8A98C` *Dry Vein* — the warm vein - `#7E8E96` *Cool Vein* — the cool vein (this single grey is the only cool color in "the room") *The aurora — the gradient stops, in cycle order:* - `#F2B89A` *Cantaloupe Dawn* - `#F4D8A4` *Honey Glow* - `#D9E8B8` *Pale Pistachio* - `#9FD6C2` *Sea Glass* - `#A8C4E8` *Rime Blue* - `#C9B0DD` *Lupine* - `#EBA8C3` *Rose Quartz* The aurora cycles through these seven stops over 126 seconds (18s per transition), always interpolating in OKLCH for perceptual smoothness. **The marble veins live-sample** the current aurora color and mix it into the cool vein at 12% opacity, so on a "Sea Glass" minute the marble has the faintest mint kiss; on a "Rose Quartz" minute the marble blushes. The room never changes; the *light in the room* changes. Headings: `Walnut Ink` on `Vellum`. Hover: `Tobacco Leather`. Body: `Walnut Ink` at 92% opacity. Monospaced captions: a desaturated mix of `Brass Patina` × current-aurora-stop at 60/40. ## Imagery and Motifs **Imagery is bespoke, mostly procedural, with restrained photography (essentially none).** The library is built; it is not photographed. - **Marble-texture (the centerpiece imagery).** Every horizontal stone surface — the desk lip, the wall, the plinth, the window sills — uses a **bespoke procedural marble** generated at runtime via layered noise. The technique: three octaves of curl-noise warped Perlin, threshold-stepped at 0.62 / 0.74 / 0.86, blended with a base color of `#EFEAE0` and two vein colors that **live-sample the current aurora stop** (see Palette). The marble is generated once on load into a hidden 2048×2048 canvas and reused as a CSS `background-image` across all marble surfaces, with `background-attachment: fixed` so the camera stays seated as the user scrolls. A subtle 4% film grain overlay sits on top to keep the marble from feeling vector-clean. Marble is the **dominant texture** — it occupies more pixels than any other element. - **The aurora** is rendered as a single full-bleed `` behind the windows, drawn with three stacked radial gradients moving at independent slow speeds (0.04, 0.07, 0.11 px/frame). The aurora has a 14% noise overlay so it never feels like a flat WebKit gradient. - **Tech motifs (peripheral, not decorative).** The "tech" register is carried by **four small precision elements** that sit on the folio's right page: (1) a tiny telegraph-tape ticker scrolling current "protocols of the day" in JetBrains Mono at 11px, (2) a 7-row × 4-column **citation grid** of imaginary diplomatic RFCs (*VCDR-1961*, *Helsinki-1975*, *boo-2026*), (3) a translucent **brass-edged status pill** that quietly displays the current aurora-stop name as a scholarly footnote, and (4) a thin **horizontal connection-graph** linking three station-titles like a treaty signatory diagram. None of these are interactive in a CTA sense; they are room furniture that happens to be machine-readable. - **The reading-lamp cone** is a CSS conic-gradient masked through SVG with feathered edges, plus a 40-particle dust-mote field on a single canvas. Motes are not decorative noise — they are a **slow ambient signal of liveness**, tuned so that approximately one mote crosses the visible cone per second. - **The brass rail and station dots.** Drawn in SVG with a faint 2-stop linear gradient (`#C9B894` → `#8C7A5B` × 8% darker on the right edge) to suggest a single light source. Each dot has a subtle `box-shadow: inset` that the cursor-follow glow brightens on approach. - **Embossed monograms on the bookshelf slabs.** Each "book" on plane Z-1 carries a 14×14px monogram drawn in low-contrast `Brass Patina`, taken from a small library of nine geometric ligatures (*"db"*, *"VC"*, *"oo"*, *"§"*). They are not links. They are titles in a room that respects you enough not to shout them. - **No photography. No stock imagery. No icons-from-a-library.** The only "icons" are the hand-drawn brass monograms and the fountain-pen nib SVG. **Motifs summary:** tech (peripheral, monospaced), marble-classical (foundational, marble-as-architecture, tech as polite annotation), aurora-lights (the live sky), candle-atmospheric (the lamp cone), book-scholarly (the folio and shelves). Five motifs woven together; none of them dominates. ## Prompts for Implementation **Build it as a single seated diorama, not a marketing page.** The HTML body is one long article composed of five stations inside a fixed parallax stage. There is no top nav, no hero CTA, no pricing block, no stat-grid, no testimonial carousel, no "trusted-by" logo strip, no footer with social icons, no cookie banner styled like a card. The page is a *room you read in*, and rooms do not have CTAs. **Layered-depth construction.** Build the six planes as six absolutely-positioned `
`s inside a single `position: relative; perspective: 1200px` stage. Each plane uses `transform: translateZ(...)` with corresponding `scale()` to compensate for perspective foreshortening, plus a `transform: translateY(calc(var(--scroll) * var(--plane-speed)))` driven by a single `requestAnimationFrame` scroll listener that writes `--scroll` to `:root`. Plane speeds: Z+5 = 1.0, Z+3 = 0.85, Z+1 = 0.7, Z-1 = 0.45, Z-3 = 0.25, Z-5 = 0.10. Use `will-change: transform` on each plane and nothing else. Respect `prefers-reduced-motion` by collapsing all plane speeds to 0 (a static seated photograph, marble veins still live-sampled but stationary). **Cursor-follow glow.** A single `
` of 340px diameter, fixed-positioned, with a radial gradient from `#F4D8A4` 0% to transparent 70%, blend mode `screen` over the room and `multiply` over the aurora. Position is a damped spring trailing the cursor by 180ms (stiffness 90, damping 22, integrated with rAF). The lantern brightens by 18% when within 80px of any brass-rail dot (magnetic snap implied, not cursor capture). On touch devices, the lantern follows the last touch point and fades out 4 seconds after release. **Aurora canvas.** One `` at the back, sized to viewport, redrawn at 30fps (deliberately not 60 — the aurora is slow). Draw three stacked `createRadialGradient` calls with 7-stop OKLCH-interpolated gradients, the centers slowly orbiting via Lissajous figures (a:1, b:1.3, phase 0.7). Add a 14% noise overlay generated once to an offscreen canvas and `globalAlpha`-blended each frame. **Marble.** Generate procedurally on load into a 2048×2048 offscreen canvas using three octaves of noise (any noise lib, or hand-rolled value-noise — keep it under 4kb). Threshold and blend per the Palette section. Refresh the cool-vein color every 18 seconds when the aurora transitions, redrawing only the vein channel into a second canvas and `mask-image`-compositing it into the surface. Apply as `background-image` to all marble elements with `background-attachment: fixed`. **Storytelling pace.** The five stations should read like chapters of a slow letter, not a feature list. Suggested copy registers: - *The Welcome*: "shall we begin? pour something. the sky's about to start." - *The Protocol*: a single long paragraph that explains diplomatic.boo's purpose without ever calling itself a "platform" or "solution" — it should feel like the host explaining what this room is for. - *The Correspondence*: a sample exchange, set as two facing folio pages, in two slightly different italic weights. - *The Annex*: the citation grid and telegraph-ticker live here, as if you wandered into the reference room. - *The Sign-Off*: closes with a hand-drawn brass `boo.` glyph and the line *"the chancellery is closed for the evening. boo."* **Animation principles.** Everything is slow, springy, and patient. Use cubic-bezier(0.22, 1, 0.36, 1) for entries, cubic-bezier(0.16, 1, 0.3, 1) for exits, and a critically-damped spring for the cursor lantern. Nothing bounces past its target. Nothing strobes. The aurora is the only continuously moving thing, and even it moves on a 126-second cycle. There are **no reveal animations triggered by scroll position** — content is present, the camera simply pans the planes past it. This is a room, not a slideshow. **Mobile.** Collapse to four planes (merge Z+5+Z+3, Z-3+Z-5). Brass rail moves to bottom edge as four dots. Lantern follows touch with longer fade. Folio content stacks single-column at the same 62-character measure. Aurora canvas reduces to 24fps and 4-stop gradient. **Bias against generic patterns.** Do not add: testimonial cards, feature-icon-grid, "as-seen-in" logo strip, sticky CTA bar, exit-intent modal, dark-mode toggle in the corner (the room *is* the mode), accordion FAQ, "scroll for more" arrow, hamburger menu animation, parallax-clouds-stock-imagery, glassmorphism cards floating over the marble. Every one of these would contradict the room. ## Uniqueness Notes This design's differentiators against the 160-design corpus: 1. **The light-academia × layered-depth × aurora-gradient × marble-texture combination is unprecedented in the corpus.** Light-academia stands at 5%, layered-depth at 10%, aurora-gradient at 3%, and marble-texture at 3%. The simultaneous use of all four — and specifically as **a seated diorama where the marble live-samples the aurora** — does not appear in any other completed design. The closest neighbors (e.g., diplomacy.boo, which uses blobitecture × hexagonal-honeycomb × star-celestial) occupy a fundamentally different visual claim: that design *opens upward into night*, while this one *sits inside afternoon and watches the aurora through windows*. The difference between sky-as-ceiling and sky-as-window-view is the entire premise of this room. 2. **The chancellery-library-with-a-friendly-ghost framing.** The corpus contains many scholarly aesthetics (dark-academia at 9%, editorial at 35%) and many playful aesthetics, but the **deliberate marriage of institutional decorum with `.boo`-as-cardigan-wearing-ghost** is unique. The site reads as approachable-casual (3% in the corpus, deliberately underused) inside a light-academia frame (5%) — a register pairing that, per frequency analysis, no other site has chosen. It's not "professional" and it's not "whimsical-creative"; it's *the smartest friend you have, in their flat, on a Sunday*. 3. **Live-sampled marble veins as a continuous color-feedback system.** The marble texture redraws its cool-vein color every 18 seconds to mix in the current aurora-gradient stop at 12% opacity. This converts a static "marble-texture" imagery choice into a **continuously-tuned ambient color register** — the room visibly responds to the sky outside even though no element of the room appears to "animate." No other design in the corpus uses procedural marble at all, let alone a procedural marble that listens to a separate animation system. This is the design's signature technical idea. 4. **Six-plane layered-depth with a fixed seated camera and a damped lantern that lives on the foreground plane.** Layered-depth (10%) and parallax (95%) and cursor-follow (81%) are all present in the corpus, but they are typically used as decoration over a flat scrolling page. Here, the six planes are the *entire* compositional structure — there is no flat layer, no "main content area" outside the diorama — and the cursor-follow lantern sits on the foremost plane (Z+5) rather than as a global overlay, which makes it feel like a candle the reader is holding. The combination is structural, not ornamental. 5. **Rounded-sans typography (4%) used scholarly, not childish.** Rounded-sans is rare in the corpus (4%) and almost always pairs with playful aesthetics. Pairing Quicksand + Nunito with a light-academia setting and a single JetBrains Mono whisper for the tech motif (14%) is **a deliberate inversion** — the typography softens the institution rather than amplifying it. No corpus design pairs rounded-sans with a scholarly setting in this way. 6. **No CTAs, no pricing, no stats, no testimonials, no feature grid, no footer.** The page closes with a fade and a single line, *"the chancellery is closed for the evening. boo."* This is a deliberate abdication of marketing-page conventions in favor of a single sustained narrative experience — consistent with the SDESIGN bias toward full-screen narrative, and with the specific identity of `diplomatic.boo` as a *room*, not a *funnel*. **Chosen seed (per assignment):** aesthetic: light-academia, layout: layered-depth, typography: rounded-sans, palette: aurora-gradient, patterns: cursor-follow, imagery: marble-texture, motifs: tech, tone: approachable-casual. **Avoided patterns (per frequency analysis):** - Avoided **hand-drawn aesthetic** (96% saturation in corpus) — this design is procedurally drawn, not hand-illustrated. - Avoided **glassmorphism** (68%) — there is one translucent surface (the folio's right page) and it functions narratively (a treaty being read through), not as a UI device. - Avoided **photography** (98%) — zero photography is used; the room is built. - Avoided **gradient palette as decoration** (97%) — gradient is reserved for the aurora, where it is *the subject*, not the wallpaper. - Avoided **warm palette as default** (96%) — the room is warm but the aurora cycles through cool stops, and the cool-vein in the marble is the only structural cool color in the interior. - Avoided **card-grid** (80%), **centered hero** (80%), **full-bleed marketing layouts** (92%) — replaced with a six-plane seated diorama. - Avoided **mono typography as primary** (96%) — JetBrains Mono is used only for tiny captions, never for body or headlines. - Avoided **pastoral-romantic tone** (30%) — the tone is approachable-casual scholarly, not pastoral.