# Design Language for 계엄령.com ## Aesthetics and Tone 계엄령.com (Korean for "martial law") is a light-academia meditation on emergency governance -- a digital archive that treats the history and concept of martial law with the reverent gravity of a university special collections library. The visual identity channels the warm, scholarly atmosphere of wood-paneled reading rooms, illuminated manuscripts, and the amber light of brass desk lamps. The ma-negative-space layout embraces emptiness as eloquence -- allowing the weight of the subject matter to breathe within generous margins. The burgundy-cream palette evokes both academic institution colors and the historical gravitas of government seals and legal documents. Art Deco display typography adds a period-specific elegance (martial law's most dramatic invocations span the 1920s-1980s), while duotone photography processes historical imagery into a consistent, studied aesthetic. Floral-botanical motifs soften the severity of the subject -- pressed flowers preserved between the pages of a law textbook. The tone is nostalgic-retro -- looking backward with scholarly distance and a touch of melancholy. ## Layout Motifs and Structure A **ma-negative-space** (negative space as protagonist) layout where emptiness is the primary design element -- content floats within vast cream expanses like text on an ancient scroll with generous margins. **Primary structure:** - **Declaration panel (100vh):** A cream (#f4ece0) field with an extraordinary amount of empty space. The Korean text "계엄령" appears small (clamp(24px, 4vw, 48px)) at center, with its English equivalent "MARTIAL LAW" below in Art Deco display type. The smallness of the text within the vast space creates solemn weight. A single thin horizontal rule (1px, burgundy at 0.3 opacity) sits 200px below the text. - **Archive sections (3-4 sections):** Each section presents a historical or conceptual topic (Origins, Invocations, Consequences, Aftermath). Content appears as discrete blocks with extreme top/bottom padding (clamp(80px, 15vh, 200px)), never filling their containers. Between sections, only empty cream space. - **Pressed flower interludes:** Between major sections, small botanical illustrations (floral SVGs in burgundy, 0.2 opacity) appear alone in otherwise empty sections (40vh height, single botanical centered) -- visual pauses for contemplation. - **Colophon footer:** Minimal bibliographic-style information (date, sources, creator) set in small serif text, right-aligned, with the widest margins on the page (30vw inset from each side). **Spatial relationships:** Content max-width: 560px (narrow column within wide viewport). Side margins: minimum 20vw. Vertical spacing between content elements: 60-120px. The emptiness-to-content ratio should be approximately 70:30 -- most of the screen is always empty. ## Typography and Palette **Fonts:** - **Display/Section titles:** "Poiret One" (Google Fonts) -- a geometric Art Deco display face with thin, elegant strokes, at clamp(28px, 5vw, 56px). Weight 400. The Deco geometry brings historical period specificity (1930s-40s government aesthetics) while remaining legible and elegant. - **Body text:** "Cormorant Garamond" (Google Fonts) -- a refined display Garamond at 18px/1.85 line-height. Weight 400 for body, 500 for emphasis. The generous line-height supports the spacious layout philosophy. Italic for quotations and historical citations. - **Captions/Dates:** "Source Sans 3" (Google Fonts) -- a clean sans-serif at 11px, weight 400, letter-spacing: 0.06em. Used for image captions, dates, and metadata in burgundy-muted tones. **Color Palette (burgundy-cream):** - **Cream primary:** #f4ece0 (warm cream, primary background -- the dominant color by area) - **Cream warm:** #ece0d0 (slightly darker cream for subtle surface variation) - **Burgundy deep:** #5a1828 (primary text and accent color) - **Burgundy light:** #8a3848 (lighter burgundy for secondary headings, borders) - **Burgundy muted:** #a87878 (desaturated burgundy for metadata, captions) - **Text dark:** #2a1818 (near-black with warm undertone for body text) - **Gold accent:** #c8a058 (brass-gold for rare decorative accents, rule lines) ## Imagery and Motifs **Core visual motifs:** - **Duotone photography:** Historical imagery (documents, buildings, crowds) processed into two-tone treatment using only burgundy-deep (#5a1828) and cream (#f4ece0). This CSS filter treatment (grayscale(1) contrast(1.2) sepia(0.3) with mix-blend-mode: multiply over a burgundy background) unifies diverse source imagery into the scholarly palette. - **Floral-botanical pressed flowers:** Delicate botanical illustrations (single stems, leaf sprigs, flower heads) rendered as SVG paths with thin strokes (1.5px) in burgundy (#5a1828) at 0.15-0.25 opacity. These appear in the negative space between sections, suggesting flowers pressed between the pages of a legal volume. - **Border-animate accents:** Thin borders (1px) on content containers that draw themselves on scroll-enter: the border starts as a single point and extends around the perimeter over 1.2s. The animation uses CSS stroke-dashoffset technique on an SVG rect pseudo-element. - **Marginalia annotations:** Small burgundy-muted text notes appear in the wide left margins (absolutely positioned) next to certain paragraphs, styled as scholarly annotations. These provide historical context or definitions. ## Prompts for Implementation **Full-screen contemplative archive:** The site should feel like entering a quiet library after hours -- the vastness of empty space, the weight of history, the intimacy of reading by lamplight. Every element earns its presence by what surrounds it (emptiness). **Ma-negative-space implementation:** - Set body max-width to 560px, margin: 0 auto, with min-height: 100vh on each section. - Use padding: clamp(80px, 15vh, 200px) 0 on sections. - Content blocks should never fill more than 30% of their section's total area. - Use min-height rather than fixed heights to let content breathe. **Border-animate technique:** - Wrap content blocks in a container with an SVG rect element (absolute positioned, same dimensions). - SVG rect: stroke-dasharray equal to the perimeter, stroke-dashoffset equal to the perimeter (fully hidden). - On IntersectionObserver trigger: animate stroke-dashoffset to 0 over 1.2s, ease-out. **Duotone photo treatment:** - Apply CSS: filter: grayscale(1) contrast(1.3). - Place image over a burgundy (#5a1828) background with mix-blend-mode: multiply. - Wrap in a container with background: #f4ece0 and an inner div with background: #5a1828. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, neon effects, maximalist density. The emptiness is the design. ## Uniqueness Notes **Differentiators from other designs:** 1. **Negative space as historical weight:** No other design uses the ma (negative space) principle to convey the gravity of a political/historical subject -- the emptiness around "계엄령" becomes a visual metaphor for the silence that martial law imposes. 2. **Pressed botanical flowers in a legal-historical archive:** The contrast between delicate floral illustrations and the severity of martial law content creates a poignant, unique tension -- beauty preserved within pages of emergency decrees. 3. **70:30 emptiness-to-content ratio:** While other designs use generous whitespace, the deliberate 70:30 emptiness ratio is an extreme commitment to negative space that creates a unique reading experience found in no other design. **Chosen seed/style:** aesthetic: light-academia, layout: ma-negative-space, typography: art-deco-display, palette: burgundy-cream, patterns: border-animate, imagery: duotone-photo, motifs: floral-botanical, tone: nostalgic-retro **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%).