# Design Language for 계엄령.com ## Aesthetics and Tone The visual direction for 계엄령.com channels the aesthetic of a **broadcast interruption monument** -- the exact moment when television signals were seized, replaced by a stark military announcement, and an entire nation froze in collective disbelief. The design draws inspiration from the visual language of emergency broadcast systems, declassified intelligence dossiers, and the metallic solemnity of war memorials -- but refracted through a dopamine-saturated lens that refuses to let the viewer look away. This is not a mournful archive; it is an urgent, electrifying confrontation with the night of December 3, 2024. The mood oscillates between **controlled fury and crystalline clarity**. Every element carries the weight of a constitutional violation rendered in cold navy steel and illuminated by aurora-like bands of light that evoke both the northern lights visible from Seoul's latitude in winter and the searchlights that swept the National Assembly grounds. The tone is bold-confident -- not aggressive, but unflinching. It speaks with the voice of citizens who stood in the freezing dark and said no. There is no sentimentality here, only precision, conviction, and the visual equivalent of a document that must not be forgotten. The aesthetic deliberately rejects the warm, friendly, corporate visual language that dominates web design. Instead, it embraces the cold luminance of metallic surfaces catching emergency light -- the specific blue-silver palette of a smartphone screen recording history at 11 PM in December. ## Layout Motifs and Structure The page is structured as a **hero-dominant vertical monument** -- a single commanding hero section consuming the first 100vh, followed by a series of precisely timed narrative panels that reveal themselves through scroll-driven parallax choreography. The hero is not merely large; it is the entire opening statement, an immersive full-viewport declaration that establishes the gravity and visual authority of the experience before any scrolling occurs. **The Hero Monument (Section 0 -- 100vh):** A full-viewport canvas dominated by a single oversized typographic element: the date "2024.12.03" rendered at `clamp(8rem, 18vw, 22rem)` in Playfair Display italic, positioned at the golden section (61.8% from top). Below it, "23:22 KST" in a smaller counter -- the exact minute the declaration was broadcast. The background is a deep navy (#0a1628) with a slow-moving aurora gradient that shifts across the viewport over a 30-second CSS animation cycle. No navigation is visible initially; a single thin downward-pointing chevron pulses at the bottom edge. **Narrative Panels (Sections 1-5):** Each subsequent section is a self-contained scene occupying 80-100vh, structured as a **split composition**: a large custom illustration on one side (60% width) and a text column on the other (40% width), alternating left-right placement. The split ratio uses CSS Grid with `grid-template-columns: 3fr 2fr` and its mirror. Each panel has 80px of vertical padding and 48px horizontal gutters. **The Scroll Architecture:** Parallax operates on three distinct depth planes: - **Plane A (background):** Aurora light bands that drift at 0.3x scroll speed, creating a persistent atmospheric glow behind all content - **Plane B (illustrations):** Custom illustrations that translate at 0.7x scroll speed, creating a subtle depth separation from text - **Plane C (text/foreground):** Text and UI elements at 1.0x (normal scroll), anchored and crisp The footer is a single dark panel (#060d1a) containing a timeline of key events rendered as a horizontal scrolling element within the vertical page -- a deliberate layout inversion that forces the viewer to engage differently with the chronological data. No sidebar. No card grids. No pricing blocks. No CTA buttons. The layout is a vertical procession -- a monument you walk through, not a dashboard you scan. ## Typography and Palette **Display / Hero Font:** "Playfair Display" (Google Fonts, weights 700, 700 Italic) -- a transitional serif with sharp, high-contrast stroke variation that carries both editorial authority and dramatic elegance. Used for the hero date, section titles, and pull quotes. The italic variant is reserved exclusively for the hero "2024.12.03" treatment, giving it a calligraphic urgency. Size: `clamp(2.4rem, 6vw, 5rem)` for section titles. Color: #c8d6e5 (frosted silver) against dark backgrounds, shifting to #0a1628 (deep navy) on the rare light panel. Letter-spacing: -0.02em for display sizes (tight, commanding). **Body / Narrative Font:** "Source Sans 3" (Google Fonts, weights 300, 400, 600) -- a humanist sans-serif with excellent legibility at body sizes and a neutral, documentary clarity that does not compete with the dramatic serif headings. Weight 300 (Light) for extended body text at 18px/1.7 line-height. Weight 600 for emphasized passages and captions. Color: #8899aa (muted steel) for body text, ensuring readability without the harshness of pure white on dark backgrounds. **Accent / Data Font:** "IBM Plex Mono" (Google Fonts, weight 400) -- used exclusively for timestamps, numerical data, and the timeline footer. Its monospaced rhythm gives temporal data the mechanical authority of a broadcast clock. Size: 14px, letter-spacing: 0.06em, color: #4ecdc4 (aurora teal). **Primary Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Deep Navy | #0a1628 | Midnight Command | Primary background, dominant surface | | Dark Steel | #0f2039 | Signal Dark | Secondary background, panel alternation | | Frosted Silver | #c8d6e5 | Cold Light | Display headings, hero typography | | Muted Steel | #8899aa | Document Gray | Body text, secondary information | | Aurora Teal | #4ecdc4 | Emergency Green | Accents, timestamps, interactive highlights | | Aurora Violet | #7b68ee | Broadcast Violet | Aurora gradient band, hover states | | Metallic Gold | #b8860b | Seal Authority | Sparse accent for legal references, stamp motifs | | Absolute Dark | #060d1a | Void | Footer, deepest background layer | The palette is deliberately cold and metallic. Warmth enters only through the aurora gradient bands -- teal (#4ecdc4) bleeding into violet (#7b68ee) bleeding into a faint rose (#e8475f) at the edges -- which create the dopamine-level visual intensity against the overwhelming navy darkness. The metallic quality comes from the silver-to-steel gradient in typography and the subtle `background: linear-gradient(135deg, #0a1628 0%, #0f2039 50%, #0a1628 100%)` shimmer applied to panels. ## Imagery and Motifs **Custom Illustration System:** All visual content is delivered through a series of hand-crafted SVG illustrations in a consistent style: **single-weight line drawings in frosted silver (#c8d6e5) on navy backgrounds, with selective aurora-colored fills** that bleed outside the line boundaries like light leaking through cracks. No photographs. No stock imagery. Every illustration is purpose-built for this narrative. Illustration subjects for each narrative panel: 1. **The National Assembly dome** -- rendered as an architectural elevation drawing with the dome's ribbed structure in precise linework, aurora light spilling through the entrance doors 2. **A cluster of smartphones held aloft** -- seen from below, their screens glowing teal-white, forming a constellation pattern against a dark sky. The screens show fragments of live-stream timestamps 3. **The constitutional text** -- Article 77 of the Korean Constitution rendered as a typographic illustration, with key phrases ("국회가 재적의원 과반수의 찬성으로") highlighted by aurora-teal underlines that appear to be hand-drawn 4. **A clock face frozen at 23:22** -- the clock hands rendered in metallic gold (#b8860b), the numerals in Playfair Display, with aurora bands radiating from the center like a shattered halo 5. **An aerial view of Gwanghwamun Plaza** -- rendered as a topographic/blueprint illustration showing the gathering crowd as a dense field of small circles, each one a single pixel of collective will **Aurora Light Motif:** The signature atmospheric element. Implemented as layered `
` elements with CSS `background: radial-gradient(ellipse at 50% 0%, rgba(78, 205, 196, 0.12) 0%, transparent 60%)` overlaid with a second gradient in violet. These aurora bands span the full viewport width and drift slowly using `@keyframes aurora-drift` with `transform: translateX()` over 30-second cycles. The bands appear behind content at Plane A depth, creating a persistent, breathing atmospheric backdrop that evokes both the natural aurora and the unnatural glow of emergency lighting. **Metallic Texture Motif:** Subtle noise-grain overlay at 2% opacity applied to all dark panels via a CSS `background-image` using a base64-encoded 200x200px noise pattern. This prevents the flat-screen deadness of pure CSS colors and gives surfaces a tactile, machined-metal quality -- like the surface of a memorial plaque. **Stamp/Seal Motif:** A single decorative element appearing in the hero section: a circular seal rendered in metallic gold (#b8860b) at 15% opacity, containing the text "계엄령" in the center and "MARTIAL LAW DECLARED / 2024.12.03 / REVOKED" around the circumference, styled as a rubber-stamp impression. This appears offset in the upper-right quadrant of the hero, partially clipped by the viewport edge, like a document classification mark. ## Prompts for Implementation Build 계엄령.com as a **single-page vertical scroll monument** -- an immersive narrative experience that unfolds the story of the December 3, 2024 martial law declaration through five sequential scenes, each combining custom illustration with documentary text. The experience should feel like walking through a digital memorial -- solemn in weight, electric in execution, impossible to skim. **Hero Section Construction:** - Full 100vh viewport, `overflow: hidden`, background #0a1628 - The date "2024.12.03" in Playfair Display 700 Italic at `clamp(8rem, 18vw, 22rem)`, `color: #c8d6e5`, centered horizontally, positioned at `top: 38.2%` (golden section from top) - Below the date: "23:22 KST" in IBM Plex Mono at 1.2rem, `color: #4ecdc4`, with a slow CSS `opacity` pulse (1.0 to 0.6 over 3 seconds, infinite) - Aurora gradient bands behind text: two absolutely-positioned divs with `radial-gradient` backgrounds in teal and violet, animated with `translateX` keyframes at different speeds (20s and 30s) to create parallax between the aurora layers themselves - The metallic gold seal SVG positioned `top: 12%; right: -4%`, 280px diameter, `opacity: 0.15`, `mix-blend-mode: screen` - A chevron indicator at `bottom: 32px`, centered, using a thin (1px) SVG arrow in #8899aa, animated with a gentle 2s `translateY` bounce **Parallax Engine:** - Use `IntersectionObserver` to detect when each narrative section enters the viewport - Apply `transform: translateY(calc(var(--scroll-offset) * -0.3))` to Plane A elements (aurora bands) - Apply `transform: translateY(calc(var(--scroll-offset) * -0.15))` to Plane B elements (illustrations) - Update `--scroll-offset` via a throttled (16ms) scroll event listener that calculates `element.getBoundingClientRect().top` relative to viewport center - All parallax transforms use `will-change: transform` for GPU acceleration **Narrative Panel Template:** Each of the five narrative sections follows this structure: ```

``` - Panels alternate: odd panels have illustration left (grid: 3fr 2fr), even panels have illustration right (grid: 2fr 3fr) - Each panel fades in from `opacity: 0; transform: translateY(40px)` to `opacity: 1; transform: translateY(0)` when it enters the viewport, using a CSS transition triggered by adding a `.panel--visible` class via IntersectionObserver - Transition: `opacity 0.8s ease-out, transform 0.8s ease-out` **Aurora Background System:** - A persistent `
` lives as a fixed-position element behind all content (`z-index: -1`) - Contains three overlapping radial gradients: teal (top-center), violet (top-right, delayed phase), and faint rose (top-left, further delayed) - Each gradient is a child div with its own `@keyframes` animation cycling `translateX` from -20% to 20% at different durations (20s, 28s, 35s) - Combined `opacity` on the aurora container is capped at 0.15 to prevent overpowering content **Timeline Footer:** - A horizontal scrolling timeline rendered as a `
` with `overflow-x: auto; white-space: nowrap` containing inline-block event nodes - Each node: a vertical line (1px, #4ecdc4, 40px tall), a timestamp in IBM Plex Mono, and a one-line description in Source Sans 3 - Nodes spaced 120px apart - The scrollbar is custom-styled: 4px height, #0f2039 track, #4ecdc4 thumb **AVOID:** Any CTA buttons, newsletter signups, pricing blocks, stat-counter grids, testimonial carousels, or generic "hero + features + footer" SaaS patterns. This is a memorial, not a product page. AVOID photography entirely -- all visuals are custom SVG illustrations. AVOID warm color palettes. AVOID friendly/casual tone. AVOID card-grid layouts. ## Uniqueness Notes 1. **Emergency broadcast memorial aesthetic:** No other design in this collection treats a web page as a broadcast interruption monument. The hero section's frozen-timestamp treatment (a massive date rendered at near-viewport scale) creates an experience closer to visiting a physical memorial than browsing a website. The combination of documentary precision (exact timestamps in monospace) and dramatic typography (Playfair Display italic at heroic scale) is not found in any other design. 2. **Aurora-as-emergency-light atmospheric system:** While aurora-lights appears as a motif in approximately 3% of designs, none use it as a dual metaphor -- simultaneously evoking the natural atmospheric phenomenon visible from Korean latitudes in winter AND the artificial emergency lighting of a constitutional crisis. The three-layer animated gradient system with independent drift phases creates a living, breathing backdrop that other aurora implementations (typically static gradients) do not achieve. 3. **Custom illustration as sole visual medium with documentary intent:** Custom-illustration appears in only 1% of designs, and none combine it with a documentary/memorial narrative. The five purpose-built SVG illustrations (National Assembly dome, smartphone constellation, constitutional text, frozen clock, aerial crowd) form a coherent visual essay rather than decorative embellishment. Each illustration uses a consistent single-weight silver-line-on-navy technique with aurora-colored light leaks, creating a unified illustrative voice. 4. **Navy-metallic palette as emotional instrument:** The navy-metallic palette (2% frequency) is deployed not as generic "corporate dark mode" but as a specific sensory reference -- the cold blue light of a smartphone screen recording events at night, the metallic weight of a constitutional violation, the steel surface of a memorial plaque. The palette contains exactly one warm accent (metallic gold #b8860b) used only for the seal motif, creating a single point of warmth that reads as institutional authority rather than comfort. 5. **Parallax as temporal layering, not decorative depth:** While parallax appears in 98% of designs, this implementation uses it specifically to create a sense of temporal depth -- aurora bands from the past drifting slowly behind present-tense narrative content, illustrations occupying a middle temporal plane. The parallax is not eye-candy; it is a structural metaphor for layers of memory and history moving at different speeds through the viewer's consciousness. **Seed/Style:** dopamine, hero-dominant, playfair-elegant, navy-metallic, parallax, custom-illustration, aurora-lights, bold-confident **Avoided patterns (overused):** corporate aesthetic (97%), photography imagery (99%), warm palette (98%), mono typography (76%), nature motifs (48%), friendly tone (46%), centered layout as sole structure (58%), stagger animation (42%)