# Design Language for 계엄령.quest

## Aesthetics and Tone

**계엄령** (gyeye-eomnyeong) is the Korean word for "martial law" — a decree that suspends ordinary time, replaces civil governance with absolute command, and renders every citizen simultaneously subject and witness. This site does not editorialize or archive. It exists as a **luxury monument to suspended order**: the visual language of a state proclamation letterhead meeting an apex-tier Swiss design studio.

The aesthetic is **luxury-premium with sovereign restraint** — onyx backgrounds, razor-thin platinum rules, and pure white type that lands with the weight of an official seal. The mood is calm-serene but not peaceful: it is the calm of a held order, a proclamation not yet revoked, a city holding its breath inside a velvet command. Think the visual register of a Vacheron Constantin annual report crossed with the graphical authority of a UN Security Council resolution cover page.

Inspiration: the ceremonial silence of state authority rendered as sensory experience — not protest, not documentation, not nostalgia. Pure visual declaration. The site breathes slowly and moves with the precision of a mechanical watch winding.

Tone: **calm-serene** — nothing shouts, nothing rushes, but every element commands presence. The luxury registers not through ornamentation but through geometric precision and chromatic discipline.

## Layout Motifs and Structure

The structure is **parallax-sections with staggered depth planes** — five full-screen narrative sections, each occupying 100vh, with content elements positioned at distinct Z-axis layers that move at different rates during scroll, creating a sensation of moving through a dimensional proclamation document rather than scrolling a webpage.

**Spatial architecture:**

- **Depth System:** Four distinct parallax layers per section — background plane (slowest, 0.1x scroll rate), mid-field geometry plane (0.4x), text/icon plane (1x, standard), and foreground particle plane (1.5x, fastest). The viewer moves *through* the information.
- **Section cadence:** Each section is exactly 100vh. Sections snap softly into position (smooth scroll with `scroll-snap-type: y mandatory` on the container). Transitions between sections feel like turning the page of a bound proclamation.
- **Horizontal discipline:** A strict 12-column grid with 2-column gutters on desktop. Content lives in columns 2–11, leaving deliberate outer margins as sovereignty space — never bleeding to the viewport edge.
- **Vertical rhythm:** All spacing is a multiple of 8px. Section titles sit at exactly 38% from the top of their viewport, anchored there by absolute positioning that persists across all parallax motion. The title does not move — only the world behind it does.
- **Icon placement:** Each section features one large (clamp(6rem, 14vw, 12rem)) central icon rendered in SVG, positioned at 50% width, 50% height of the section. Icons are centered and static (no parallax). They are the anchors of each visual scene. Everything else orbits them.
- **Navigation:** A minimal left-edge vertical nav bar — 3px wide platinum rule with five tick marks corresponding to the five sections. A platinum dot travels the bar as the user scrolls, indicating position without any text labels. The nav is the only persistent UI element.

## Typography and Palette

**Typography (Google Fonts only — frutiger-clean family-first):**

- **Primary / Headlines:** `Nunito Sans` (Google Fonts, wght 200–900, variable) — Nunito Sans is the closest widely available approximation of Frutiger's humanist-geometric sans DNA: open apertures, warm legibility, technical precision without coldness. Set section titles at `clamp(4.5rem, 9vw, 9rem)`, weight 200 (ultra-light) for maximum luxury whitespace. Letter-spacing: `0.12em`. All caps.
- **Sub-display / Decree labels:** `Source Sans 3` (Google Fonts, wght 300–700) — a humanist sans with functional authority. Used for subtitle lines, section ordinals (01, 02, 03…), and all running text. Size: `clamp(0.9rem, 1.4vw, 1.1rem)`, weight 300, letter-spacing `0.22em`, all caps for labels, mixed case for body.
- **Accent / Monospaced coordinates:** `IBM Plex Mono` (Google Fonts) — used sparingly for timestamp-style captions, coordinate data, and legal-style sub-labels. Size: `0.75rem`, weight 400, color platinum `#C8C8D0`. Creates a technical-sovereign counterpoint to the humanist sans.

**Palette — high-contrast sovereign:**

- `#000000` — Absolute black. Primary background. Sections 1, 3, 5.
- `#FAFAFA` — Near-white. Primary text. All headlines and body copy on black.
- `#C8C8D0` — Platinum. Ruling lines, tick marks, nav elements, geometric trim, SVG stroke details.
- `#1A1A2A` — Deep slate-black. Section 2, 4 backgrounds — a barely perceptible shift that signals section change without breaking the dark luxury field.
- `#8B8B9A` — Mid platinum. Secondary text, captions, IBM Plex Mono labels. Between the blacks and whites, grounding the hierarchy.
- `#F0EDE8` — Warm off-white. Used exclusively for the central icon SVGs, giving them a slightly aged parchment quality against the absolute black — an archival document feel.

## Imagery and Motifs

All imagery is **SVG icons rendered in line-weight precision** — no photography, no raster, no gradients in icons. The icon language is monumental and governmental: each icon is a conceptual emblem for one of the five narrative sections.

**The five section icons (all SVG, 2px stroke, #F0EDE8, no fill):**

1. **The Seal** — A circular decree seal: nested concentric circles with 12 radial lines at 30° intervals (clock positions), a central 8-pointed star. Represents authority and proclamation origin.
2. **The Gate** — Two vertical rectangles flanking a central gap, with a horizontal lintel bar above. Negative space is the threshold. Represents the divide between civil and martial time.
3. **The Broadcast Tower** — A geometric triangular tower silhouette with signal arc lines (3 concentric quarter-circles emanating from the apex). Represents the moment the decree was announced over state broadcast.
4. **The Hourglass** — A precisely geometric hourglass: two equilateral triangles touching at vertices, particles (5 small circles) suspended mid-flow. Represents martial time — duration of suspension.
5. **The Key** — A classical key in pure geometric form: circle head with cross cutout, rectangular shaft, two teeth. Represents the restoration of ordinary governance, the unlocking of suspended law.

**Particle effects system:**
- Particles are 1–3px circular SVG elements, color `#C8C8D0` at 15–40% opacity, floating at the foreground parallax plane.
- Each section has 40–60 particles distributed across the viewport using a seeded pseudo-random position algorithm.
- Particles drift: a slow sinusoidal vertical oscillation (period 8–14 seconds, amplitude 12–20px) implemented in CSS `@keyframes` with varied `animation-delay` values (0–6s range) giving organic stagger without JavaScript.
- On section 4 (The Hourglass), particles fall vertically at a constant 1px/frame rate, simulating sand — matching the icon's visual theme. CSS `animation: fall linear infinite`.
- The foreground particle plane moves at 1.5x scroll rate, creating a subtle depth separation from the icon at 1x.

**Pulse-attention mechanism:**
- Each icon pulses once every 4 seconds: a subtle scale from 1.0 to 1.03 and back, using `animation: pulse 4s ease-in-out infinite`. Duration: 0.6s in, 0.6s out, 2.8s hold.
- Simultaneously, a platinum ring expands from the icon center: starting at `r = icon-radius`, expanding to `r = icon-radius + 24px`, fading from `opacity: 0.4` to `opacity: 0` over 1.2s. This is a `<circle>` element in the same SVG, animated via CSS keyframes.
- The pulse is timed to be non-disruptive — the icon does not bounce, does not flash. It breathes.

**Geometric particle constellation:**
- Behind each icon, at the mid-field parallax plane (0.4x), 8 small geometric diamonds (4px × 4px rotated 45°) are arranged in a loose orbital formation (hand-placed, not random). Color: `#C8C8D0` at 25% opacity.
- These diamonds do not animate — they are static reference points that provide geometric depth.

## Prompts for Implementation

This is a **single-page parallax narrative** composed of five full-screen sections. The story: December 3, 2024, South Korea's president declared martial law at 10:28 PM. By 4:00 AM it was lifted. Six hours that suspended history. This site inhabits those six hours not as news, not as politics, but as sovereign visual monument.

**Five section narrative:**

1. **Section 01 — THE DECREE** (background `#000000`). The Seal icon centered. Above it, in `Source Sans 3` 300 all-caps platinum: `계엄령 · MARTIAL LAW · 계엄령`. Below it, in `Nunito Sans` 200 white, clamp(4.5rem, 9vw, 9rem): `2024.12.03`. At bottom of viewport, a single line: `22:28 KST` in IBM Plex Mono platinum. The parallax background layer contains a very subtle repeating crosshatch of `#1A1A2A` at 3% opacity — the watermark of official documents.

2. **Section 02 — THE THRESHOLD** (background `#1A1A2A`). The Gate icon centered. Title: `비상계엄` (Emergency Martial Law) in Nunito Sans 200 at clamp(3rem, 6vw, 6rem), white, all-caps, `0.18em` letter-spacing. Below: a single `Source Sans 3` sentence in weight 300 at `1rem`: `THE GATES OF CIVIL LAW WERE CLOSED.` Particle density doubles here — 80 particles — representing the gathering of state power.

3. **Section 03 — THE BROADCAST** (background `#000000`). The Broadcast Tower icon with its animated pulse. Above: ordinal `03` in IBM Plex Mono platinum small. Title: `전국에 고함` (To the Nation) in Nunito Sans 200 clamp(3.5rem, 7.5vw, 7.5rem). The background parallax plane here carries a very faint repeating grid of `#1A1A2A` at 6% — television scanlines interpreted as a luxury grid.

4. **Section 04 — THE SUSPENSION** (background `#1A1A2A`). The Hourglass icon with falling particles. Title: `6시간` (Six Hours) in Nunito Sans 200 enormous — clamp(6rem, 15vw, 14rem), tracking `0.05em`. Below: `03:00 — 04:27 KST` in IBM Plex Mono, platinum, `0.9rem`. The falling particles section creates the only non-still animation on the page outside pulse/oscillation — pure vertical drift. Beneath the icon, a horizontal platinum rule (100% width, 1px) separates the duration label from a single line of Source Sans 3: `THE NATIONAL ASSEMBLY VOTED TO LIFT THE DECREE.`

5. **Section 05 — THE KEY** (background `#000000`). The Key icon centered, slightly larger (clamp(8rem, 16vw, 14rem)). Title: `해제` (Lifted) in Nunito Sans 200, white, `clamp(5rem, 11vw, 10rem)`, tracking `0.2em`. At bottom: the domain name `계엄령.quest` in Source Sans 3 weight 300, 0.85rem, platinum, with subtle underline-draw animation on first scroll-into-view: an SVG `<line>` whose `stroke-dashoffset` animates from full to 0 over 1.2s.

**Animation philosophy:** Restrained luxury. Parallax layers run on `transform: translateY()` driven by `scroll` event listener — no libraries. Particle oscillation in pure CSS keyframes. Icon pulse in CSS keyframes. No JS animation frameworks. The page should feel like it is *breathing*, not performing.

**Parallax implementation:**
```
Section layers per section:
  - .layer-bg   { parallax factor: 0.1 }   — faint grid/crosshatch
  - .layer-geo  { parallax factor: 0.4 }   — diamond constellation
  - .layer-main { parallax factor: 1.0 }   — icon + text (standard)
  - .layer-particles { parallax factor: 1.5 } — foreground particles
```

**Avoid:** CTA buttons, pricing blocks, stat-grids, any navigation text labels, any color other than the defined palette, any font weight above 300 for headlines (the lightness is the luxury), any border-radius above 0px (all geometry is orthogonal or circular — no pill shapes, no rounded cards).

## Uniqueness Notes

1. **Parallax as sovereignty layers, not decorative depth.** Most parallax sites use depth for visual interest. This design uses four precisely calibrated depth planes to represent the layers of state authority — background law, geometric order, proclamation text, and the free-floating particles of individual citizens. The parallax physics are a metaphor, not decoration. No other design in the registry uses parallax with this specific conceptual grounding.

2. **Icon-first narrative: five SVG emblems carry the entire story.** The corpus relies overwhelmingly on photography (85% registry prevalence) or hand-drawn illustration. This design uses five precisely constructed SVG icons as the sole visual storytelling medium — no photography, no illustration, no raster. Each icon is a conceptual glyph, not a label. The icon-heavy approach here functions as monumental ideography rather than UI signposting.

3. **Frutiger-clean through humanist equivalency.** Frutiger is not available on Google Fonts. Rather than using an inferior substitute, this design achieves the Frutiger DNA — open apertures, humanist geometry, technical warmth — through `Nunito Sans` at ultra-low weight (200), which produces the distinctive generous-yet-precise character the seed requires. The combination of Nunito Sans 200 + Source Sans 3 300 + IBM Plex Mono creates a three-tier typographic hierarchy that reads simultaneously as luxury annual report and official state document.

4. **Pulse-attention as slow heartbeat, not alert.** The registry's `pulse-attention` pattern typically manifests as notification badges, hover states, or loading indicators — fast, transactional, UI-functional. Here, each icon's 4-second pulse cycle with platinum ring expansion is tuned to the resting human heartbeat scaled to calm: it reads as the site itself breathing in time with the six-hour suspension it memorializes. The expanding platinum ring is a visual clock-tick, not a UI affordance.

5. **Particle effects without randomness theater.** Most particle-effect implementations produce purely decorative random-field animations. Here, the particle system is semantically loaded: sections have calibrated particle densities (Section 01: 40, Section 02: 80 — doubling as power concentrates), and Section 04's falling particles directly mirror the hourglass icon above them, creating icon-particle visual unity. The particles are the citizens inside the decree, not decorative noise.

**Chosen seed:** aesthetic: luxury-premium, layout: parallax-sections, typography: frutiger-clean, palette: high-contrast, patterns: pulse-attention, imagery: icon-heavy, motifs: particle-effects, tone: calm-serene

**Avoided patterns from frequency analysis:**
- `hand-drawn` (53% registry — ubiquitous): zero hand-drawn elements; all SVG is precision-geometric
- `editorial` aesthetic (49%): no editorial flow, no reading-optimized columns, no magazine metaphor
- `stagger` animation pattern (50%): no stagger-based reveals; animations are continuous or scroll-locked
- `scroll-triggered` (35%): elements do not trigger on scroll entry; parallax is continuous, not triggered
- `vintage` motifs (33%): no nostalgic visual language despite the historical subject matter
- `tech` motifs (25%): no circuit boards, no UI chrome, no data-viz aesthetic despite the decree-tech premise
<!-- DESIGN STAMP
  timestamp: 2026-05-12T08:59:56
  domain: 계엄령.quest
  seed: requires
  aesthetic: 계엄령** (gyeye-eomnyeong) is the Korean word for "martial law" — a decree that sus...
  content_hash: 797dcf91a8c7
-->