# Design Language for martialaw.quest ## Aesthetics and Tone martialaw.quest channels a retro aesthetic — warm analog textures, vintage print media, and the dignified documentation style of mid-20th-century newspapers applied to exploring martial law history. The site frames martial law as a historical quest — a journey through archival materials rendered in the warm, honest visual language of period-appropriate design. Inspiration draws from vintage Korean newspaper layouts, letterpress printing textures, 1970s government bulletin typography, and the warm sepia tones of archival photography. The tone is calm-serene — approaching difficult history with quiet dignity and measured contemplation rather than dramatic urgency. The diagonal-sections layout creates subtle visual tension that prevents the historical content from feeling static. ## Layout Motifs and Structure The layout uses **diagonal-sections** — content bands angled across the viewport, creating dynamic visual movement within the calm, retrospective atmosphere. **Diagonal Section Architecture:** - Sections use clip-path: polygon(0 3%, 100% 0%, 100% 97%, 0% 100%) for angled edges - Content within counter-rotated to remain readable - Alternating cream and warm-toned backgrounds between sections - Overlapping by 30-50px with z-index layering for depth **Section Sequence:** 1. **Archive Portal:** Hero with retro-styled title in Garamond classic, sepia-toned vector art background, and a cultural motif border frame 2. **Chronicle:** Diagonal-section timeline of martial law events with path-draw-svg connecting lines between dates 3. **Documents:** Archival document display section with vector art illustrations of key historical items 4. **Voices:** Testimony cards in a contrasting diagonal band with cultural pattern borders 5. **Seal:** Footer straightening to horizontal with archival reference information and source credits ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.5rem-3.5rem, weight 600. Its centuries-old elegance creates appropriate gravitas for historical content. - **Body Text:** "EB Garamond" at 1.05rem, weight 400, line height 1.85. Extended reading comfort with classical proportions. - **Korean:** "Nanum Myeongjo" (Google Fonts) — traditional Korean serif for Korean-language quotations. - **Dates/References:** "Courier Prime" (Google Fonts) — typewriter monospace at 0.85rem for dates and document references. **Color Palette:** - **Cream Warm:** #f8f0e0 — warm paper cream for primary background - **Sepia Ink:** #4a3828 — warm dark brown for primary text - **Pastel Sage:** #b8c8a8 — soft green for accent backgrounds - **Pastel Rose:** #d8b0a8 — soft pink for secondary accents - **Pastel Lavender:** #c0b0c8 — soft purple for tertiary highlights - **Gold Archive:** #b8a050 — warm gold for decorative borders and emphasis - **Stone Medium:** #8a7a68 — warm gray-brown for secondary text - **Ivory Light:** #faf4ea — lighter cream for card backgrounds ## Imagery and Motifs **Vector Art Historical Illustrations:** Key historical moments depicted as clean vector art (SVG, 2px stroke in Sepia Ink, selective flat fills in pastel palette) — a broadcast microphone, a barricade, a government seal, a candle vigil. The vector style creates distance from photographic realism, allowing contemplation rather than visceral reaction. **Cultural Heritage Border Patterns:** Section edges and card borders feature Korean traditional geometric patterns (단청-inspired) rendered as repeating SVG motifs in Gold Archive at 0.15 opacity — interlocking squares, diamond chains, and wave patterns that honor the Korean cultural context. **Path-Draw-SVG Timeline Connections:** The timeline connecting historical events uses SVG paths that draw themselves on scroll — stroke-dasharray set to total path length, stroke-dashoffset animated from path-length to 0 over 800ms. Lines curve between timeline nodes with organic cubic-bezier paths in Gold Archive at 0.4 opacity. **Letterpress Texture Impressions:** Card surfaces feature a subtle embossed/debossed texture — inner box-shadow (inset 0 1px 2px rgba(0,0,0,0.05), inset 0 -1px 2px rgba(255,255,255,0.8)) creating a pressed-into-paper tactile quality that references letterpress printing. **Diagonal Paper Overlap:** Where diagonal sections meet, the overlapping area creates a shadow suggesting one sheet of paper laid over another — a subtle gradient shadow (4px) at the overlap zone. ## Prompts for Implementation Build the page with diagonal-section architecture. Each section div: clip-path: polygon(0 3%, 100% 0%, 100% 97%, 0% 100%). Inner content wrapper: no clip-path, ensuring text remains unclipped. Adjacent sections overlap with negative margins (-40px). Path-draw timeline: SVG with paths connecting timeline nodes. Each path: stroke-dasharray: [pathLength]; stroke-dashoffset: [pathLength]. On .visible: stroke-dashoffset: 0 with transition: stroke-dashoffset 800ms ease-out. Cultural borders: repeating SVG patterns. Pattern element with 20px units containing geometric shapes (diamonds, squares). Applied as border-image or as a thin (8px) strip along card tops. Letterpress: box-shadow: inset 0 1px 2px rgba(0,0,0,0.05), inset 0 -1px 2px rgba(255,255,255,0.8). Adds subtle pressed-in quality to flat surfaces. Vector illustrations: inline SVGs, max-height 120px. Stroke: Sepia Ink, stroke-width: 2px, fill: selective pastel colors for key areas. Stroke-linecap: round for warmth. AVOID: Dramatic dark themes, aggressive animations, gamification of historical tragedy, and sensationalized visual treatments. Let calm serenity and retro authenticity honor the historical content. ## Uniqueness Notes 1. **Retro aesthetic for martial law exploration:** Period-appropriate vintage design creates authentic visual framing for historical content. 2. **Diagonal sections for historical narrative tension:** Angled layout creates subtle visual dynamism within contemplative historical storytelling. 3. **Path-draw-svg timeline as unfolding history:** Self-drawing connection lines make history feel like it's being revealed in real-time. 4. **Cultural heritage border patterns:** Korean traditional geometric motifs honor the cultural context of the martial law events. 5. **Letterpress texture as archival materiality:** Pressed-paper effects connect digital content to physical archival document experience. **Seed/Style:** aesthetic: retro, layout: diagonal-sections, typography: garamond-classic, palette: creamy-pastel, patterns: path-draw-svg, imagery: vector-art, motifs: cultural, tone: calm-serene **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 aesthetic, diagonal-sections layout, creamy-pastel palette, vector-art imagery, and calm-serene tone.