# Design Language for 계엄령.quest ## Aesthetics and Tone 계엄령.quest channels a dark-mode aesthetic — the high-contrast precision, reduced eye-strain elegance, and nocturnal sophistication of dark-mode design applied to an investigative quest platform exploring martial law (계엄령, gyeoeomnyeong) — interactive challenges that guide users through historical analysis, constitutional examination, and civic understanding of martial law declarations. The site investigates — with the dark-mode interface precision of GitHub's dark theme, the investigative atmosphere of true-crime documentary platforms, and the quest-driven engagement of platforms where learning becomes discovery. Inspiration draws from the dark-mode design excellence of Figma's dark interface, the investigative journalism aesthetics of platforms like The Intercept, the masonry visual organization of Pinterest reimagined for document investigation, and the quest-game mechanics that transform research into engaging challenge. The tone is friendly — warm, approachable language that makes dark constitutional subjects accessible through engaging quest mechanics. The dark-mode treatment transforms civic investigation from academic exercise into atmospheric discovery — documents and evidence presented against dark backgrounds with the precision of forensic examination, quest paths illuminated through the darkness of complex historical events, and understanding achieved through guided investigation rather than passive reading. Each component carries dark-mode's precise contrast — carefully calculated text-to-background ratios, accent colors that glow against dark surfaces, and the focused quality of content illuminated against darkness. The friendly tone provides warmth — approachable guidance through serious investigative quests. ## Layout Motifs and Structure The layout uses a **masonry** architecture — varied-height cards in masonry arrangement creating the evidence-board quality of investigative documents pinned at different levels. **Masonry Evidence Board System:** - Masonry columns: 3-column at max-width: 1080px centered - Quest cards: varied heights based on content complexity - Evidence panels: full-width for major document displays - Gap: 16px between masonry elements - The masonry layout creates the investigation-board quality of evidence arranged by connection rather than uniform grid **Section Sequence:** 1. **Case File:** Hero with baskerville-refined typography glowing against dark-mode ground, sharp-angles investigative precision motifs, border-animate interactive evidence-frame illumination 2. **Evidence Wall:** Quest challenges in masonry evidence arrangement — border-animate interactive document-highlight frames with sharp-angles analytical angle accents and vintage-photography archival document imagery 3. **Investigation Depth:** Detailed quest content in generous dark-mode reading with vintage-photography historical document references and sharp-angles precise analytical overlays 4. **Case Summary:** Quest progress in dark-mode summary panels with sharp-angles minimal precision indicators 5. **Case Closed:** Footer as investigation conclusion — friendly farewell with sharp-angles final analytical mark **Spatial Philosophy:** - Masonry creates the evidence-board quality of documents pinned at various levels and connections - Dark-mode creates the after-hours quality of investigative work conducted with focused attention - The case-file metaphor makes civic quest completion feel like solving an investigation ## Typography and Palette **Typography:** - **Headlines:** "Libre Baskerville" (Google Fonts) — baskerville-refined at 2.0rem-2.8rem, weight 700. Its refined serif forms create the legal-document quality of formal constitutional texts. - **Body Text:** "Inter" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.75. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for case numbers, dates, article references, and quest progress metrics. - **Labels:** "Inter" at 0.6rem, weight 600, uppercase, letter-spacing 0.14em. **Color Palette:** - **Night Deep:** #0e1018 — deep night blue-black for primary background - **Case Panel:** #181e28 — dark blue-gray for card surfaces - **Ethereal Blue:** #4a8ae8 — bright ethereal blue for primary accent - **Alert Amber:** #e8aa3a — warm amber for secondary accent - **Evidence White:** #e0e4ea — cool white for tertiary accent - **Light Read:** #d8dce4 — cool light for primary text - **Dim Blue:** #6a7a8a — muted blue-gray for secondary text - **Glow Edge:** rgba(74,138,232,0.1) — blue-tinted glow for illuminated borders ## Imagery and Motifs **Vintage-Photography Archival Documents:** Historical imagery with aged-document treatment — filter: grayscale(0.6) contrast(1.1) brightness(0.9); border: 1px solid rgba(74,138,232,0.08) creating the evidence-room quality of historical documents examined under controlled lighting. **Border-Animate Evidence Illumination:** Cards with animated border highlighting — border-color transitioning through palette accents over 3s (Ethereal Blue to Alert Amber to back), creating the investigation quality of evidence being examined under different lights. **Sharp-Angles Analytical Precision:** Decorative elements using angular investigative geometry — SVG arrow indicators, angular brackets, and targeting frames (1px stroke, Ethereal Blue at 0.06 opacity) creating the forensic quality of precise analytical examination. **Dark-Mode Card Treatment:** Quest evidence cards with dark-mode precision — background: #181e28; border: 1px solid rgba(74,138,232,0.06); border-radius: 8px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.2). The treatment creates the document-under-lamplight quality of evidence examined in dark investigation rooms. **Glow Accent Highlights:** Important elements with soft glow — box-shadow: 0 0 12px rgba(74,138,232,0.08) creating the spotlight quality of key evidence illuminated for examination. ## Prompts for Implementation Build the page as a dark-mode martial law investigation quest platform. Masonry: .evidence-board { column-count: 3; column-gap: 16px; max-width: 1080px; margin: 0 auto; } .evidence-card { break-inside: avoid; margin-bottom: 16px; } Dark card: .quest-evidence { background: #181e28; border: 1px solid rgba(74,138,232,0.06); border-radius: 8px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } Border animate: .evidence-active { animation: borderGlow 3s ease-in-out infinite; } @keyframes borderGlow { 0%, 100% { border-color: rgba(74,138,232,0.12); } 50% { border-color: rgba(232,170,58,0.12); } } AVOID: Sensational crisis interfaces, gamified trivial quiz platforms, and dark dramatic propaganda sites. Let dark-mode investigative precision and friendly approachability create a civic quest platform where martial law is explored through engaging, educational investigation that illuminates rather than inflames. ## Uniqueness Notes 1. **Dark-mode for civic investigation:** Nocturnal precision creates the after-hours quality of serious investigative research conducted with focused attention. 2. **Masonry as evidence board:** Varied-height cards create the investigation quality of documents pinned by connection rather than uniform classification. 3. **Friendly tone as accessible guidance:** Warm language makes constitutional investigation approachable through quest engagement. 4. **Border-animate as examination lighting:** Color-shifting borders create the forensic quality of evidence examined under different analytical lights. 5. **Sharp-angles as analytical precision:** Angular motifs create the targeting quality of investigative focus on specific constitutional elements. **Seed/Style:** aesthetic: dark-mode, layout: masonry, typography: baskerville-refined, palette: ethereal-blue, patterns: border-animate, imagery: vintage-photography, motifs: sharp-angles, tone: friendly **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, minimal imagery. This design uses dark-mode aesthetic, masonry layout, baskerville-refined typography, ethereal-blue palette, border-animate patterns, vintage-photography imagery, and friendly tone.