# Design Language for 계엄령.com ## Aesthetics and Tone 계엄령.com channels an evolved-minimal aesthetic — the refined restraint, purposeful reduction, and sophisticated simplicity of evolved minimalism applied to a platform documenting and analyzing martial law (계엄령, gyeoeomnyeong) — a serious civic topic explored with the visual gravity it deserves. The site constrains — with the editorial precision of The New York Times's feature design, the restrained power of Massimo Vignelli's grid systems, and the deliberate economy of a platform where information density is managed through intelligent reduction rather than decorative distraction. Inspiration draws from the evolved-minimal design of news platforms like Reuters, the typographic discipline of Swiss International Style, the editorial gravity of publications covering constitutional crisis, and the documentary clarity of historical archival interfaces. The tone is grounded-earthy — steady, rooted language that provides the stable foundation needed for examining serious civic matters without sensationalism. The evolved-minimal treatment transforms a civic documentation platform from sensational news interface into measured archival resource — events presented with chronological precision, analysis rendered with the visual restraint of content that speaks for itself, and the gravity of martial law explored through design that never competes with the seriousness of the subject. Each component carries evolved-minimal's purposeful restraint — limited color, disciplined spacing, and typography that prioritizes legibility over expression. The grounded-earthy tone anchors — steady perspective through measured visual language. ## Layout Motifs and Structure The layout uses an **f-pattern** architecture — content arranged along the natural F-shaped reading pattern creating the news-reading quality of editorial platforms optimized for information consumption. **F-Pattern Editorial System:** - Headline bar: full-width at max-width: 1080px centered - Content stream: 65% primary column with 35% supporting sidebar - Scannable headers: bold left-aligned for F-pattern eye movement - Gap: 32px between editorial elements - The F-pattern creates the newspaper quality of content optimized for efficient information absorption **Section Sequence:** 1. **Breaking Header:** Hero with eclectic-hybrid typography in evolved-minimal bold header bar, futuristic precise analytical motifs, ripple interactive measured emphasis radiating from key elements 2. **Chronicle Stream:** Timeline and analysis in F-pattern editorial flow — ripple interactive temporal emphasis with futuristic analytical overlays and photography documentary imagery 3. **Analysis Depth:** Detailed examination in generous editorial reading with photography archival documentary images and futuristic data-visualization accents 4. **Reference Archive:** Historical context in dense F-pattern sidebar with futuristic minimal analytical indicators 5. **Record Close:** Footer as archival stamp — grounded farewell with futuristic final analytical mark **Spatial Philosophy:** - F-pattern creates the news-consumption quality of content optimized for how people actually read - Evolved-minimal restraint prevents design from competing with content gravity - The archive metaphor positions the platform as permanent civic record rather than breaking news ## Typography and Palette **Typography:** - **Headlines:** "Playfair Display" (Google Fonts) — eclectic-hybrid at 2.2rem-3.0rem, weight 700, paired with "Inter" for subheads. The serif-sans combination creates the editorial quality of serious news publications. - **Body Text:** "Source Serif 4" (Google Fonts) — editorial serif at 0.95rem, weight 400, line height 1.8. - **Data:** "IBM Plex Mono" (Google Fonts) — monospace at 0.8rem for dates, article numbers, and reference codes. - **Labels:** "Inter" at 0.6rem, weight 600, uppercase, letter-spacing 0.14em. **Color Palette:** - **Paper White:** #f8f6f0 — warm paper for primary background - **Archive Tan:** #ece6d8 — warm tan for sidebar and alternate areas - **Burnt Orange:** #b86a2a — warm burnt orange for primary accent - **Dark Olive:** #4a4a2a — dark olive for secondary accent - **Umber Warm:** #6a4a2a — warm umber for tertiary accent - **Print Black:** #1a1810 — warm black for primary text - **Newsprint Gray:** #6a6458 — warm gray for secondary text - **Rule Line:** rgba(184,106,42,0.12) — orange-tinted line for editorial rules ## Imagery and Motifs **Photography Documentary Records:** Content supported by documentary photography treatment — images with slight desaturation (filter: saturate(0.85) contrast(1.05)) creating the archival quality of historical photographic documentation presented with editorial precision. **Ripple Measured Emphasis:** Key elements with outward-radiating ripple effect — box-shadow expanding from 0 to 8px spread over 400ms (Burnt Orange at 0.06 opacity), creating the measured quality of emphasis that draws attention without sensational urgency. **Futuristic Analytical Precision:** Decorative elements suggesting systematic analysis — thin SVG chart lines, data-point markers, and timeline connectors (1px stroke, Dark Olive at 0.06 opacity) creating the analytical quality of information processed through rigorous systematic examination. **Evolved-Minimal Card Treatment:** Content containers with purposeful simplicity — background: #ffffff; border-bottom: 2px solid rgba(184,106,42,0.12); border-radius: 0; padding: 28px. No box-shadow — the treatment creates the newsprint quality of editorial content blocks separated by typographic rules rather than decorative containers. **Editorial Rule Lines:** Horizontal rules separating content — 1px solid with Burnt Orange at 0.08 opacity creating the newspaper quality of editorial dividers that organize without decorating. ## Prompts for Implementation Build the page as an evolved-minimal martial law documentation platform. F-pattern: .editorial-layout { display: grid; grid-template-columns: 65% 35%; gap: 32px; max-width: 1080px; margin: 0 auto; } .editorial-full { grid-column: 1 / -1; } Minimal card: .archive-block { background: #ffffff; border-bottom: 2px solid rgba(184,106,42,0.12); border-radius: 0; padding: 28px; } Ripple: .emphasis-ripple { transition: box-shadow 400ms ease-out; } .emphasis-ripple:hover { box-shadow: 0 0 0 8px rgba(184,106,42,0.06); } AVOID: Sensational news interfaces, dramatic breaking-news templates, and emotionally manipulative crisis platforms. Let evolved-minimal restraint and grounded-earthy steadiness create a civic documentation platform where martial law is examined with the archival gravity and editorial precision the subject demands. ## Uniqueness Notes 1. **Evolved-minimal for civic documentation:** Purposeful restraint ensures design never competes with the gravity of martial law as a subject. 2. **F-pattern as optimized reading:** Natural eye-movement layout positions content for efficient information absorption. 3. **Grounded-earthy tone as civic steadiness:** Rooted language provides stable foundation for examining serious constitutional matters. 4. **Ripple as measured emphasis:** Restrained emphasis radiates attention without sensational urgency. 5. **Editorial rules as newspaper structure:** Typographic dividers create the newsprint quality of serious journalism. **Seed/Style:** aesthetic: evolved-minimal, layout: f-pattern, typography: eclectic-hybrid, palette: burnt-orange, patterns: ripple, imagery: photography, motifs: futuristic, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic, parallax patterns, asymmetric layout, mono typography, warm palette, friendly tone, minimal imagery. This design uses evolved-minimal aesthetic, f-pattern layout, eclectic-hybrid typography, burnt-orange palette, ripple patterns, photography imagery, and grounded-earthy tone.