# Design Language for diplomatic.boo ## Aesthetics and Tone A phantom embassy where spectral diplomats conduct negotiations that the living world ignores -- diplomatic.boo channels ghostly institutional aesthetics: translucent marble halls, flickering fluorescent lights, and forms that materialize and dissolve. The hauntological aesthetic treats diplomacy as something that used to exist -- a ghost of international cooperation that haunts the present. Surfaces are translucent. Text fades in and out. The entire interface feels like a memory trying to reassemble itself. The tone is elegiac-formal: the language of official communiques written by ghosts. Sentences are grammatically perfect but slightly anachronistic. The diplomacy here is real -- it just belongs to another time. ## Layout Motifs and Structure The layout uses a **fading-column** architecture -- a centered column where content sections alternate between visible and nearly invisible. **Fading System:** - Centered column, max-width 680px - Alternating sections at full opacity and reduced opacity (0.4-0.6), creating a rhythm of presence and absence - On scroll/hover, faded sections brighten to full opacity, "manifesting" as the user pays attention - Transitions are slow (2s) and ethereal **Section Flow:** 1. **The Corridor:** Empty-feeling hero with the domain name at very low opacity that slowly manifests. 2. **The Assembly:** Content sections alternating between manifest (clear) and spectral (faded). 3. **The Resolution:** A single section at full opacity -- the one definitive statement. 4. **The Dissolution:** Content fading progressively to invisible toward the page bottom. ## Typography and Palette **Typography:** - **Headlines:** "Spectral" (Google Fonts) -- aptly named, with sharp serifs and ghostly elegance. Used at 2.5rem-4rem, weight 500, letter-spacing: 0.04em. - **Body:** "Spectral" at 1rem, weight 300, line-height 1.8. The light weight reinforces transparency. - **Metadata:** "IBM Plex Mono" at 0.75rem, weight 300. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Marble Dark | Background | #101418 | Primary background | | Ghost Grey | Text primary | #b0b8c0 | Body text | | Spirit White | Emphasis | #e0e8f0 | Headlines, strong text | | Phantom Blue | Accent | #6080a0 | Links, subtle accents | | Ectoplasm | Glow | #8098b020 | Hover/manifest glow | | Void | Deep | #080a0e | Dissolution section | ## Imagery and Motifs **Opacity Pulsing:** Faded sections have a very slow opacity oscillation (0.4 to 0.5, 6s cycle) creating subtle breathing. **Manifestation Glow:** When faded sections transition to full opacity on hover/scroll, they gain a brief soft glow (box-shadow: 0 0 30px #8098b020) that fades after 1s. **Marble Texture:** Background uses a very subtle CSS noise pattern at 2% opacity in cool grey tones. **Progressive Fade:** The final section's content has progressively decreasing opacity per paragraph (1.0, 0.8, 0.6, 0.4, 0.2) creating literal dissolution. ## Prompts for Implementation Build as a haunted institution. The hero manifests over 4s -- the slowest hero load in any design. Faded sections respond to intersection observation by slowly brightening (2s transition). The Assembly creates a rhythm: read a clear section, encounter a ghost, bring it to life by attention, read on. The Resolution section is the only one that is always fully visible -- the anchor of certainty. The Dissolution closing sees content literally disappearing. Everything is slow, contemplative, and slightly unsettling. No bright accents, no fast animations, no commercial elements. ## Uniqueness Notes 1. **Opacity-based presence/absence rhythm:** Alternating visible and faded content creates a unique reading experience of attention-based manifestation. 2. **Progressive dissolution as closing:** Content paragraphs at decreasing opacity create a literal visual ending unique in web design. 3. **Hauntological institutional aesthetic:** Applying ghost/phantom visual language to formal diplomatic content creates uncanny juxtaposition. 4. **4-second hero manifestation:** The slowest hero load is a distinctive patience-demanding opening. Document chosen seed/style: aesthetic: hauntological, layout: fading-column, typography: spectral-serif, palette: marble-grey, patterns: opacity-pulse, imagery: manifestation-glow, motifs: progressive-fade, tone: elegiac-formal Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%)