# Design Language for 20241204.com ## Aesthetics and Tone The site commemorates the night of December 3-4, 2024 — the hours immediately after South Korea's declaration of martial law. The aesthetic channels the raw, breathless tension of a nation watching democracy teeter on a wire at 10:27 PM KST. The visual direction draws from wartime broadsheets, emergency broadcast screens, and the dimly lit interiors of the National Assembly chamber where lawmakers scrambled to vote down the decree. Think: the grainy, blue-tinged glow of a television tuned to YTN in a darkened living room. Think: a crumpled printout of the martial law proclamation, its text bold and bureaucratic against cheap paper. The tone is documentary and solemn but not passive — there is an undercurrent of defiance. The people of Seoul who flooded Yeouido in the freezing December night are the emotional spine of this design. The mood oscillates between the sterile authority of the government decree (cold, typographic, impersonal) and the human chaos of the streets (warm, textured, urgent). Inspiration: Korean newspaper front pages from that night, CCTV stills of soldiers entering the National Assembly, the orange glow of protest candles against dark winter sky, emergency scrolling tickers on Korean broadcast channels. ## Layout Motifs and Structure The layout is a single continuous vertical scroll structured as a timeline — minute by minute, hour by hour — of the night of December 3-4, 2024. **Primary structure: Timeline-vertical with editorial-flow segments** The page begins with a massive full-bleed hero that shows only the time "22:27" and the date "2024.12.03" in stark white against near-black. No logo, no navigation — just the timestamp, the way a breaking news alert arrives. Below, the layout alternates between two modes: 1. **Decree Mode** — Full-width blocks with rigid, government-document typography. Centered text, heavy rules above and below, justified columns. These represent the official voice: the martial law declaration, military orders, the constitutional articles invoked. Background: off-white (#f5f0e8) like aged document paper. Text is set in tight columns reminiscent of Korean broadsheet newspapers, with vertical red stamps (인) as decorative punctuation. 2. **Street Mode** — Broken-grid, asymmetric layouts with layered depth. Overlapping panels, tilted frames, images bleeding past their containers. These sections represent the people's response: the crowds at the National Assembly, the vote to lift martial law, the collective exhale. Background shifts to dark (#0a0a0f) with warm amber highlights. Text breaks free of columns, sometimes running at slight angles. The two modes collide at key moments — the soldiers entering the Assembly, the 190-0 vote — where elements from both modes overlap and compete for the same screen space. Navigation is minimal: a thin vertical progress bar on the right edge showing the timeline, with key timestamps as anchor points. No hamburger menu, no header. The scroll IS the navigation. ## Typography and Palette **Typography — Headlines / Timestamps:** "Black Han Sans" (Google Fonts) — a bold, condensed Korean display face that evokes protest banners and newspaper headlines. Used for all major timestamps and section titles. Rendered at massive scale (clamp(3rem, 8vw, 10rem)). **Typography — Decree Text / Official Voice:** "Noto Serif KR" (Google Fonts) — formal, authoritative Korean serif. Used in the Decree Mode sections for proclamation text and quoted official documents. Set justified, with traditional Korean typographic spacing. **Typography — Body / Narration:** "Noto Sans KR" (Google Fonts) — clean, modern Korean sans-serif for narrative text that guides the reader through events. Weight 300 for body, 700 for emphasis. **Typography — Timestamps / Data:** "IBM Plex Mono" (Google Fonts) — monospaced, used for all clock times, dates, vote counts, and data annotations. Gives a broadcast-ticker or teletype feel. **Palette:** | Role | Color | Hex | |------|-------|-----| | Void / Night Sky | Near-black with blue undertone | #0a0a12 | | Paper / Decree Background | Aged parchment off-white | #f5f0e8 | | Blood / Urgency | Deep emergency red | #c41e1e | | Candle / Defiance | Warm amber-gold | #e8a020 | | Broadcast Blue | Cold television glow | #2a4a7f | | Steel / Military | Gunmetal gray | #3d3d4a | | Ink / Primary Text on Light | Dense black ink | #1a1a1e | | Ghost Text on Dark | Muted silver | #8a8a9a | | Dawn / Resolution | Pale morning blue | #b8c8d8 | The palette tells a chromatic story: the site begins in #0a0a12 void and #c41e1e alarm, transitions through #e8a020 candlelight and #2a4a7f broadcast glow during the Assembly scenes, and resolves into #b8c8d8 dawn as martial law is lifted at 4:27 AM. ## Imagery and Motifs **Visual Elements:** - **Red Seal Stamps (인):** Traditional Korean official seals rendered as SVG, used as section markers and decorative elements. They appear stamped onto decree sections at slight angles, as if a bureaucrat has hastily authorized each passage. Semi-transparent, layered over text. - **Broadcast Scan Lines:** Subtle horizontal line overlays (CSS repeating-linear-gradient) applied to imagery and dark sections, evoking the look of CRT television screens — the medium through which most Koreans experienced that night. - **Crumpled Paper Texture:** A noise-textured overlay on Decree Mode sections that simulates aged, slightly creased paper. Created with CSS filter and SVG feTurbulence, not image files. - **Candle Glow Particles:** Small, warm-amber circular elements (#e8a020 with radial gradient to transparent) that drift slowly upward in Street Mode sections, representing the candlelight vigils. Implemented as lightweight CSS animations, not canvas. - **Timeline Spine:** A thin vertical line (#c41e1e) running down the left margin in timeline sections, with circular nodes at each major event. The line draws itself as the user scrolls (SVG path-draw with scroll-triggered animation). - **Clock Face:** At key moments, a minimalist analog clock SVG appears, its hands frozen at the critical time (10:27 PM, 1:01 AM for the vote, 4:27 AM for the lift). Rendered in #3d3d4a steel with #c41e1e hands. **Decorative Patterns:** - **Taegeuk Fragment:** Abstracted curves from the Korean flag's taegeuk symbol, used as large-scale background SVG elements in transition zones between Decree and Street modes. Not the full flag — just the yin-yang curve rendered as a single sweeping path in #c41e1e and #2a4a7f. - **Barbed Wire Motif:** Thin, angular SVG line patterns that appear at the edges of military/decree sections, subtly suggesting the martial law boundary. Rendered in #3d3d4a at low opacity. - **Vote Counter:** An animated counter motif for the 190-0 vote, where numbers increment rapidly from 0 to 190, each tick accompanied by a subtle pulse animation. The zero on the opposing side remains still, stark, absolute. ## Prompts for Implementation **Narrative Experience:** This is a full-screen, scroll-driven documentary — not a website with sections. Every pixel of vertical scroll should advance the story. The user should feel like they are living through that night in compressed time. **Opening sequence:** The page loads to a black screen. After 800ms, "22:27" fades in using a typewriter-effect (IBM Plex Mono, #c41e1e). Below it, "2024.12.03" appears. Then: "비상계엄 선포" (Emergency Martial Law Declared) in Black Han Sans, scaling up from 0.8 to 1.0 over 400ms. This is the only above-the-fold content. The user must scroll to begin. **Scroll-triggered storytelling:** Use Intersection Observer to trigger animations as sections enter the viewport. Decree sections slide in from the bottom with a paper-unfold effect. Street sections emerge with a broken, staggered reveal — elements appearing at different speeds and from different directions. **The Vote scene:** The climactic moment — the 190-0 National Assembly vote to lift martial law — should be the most visually dramatic. The Decree and Street modes merge: the formal Assembly chamber layout fractures as representatives defy the decree. Use a CSS clip-path animation that tears a decree-styled section apart to reveal the Street mode behind it. The vote counter (0 to 190) animates over 3 seconds with each increment shaking the number slightly. **Resolution:** After the vote, the palette gradually shifts from #0a0a12 to #b8c8d8 dawn. The last section shows "04:27" and "계엄 해제" (Martial Law Lifted) in Black Han Sans, but now the text is calm, unhurried, fading in gently instead of urgently. Candle glow particles slow and rise off-screen. **Animation Strategy:** - Use CSS scroll-timeline or Intersection Observer — no heavy JS animation libraries - Candle particles: pure CSS animation with randomized delays (animation-delay: calc(var(--i) * 0.3s)) - Typewriter timestamps: CSS steps() animation on width with overflow hidden - SVG path drawing: stroke-dasharray/stroke-dashoffset animated on scroll - The 190-0 counter: CSS @property animated number with @keyframes - Page transitions between Decree/Street modes: CSS mix-blend-mode and clip-path **Technical Notes:** - All text in Korean with appropriate lang="ko" attribute - Ensure Black Han Sans loads with Korean character subset (unicode-range) - Use prefers-reduced-motion to disable scroll animations for accessibility - The site should work as a single HTML page — no routing, no SPA framework - AVOID: CTA buttons, pricing blocks, stat-grids, newsletter signups, testimonial carousels - AVOID: Generic hero sections with stock photography - AVOID: Multi-column feature comparison layouts ## Uniqueness Notes **Differentiators:** 1. **Dual-mode layout system (Decree vs. Street):** No other design alternates between two fundamentally different visual languages within the same page, using the contrast itself as a narrative device. The rigid government aesthetic vs. the chaotic human response creates visual tension that IS the content. 2. **Chronological scroll-as-timeline:** The entire page is structured as a real-time compressed timeline of a specific historical night (roughly 6 hours compressed into a scroll experience). This is not a generic "about" page or "features" section — it is a documentary told through web design. 3. **Korean typographic identity:** The design is built entirely around Korean typography (Black Han Sans, Noto Serif KR, Noto Sans KR) and Korean visual culture (official seals, taegeuk abstractions, broadsheet newspaper conventions). It does not adapt a Western template — it starts from Korean design traditions. 4. **Chromatic narrative arc:** The color palette tells a story across the scroll — from emergency red and void black, through broadcast blue and candle amber, to dawn pale blue. The palette itself has a beginning, middle, and resolution. 5. **No branding or commercial elements:** The site has no logo, no company name, no CTA, no pricing. It exists purely as a memorial and documentary experience. This is extremely rare in web design and establishes the site as a historical artifact rather than a product. **Seed/Style:** Chosen seed: vintage newspaper layout This seed was selected because the December 4, 2024 martial law event was experienced by most Koreans through news media — television broadcasts and newspaper extras. The vintage newspaper layout provides the documentary gravitas and editorial structure that this subject demands, while the dual-mode system (Decree/Street) pushes it far beyond a standard newspaper recreation. **Pattern Avoidance:** Since no existing designs were found in the frequency analysis (first design in the system), no specific overused patterns needed to be avoided. However, the design deliberately avoids the most common web design tropes: - No card-grid layouts - No hero-dominant with centered CTA - No dashboard/analytics patterns - No glassmorphism or neomorphism trends - No generic gradient backgrounds - Instead embraces: timeline-vertical, editorial-flow, broken-grid, scroll-triggered, typewriter-effect, path-draw-svg, paper-aged textures — patterns that serve the documentary narrative.