# Design Language for diplomacy.quest ## Aesthetics and Tone A strategic board-game interface where diplomacy unfolds as an interactive quest -- diplomacy.quest renders as a grand strategy game table: parchment maps, faction tokens, and turn-based mechanics visualized through warm earth tones and tactical grid overlays. The strategy-game aesthetic transforms diplomatic concepts into playable scenarios where the user feels like a participant, not a reader. The tone is strategist-engaging: the voice of a game designer who is also a political scientist. Complex diplomatic situations are explained as game mechanics -- alliances as resources, treaties as action cards, negotiations as turn sequences. ## Layout Motifs and Structure The layout uses a **game-board** architecture -- a central map/board area surrounded by information panels. **Board System:** - Central game board area (60% viewport width, 70vh), containing a stylized map/diagram - Left panel (20%): faction/concept sidebar with token-style indicators - Right panel (20%): action log / quest progress sidebar - Below the board: quest description cards in a horizontal scrollable row **Section Flow:** 1. **The Table:** Hero showing the full game board layout with "DIPLOMACY.QUEST" as the game title. 2. **The Map:** Central strategic map with interactive hover regions. 3. **The Quests:** Horizontally scrolling quest cards below the board. 4. **The Endgame:** Closing section with summary and reflection. ## Typography and Palette **Typography:** - **Headlines:** "Cinzel" (Google Fonts) -- regal, strategic authority. Used at 2rem-4rem, weight 700, letter-spacing: 0.04em. - **Body:** "Merriweather" (Google Fonts) -- warm, readable serif. Used at 0.95rem, weight 400, line-height 1.7. - **UI/Labels:** "Space Mono" (Google Fonts) -- for game-system text. Used at 0.75rem, weight 400, all-caps. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Walnut | Board base | #2a1e14 | Primary background | | Parchment | Map surface | #f0e8d0 | Map/board surface | | Faction Red | Accent 1 | #b83030 | Faction indicators | | Faction Blue | Accent 2 | #3050a0 | Faction indicators | | Faction Gold | Accent 3 | #c8a030 | Highlights, borders | | Forest Green | Accent 4 | #306830 | Territory indicators | | Ink Brown | Text | #3a2a1a | Text on parchment | ## Imagery and Motifs **Parchment Map Surface:** The central board uses a parchment-colored background with CSS noise texture and subtle fold-line marks (faint horizontal/vertical lines at thirds). **Faction Tokens:** Small colored circles (20px) with 2px borders in faction colors serve as strategic markers/indicators. **Grid Overlay:** A faint hex or square grid (1px lines at 15% opacity) overlays the map surface, suggesting strategic movement spaces. **Quest Cards:** Horizontally scrollable cards with parchment background, 1px Faction Gold borders, and quest-title/description format. ## Prompts for Implementation Build as a strategic game table. The hero loads with the board frame drawing itself (border animation), then the parchment map surface fading in, then faction tokens appearing at key positions. The sidebar panels provide contextual information as the user interacts with the map area. Quest cards scroll horizontally below the board with a slight overlap. Hovering map regions highlights related tokens and quest connections. The overall experience should feel like sitting down at a well-prepared strategy game. No modern web conventions -- this is a game table, not a website. ## Uniqueness Notes 1. **Strategy game-board as web layout:** The central board with surrounding panels creates a unique three-panel game-table interface. 2. **Parchment map as primary content surface:** Using textured parchment as the main content area creates a tactile, historical game feel. 3. **Faction tokens as visual indicators:** Color-coded circular tokens provide a game-specific indicator system. 4. **Horizontal quest card scroll:** Below-the-board scrolling quest cards create a card-game mechanic within the web layout. Document chosen seed/style: aesthetic: strategy-game, layout: game-board, typography: regal-serif, palette: earth-faction, patterns: grid-overlay, imagery: parchment-map, motifs: faction-token, tone: strategist-engaging Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), parallax patterns (98%), tech motifs (97%), friendly tone (77%)