# Design Language for martial.quest ## Aesthetics and Tone martial.quest (계엄령 — martial law) channels a retro-futuristic aesthetic — analog instrument panels, military command center displays, and the tense optimism of Cold War-era technology applied to the exploration and documentation of martial law events. The site presents martial law history as a quest for understanding — a journey through the mechanisms of emergency governance with the gravity of a historical investigation. Inspiration draws from 1970s military control room photography, vintage Korean government broadcast design, topographic map aesthetics, and the austere beauty of bunker architecture. The tone is grounded-earthy — rooted in factual documentation, unembellished by rhetoric, presenting martial law history with the quiet weight of earth and stone. The single-column layout creates a focused, document-like reading experience appropriate for serious historical content. ## Layout Motifs and Structure The layout uses a **single-column** architecture — content presented in a focused vertical stream, creating a document-like reading experience that respects the gravity of the subject matter. **Single-Column Architecture:** - Content width: 720px centered, generous 80px vertical section spacing - No distracting sidebar, no multi-column layouts — pure focused reading - Sections divided by thin horizontal rules (1px) with custom-illustration icons at center - Pull-quotes indented with heavy left border (4px) for emphasis - Images and illustrations span slightly wider (800px) than text for visual breathing **Section Sequence:** 1. **Alert Broadcast:** Hero with retro-futuristic styled title, mountain landscape silhouette background, and a single defining statement about understanding martial law 2. **Timeline:** Sequential historical events in underline-draw-animated timeline format, each event a dated entry with custom illustration 3. **Mechanisms:** Detailed explanation cards of martial law procedures, each with geometric-sans headings and complementary-colored accent borders 4. **Terrain:** Full-width mountain landscape section divider representing the political landscape 5. **Archive:** Footer as a document archive reference — date stamps, sources, and scholarly citations ## Typography and Palette **Typography:** - **Headlines:** "DM Sans" (Google Fonts) — geometric sans at 2rem-3rem, weight 700. Its clean geometric construction communicates institutional authority without military hardness. - **Body Text:** "Literata" (Google Fonts) — refined text serif at 1rem, weight 400, line height 1.8. Designed for extended reading, ideal for historical documentation. - **Korean:** "Noto Serif KR" (Google Fonts) — Korean serif for Korean-language historical quotes and terms. - **Data/Dates:** "DM Mono" (Google Fonts) — monospace at 0.85rem for dates, reference numbers, and legal citations. **Color Palette:** - **Earth Olive:** #5a6a3a — muted military green for primary accents - **Complement Rust:** #8a4a30 — warm rust red as complementary accent - **Parchment:** #f4f0e4 — warm cream for page background - **Stone Dark:** #3a3a30 — dark olive-brown for primary text - **Clay Warm:** #c4a880 — warm tan for secondary backgrounds and card fills - **Slate Blue:** #4a5a6a — muted blue-gray for tertiary accents - **Mountain Gray:** #8a8a7a — gray-green for secondary text - **Iron Dark:** #2a2a24 — near-black for emphasis text ## Imagery and Motifs **Custom-Illustration Historical Markers:** Historical events illustrated with simple, purposeful custom illustrations (SVG, 2px stroke, Earth Olive) — a broadcast tower, a document with seal, a barrier gate, soldiers at attention. Each illustration is intentionally restrained, showing minimal detail to let the text carry the emotional weight. **Mountain Landscape Topographic Lines:** Section backgrounds feature subtle topographic contour lines (SVG paths, 0.5px stroke in Mountain Gray at 0.08 opacity) creating the impression of a military topographic map. These contour lines flow horizontally across sections, suggesting the political terrain being documented. **Underline-Draw Text Reveals:** Key dates and terms in the timeline have underlines that draw themselves on scroll entry — a border-bottom that expands from center outward (width: 0 to 100%, centered with margin auto) in Complement Rust over 400ms. This creates a highlighting effect as if a researcher is marking important passages. **Complementary Color Tension:** The Earth Olive and Complement Rust create a visual tension that mirrors the political tension of martial law — warm red authority pushing against cool green civilian life. This complementary pairing is used strategically: olive for governance elements, rust for impact/consequences. **Document Stamp Watermarks:** Select sections bear a very faint (0.02 opacity) circular stamp watermark (CSS border-radius: 50%, border with text curved around it reading "CLASSIFIED" or "RESTRICTED") in Complement Rust, suggesting declassified documents. ## Prompts for Implementation Build the page as a retro-futuristic historical document. Body: background: Parchment. Container: max-width: 720px, margin: 0 auto. Sections: padding: 80px 0, border-bottom: 1px solid rgba(58,58,48,0.1). Underline-draw: span with position: relative. Pseudo-element: position: absolute, bottom: -2px, left: 50%, width: 0, height: 2px, background: Complement Rust. On .visible: left: 0, width: 100%, transition: all 400ms ease-out. Mountain topographic: SVG with viewBox spanning section width, multiple path elements creating horizontal contour lines with gentle wave undulations. Stroke: Mountain Gray at 0.08, stroke-width: 0.5px. Custom illustrations: inline SVGs, max 48x48px, stroke: Earth Olive, stroke-width: 2px, fill: none, stroke-linecap: round. Positioned at timeline nodes and section divider centers. Complementary accents: all governance/authority UI elements use Earth Olive. All impact/consequence elements use Complement Rust. This creates systematic color-meaning association. Document watermark: 120px circle with border: 1px solid Complement Rust at 0.02 opacity, positioned center of select sections with transform: rotate(-15deg). AVOID: Sensationalized imagery, dramatic layouts, gamification of serious content, and any trivializing visual treatment. Let documentary restraint and grounded-earthy tone honor the historical gravity. ## Uniqueness Notes 1. **Retro-futuristic for martial law documentation:** Cold War-era command center aesthetics create period-appropriate visual framing for emergency governance content. 2. **Single-column as document format:** The focused reading path treats content with the seriousness of an official historical document. 3. **Complementary color as political tension:** Earth Olive vs. Complement Rust systematically codes the tension between authority and impact. 4. **Underline-draw for researcher highlighting:** Self-drawing underlines simulate the active process of a researcher marking key passages. 5. **Mountain landscape as political terrain:** Topographic contours metaphorically represent the complex political landscape of martial law periods. **Seed/Style:** aesthetic: retro-futuristic, layout: single-column, typography: geometric-sans, palette: complementary, patterns: underline-draw, imagery: custom-illustration, motifs: mountain-landscape, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses retro-futuristic aesthetic, single-column layout, complementary palette, custom-illustration imagery, and grounded-earthy tone.