# Design Language for diplomacy.quest ## Aesthetics and Tone diplomacy.quest is a **neomorphic reliquary of statecraft** — a digital embassy where every surface breathes like ivory pressed into warm plaster, shadows whisper of velvet-curtained anterooms, and the air carries the scent of old wax seals and crushed violet. The interface is simultaneously tactile and intangible: surfaces appear to be carved from a single slab of creamy travertine, with depth achieved not through color contrast but through the soft push-pull of inner light. The mood is **mysterious-moody** in the tradition of Viennese *Biedermeier* diplomacy — hushed salons, folded letters on inlaid desks, agreements struck in candlelight. Nothing announces itself. Each element is an emissary, not a herald. The palette is custard-ivory and warm chalk, punctuated by deep plum and antique brass — the colors of a Foreign Ministry vestibule in 1887. Surfaces cast the gentlest half-shadows, as though the only light source is a Murano glass chandelier two rooms away. Inspiration sources: Luigi Ghirri's soft-focus photographs of Italian interiors, the pale stone corridors of the Quai d'Orsay, 18th-century French diplomatic correspondence sealed in pomegranate-red wax, the neomorphic softness of Alexandros Tuch's UI explorations filtered through marble and botanical motifs. ## Layout Motifs and Structure **Modular-blocks composition** is the structural foundation — a rare, underused approach that treats each section as an autonomous, physically-thick slab stacked in a deliberate mosaic. Unlike conventional grid-or-full-bleed designs, each module is a self-contained embassy "room," with its own micro-atmosphere, its own light source, its own botanical ornament corner. **Spatial logic:** - The page is divided into a **non-uniform 7-block mosaic** on desktop: three wide horizontal bands containing two, three, and two columns respectively. No two adjacent blocks share identical proportions. The ratio series uses 5:3:8 (Fibonacci-derived) horizontally and 2:3:2 vertically. - Each block sits **2.4rem inset** from the browser edge — the blocks themselves float, never touching the viewport border, surrounded by the background's creamy plaster field. - **Neomorphic block styling:** every block is the same background hue as the body (`#F2EBE0`), elevated via CSS box-shadow using a dual-layer soft technique: `box-shadow: 8px 8px 20px #D4C9B5, -8px -8px 20px #FFFFFF` — pushing and pulling from the same surface. - **3D tilt on hover:** each modular block responds to pointer proximity with a `perspective(900px) rotateX()` and `rotateY()` tilt using the Vanilla Tilt library pattern, capped at ±6°. Combined with the neomorphic shadow, the tilt creates a tactile three-dimensionality as if the block were a stone tablet being lifted. - **Botanical corner ornaments** hand-drawn in SVG occupy the top-right and bottom-left of every block — a different plant species per block (peony, wisteria, bay laurel, iris, olive branch, thistle, pomegranate). - Mobile collapses to single-column stacked blocks with the same neomorphic styling, tilt disabled on touch. **Structural sequence (7 rooms):** 1. **Antechamber** — full-width masthead block. Domain wordmark in italic serif, centered-left. Botanical motif: peony vine across the top border. 2. **The Brief** — two-column block (5:3 split): left holds a pull-quote in large italic; right holds a vertical marble-texture decorative panel. 3. **The Conference Table** — three-column block with nested neomorphic inset panels, each holding a typographic statement. 4. **The Cypher Room** — wide dark-inset block (single column, deep plum background `#3D1A45`) with reversed light text — the only "dark" room in the embassy. 5. **The Garden** — two-column block featuring botanical SVG illustrations (iris, wisteria) as the primary visual. 6. **The Archive** — three-column block in micro text, organized like handwritten diplomatic dispatches. 7. **The Seal** — footer block with wax-seal motif SVG, minimal copyright, and a single decorative brass rule. ## Typography and Palette **Typography (Google Fonts only — serif-classic family-first):** - **Primary display (wordmark and H1):** `Cormorant Garamond` (Google Fonts, styles: Light Italic 300, Regular 400, SemiBold 600). Set the wordmark at `clamp(4.2rem, 9vw, 8rem)`, weight 300, italic. The long, refined strokes of Cormorant evoke 18th-century diplomatic correspondence. All H1s: weight 400, italic, `clamp(2.8rem, 5vw, 4.8rem)`. - **Secondary serif (body and pull-quotes):** `IM Fell English` (Google Fonts, Regular + Italic). Body text at 18px / 30px line-height. Pull-quotes at `clamp(1.6rem, 3.2vw, 2.8rem)` italic — IM Fell's deliberate irregularity suggests hand-set type. Letter-spacing for body: `+0.02em`. - **Auxiliary sans (captions, archive micro-text):** `Libre Baskerville` (Google Fonts, Regular 400, Bold 700). Used at 13px for captions, 11px for the archive dispatches, weight 400. Provides legible contrast against the ornate serifs without breaking the period atmosphere. - **All-caps label text:** `Cormorant SC` (Cormorant Small Caps variant on Google Fonts). Used for section labels at 12px, letter-spacing `+0.18em`, weight 600. **Palette (hex values):** | Role | Name | Hex | |------|------|-----| | Surface / body background | Travertine cream | `#F2EBE0` | | Block face (neomorphic base) | Ivory plaster | `#EDE4D5` | | Shadow dark layer | Warm stone | `#D4C9B5` | | Shadow light layer | Soft chalk | `#FFFFFF` | | Primary text | Umber ink | `#2E2118` | | Accent / headings | Antique brass | `#8C6A3F` | | Dark room background | Deep plum | `#3D1A45` | | Dark room text | Pale parchment | `#F7F0E8` | | Botanical line color | Sage verdigris | `#6B7F5E` | | Wax seal accent | Pomegranate red | `#9E2B25` | | Marble vein highlights | Cool silver-grey | `#C8C0BA` | **CSS custom properties:** ```css --cream: #F2EBE0; --ivory: #EDE4D5; --stone: #D4C9B5; --chalk: #FFFFFF; --ink: #2E2118; --brass: #8C6A3F; --plum: #3D1A45; --parchment: #F7F0E8; --sage: #6B7F5E; --seal: #9E2B25; --marble: #C8C0BA; ``` ## Imagery and Motifs **Marble texture** is the dominant visual material — not photographic marble, but **SVG-generated marble veining** using `feTurbulence` and `feDisplacementMap` filters applied to a light ivory base. The marble panels appear in: the right column of "The Brief" block, thin 4px ruled dividers between major sections, and the background of the Cypher Room block (dark plum with displaced marble overlay at 12% opacity). **Botanical-floral SVG illustrations** are the signature decorative element. Every block corner carries a botanical motif in a consistent hand-drawn line style: single-weight strokes at 1.2px in sage verdigris `#6B7F5E`, no fills. Species assigned per block: - Antechamber: Peony with open bloom (top-right), closed bud (bottom-left) - The Brief: Wisteria clusters cascading down the right edge - Conference Table: Bay laurel wreath fragment framing each sub-panel - Cypher Room: Belladonna (reversed to parchment `#F7F0E8`) — intentionally ominous - The Garden: Iris flowers with full botanical detail as primary art - The Archive: Thistle rosette as micro-ornament - The Seal: Pomegranate split open, flanking the wax seal SVG **Wax seal motif:** A custom SVG circle (96px diameter) with the letters "D.Q." in Cormorant SC, surrounded by a starburst-edge pattern, filled in `#9E2B25` with a subtle radial gradient from `#C23A33` at center to `#7A1E1A` at edge. This anchors the footer and is used as a favicon. **Marble-vein dividers:** Horizontal ruled lines generated via `` with a `feTurbulence baseFrequency="0.018" numOctaves="4"` pattern, tinted in `#C8C0BA`, height 2px, full-width. Appear between every block and as the top/bottom border of The Cypher Room. **No photography.** No icons from libraries. Only the custom SVGs described above. ## Prompts for Implementation Build diplomacy.quest as a **neomorphic diplomatic cabinet** — a single HTML page of 7 modular blocks, each physically present, each carrying botanical life in its corners, all floating on a field of travertine cream. **Global setup:** ```css body { background: #F2EBE0; font-family: 'IM Fell English', serif; color: #2E2118; padding: 2.4rem; box-sizing: border-box; } .block { background: #EDE4D5; border-radius: 18px; box-shadow: 9px 9px 22px #D4C9B5, -9px -9px 22px #FFFFFF; padding: clamp(2rem, 4vw, 4rem); position: relative; overflow: hidden; transition: box-shadow 0.3s ease, transform 0.3s ease; } ``` **Tilt-3D interaction (vanilla JS, no library required):** ```js document.querySelectorAll('.block').forEach(block => { block.addEventListener('mousemove', (e) => { const rect = block.getBoundingClientRect(); const x = (e.clientX - rect.left) / rect.width - 0.5; const y = (e.clientY - rect.top) / rect.height - 0.5; block.style.transform = `perspective(900px) rotateX(${-y * 6}deg) rotateY(${x * 6}deg)`; }); block.addEventListener('mouseleave', () => { block.style.transform = 'perspective(900px) rotateX(0deg) rotateY(0deg)'; }); }); ``` **SVG marble texture (inline, reusable ``):** ```svg ``` **Block assembly sequence:** 1. **Antechamber block** — full width, `min-height: 38vh`. Wordmark `diplomacy.quest` in Cormorant Garamond Light Italic at `clamp(4rem, 8.5vw, 7.6rem)`. Below: `IM Fell English` italic tagline — *"The art of saying nothing so elegantly it means everything."* — at `1.8rem`. Peony SVG positioned `top: 0; right: 0; width: 180px; height: 180px; opacity: 0.55`. On load, the wordmark fades in over 1.2s (`opacity 0 → 1`) and the peony draws itself via `stroke-dashoffset` animation over 2.4s. 2. **The Brief block** — CSS grid `5fr 3fr` gap of `2rem`. Left: a pull-quote in `IM Fell English` italic at `clamp(1.8rem, 3.5vw, 3rem)` in antique brass `#8C6A3F` with a left-border rule of 3px solid `#8C6A3F` and `padding-left: 1.6rem`. Right: a vertical panel with the marble SVG filter applied at full height, `border-radius: 10px`, topped with wisteria SVG cascading 60% down the right edge. 3. **Conference Table block** — three equal columns. Each column is a **nested neomorphic inset panel** (`box-shadow: inset 5px 5px 12px #D4C9B5, inset -5px -5px 12px #FFFFFF`) holding a typographic statement in Cormorant Garamond at `2rem`, weight 600. Bay laurel branch SVG frames each panel's upper-right corner. 4. **Cypher Room block** — full width, `background: #3D1A45`, `border-radius: 18px`, `box-shadow: 9px 9px 22px #1E0D26, -9px -9px 22px #5B2E6E`. Interior text in `#F7F0E8`, Cormorant Garamond italic. Belladonna botanical SVG (reversed, white) floats at bottom-right. A marble-vein SVG divider (tinted `#6B4E8C` at 18% opacity) runs horizontally through the middle. Scroll-triggered reveal: block slides in 40px from below as it enters the viewport. 5. **The Garden block** — two equal columns. Left: Iris botanical illustration (SVG, fully detailed, `width: 100%; max-width: 340px`), drawn in sage `#6B7F5E` line-art, animating the stroke-dash on scroll-enter. Right: typographic content in `IM Fell English`, body copy about diplomacy with a thistle rosette ornament centered beneath. 6. **The Archive block** — three columns, each styled as a handwritten diplomatic dispatch: `border: 1.5px solid #C8C0BA`, `padding: 1.6rem`, `border-radius: 10px`, text in `Libre Baskerville` 13px. Each column header in `Cormorant SC` all-caps at 11px, letter-spacing `0.18em`, in brass `#8C6A3F`. Thistle micro-ornament SVG (24px) at the top-left of each column. 7. **The Seal block** — full-width footer, `min-height: 18vh`, centered content. Wax seal SVG (96px) centered, followed by `Cormorant SC` text `DIPLOMACY.QUEST · MMXXVI` at 14px, letter-spacing `0.22em`. Flanking pomegranate SVGs at 64px each. A marble-vein divider rule spans full width above the footer block. **Animation budget:** - Wordmark fade-in: 1.2s `ease-out` on page load - Botanical stroke-draw: 2.4s `ease-in-out` using `stroke-dasharray` / `stroke-dashoffset` on `.block:hover` or scroll-enter - Block tilt: 0.3s cubic-bezier on `mousemove`, 0.5s ease-out on `mouseleave` - Cypher Room scroll reveal: `translate(0, 40px) → translate(0, 0)` over 0.8s on IntersectionObserver trigger - Garden iris stroke-draw: triggered on IntersectionObserver, 3.2s total **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero-with-button patterns, icon libraries, neon colors, hard drop shadows, photography. ## Uniqueness Notes 1. **Neomorphic modular-blocks combination (registry first).** Neomorphism appears in only 4% of designs and always in app-UI contexts (form fields, card surfaces). Using it as the structural grammar for a modular-block mosaic — with each macro block neomorphically raised from the page — is uncharted in the registry. The dual-layer `box-shadow` trick at the section level (not just widget level) is original. 2. **SVG-generated marble as a design material rather than accent.** Marble-texture appears in 4% of designs as a photographic import. diplomacy.quest generates marble entirely in SVG via `feTurbulence` filters, making it resolution-independent, styleable in CSS, and animation-capable. The marble panel in "The Brief" block and the vein-divider system are unique fabrications. 3. **Tilt-3D applied to neomorphic surfaces.** Tilt-3D (16% of registry) almost always appears on flat cards or image containers. Here, the neomorphic shadow geometry *transforms* as the block tilts — the soft shadow appears to migrate across the surface realistically because the `box-shadow` values are recalculated as a CSS transform occurs. This creates an illusion of true physical depth unmatched in any current design. 4. **Botanical species as architectural room identifiers.** In 7% of designs, botanical motifs are decorative wallpaper. Here, each botanical species (peony, wisteria, belladonna, iris, thistle, pomegranate) is assigned to a specific "room" of the embassy with deliberate symbolic meaning — belladonna for the Cypher Room (poison/secrecy), pomegranate for The Seal (eternal covenant). The symbolism is embedded in the design grammar. 5. **Chosen seed:** `aesthetic: neomorphism, layout: modular-blocks, typography: serif-classic, palette: creamy-pastel, patterns: tilt-3d, imagery: marble-texture, motifs: floral-botanical, tone: mysterious-moody` 6. **Avoided overused patterns from frequency analysis:** hand-drawn (76%), editorial (50%), terminal (32%), glassmorphism (30%), centered layout (93%), full-bleed (80%), warm gradient palette (87%), scroll-reveal (37%), parallax (15%). diplomacy.quest uses none of these dominant patterns as its primary gesture.