# Design Language for diplomatic.quest ## Aesthetics and Tone diplomatic.quest adopts a victorian-ornate aesthetic -- the elaborate decorative traditions of the Victorian era applied to a diplomatic quest experience. Imagine the Treaty of Versailles negotiations reimagined as an ornate board game: gilt-framed portraits of negotiators, gold-embossed game cards, and elaborate borders on every document. The "quest" suffix transforms diplomacy into an adventure played on a richly decorated game board. The visual language draws from Victorian-era diplomatic stationery, ornamental cartography, and the decorative borders of 19th-century securities and government bonds. The palette is gold-black-luxury -- opulent without apology. Nature motifs (acanthus leaves, oak wreaths) soften the institutional formality. The tone is grounded-earthy, keeping the ornamental excess anchored in practical, tangible purpose. ## Layout Motifs and Structure The layout uses a **dashboard** structure -- content is arranged as a diplomatic command dashboard with distinct information panels, like a Victorian-era admiral's strategy room. **Primary structure:** - **Treaty room opening (100vh):** Rich black background with gold ornamental borders (SVG acanthus scroll patterns) framing the viewport edges. Title "Diplomatic Quest" in grotesk-sans type with gold text-shadow, centered within the ornate frame. - **Dashboard panels (variable, ~350vh):** A CSS Grid of 4-6 panels, each with its own ornamental gold border (thin double-line treatment). Panels contain: "Active Negotiations" (text list), "Territory Map" (simplified icon-heavy map), "Quest Progress" (progress bar with ornamental endpoints), "Intelligence" (longer-form text). - **Nature gallery (100vh):** A section featuring botanical-style nature motifs (oak leaves, laurel wreaths, olive branches) rendered as SVG in gold on black. Each motif is associated with a diplomatic principle (peace, victory, wisdom). - **Parallax victory hall (80vh):** A section with layered elements at different scroll speeds creating depth -- gold ornamental frames in the foreground, content in the middle, and a subtle pattern in the background. - **Seal footer (50vh):** A centered ornamental seal (CSS-drawn circle with decorative border pattern) containing the site's closing message. **Spacing philosophy:** Dashboard panels have 2px gold borders and 16px gaps. Internal padding is 32px. The ornamental frame around the viewport has 3vw clearance from content. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Space Grotesk" (Google Fonts) -- a modern sans-grotesk that provides clean readability against the ornate decorations. Weight 700. Size clamp(28px, 4vw, 52px). Letter-spacing: -0.01em. - **Body text:** "Lora" (Google Fonts) -- warm serif for body content. Weight 400. Size clamp(15px, 1.05vw, 17px). Line-height: 1.75. - **Ornamental labels:** "Cinzel" (Google Fonts) -- classical display font for panel headers and formal labels. Weight 700, size 14px, letter-spacing: 0.06em, all-caps. **Palette:** - **Treaty Black** `#0A0A0A` -- primary dark background - **Gold Leaf** `#C8A030` -- ornamental gold for borders, decorations, and accents - **Parchment** `#F0E8D8` -- text on dark backgrounds and panel surfaces - **Aged Gold** `#8B7030` -- muted gold for secondary decorative elements - **Dark Mahogany** `#2A1510` -- warm dark for panel backgrounds - **Laurel Green** `#4A6B3A` -- nature motif color for botanical elements ## Imagery and Motifs **Core visual motifs:** - **Gold ornamental SVG borders:** The signature element. Acanthus scroll patterns, vine tendrils, and geometric Greek-key borders rendered as SVG paths in Gold Leaf. Used as viewport frame, panel borders, and section dividers. - **Icon-heavy diplomatic symbols:** Small icons (16-24px) representing diplomatic concepts -- handshake, globe, scroll, balance scales, olive branch. Rendered in Gold Leaf SVG strokes. - **Nature motifs in gold:** Botanical elements (oak leaves, laurel wreaths, olive branches) as SVG illustrations in Gold Leaf on Treaty Black background. These appear in the nature gallery and as decorative accents throughout. - **Parallax depth layers:** In the victory hall section, ornamental frames at the foreground layer move faster than content, creating depth. Achieved with CSS transform: translateZ() on perspective-enabled parent. - **Dashboard progress indicators:** Thin horizontal bars with ornamental gold endpoints (small decorative knobs at each end) showing quest completion status. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like entering a Victorian-era diplomatic war room reimagined as a strategy game. Ornamental excess communicates importance and gravitas. The dashboard panels provide strategic overview. **Opening animation sequence:** - Frame 0-300ms: Treaty Black background. - Frame 300-1200ms: The ornamental viewport frame draws itself (SVG stroke-dashoffset animation, starting from top-center and tracing clockwise). - Frame 1200-1800ms: "Diplomatic" appears in Space Grotesk with Gold Leaf text-shadow. - Frame 1800-2400ms: "Quest" appears with a golden parallax glow (expanding radial-gradient behind the text). **Scroll behavior:** Dashboard panels enter with parallax-influenced fade-in (deeper panels appear first). Nature gallery botanical elements draw their SVG paths on scroll. The victory hall parallax layers separate visually as the user scrolls through. **Interaction details:** - Dashboard panels glow with gold border brightness on hover (Gold Leaf opacity from 60% to 100%). - Nature motifs respond to hover with a subtle scale (1 to 1.05) and brightened gold. - Icon-heavy symbols rotate subtly on hover (10deg, 300ms). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Victorian ornament meets dashboard layout:** Combining elaborate gold ornamental borders with a functional dashboard grid creates a visual language where institutional formality and strategic utility coexist. 2. **Gold-on-black ornamental frame as viewport boundary:** The SVG ornamental frame that traces the entire viewport edge establishes a physical boundary that makes the browser window feel like a gilded picture frame or document border. 3. **Botanical diplomatic symbolism:** Using specific plants (oak for strength, laurel for victory, olive for peace) as golden SVG illustrations tied to diplomatic principles creates a symbolic visual vocabulary unique to this design. 4. **Quest progress bars with ornamental endpoints:** Dashboard progress indicators with Victorian decorative knobs at each end fuse game-UI conventions with period-appropriate ornamentation. **Chosen seed/style:** aesthetic: victorian-ornate, layout: dashboard, typography: sans-grotesk, palette: gold-black-luxury, patterns: parallax, imagery: icon-heavy, motifs: nature, tone: grounded-earthy **Avoided patterns (from frequency analysis):** Avoided overused scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used dashboard (15%) layout and gold-black-luxury (7%) palette -- moderate usage choices.