# Design Language for historic.quest ## Aesthetics and Tone A choose-your-own-adventure through pivotal historical moments -- historic.quest transforms history education into an interactive journey where the user makes decisions at historical turning points. The aesthetic is expedition-journal: aged leather textures, compass-rose motifs, and route-map line drawings create an explorer's notebook feel. The color palette draws from old maps: ocean blue, land ochre, and compass-rose gold. Each "quest" is a historical scenario presented as a chapter in a travel journal, with hand-drawn-style (CSS-created) illustrations of maps and routes. The tone is adventure-educational -- inviting the user to explore history as a participant rather than an observer. ## Layout Motifs and Structure The layout uses a **chapter-scroll** architecture -- content is organized as sequential chapters, each filling the viewport, with a "turn the page" scroll transition. **Chapter System:** - Each chapter is min-height: 100vh with scroll-snap-align: start - Chapter header uses a large Roman numeral (I, II, III...) as the section marker - Content within chapters uses a centered 700px column with generous padding - A persistent progress bar at the top shows the user's position through the quest **Section Flow:** 1. **Expedition Start (Hero):** A weathered paper background with "HISTORIC.QUEST" in serif capitals, surrounded by a compass-rose CSS illustration (created with rotated squares and circles). Below: "Choose your era, trace your path." 2. **Era Selection:** Cards representing major historical periods (Ancient, Medieval, Renaissance, Industrial, Modern), each styled as a journal page with a CSS-drawn map icon. 3. **The Quest Chapters:** Sequential sections presenting historical scenarios with descriptive prose, key facts, and a "decision moment" styled as a forked path. 4. **Quest's End:** A concluding section with a summary of the historical journey, styled as the final page of a journal with a wax-seal-style CSS circle as a closing mark. ## Typography and Palette **Typography:** - **Chapter Numbers:** "Cinzel Decorative" (Google Fonts) -- an ornamental classicist serif for Roman numerals and chapter markers. Used at 4rem-6rem, weight 700. - **Headlines:** "Cinzel" (Google Fonts) -- the unadorned version for chapter titles and section headers. Used at 1.5rem-2.5rem, weight 600, letter-spacing: 0.04em, text-transform: uppercase. - **Body:** "Crimson Text" (Google Fonts) -- a warm, readable text serif with old-style character suited to narrative prose. Used at 1.05rem, weight 400, line-height 1.75. - **Marginalia:** "Crimson Text" at 0.8rem, italic, for side notes and historical annotations. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Parchment | Old paper | #f0e8d8 | Primary background | | Leather | Dark brown | #3a2a1a | Card backgrounds, header bars | | Ocean Blue | Map ocean | #2c5f7c | Links, route lines, accents | | Land Ochre | Map land | #c8a860 | Secondary accent, highlights | | Compass Gold | Warm gold | #b89a40 | Compass motif, decorative elements | | Ink | Dark brown-black | #2a2218 | Primary text | | Faded Ink | Medium brown | #6a5a48 | Secondary text, annotations | | Seal Red | Wax seal | #8b3030 | Decision points, important markers | ## Imagery and Motifs **Compass Rose CSS Illustration:** A decorative compass rose built from CSS: a circle border with four rotated squares (45deg transforms) creating the cardinal points, with a smaller inner circle. Drawn in compass gold (#b89a40) as a decorative header element. **Route Map Lines:** Thin SVG lines (#2c5f7c, 1.5px) with arrow endpoints connect chapters, creating a visual "route" through the quest. Lines use slight curves (quadratic bezier) suggesting hand-drawn map routes. **Chapter Roman Numerals:** Large decorative Roman numerals (I, II, III) in Cinzel Decorative serve as chapter markers, positioned as oversized background elements at 15% opacity. **Wax Seal Closing Mark:** A CSS circle (80px diameter) with radial-gradient simulating wax texture (dark red center to lighter red edge), with the letters "HQ" centered inside in serif caps. **Decision Fork Motif:** At decision points, the content splits into two columns momentarily, with a V-shaped SVG path above them suggesting a forking road. Each option is a button-styled block with a pointed-arrow indicator. ## Prompts for Implementation Build the page as a historical expedition journal. Each chapter should feel like turning a page in a leather-bound notebook. The compass rose in the hero establishes the exploration theme. Chapter Roman numerals are large and ornamental, setting the academic-adventure tone. Body prose in Crimson Text should read comfortably -- this is narrative content, not scanning content. Route map SVG lines between chapters create a visual journey thread. Decision forks are the interactive highlight: two options presented side by side with distinct paths forward. The wax seal at the end provides ceremonial closure. The parchment background with leather accents should feel tactile and warm -- like holding a real journal. AVOID: modern minimalism, dark themes, tech aesthetics, neon colors, card grids, stock imagery, marketing language. ## Uniqueness Notes 1. **Choose-your-own-adventure historical education:** Interactive decision points within historical narratives create a unique educational game format. 2. **Expedition journal aesthetic with CSS compass rose:** The explorer-notebook visual language with CSS-drawn navigational instruments is distinctive. 3. **Route-map SVG connections between chapters:** Curved lines suggesting hand-drawn map routes create a visual journey thread. 4. **Decision fork layout motif:** Content splitting into two columns at choice points visually represents the branching path. Document chosen seed/style: aesthetic: expedition-journal, layout: chapter-scroll, typography: classical-decorative, palette: map-parchment, patterns: scroll-snap-chapter, imagery: css-compass, motifs: route-map, tone: adventure-educational Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)