# Design Language for 20241204.com ## Aesthetics and Tone The site chronicles the hours immediately following the declaration of martial law in South Korea on the night of December 3, 2024 — the shock, the civic resistance, the flickering uncertainty, and the dawn of December 4th when the National Assembly voted to lift it. The aesthetic channels the raw tension of a nation jolted awake: emergency broadcast static, the cold blue glow of phone screens in darkened streets, the warm amber of candlelight vigils, and the stark authority of official government typography suddenly appearing on every screen. The visual tone oscillates between two poles: **institutional severity** (the martial law decree, military fonts, rigid geometry) and **civic warmth** (handwritten protest signs, candlelight, human texture). This contrast drives every design decision. The site feels like turning on a television at 11 PM and finding the world has changed — a documentary unfolding in real time, rendered as a web experience. Inspired by: Korean broadcast emergency screens, the aesthetic of protest photography under sodium streetlights, the visual language of the National Assembly's live-stream feeds, and the stark minimalism of Korean government documents mixed with the organic chaos of citizen journalism shot on phones. ## Layout Motifs and Structure **Primary Structure: Immersive vertical scroll timeline** — The page is a single, long vertical narrative that moves through the night of December 3-4, 2024 chronologically. Each "chapter" occupies at minimum a full viewport height. **Opening:** A full-bleed black screen with a single timestamp flickering into view: "2024년 12월 3일 화요일 22:34" — the moment the decree was announced. The emergency broadcast tone pattern (three horizontal colored bars — red, yellow, green — reminiscent of Korean EBS alerts) slices across the screen before dissolving into the narrative. **Section architecture:** - **Decree section**: Rigid, militaristic grid. Content is constrained within a narrow central column with heavy borders, evoking a government gazette or official decree document. Text appears as if being typed by a teleprinter. Wide margins filled with redacted-looking black bars. - **Streets section**: The grid breaks apart. Content tiles become irregularly placed, overlapping slightly, as if photos and messages are being pinned to a corkboard in real time. Aspect ratios vary. Some elements are rotated 1-3 degrees. This broken-grid approach mirrors the chaos of citizen reports flooding in. - **National Assembly section**: A split-screen layout — the left half shows a stylized representation of the Assembly chamber (semicircular seating arrangement as an SVG), the right half displays a live-feed-style vertical scroll of vote tallies and timestamps. - **Dawn section**: The layout opens up dramatically — wide margins collapse, the background transitions from deep midnight blue to a pale gold-gray gradient. Typography becomes airy, spacing generous. The tension releases visually. **Navigation:** A thin vertical progress bar on the right edge, segmented and labeled with hour markers (22:00, 23:00, 00:00, 01:00, ..., 06:00). Clicking a segment jumps to that chapter. The current segment pulses subtly. ## Typography and Palette **Fonts:** - **Headlines / Decree text**: "Black Han Sans" (Google Fonts) — a bold, authoritative Korean display font that evokes government announcements and news tickers. Used at large scale for timestamps and section headers. - **Body / Narrative**: "Noto Sans KR" (Google Fonts) — clean, highly legible Korean body text at 400 and 500 weights. Used for descriptive passages and captions. - **Monospace / Data elements**: "IBM Plex Mono" (Google Fonts) — for timestamps, vote counts, article numbers of the constitution, and any data-driven elements. Evokes broadcast data overlays and terminal readouts. - **Handwritten accent**: "Nanum Pen Script" (Google Fonts) — sparingly used for elements representing citizen voices, protest signs, or personal testimony. Provides warmth against the institutional coldness. **Color Palette:** | Role | Color | Hex | |------|-------|-----| | Background (Night) | Near-black with blue undertone | #0a0e1a | | Background (Dawn) | Pale warm gray | #e8e0d4 | | Emergency Red | Korean broadcast alert red | #c8102e | | Alert Amber | Streetlight / candlelight warm | #d4a017 | | Cold Authority Blue | Screen glow / institutional | #2e4a7a | | Assembly Green | Vote-for-lifting indicator | #2d8a4e | | Text Primary (on dark) | Off-white, slightly warm | #e6e1d8 | | Text Primary (on light) | Deep charcoal | #1a1a1e | | Redaction Black | Censorship / decree bars | #111114 | | Timestamp Gray | Subdued metadata | #6b7280 | | Dawn Gold | Hope / resolution accent | #c9a84c | | Static Noise | Interference pattern gray | #3a3d45 | The palette transitions across the scroll: the first half is dominated by #0a0e1a, #c8102e, and #2e4a7a (dark, urgent, cold). The second half introduces #2d8a4e, #c9a84c, and #e8e0d4 (resolution, warmth, dawn). This chromatic journey mirrors the emotional arc from shock to relief. ## Imagery and Motifs **Emergency Broadcast Bars**: Three horizontal color bands (red #c8102e, amber #d4a017, a desaturated white #d4d0c8) appear as a recurring motif — as section dividers, loading indicators, and decorative borders. These reference the Korean Emergency Alert System visual identity. **Static / Noise Texture**: A subtle CSS-generated noise grain overlays dark sections, creating the feeling of watching a degraded broadcast signal. The grain intensity increases during tense moments and fades as dawn approaches. **Redaction Bars**: Thick black rectangles (#111114) are used decoratively — partially obscuring elements in the decree section, suggesting censorship and the suppression of information. Some text appears to "unredact" on scroll, revealing hidden content beneath the bars. **Candlelight Particles**: Small, warm amber (#d4a017) circles with soft radial gradients float gently upward in sections about citizen resistance. These reference the candlelight vigil tradition of Korean democratic protest (촛불 집회). Implemented as lightweight CSS animations. **Semicircular Assembly Diagram**: An SVG-based representation of the National Assembly seating arrangement. Individual seats fill in with green (#2d8a4e) as the scroll progresses through the vote section, visualizing the 190 votes needed to overturn the decree. **Clock / Timestamp Motif**: A large circular clock face appears at key chapter transitions, its hands animating to the relevant hour. The clock uses minimal line art — thin strokes in #6b7280 on dark backgrounds, with the hour hand in #c8102e to suggest urgency. **Korean Constitutional Text**: Article 77 of the Korean Constitution (regarding martial law) appears as a background watermark in the decree section — oversized, rotated, and set at very low opacity (#1a1a2e at 8% opacity on #0a0e1a), creating a textural depth without competing with foreground content. **Phone Screen Rectangles**: Rounded rectangles with slight glow effects (#2e4a7a glow) represent citizen phone screens — the primary tool of documentation and communication during that night. These serve as content containers for "citizen report" sections. ## Prompts for Implementation **Full-screen narrative scroll experience** — This is a single-page chronological narrative. Every section is a full-viewport scene. The scroll IS the interaction. No traditional navigation menus, no footer links, no sidebar. Just the timeline unfolding. **Opening sequence (critical):** 1. Page loads to pure black (#0a0e1a). 2. After 800ms, three horizontal bars flash across the screen (emergency broadcast motif) with a CSS animation — they appear, hold for 400ms, then dissolve. 3. The timestamp "2024년 12월 3일 화요일 22:34" fades in character by character using a typewriter effect in "IBM Plex Mono" at 3rem, colored #c8102e. 4. A thin horizontal rule draws itself beneath the timestamp. 5. Below, the first paragraph of narrative text fades in using "Noto Sans KR" 400 weight. **Scroll-triggered transitions:** - Each chapter boundary triggers a background color shift (use CSS `scroll-timeline` or IntersectionObserver). - The decree section uses a constrained column width (max 640px centered) with visible thick borders in #c8102e on the left edge — like a vertical red line on an official document. - The streets section expands to full width with elements scattered using CSS grid with randomized `grid-row` and `grid-column` placements, some items rotated with `transform: rotate()`. - The Assembly section uses a CSS grid split-screen: `grid-template-columns: 1fr 1fr`. - The dawn section transitions the `background-color` from #0a0e1a to #e8e0d4 using a vertical gradient that responds to scroll position, and text color inverts from #e6e1d8 to #1a1a1e. **Animation details:** - Typewriter effect for decree text — characters appear one at a time with a blinking cursor (CSS `@keyframes` with `steps()`). - Candlelight particles use `@keyframes` with `translateY` upward drift, slight `translateX` oscillation, and `opacity` fade from 0.8 to 0.0 over 4-6 seconds. - Redaction bars use `clip-path` or `scaleX` animations that reveal text beneath when the element enters the viewport. - The Assembly seat SVG fills in seats sequentially using JS — each seat transitions from #3a3d45 to #2d8a4e with a 30ms stagger, creating a domino effect as votes are counted. - The vertical progress bar segment corresponding to the current scroll position fills from empty to solid (#c8102e in night sections, #2d8a4e in resolution sections). **Text treatment:** - Korean and English are mixed naturally (the domain is 20241204.com, so international context is assumed). Primary narrative in Korean; constitutional articles, timestamps, and metadata in a mix. - Pull quotes from the night (citizen voices, assembly members' statements) are displayed in large "Nanum Pen Script" at 2.5rem, rotated 1-2 degrees, with a subtle left border in #d4a017. - Article numbers (제77조, etc.) are displayed in "Black Han Sans" as oversized background elements. **Storytelling bias:** - NO call-to-action buttons, pricing blocks, or stat grids. - NO traditional hero sections with taglines. - The entire page IS the story. The scroll replaces navigation. Each viewport is a scene. - Interactions serve the narrative — animations reveal information, transitions mark time passing, color shifts convey emotional arcs. - The experience should feel like reading a graphic novel or watching a documentary: sequential, emotional, authored. **Technical notes:** - Use `scroll-behavior: smooth` sparingly (only for the progress-bar jump links). - Use `prefers-reduced-motion` media query to disable particle effects and typewriter animations for accessibility. - The noise texture overlay uses a tiny repeating PNG (64x64) or CSS `background-image` with SVG filter turbulence. - Mobile: stack the split-screen Assembly section vertically; reduce particle count; keep the progress bar but make it thinner. ## Uniqueness Notes **Differentiators from other designs:** 1. **Historical event as narrative architecture**: The entire site structure maps to a real timeline (22:00 Dec 3 through 06:00 Dec 4, 2024). The layout is not arbitrary — it follows the chronological unfolding of events. This is not a "themed site" but a narrative document where the structure IS the content. 2. **Chromatic emotional arc**: The palette physically transitions from dark/cold/urgent to warm/light/resolved as the user scrolls. This is not a light/dark mode toggle but a continuous gradient journey tied to the narrative's emotional progression. No other design uses color as a temporal storytelling device in this way. 3. **Dual visual languages in opposition**: The design deliberately contrasts institutional severity (government decree aesthetics: rigid grids, teleprinter fonts, redaction bars, constitutional watermarks) against civic warmth (handwritten fonts, candlelight particles, irregular layouts, phone-screen containers). This tension drives visual interest without relying on conventional web design patterns. 4. **Korean democratic tradition as design vocabulary**: The candlelight motif (촛불), the Assembly semicircle, and the emergency broadcast bars are drawn from specific Korean cultural and political visual traditions, not generic protest imagery. The design has cultural specificity that cannot be replicated by swapping in different content. 5. **Zero conventional web patterns**: No hero section, no navbar, no footer, no cards, no pricing table, no testimonial carousel, no CTA button. The site rejects the vocabulary of commercial web design entirely in favor of documentary storytelling. **Chosen seed/style:** 계엄령 직후 **Avoided patterns from frequency analysis:** No frequency data available (first design in the system). However, the design deliberately avoids: CTA-heavy layouts, pricing blocks, stat-grids, conventional hero sections, card grids, standard navigation patterns, and any corporate/SaaS aesthetic. The design also avoids generic dark-mode-neon or glassmorphism trends in favor of a historically grounded, event-specific visual language.