# Design Language for 계엄령.com ## Aesthetics and Tone The domain **계엄령** (gyeye-eomnyeong) means "martial law" — a state of suspension between civil time and decree time, between the city that was and the city under curfew. This site inhabits that liminal threshold not as a news archive but as a **dreamscape memorial**: a pixel-art cityscape seen from a high window at 2 a.m., amber streetlights bleeding into fog, the geometry of buildings fractured into sharp isometric planes, everything slightly too quiet. The aesthetic is **pixel-art etherealism** — an apparent contradiction held together by warmth. Each scene is rendered in crisp pixel grids (8×8 and 16×16 tile units) but the overall impression is not retro-gaming nostalgia; it is the sensation of a city that has been translated into a language older than photography. Amber, rust, and deep saffron warm the dark, the way sodium-vapor light does. The dreamy quality comes not from blur or haze but from **color ripple** — soft sine-wave color oscillations that make the static pixel grid appear to breathe, to pulse slightly in and out of focus. Tone: suspended, reverent, architecturally precise but emotionally unmoored. The viewer should feel they are looking at something real through a window that exists only in a dream. ## Layout Motifs and Structure The composition follows an **F-pattern macro-structure** — the primary reading path is: top banner (full width), then a strong left-column narrative descending, with horizontal accents jutting right at each act break, exactly mirroring how the eye traces an F across a dense page. This is not an editorial F-pattern for blogs; it is the **architectural F** — the way a brutalist floor plan reads, corridors and wings branching right from a central spine. **Structural breakdown:** - **Top band (full viewport width, 38vh):** A pixel-art city silhouette — rooftops, broadcast towers, a single lit window — rendered in 8px tiles. This band does not scroll; it anchors the frame. The silhouette is a continuous diorama that slowly ripples in amber hue (not moving, just oscillating in warmth). - **Left spine (full page height, 26vw):** The dominant vertical corridor. Large display text stacks vertically, reading top-down. Sharp-angle chevrons every 3–4 screens mark act breaks, pointing right — these are the F's horizontal strokes. - **Right content wings (two, each ~68vw wide):** Extended narrative panels that branch rightward from the spine at each chevron. Each wing contains a pixel illustration, a caption, and sparse body text — never more than four short paragraphs. Wings fade at their right edge into the dark background. - **Terminal block (full width, 50vh):** The closing colophon — a single pixel-art image of an empty city square at dawn, amber warming to pale yellow, with the date stamp `2024-12-04` inscribed in the tile-grid as if a building permit was stamped in stone. Sharp angles dominate transitions: section breaks are 30-degree diagonal cuts across the full viewport, beveled hard-pixel edges, not CSS clip-path smooth curves. ## Typography and Palette **Typography (all Google Fonts):** - **Display / Headlines:** [Press Start 2P](https://fonts.google.com/specimen/Press+Start+2P) — the canonical pixel-art bitmap typeface, set at oversized scales (clamp(4rem, 10vw, 11rem)) for chapter headings. Used sparingly — one headline per wing maximum. The bitmap rendering at large scale reveals individual pixel structure, reinforcing the tile-grid world. - **Sub-display / Wing headers:** [VT323](https://fonts.google.com/specimen/VT323) — a CRT terminal bitmap font, set at clamp(2.4rem, 5vw, 5.5rem). Less aggressive than Press Start 2P, it carries the warm amber color and renders the Korean date subtitles. - **Body / Captions:** [Noto Sans KR](https://fonts.google.com/specimen/Noto+Sans+KR), weight 300, size clamp(0.9rem, 1.4vw, 1.15rem). The body text must be unobtrusive — it exists to anchor the imagery, not to dominate it. Tracking at +0.02em. - **Accent / Decree stamps:** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) for any Latin numerals and timestamps. All caps, letter-spacing +0.25em. **Palette — Warm Pixel Amber:** | Role | Name | Hex | |------|------|-----| | Background (void) | Obsidian Amber | `#0d0800` | | Left spine | Curfew Black | `#130c01` | | Wing background | Twilight Bronze | `#1c1104` | | Primary glow | Sodium Amber | `#e89b2a` | | Mid tone | Rust Dawn | `#c05c18` | | Accent bright | Citrine Pulse | `#f5c842` | | Pale highlight | Fog Ivory | `#f0e6c8` | | Cool counterpoint | Surveillance Blue | `#1a2b4a` | | Pixel tile edge | Ember Shadow | `#7a3d0a` | The warm palette is deliberately **narrow in hue** (all ambers/rusts in the 20–45 degree hue range) but **wide in value** (from near-black to near-cream). This avoids the overused warm gradient problem: there are no gradients — only hard-edged pixel tiles in these discrete values, creating warmth through contrast, not blending. ## Imagery and Motifs All imagery is **inline SVG pixel art** — no raster images, no photography. Every scene is constructed on a visible tile grid (8px or 16px base unit) using filled rectangles only (no curves, no paths, no stroke — pure rect fills). This is the strict constraint: the city exists as an arrangement of rectangles. **The pixel-art roster:** - **City silhouette diorama (top band):** Low-rise buildings and broadcast towers, 8px tile grid, rendered in `#e89b2a` / `#c05c18` against `#0d0800`. One building has a single `#f5c842` lit window; one tower blinks (CSS animation: `opacity 1.2s step-start infinite`). No anti-aliasing, no sub-pixel rendering — `image-rendering: pixelated` enforced. - **Isometric chevron dividers:** Each F-pattern horizontal stroke is a sharp-angle isometric chevron: a 16-tile-wide × 8-tile-tall pixel art arrow, warm amber on deep bronze. The chevron's geometry is strict 2:1 isometric ratio. - **Ripple field motif:** The left spine has a **color ripple overlay** — a CSS keyframe animation that oscillates the spine's background between `#0d0800` and `#1c1104` in a sine pattern (not a gradient but a step-function approximation, 16 discrete steps, each 1px tall). This makes the spine appear to breathe with a slow amber pulse at ~3-second period. - **Geometric-abstract wing illustrations:** Each wing contains a single pixel-art geometric composition — not representational, but architectural: overlapping rectangles in isometric perspective, suggesting floor plans or building cross-sections, in the warm palette. Sharp 45-degree corners only. - **The empty plaza (colophon):** A low pixel-art illustration of a square at dawn — 16px tiles, amber warming to ivory from bottom to top, representing the hour when curfew lifted. Single human figure, 8px tall, in the lower-left corner of the plaza. **Recurring motifs:** - Sharp angles only (no curves, no rounded corners, no circles — even the blink is square) - Every transition is a diagonal hard cut at 26–30 degrees - Pixel grid stays visible: `background-size: 8px 8px`, `background-image: linear-gradient(...)` grid overlay at 4% opacity ## Prompts for Implementation This is a single narrative scroll. The story: a city held its breath for one night in December 2024. The site inhabits that breath — not explaining, not protesting, not archiving. Just holding the amber silence open. **Five full-screen narrative chapters:** 1. **Chapter 0 — The Silhouette.** Full-viewport city diorama in pixel art. Dead silent. One window lit. No text for 2 seconds (use IntersectionObserver delay before type appears). Then the domain name `계엄령.com` types itself letter by letter in Press Start 2P at 12vw, amber on black, using a CSS `steps()` animation. No button, no CTA, no scroll indicator — the user discovers scrolling on their own. 2. **Chapter 1 — The Decree (left spine descends).** Entering the F-pattern spine. VT323 text at 4vw, amber, states the decree date in Korean and in pixel-grid numerals. The spine background ripples. At the first chevron, text juts right into Wing 1. 3. **Chapter 2 — Wing 1: Architecture of Suspension.** The first right wing opens. A geometric-abstract pixel illustration (isometric floor plan shapes) dominates the left 40% of the wing; sparse Noto Sans KR body text describes the legal geometry of martial law (what it suspends, what it preserves) on the right 60%. The illustration's rectangles animate into position over 600ms using CSS `transform: translateY()` with `step-end` easing (pixel-snap, not smooth). 4. **Chapter 3 — Wing 2: The Six Hours.** Second wing. A pixel-art clock face (constructed from rectangles — clock hands are L-shaped pixel sequences, not `rotate()` transforms) that shows the six-hour window. The warm ripple runs strongest here — the `#e89b2a` oscillation has its maximum amplitude. The chevron below is the sharpest: 30 degrees. 5. **Chapter 4 — The Plaza at Dawn.** Full-width terminal block. The empty plaza illustration. Fog Ivory warming up from the bottom tile row. The small figure in the lower-left. No headline. One line of VT323 text centered in the plaza: `2024-12-04 06:00` — the hour the decree was lifted. The ripple stops here; the background holds steady in `#130c01`. **Animation system:** - All motion uses `step-end` or `steps(N)` easing — no ease-in-out, no cubic-bezier curves. Pixel art demands discrete steps. - Ripple: `@keyframes amber-ripple` oscillates `background-color` through 16 discrete warm values between `#0d0800` and `#1c1104`, period 3s, `steps(16, end)`. - Type-on: `width: 0 → 100%` with `overflow: hidden` and `steps(N, end)` where N = character count. - IntersectionObserver triggers all chapter entrances; use a 120px root margin so animations begin just before the section scrolls fully into view. **Implementation constraints:** - No JavaScript frameworks — vanilla JS + CSS only - No photography, no raster images - All SVG pixel art uses only `` elements, no ``, no `` - Korean text must use `word-break: keep-all; overflow-wrap: break-word` - `image-rendering: pixelated` on all SVG and canvas elements - Mobile: pixel grid scales at 50% tile size (4px base on screens < 640px), all text scales via clamp() - No parallax (heavily overused); instead use **viewport-pinned sticky positioning** for the spine ## Uniqueness Notes 1. **Pixel art as the sole visual language — not retro nostalgia but dreamlike precision.** The registry uses pixel art as a gaming aesthetic (playful, primary-colored). This site uses the same technical constraint (rect-only SVG, step easing, pixelated rendering) as a vehicle for dreamlike urban elegy — warm, dark, quiet. The pixel grid becomes a mourning grid. 2. **F-pattern as architectural floor plan, not editorial reading pattern.** The corpus's F-pattern usage (where it appears) treats it as a generic content-column heuristic. This site makes the F explicit and structural — the left spine is a physical corridor, the wings are physical rooms, the chevrons are doorways. The viewer navigates a building, not a page. 3. **Color ripple via step-function animation, not gradient.** The overused pattern is `gradient` (76% of registry). This site refuses gradients entirely — warmth is achieved through discrete pixel tile values and a CSS `steps()` keyframe oscillation that simulates a living amber glow without ever blending two colors. The ripple is quantized, like a pixel frame advancing. 4. **Sharp-angle 26–30 degree diagonal section cuts as the sole structural ornament.** The registry uses curved dividers (waves, blobs, SVG paths) for section breaks. This site uses only hard-pixel diagonal cuts — a beveled edge that looks hand-pixeled, consistent with the tile grid world. No curves anywhere on the page. 5. **Single warm hue band (20–45 degrees) with value contrast replacing color variety.** The registry's warm palettes use multi-hue warmth (coral + gold + peach). This site collapses warmth into a monochromatic amber band and achieves contrast purely through luminance steps — a radically different approach that reads as amber sodium light rather than decorative warmth. **Chosen seed:** aesthetic: pixel-art, layout: f-pattern, typography: oversized-display, palette: warm, patterns: ripple, imagery: geometric-abstract, motifs: sharp-angles, tone: dreamy-ethereal **Avoided overused patterns (from frequency analysis):** photography (87%), centered layout (83%), warm multi-hue gradient palette (89%+76%), full-bleed (63%), parallax (73%), mono typography (74%), stagger animation (50%), hand-drawn imagery (53%), editorial layout (49%), botanical motifs (29%).