# Design Language for 계엄령.quest ## Aesthetics and Tone 계엄령.quest (martial law + .quest) is a corporate-styled interactive investigation platform -- a site that takes the sterile authority of corporate design and subverts it to examine emergency governance. The visual identity channels the polished surfaces of government agency websites, corporate compliance dashboards, and institutional white papers, but the asymmetric layout breaks the expected corporate symmetry to suggest something fundamentally unstable beneath the professional veneer. Navy-metallic surfaces and sans-grotesk typography project authority and trustworthiness, while hand-drawn illustrations (sketchy, imperfect) provide a humanizing counter-narrative to the institutional polish. Marble-classical motifs (columns, pediments, scales of justice rendered as faint background textures) anchor the content in the traditions of governance and law. The tone is approachable-casual -- a conscious decision to make the weighty topic of martial law accessible rather than intimidating, as if a knowledgeable friend were explaining legal concepts over coffee. ## Layout Motifs and Structure An **asymmetric** layout where content blocks resist the expected corporate alignment, creating productive visual tension -- authority that doesn't quite line up. **Primary structure:** - **Authority header (80vh):** A deep navy (#0a1a2e) backdrop with the title "계엄령.quest" in clean sans-grotesk type, positioned at 15vw from left, 30vh from top (deliberately off-center). Below, a subtitle: "Understanding Emergency Governance" in lighter weight. A hand-drawn illustration of a balance scale (SVG, sketch-style strokes) floats at the right third of the viewport, partially cropped by the edge. - **Investigation blocks (asymmetric grid):** Content organized in an asymmetric 2-column grid where columns are 65% and 30% width (5% gap), with the narrow column offset 40px below the wide column. The wide column contains main analytical text; the narrow column holds supplementary notes, hand-drawn diagrams, and definitions. - **Marble interlude:** A section with a subtle marble texture background (CSS: repeating-linear-gradient with subtle vein patterns) containing a key historical timeline rendered as a horizontal sequence with border-animate connections between events. - **Resource footer:** A clean, corporate-styled footer with links to primary sources, presented in a simple grid of navy-bordered cards. **Spatial relationships:** Asymmetry is the governing principle: content blocks shift 20-40px from expected grid positions. Primary content column: 55vw max-width. Supplementary column: 25vw. Gap between columns varies (3vw to 8vw) per section. ## Typography and Palette **Fonts:** - **Display/Headlines:** "Inter" (Google Fonts) -- a grotesque sans-serif with excellent readability across sizes, used at clamp(32px, 5vw, 64px). Weight 700. The neutral authority of Inter is perfect for institutional-style headings that feel official without being cold. - **Body text:** "Inter" (Google Fonts) -- same family at 16px/1.7 line-height. Weight 400 for body, 600 for emphasis. The single-family approach reinforces the corporate consistency. - **Captions/Notes:** "Newsreader" (Google Fonts) -- a transitional serif at 14px, weight 400, italic. Used for the supplementary column text and captions, creating a gentle editorial counterpoint to the sans-serif main text. **Color Palette (navy-metallic):** - **Navy deep:** #0a1a2e (primary dark background) - **Navy mid:** #142840 (card backgrounds, secondary surfaces) - **Steel blue:** #3a5a7a (borders, dividers, secondary accents) - **Metallic silver:** #a0b0c0 (tertiary accents, inactive elements) - **White clean:** #f4f6f8 (primary text on dark, card backgrounds on light) - **Light surface:** #e8ecf0 (light section backgrounds) - **Accent blue:** #2a7aff (links, active elements, call-to-action moments) - **Sketch brown:** #5a4a3a (hand-drawn illustration stroke color) ## Imagery and Motifs **Core visual motifs:** - **Hand-drawn sketch illustrations:** Deliberately imperfect, pen-style drawings of conceptual objects: balance scales, gavels, shields, document scrolls, raised hands. SVG paths with stroke-linecap: round, stroke-width: 2px, in sketch brown (#5a4a3a) with subtle wobble (SVG feTurbulence filter at very low intensity, baseFrequency="0.02"). These humanize the corporate surface. - **Marble-classical textures:** Faint marble vein patterns (CSS: repeating-linear-gradient with near-transparent white and light gray strokes at 45deg) applied as backgrounds to specific sections. Used at 0.05 opacity so the marble is felt more than seen -- a ghost of classical architecture. - **Border-animate connectors:** Timeline events and related content blocks are connected by lines that draw themselves on scroll-enter (stroke-dashoffset animation, 800ms). These animated borders also frame key content blocks, starting from the top-left corner and tracing the perimeter. - **Corporate card components:** Content cards with subtle depth (box-shadow: 0 2px 8px rgba(10,26,46,0.08)) and clean 1px borders (#e8ecf0). On hover, the border transitions to accent blue (#2a7aff) over 300ms -- the only animation on these otherwise restrained components. ## Prompts for Implementation **Full-screen institutional investigation:** The site should feel like an interactive government white paper or a well-designed compliance portal -- but the asymmetric layout and hand-drawn illustrations keep revealing the human beings behind the institutional facade. **Asymmetric grid implementation:** - Main content area: CSS grid with grid-template-columns: 65fr 5fr 30fr. - Apply grid-row offset on the narrow column: margin-top: 40px relative to the wide column. - Vary the column proportions between sections (some 60/35, some 70/25) to maintain visual interest. **Border-animate technique:** - SVG rect elements overlaid on content containers. - stroke-dasharray set to perimeter length, stroke-dashoffset starts at full perimeter. - IntersectionObserver triggers CSS transition: stroke-dashoffset 0.8s ease-out. **Hand-drawn wobble filter:** - Apply SVG filter with feTurbulence (type="fractalNoise", baseFrequency="0.02", numOctaves="2") and feDisplacementMap (scale="1") to illustration SVGs. - This creates micro-wobble on straight lines, simulating hand-drawn imperfection. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, neon aesthetics, maximalist density. The corporate restraint IS the design vocabulary. ## Uniqueness Notes **Differentiators from other designs:** 1. **Corporate design subverted for political education:** No other design applies institutional/corporate visual language to examine the concept of emergency governance -- the gap between the polished surface and the volatile subject matter creates unique intellectual tension. 2. **Hand-drawn illustrations as humanizing counter-narrative within corporate layout:** The deliberate contrast between imperfect sketch illustrations and the clean sans-grotesk/navy corporate surface is a unique visual strategy that makes authoritarianism feel approachable and human-scale. 3. **Asymmetric authority -- corporate design that doesn't align:** The subtle off-grid positioning within an otherwise institutional framework creates a visual metaphor for institutional instability that is unique in the collection. **Chosen seed/style:** aesthetic: corporate, layout: asymmetric, typography: sans-grotesk, palette: navy-metallic, patterns: border-animate, imagery: hand-drawn, motifs: marble-classical, tone: approachable-casual **Avoided overused patterns:** photography imagery (91%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (98%), mono typography (82%), mysterious-moody tone (72%).