# Design Language for historical.quest ## Aesthetics and Tone A strategy-game interface for historical conquest scenarios -- historical.quest presents grand-scale historical events (empire building, trade routes, cultural exchanges) as strategic quests displayed on a war-room planning table. The aesthetic is strategy-map: dark green baize (like a gaming table felt) serves as the background, while content appears as tactical briefing documents, map overlays, and mission cards. Brass accents and military cartography styling create the atmosphere of a 19th-century command room where history is being plotted on maps. The tone is strategic-commanding -- authoritative briefings that present historical events as campaigns to be studied and understood. ## Layout Motifs and Structure The layout uses a **war-table** architecture -- the viewport represents a planning table surface, with content items positioned as documents, maps, and briefing cards laid out on the baize. **Table System:** - Full-viewport dark green baize background (#1a2e1a) - Content items are "documents" with slight rotation (random -2deg to 2deg transform) suggesting papers laid on a table - Items overlap slightly at edges, creating a layered-document feel - A fixed top bar (brass-colored strip) shows the quest title and navigation **Section Flow:** 1. **Briefing Header:** A brass-colored (linear-gradient) strip at the top with "HISTORICAL.QUEST" in condensed capitals. Below: a "Mission Briefing" subtitle on a slightly rotated document card. 2. **The Map Table:** A large central area where the main content is displayed as a map-like layout with labeled regions (CSS Grid with visible borders suggesting territorial boundaries). 3. **Mission Cards:** Rectangular cards with a cream background and 1px border, slightly rotated, containing quest objectives and historical context. Each card has a "CLASSIFIED" or "MISSION BRIEF" header stamp. 4. **Intel Documents:** Side panels with additional historical information styled as intelligence reports with typewriter-style monospace text. 5. **Debrief (Footer):** A summary section styled as a post-mission report, with the green baize showing through generous margins. ## Typography and Palette **Typography:** - **Display:** "Saira Condensed" (Google Fonts) -- a military-industrial condensed sans-serif for strategic headers. Used at 1.5rem-3rem, weight 700, text-transform: uppercase, letter-spacing: 0.08em. - **Body:** "Source Serif 4" (Google Fonts) -- a dignified text serif for briefing content. Used at 0.95rem, weight 400, line-height 1.7. - **Intel/Typewriter:** "Special Elite" (Google Fonts) -- a typewriter face for classified documents and report text. Used at 0.85rem, weight 400. - **Map Labels:** "Saira Condensed" at 0.65rem, weight 500, text-transform: uppercase for territory labels and map annotations. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Baize Green | Gaming table | #1a2e1a | Primary background | | Baize Light | Lighter green | #2a4a2a | Hover zones, map regions | | Brass | Metallic accent | #b8943c | Header strip, borders, accents | | Document Cream | Paper surface | #f5f0e0 | Card/document backgrounds | | Ink | Dark text | #1a1a18 | Text on documents | | Stamp Red | Classification | #8b2020 | CLASSIFIED stamps, urgency markers | | Map Blue | Territory water | #3a5a7a | Water regions on maps | | Charcoal | Dark accent | #2a2a28 | Document headers, strong borders | ## Imagery and Motifs **Green Baize Background:** The viewport background is a flat #1a2e1a with a subtle radial-gradient (slightly lighter at center: #1e3a1e) creating the gentle pool-of-light effect of a table lamp on a gaming surface. **Rotated Document Cards:** Content cards have a cream background with 1px solid #b8943c border and a slight random rotation (transform: rotate(-1.5deg) to rotate(2deg)), creating the look of papers casually placed on a table. **Classification Stamps:** A "CLASSIFIED" or "MISSION BRIEF" header on document cards, styled as a stamp: text in Special Elite at 0.7rem, color #8b2020, border: 2px solid #8b2020, display: inline-block, transform: rotate(-3deg), positioned in the top-right corner of cards. **Brass Strip Header:** The top navigation bar uses a CSS linear-gradient (#c8a848, #a88030, #c8a848) to simulate brushed brass. Text is dark (#1a1a18) for contrast. **Map-Grid Territory Lines:** The central map area uses CSS Grid with visible 1px borders in #b8943c, creating territory-like divisions. Regions have slightly different background tints of green. ## Prompts for Implementation Build the page as a war room planning table. The dark green baize background establishes the environment immediately. Content should feel like physical documents laid on the table -- the slight rotations are crucial for this illusion. The brass header strip provides orientation and navigation against the green field. Document cards should have enough variety in rotation and position to feel natural, not mechanical. The classification stamps add military-strategic character. Map-grid territories in the central section create a geographical dimension. The overall experience should make the user feel like a historian-strategist studying campaigns on a planning table, moving between briefing documents and map analysis. AVOID: bright backgrounds, modern minimalism, rounded shapes, tech aesthetics, pastel colors, playful typography, animation. ## Uniqueness Notes 1. **War-room planning table as web layout:** Using dark baize with scattered rotated documents creates a unique physical-space metaphor. 2. **Classification stamp CSS motifs:** The rotated "CLASSIFIED" stamps add distinctive military-intelligence character. 3. **Brass metallic CSS gradients:** Using linear-gradient to simulate brushed brass surfaces creates a material quality rare in web design. 4. **Strategic-commanding tone:** The authoritative briefing voice for historical content creates an immersive command-room atmosphere. Document chosen seed/style: aesthetic: strategy-map, layout: war-table, typography: military-condensed, palette: baize-brass, patterns: rotated-documents, imagery: map-grid, motifs: classification-stamp, tone: strategic-commanding Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), friendly tone (77%), minimal imagery (96%)