# Design Language for diplomacy.quest ## Aesthetics and Tone diplomacy.quest adopts a corporate aesthetic -- the polished, trustworthy visual language of international organizations and think tanks -- but with a quest-game narrative overlay. Imagine a NATO briefing room redesigned by a board-game company: chrome-metallic surfaces reflect strategic maps, line illustrations explain diplomatic protocols as quest objectives, and crystalline display cases hold diplomatic artifacts. The corporate aesthetic provides credibility and structure, while the "quest" suffix injects adventure and discovery. The visual language draws from McKinsey presentation design, the clean infographics of The Economist, and the chrome interfaces of Bloomberg terminals. The palette is chrome-metallic -- silvers, greys, and bright white with sharp blue accents. Crystalline motifs (faceted gem shapes, prismatic light) add visual interest to the otherwise restrained corporate surfaces. The tone is conversational, making institutional content feel like a colleague explaining strategy over coffee rather than a formal policy document. ## Layout Motifs and Structure The layout uses a **bento-box** structure -- content is organized in a grid of variously-sized rectangular compartments, like a Japanese bento or a dashboard of strategic intelligence modules. **Primary structure:** - **Mission briefing (100vh):** A chrome-metallic gradient background (light grey to silver). The title "diplomacy.quest" is set in clean monospace type at the upper-left of the viewport. A large line illustration (SVG, diplomatic handshake or world-map outline in thin black strokes) occupies the center-right. A horizontal "mission status bar" (4px height, chrome gradient) runs across the bottom. - **Quest dashboard bento (variable, ~350vh):** A CSS Grid with template areas creating 8-12 compartments. Compartments contain: "Quest objectives" (text with checkmark icons), "Regional analysis" (line-illustration maps), "Key figures" (portrait-style line illustrations), and "Intelligence reports" (longer-form text). Each compartment has a 1px border in chrome grey, white background, and generous internal padding. - **Crystalline archive (100vh):** A section featuring prismatic/crystalline shapes (CSS clip-path hexagons and polygons with gradient fills creating faceted-gem effects). Each crystal contains or frames a piece of diplomatic wisdom or historical fact. The shapes catch virtual light (linear-gradient positioned to simulate a light source). - **Line illustration gallery (80vh):** A horizontal scroll row of detailed line illustrations (SVG) depicting diplomatic scenarios -- conference tables, handshakes, treaty signings, UN Assembly. Each illustration is monochrome (thin black lines on white) in a consistent style. - **Debriefing footer (50vh):** A minimal chrome surface with "Quest Complete" messaging and credits. The mission status bar from the hero reappears, now fully filled. **Spacing philosophy:** Bento compartments have 1px borders and 0 gap (the border IS the divider). Internal padding is 24px per compartment. Between major sections, 48px of white space. The overall density is higher than typical, reflecting the corporate dashboard inspiration. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Space Mono" (Google Fonts) -- a monospaced font that brings technical precision to the corporate layout. Weight 700 for headlines. Size clamp(24px, 3vw, 44px). Letter-spacing: 0.02em. - **Body text:** "Inter" (Google Fonts) -- the definitive interface font, ideal for the dashboard-like bento layout. Weight 400 for body, 600 for emphasis. Size clamp(14px, 1vw, 16px). Line-height: 1.7. - **Data labels:** "JetBrains Mono" (Google Fonts) -- for data points, quest identifiers, and status codes. Weight 400, size 12px, letter-spacing: 0.04em. **Palette:** - **Chrome Light** `#F4F4F8` -- primary background, bright chrome white - **Steel Dark** `#2A2A3A` -- primary text - **Chrome Mid** `#D0D0DC` -- borders, dividers, and secondary elements - **Signal Blue** `#2060C0` -- accent for interactive elements, links, and quest markers - **Success Green** `#30A060` -- completed quest indicators - **Crystal Prism** `#E0E8FF` -- crystalline element fill, a pale blue-white ## Imagery and Motifs **Core visual motifs:** - **Line illustrations:** The primary visual system. Clean, single-weight (1.5px) SVG line drawings depicting diplomatic scenes, world maps, and concept diagrams. All illustrations use Steel Dark strokes on white backgrounds with no fills. The consistent line weight and monochrome palette create visual unity across the bento compartments. - **Crystalline shapes:** CSS clip-path hexagons and pentagons with multi-stop linear-gradients (Chrome Light to Crystal Prism to white) creating faceted, gem-like surfaces. Small "light catch" highlights (a 4px white ellipse positioned with absolute positioning) simulate prismatic reflections. These shapes are used as decorative frames and section accents. - **Bounce-enter compartment reveals:** Bento compartments enter the viewport with bounce-enter animations (scale 0.95 to 1 with cubic-bezier overshoot, combined with opacity 0 to 1). The bounce adds a game-like quality to the corporate layout, reinforcing the "quest" theme. - **Mission status bars:** Thin horizontal bars (4px height) with chrome-metallic gradient fills (linear-gradient from Chrome Mid through white to Chrome Mid). These appear at section boundaries and in the hero/footer as progress indicators. They can be partially filled with Signal Blue to indicate quest progress. - **Quest checkpoint dots:** Small circles (8px) at key content points (beginning and end of bento sections, between gallery items). Filled with Success Green when the section has been scrolled past, creating a visual completion tracker. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like engaging with a strategic briefing that is also a quest adventure. The bento dashboard provides mission intelligence, the crystalline archive holds valuable insights, and the line illustrations map the diplomatic landscape. **Opening animation sequence:** - Frame 0-200ms: Chrome Light background. - Frame 200-600ms: The mission status bar draws itself from left to right across the bottom (width 0 to 100vw). - Frame 600-1200ms: "diplomacy.quest" types itself in Space Mono (character-by-character reveal using CSS steps()). - Frame 1200-1800ms: The line illustration in the center-right draws its strokes (SVG stroke-dashoffset animation). - Frame 1800-2400ms: The first row of bento compartments bounces in (staggered 100ms per compartment). **Scroll behavior:** Bento compartments bounce-enter as they reach 25% viewport intersection. Crystalline shapes in the archive rotate slightly as the section scrolls (rotateY linked to scroll position at 0.02deg per pixel). The line illustration gallery scrolls horizontally within its container (overflow-x: scroll, scroll-snap-type: x mandatory). Quest checkpoint dots fill with Success Green as their corresponding sections pass the viewport midpoint. **Interaction details:** - Bento compartments respond to hover with a Signal Blue border highlight (border-color transitions from Chrome Mid to Signal Blue over 200ms). - Crystalline shapes simulate light reflection on hover (the gradient angle rotates by 15deg). - Line illustrations respond to hover with a subtle blue tint (filter: hue-rotate(200deg) at 5% blend). - Quest checkpoint dots pulse briefly (scale 1 to 1.3 to 1) when they transition to filled state. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Corporate-quest hybrid identity:** Merging the polished corporate aesthetic with quest-game mechanics (progress bars, checkpoints, mission objectives) creates a unique design language that makes institutional content feel like a strategic adventure. 2. **Bento-box as intelligence dashboard:** Using the bento-box layout pattern to create a diplomatic intelligence dashboard (with compartments for objectives, analysis, figures, and reports) gives the pattern a specific functional context unique to this design. 3. **Crystalline archive as prismatic knowledge repository:** The faceted-gem CSS shapes used to frame diplomatic insights create a visual metaphor for the multi-faceted nature of diplomatic knowledge -- each facet reveals a different angle on the same truth. 4. **Line illustration consistency system:** The monochrome, single-weight line illustration system used across all visual elements creates a distinctive visual unity. The diplomatic scenes rendered in this consistent style feel like pages from a strategic field manual. **Chosen seed/style:** aesthetic: corporate, layout: bento-box, typography: mono, palette: chrome-metallic, patterns: bounce-enter, imagery: line-illustration, motifs: crystalline, tone: conversational **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns as primary. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mysterious-moody (74%) tone. Used bento-box (5%) layout, chrome-metallic (1%) palette, and crystalline (12%) motifs -- less common selections.