# Design Language for diplomatic.day ## Aesthetics and Tone `diplomatic.day` is the imagined chamber of a 19th-century ambassador who has been tagged by a 21st-century muralist — a collision between the weight of gilt-framed protocol and the raw insurgency of street paint. The aesthetic is **graffiti-opulent**: not street art placed inside a museum, but a consulate wall where someone has painted over the damask wallpaper with a wide-nozzle spray can, and the diplomat chose to leave it there because they recognized that the shapes were beautiful. The mood is **formal gravity disrupted by aerosol**. Heavy muted grounds — slate-taupe, desaturated olive, ashen cream — carry the gravitas of official correspondence. Over that ground, organic leaf forms and geometric-abstract figures emerge as if stencilled or sprayed: thick-edged, slightly oversprayed at the margins, the drip barely restrained. The contrast between institutional weight and insurgent mark is the site's single thesis. Tone is **opulent-grand**: sentences that begin with a subordinate clause, structures that breathe slowly, a page that never rushes. This is not a minimalist site — it is a maximalist site that has been **muted deliberately**, the way a diplomat lowers their voice to command more attention. Every surface carries texture and intention. ## Layout Motifs and Structure The structural metaphor is a **grand hall viewed in forced perspective** — the page is one unbroken immersive vertical scroll, no navigation tabs, no modular card grids, no pagination. The visitor descends through the space as through a series of antechambers, each section commanding the full viewport height before releasing the eye downward. **Immersive-scroll architecture:** - Each section occupies exactly `100vh`, with scroll-snap engagement on desktop (CSS `scroll-snap-type: y mandatory`) so that the page clicks into place — the visitor is always fully inside one chamber at a time. - On mobile, snap is relaxed (`scroll-snap-type: y proximity`) to allow graceful reading between snaps. - Horizontal rhythm is an **off-center split**: a narrow left rail (`240px` on desktop, `28vw` on tablet) carries standing labels, section numerals in large sans-grotesk, and decorative leaf motifs. The right body zone (`calc(100% - 240px - 4rem)`) holds the primary text and imagery. This asymmetry echoes the bilateral asymmetry of a diplomatic dispatch — official heading left, content right. - Section transitions use a **threshold architecture**: as a new section enters the viewport, the background color slides in from the bottom edge (not a fade, a physical push), and the section numeral in the left rail draws its underline from left to right before the body text appears. **Spatial logic:** - Zero padding between full-bleed sections — each chamber wall butts directly against the next. - Within a chamber: generous vertical padding (`12vh` top and bottom), text block max-width `64ch`, flush-left. - Large section numerals (`01`, `02`, `03`) in the left rail are set at `clamp(6rem, 10vw, 11rem)`, weight 300 (Light), functioning as architectural column capitals. - Decorative leaf-organic SVG overlays float at `position: absolute` in each section's upper-right and lower-left corners, at 15–25% opacity, scale varying between sections to avoid repetition. ## Typography and Palette **Type system — two families, both from Google Fonts:** - **[Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)** — weights 300 / 400 / 500 / 700. The primary sans-grotesk workhorse. Used for: all body text, section labels, pull-quotes, and the giant left-rail numerals. Space Grotesk's slightly quirky stroke terminals (the angled cuts, the subtly irregular 'a' and 'g') carry just enough personality to feel like something an ambassador's aide would notice. Body size: `clamp(1rem, 1.1vw + 0.5rem, 1.2rem)`, line-height 1.68. - **[Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed)** — weights 400 / 600. Used exclusively for: graffiti-style label overlays (the decorative words sprayed over imagery), section-title overlines, and the domain logotype. Condensed grotesque at large sizes reads like stencil lettering — intentional. **Palette — muted, desaturated, institutional:** | Token | Hex | Use | |---|---|---| | `--plaster` | `#E8E2D9` | Primary background, parchment-adjacent | | `--ash-slate` | `#4A4D52` | Primary text, near-black without coldness | | `--dried-moss` | `#6B7355` | Accent green, leaf motifs, left-rail tints | | `--consulate-taupe` | `#9E9180` | Secondary text, captions, border strokes | | `--tarnished-gilt` | `#B8A46A` | Highlight: underline draws, hover states | | `--deep-chamber` | `#2B2D2F` | Dark sections (section 02, 04): near-black background | | `--spray-white` | `#F4F1EC` | Lightest surface: intro section, quote sections | Six-color palette. No pure black (#000000), no pure white (#ffffff) — every surface retains the slight warmth or coolness of aged institutional material. ## Imagery and Motifs **Imagery is geometric-abstract, spray-treated:** No photographs of faces or places. The visual language is entirely constructed from: 1. **Geometric-abstract panels** — large SVG compositions using rectangles, diagonals, and circles in the palette colors, rendered as if laid down in successive spray passes: the shapes are crisp at center and feathered (via SVG `filter: blur` at 1–2px) toward their edges, as if a stencil slightly lifted off the wall. Each panel is unique to its section. 2. **Leaf-organic silhouettes** — twelve distinct botanically-derived leaf shapes (bay laurel, olive, fig, ginkgo, magnolia, frond) rendered as SVG paths, filled with `--dried-moss` at varying opacities (8%–35%). These float over both light and dark backgrounds, always at `pointer-events: none` so they never interrupt reading. On dark sections they lighten to `--spray-white` at 6%–18% opacity. 3. **Stencil-text overlays** — on three of the five full-viewport sections, a single word in Barlow Condensed at `clamp(8rem, 16vw, 18rem)` is rendered at 4% opacity over the background, rotated 5–12 degrees, functioning as a ghost graffiti layer beneath the content. Words used: `ACCORD`, `PROTOCOL`, `SOVEREIGN`. 4. **Underline-draw motif** — every section title receives an animated underline that draws left-to-right on scroll-enter, using SVG `stroke-dashoffset` animation. The underline is not a thin rule but a **thick brushstroke path** (strokeWidth 4–6px, stroke color `--tarnished-gilt`) with slight calligraphic width variation achieved via a path that is not a perfect horizontal line but traces a gentle 2px amplitude wave. **No gradients anywhere.** All color transitions happen as flat color blocks abutting directly, which reads as the plaster-and-spray language of a tagged wall rather than the soft digital gradients that saturate the rest of the web. ## Prompts for Implementation Treat `diplomatic.day` as **five sovereign chambers** in one continuous grand hall, each chamber full-viewport-height, entered sequentially by downward scroll with snap engagement. The page has no navigation menu, no footer links, no CTA buttons — only the five chambers and a closing seal mark. **Chamber structure:** - **Chamber I — Arrival** (`--spray-white` ground): The domain name `diplomatic.day` set in Space Grotesk 300 at `clamp(4rem, 8vw, 9rem)`, letter-spacing `-0.03em`, centered in the body zone. Below it, three lines of body text introducing the concept in measured language. The left rail shows `01` in its giant numeral. A single large geometric-abstract SVG occupies the upper-right quadrant, partially cropped by the viewport edge. - **Chamber II — The Hall** (`--deep-chamber` ground): Dark background. A stencil-text overlay of `ACCORD` at 4% opacity. A spray-treated geometric composition in `--dried-moss` and `--tarnished-gilt` fills the left two-thirds of the section behind the text. Body text in `--spray-white`. Left rail numeral `02` in `--dried-moss`. - **Chamber III — The Dispatch** (`--plaster` ground): The longest text chamber — two paragraphs of body text plus a pull-quote in Space Grotesk 500 at `1.5x` body size, left-border-accented with a `--tarnished-gilt` 4px vertical rule. Leaf-organic silhouettes at upper-right. Underline-draw animation on section title. - **Chamber IV — The Protocol** (`--deep-chamber` ground): `PROTOCOL` ghost overlay. A grid of four geometric-abstract SVG panels arranged 2×2, each panel a distinct composition in two tones, occupying the right body zone. Text is minimal — label-only, left rail numeral `04`. - **Chamber V — The Seal** (`--ash-slate` ground): Closing chamber. A single centered circular SVG seal mark (geometric-abstract, not heraldic clip-art — concentric circles with leaf-organic forms radiating from center, in `--tarnished-gilt` strokes). Below it, the domain name again at small size, and nothing else. **Animation specifics:** - Scroll-enter: Each chamber triggers a `IntersectionObserver` at 10% threshold. - Section numerals in left rail: fade-in with a 0.4s delay after chamber enters. - Section titles: underline-draw SVG animation, 0.8s duration, `ease-in-out`, starts 0.2s after chamber enters. - Geometric-abstract panels: stagger-reveal — each shape fades in from 0% to its final opacity with 0.15s stagger between shapes. - Ghost stencil words: always visible (no animation) — they are background texture, not interactive elements. - Leaf silhouettes: slow parallax drift — on desktop scroll, they translate vertically at `0.4 * scrollDelta` within their containing section (clamped so they never exit the section boundary). **CSS architecture:** - CSS custom properties for all palette tokens. - `scroll-snap-type: y mandatory` on `` for desktop (`@media (min-width: 1024px)`), `proximity` for tablet, none for mobile. - No CSS frameworks — vanilla CSS, BEM-adjacent class naming. - SVG elements inlined in HTML for animation control (no `` tags for SVGs). - No external icon libraries. **AVOID:** hero images with human faces; gradient backgrounds; card grids; pricing blocks; stat counters; scroll progress bars; hamburger menus; anything that reads as a SaaS landing page. ## Uniqueness Notes **Differentiators from the 95-design corpus:** 1. **Graffiti aesthetic at 3% corpus frequency, but inverted against an opulent-grand tone at 1%.** Every other graffiti design in the corpus pairs the aesthetic with energetic, raw-authentic, or edgy-rebellious tones. `diplomatic.day` is the only design treating graffiti as a language of authority rather than insurgency — the muralist has tagged the consulate wall and the ambassador kept it because it was sovereign. 2. **Scroll-snap full-viewport chambers as the primary structure, distinct from parallax-sections (91%) and full-bleed (80%).** The immersive-scroll with hard snap creates a deliberate, ceremonial pacing — the visitor cannot skim or scan, they must inhabit each chamber fully before descending. No other design in the reference corpus used scroll-snap as the architectural spine. 3. **Muted palette (4% corpus frequency) with zero gradients and zero pure colors.** The corpus is dominated by warm (dominant) and gradient palettes. `diplomatic.day` uses six flat, desaturated institutional tones and explicitly prohibits gradients — every color transition is a hard abutment. The palette reads like aged plaster and tarnished metal, not digital design. 4. **Geometric-abstract imagery (3% corpus frequency) rendered as spray-stencil SVGs.** Photography dominates imagery at 93%. This design uses zero photographs. All imagery is constructed SVG, designed to look as if sprayed through a stencil — feathered edges, flat fills, deliberate compositional asymmetry. **Chosen seed:** aesthetic: graffiti, layout: immersive-scroll, typography: sans-grotesk, palette: muted, patterns: underline-draw, imagery: geometric-abstract, motifs: leaf-organic, tone: opulent-grand **Avoided patterns (overused in corpus):** parallax (91% — avoided entirely), centered layout (93% — using asymmetric left-rail split instead), photography imagery (93% — zero photographs), mono typography (91% — using sans-grotesk instead), hand-drawn aesthetic (76% — using graffiti instead), full-bleed backgrounds (80% — using sectioned chambers instead).