# Design Language for diplomacy.boo ## Aesthetics and Tone A haunted-house diplomatic summit where ghostly negotiations play out in spectral light -- diplomacy.boo renders as a paranormal diplomatic encounter: translucent overlapping panels drift across a dark field, text appears and disappears like spirits manifesting, and the entire interface has the eerie calm of a seance conducted by skilled diplomats. The supernatural aesthetic channels "boo" literally: diplomatic communications that appear, flicker, and vanish. Transparency and layering are not just design choices -- they are the medium through which ghostly diplomatic messages reach the living. The tone is mysterious-diplomatic: measured and formal, but with unsettling undertones. Sentences are complete and proper, yet something feels not quite right. The diplomacy is real; the diplomats may not be. Visual references: the translucent layering of Olafur Eliasson's light installations; a fogged mirror revealing written messages; Victorian spirit photography where transparent figures appear in formal settings; diplomatic cables printed on onion-skin paper. ## Layout Motifs and Structure The layout uses a **floating-panel** architecture -- translucent content panels that overlap and drift, creating a ghostly layered composition. **Floating System:** - Content panels are absolutely positioned within a relative container - Panels overlap by 10-20% of their area, with transparency (background: rgba colors at 0.85 opacity) allowing underlying panels to show through - A subtle CSS animation (translateY: 0 to -4px and back, 8s ease-in-out infinite) gives panels a floating/hovering quality - Panels have no borders but use a very subtle box-shadow (0 0 40px rgba(0,0,0,0.3)) **Section Flow:** 1. **The Summoning:** Hero -- dark void with the domain name appearing character by character, each character at slightly different opacity (0.6-1.0), creating a flickering manifestation. 2. **The Gathering:** Multiple overlapping panels drift into the viewport from different directions, each containing a diplomatic concept. They settle into a loose composition. 3. **The Seance:** A centered section where panels stack directly on top of each other with varying opacity, creating a palimpsest of diplomatic text. 4. **The Dispersal:** Panels drift apart and fade as the user scrolls, leaving only the void. ## Typography and Palette **Typography:** - **Headlines:** "Spectral" (Google Fonts) -- the name alone qualifies it, but more importantly its high-contrast serif with sharp details evokes both formality and the supernatural. Used at 2rem-4rem, weight 600, letter-spacing: 0.03em, line-height 1.25. - **Body:** "Spectral" at 1rem, weight 400, line-height 1.75. Single-family for ghostly consistency. - **Whispers:** "Spectral" italic at 0.85rem, weight 200, for secondary/atmospheric text. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void | Background | #080810 | Primary background | | Ectoplasm | Primary | #a0b8d0 | Primary text, panel tint | | Ghost White | Light | #e0e8f0 | Headlines, emphasis | | Phantom Blue | Panel BG | #182030 | Panel backgrounds (at 85% opacity) | | Spirit Green | Accent | #60a080 | Links, manifestation glow | | Séance Purple | Secondary | #6050a0 | Secondary accents | | Fade Grey | Muted | #506070 | Fading/dispersing text | | Manifestation | Glow | #a0b8d040 | Glow effects | ## Imagery and Motifs **Translucent Overlapping Panels:** Content containers use background: rgba(24, 32, 48, 0.85), allowing whatever lies beneath to bleed through. Where panels overlap, the combined opacity creates darker zones -- visual echoes. **Ghost-Float Animation:** Each panel has a unique slow float: CSS animation with translateY oscillating 2-6px over 6-10s, each panel at a different phase (animation-delay), creating an asynchronous drifting field. **Manifestation Text Effect:** Headlines appear with a CSS animation: opacity oscillating between 0.7 and 1.0 at irregular intervals (achieved via multi-step keyframes), simulating spectral flickering. **Ectoplasmic Glow:** Key elements have a diffuse glow: text-shadow: 0 0 20px #a0b8d040 and box-shadow: 0 0 40px #a0b8d020 on panels, creating the soft luminescence of ghostly apparitions. **Palimpsest Text Stacking:** In the Seance section, multiple text blocks at different opacities (0.3, 0.5, 0.7, 1.0) stack on the same position, creating a readable top layer with ghostly echoes beneath. ## Prompts for Implementation Build as a haunted diplomatic encounter. The Summoning hero starts in total void, then the domain name manifests: each character appears independently (CSS animation per character, staggered 150ms) at varying opacities, then settles to full. The Gathering panels drift in from edges (different directions per panel, translateX and translateY from off-screen to final position, 2-3s ease-out) and begin their ambient float animation. Panel overlaps create visual depth through transparency interaction. The Seance section should feel like reading a document through several layers of onion-skin paper -- the top layer is clear, lower layers are ghostly echoes. The Dispersal reverses the Gathering: on scroll past the final content, panels drift apart and fade (opacity to 0, translate outward), leaving the void. Throughout, the ectoplasmic glow and flicker effects maintain the supernatural atmosphere. No bright colors, no solid backgrounds, no hard edges. Everything is translucent, floating, slightly uncertain. No CTAs, pricing, or commercial elements. ## Uniqueness Notes 1. **Floating translucent panel architecture:** Content panels that overlap with controlled transparency create visual depth through opacity interaction, unique in the collection. 2. **Ghost-float ambient animation:** Each panel drifting independently at different speeds creates an ethereal field of moving content. 3. **Spectral text manifestation:** Characters appearing at varying opacities creates a believable "apparition" loading effect. 4. **Palimpsest as information design:** Stacking text at different opacities as a design choice (not a bug) references historical writing practices while creating visual atmosphere. Document chosen seed/style: aesthetic: supernatural, layout: floating-panel, typography: spectral-serif, palette: ectoplasm, patterns: ghost-float, imagery: translucent-overlap, motifs: manifestation-flicker, tone: mysterious-diplomatic Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)