# Design Language for 계엄령.quest ## Aesthetics and Tone 계엄령 (gyeomnyeong) means "martial law" in Korean -- a word that summons the weight of suspended civil order, of curfew bells and shuttered streets, of a nation holding its breath between democratic fragility and authoritarian gravity. 계엄령.quest channels this tension through the lens of **Muji-inflected restraint colliding with HUD-overlay urgency** -- a digital environment that feels like a sealed control room where every surface has been stripped to its essential function, yet somewhere behind the frosted panels, sirens are cycling in deep burgundy. The visual direction draws from three converging reference points: (1) the interior of a Korean National Assembly emergency operations center circa 1980 -- fluorescent-lit drop ceilings, olive-drab filing cabinets, rotary phones on laminate desks, all reimagined through a Muji filter of pristine reduction; (2) the transparent overlay graphics of military command displays, where thin-ruled data grids and status indicators hover over darkened map surfaces; (3) the generative art tradition of algorithmically-drawn decay patterns -- fields of particles that slowly disperse, representing order dissolving into entropy. The tone is **calm-serene** in a way that is deliberately unsettling -- the calmness of controlled information, of classified briefing documents, of a government broadcast that replaces all channels with a single measured voice. There is no panic in this design; there is the precision of a system that has planned for this moment. The serenity is institutional, not pastoral. ## Layout Motifs and Structure The site employs a **HUD overlay** layout -- a persistent heads-up-display frame that borders the viewport on all four sides, creating an inner viewing area that feels like looking through the visor of a command helmet or the monitor of a surveillance station. **The HUD Frame:** A 48px border on all sides of the viewport, rendered as a semi-transparent panel (background: rgba(62, 15, 22, 0.12); border-inner: 1px solid rgba(139, 44, 55, 0.3)). This frame contains status indicators: top-left shows a blinking circular status light (8px diameter, alternating between #8B2C37 and #4A1520 on a 2-second cycle); top-right displays a formatted timestamp in monospaced type that updates every second (format: YYYY.MM.DD HH:MM:SS KST); bottom-left carries a thin horizontal progress bar (height: 2px, color: #8B2C37, width animates from 0% to 100% over 120 seconds then resets); bottom-right shows a minimal site identifier "계엄령.QUEST" in 10px uppercase tracking. **The Interior Composition:** Within the HUD frame, content is arranged using a **floating-elements** paradigm. There is no traditional grid. Instead, content cards exist as individual rectangular panels that float in a field of deep cream (#F5F0E8), positioned using CSS transforms with subtle rotation (between -1.2deg and 1.2deg per card). Cards are spaced with generous negative space (minimum 40px gaps), and their arrangement follows an organic scatter pattern that nonetheless maintains visual balance -- like documents laid out on a briefing table viewed from above. **Card Architecture:** Each content card is a self-contained unit: a rectangular panel with dimensions ranging from 280px to 440px wide, variable height. Cards have no visible border-radius (sharp 0px corners -- Muji precision). Background: #FAF7F2 (warm white). A single 1px left-border in #8B2C37 (burgundy) serves as the only decorative accent. Cards cast a diffused box-shadow (0 8px 32px rgba(74, 21, 32, 0.06)) suggesting they hover 4-8mm above the cream surface. **The Generative Field:** Behind the floating cards, the cream background carries a generative art layer: a canvas element rendering a slow-moving particle field. Approximately 200 particles (2px circles, fill: rgba(139, 44, 55, 0.04)) drift from structured grid positions toward random dispersal over 60 seconds, then reform. This visualizes the martial-law metaphor: order dissolving into entropy, then reconstituting. ## Typography and Palette **Primary Display Font:** "Recursive" (Google Fonts, variable font, weights 300-900, CASL axis 0-1, MONO axis 0-1) -- a variable font that can interpolate between sans-serif and casual, between proportional and monospaced. Used for headings at CASL 0 (linear, Muji-like precision) and for emphasis moments at CASL 0.5 (introducing subtle humanist tension). Set at clamp(1.8rem, 3.5vw, 3rem). Weight: 400 for headings (intentionally light -- authority through restraint, not boldness). Color: #3A1520 (deep burgundy-black). Letter-spacing: 0.02em. Line-height: 1.25. **Body Text Font:** "Noto Sans KR" (Google Fonts, weights 300, 400, 500) -- chosen specifically for its native Korean glyph support and its Muji-grade neutrality. Korean text renders at weight 400; English body text at weight 300 for differentiation. Size: clamp(0.95rem, 1.4vw, 1.1rem). Color: #5C3A42 (muted burgundy-brown). Line-height: 1.75 (generous, creating breathing room within the institutional frame). Letter-spacing: 0.01em for Latin, 0em for Korean (Korean characters need no additional tracking). **HUD / System Font:** "Recursive" at MONO axis 1 (full monospace mode), weight 400, size 11px. Used exclusively in the HUD frame elements: timestamp, status labels, the progress bar percentage overlay. Color: #8B2C37 at 70% opacity. This creates a visual dialect within the typography -- the system voice versus the content voice. **Color Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Deep Burgundy-Black | #3A1520 | Curfew Ink | Primary text, headings | | Burgundy | #8B2C37 | Martial Red | Accents, left-borders, HUD indicators | | Dark Burgundy | #4A1520 | Emergency Dim | Secondary states, shadows | | Warm Cream | #F5F0E8 | Briefing Paper | Card backgrounds, primary surface | | Deep Cream | #EDE6D8 | Parchment | Page background, generative field | | Muted Burgundy-Brown | #5C3A42 | Redacted | Body text | | Pale Rose | #F0E4E6 | Censor Wash | Hover states, card highlights | | Off-White | #FAF7F2 | Clean Sheet | Card surface, elevated elements | The palette is a strict **burgundy-cream** system with no blue, no green, no teal. Every color lives on the red-brown axis, desaturated just enough to maintain the calm-serene tone while never escaping the underlying tension of martial red. ## Imagery and Motifs **Generative Particle Dissolution:** The primary visual motif. A full-viewport canvas element behind all content renders a field of ~200 small particles arranged initially in a perfect grid (10 columns x 20 rows). Over 60 seconds, particles break from their grid positions via Perlin noise displacement, drifting into organic scatter. At second 60, they begin a 10-second reformation back to the grid. The particles are rendered as 2px circles in rgba(139, 44, 55, 0.04) -- barely visible, more felt than seen. On each reformation cycle, the grid shifts slightly (offset by 3-5px), so it never returns to exactly the same configuration -- order is restored, but not quite the same order. **Floating Document Cards:** Content panels designed to evoke physical documents on a table. Each card carries a subtle paper texture achieved through a CSS background-image: a repeating radial-gradient noise pattern (background: repeating-conic-gradient(#FAF7F2 0%, #F8F5EF 0.5%, #FAF7F2 1%) at 0.3% opacity overlay). The left-border accent line (1px, #8B2C37) extends from top to bottom of the card, inset 0px from the left edge -- reminiscent of the red margin line on ruled paper. **Card-Flip Interaction:** Each floating card has a reverse side. On hover (desktop) or tap (mobile), cards execute a perspective 3D flip (rotateY(180deg), transition: 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94), perspective: 1200px). The reverse side has a background of #3A1520 (Curfew Ink) with text in #F5F0E8 (Briefing Paper) -- an inversion of the front face. The reverse contains supplementary content: a date, a classification label ("공개 // DECLASSIFIED"), and a one-line annotation in Recursive monospace. **HUD Corner Brackets:** At each corner of the HUD frame, L-shaped brackets (24px x 24px, 1px stroke in #8B2C37 at 50% opacity) provide a targeting-reticle quality. These brackets breathe -- they scale between 1.0 and 1.04 on a slow 4-second CSS animation cycle (ease-in-out), creating a sense of the system being alive, monitoring, aware. **Redaction Bars:** Decorative elements scattered sparsely across cards: thin horizontal rectangles (width: 60-120px, height: 14px, background: #3A1520, opacity: 0.08) that suggest censored text. These are purely ornamental, placed where whitespace would otherwise be too empty. They reinforce the martial-law document aesthetic without containing actual content. **Status Light Pulse:** The HUD's top-left status indicator is an 8px circle that alternates between #8B2C37 (active) and #4A1520 (dim) with a 2-second ease-in-out cycle. It has a 12px blur-radius box-shadow in rgba(139, 44, 55, 0.2) that expands to 20px at peak brightness. This is the heartbeat of the interface. ## Prompts for Implementation Build 계엄령.quest as a **single-page floating-document environment** -- an immersive experience that places the viewer inside a martial-law operations aesthetic, looking down at scattered briefing cards through a HUD visor frame. **Initial Load Sequence (0-3 seconds):** The page loads to solid #EDE6D8 (Deep Cream). At 100ms, the HUD frame fades in from 0% to full opacity over 800ms (ease-out). Simultaneously, the four corner brackets scale from 0.8 to 1.0 (200ms spring, slight overshoot to 1.02 then settle). At 400ms, the status light initiates its pulse cycle. At 600ms, the timestamp begins ticking. At 800ms, the generative particle canvas initializes -- particles appear at their grid positions at 0% opacity, then fade to their target 4% opacity over 1000ms. At 1200ms, the floating cards begin their entrance: each card slides in from below (translateY(40px) to translateY(0)) with staggered timing (each card delayed by 150ms from the previous), opacity 0 to 1, over 600ms cubic-bezier(0.22, 1, 0.36, 1). Total load sequence: ~2.8 seconds for a page with 5-7 cards. **Card Content Structure:** Each card represents a "document" in the martial-law narrative. Cards should contain: - A header line in Recursive at CASL 0, weight 400, 1.2rem, color #3A1520 - 2-4 lines of body text in Noto Sans KR, weight 300, describing a facet of the 계엄령 concept - A subtle date stamp in Recursive MONO at the bottom-right of the card (11px, #8B2C37 at 50% opacity) - The left burgundy border accent **Card-Flip Behavior:** Implement using CSS 3D transforms. Each card wrapper has perspective: 1200px. The card itself has two faces (front/back) using backface-visibility: hidden. On hover, the wrapper applies rotateY(180deg) over 700ms. The back face has inverted colors (#3A1520 background, #F5F0E8 text) and shows a "declassified" annotation. On mobile, trigger flip on tap with a toggle state. **Generative Canvas Implementation:** Use a element at position: fixed, z-index: 0, behind all content. Initialize particles in a grid. Each frame, apply Perlin noise (simplex-noise library or hand-rolled) to each particle's position, with noise amplitude increasing from 0 to max over 60 seconds. At second 60, lerp particles back to grid positions over 10 seconds. Use requestAnimationFrame for smooth rendering. Particle draw: ctx.fillStyle = 'rgba(139, 44, 55, 0.04)'; ctx.beginPath(); ctx.arc(x, y, 1, 0, Math.PI * 2); ctx.fill(); **Scroll Behavior:** The page scrolls vertically. As the user scrolls, floating cards parallax at different rates (0.92x to 0.98x viewport scroll speed -- very subtle, not the exaggerated parallax that dominates 98% of existing designs). The HUD frame remains fixed. The generative canvas remains fixed. Only the cards move, creating a gentle depth separation. **Responsive Behavior:** On viewports below 768px, the HUD frame reduces to 32px borders. Cards stack vertically in a single column with 0deg rotation (removing the scattered-document effect, which requires wider space). Card-flip remains functional via tap. The generative canvas reduces to 80 particles for performance. The timestamp in the HUD top-right wraps to show only HH:MM:SS (dropping the date). **AVOID:** CTA buttons, pricing tables, stat-grids, testimonial carousels, hero images, stock photography, gradient backgrounds, neon accents, rounded corners on cards. The entire experience must feel like handling classified documents under fluorescent light -- no decoration beyond the system itself. ## Uniqueness Notes 1. **Variable font axis as expressive tool:** No other design in this collection uses the Recursive variable font's CASL and MONO axes as a deliberate narrative device -- toggling between institutional precision (CASL 0, MONO 1) for system elements and restrained humanist expression (CASL 0.5, MONO 0) for content. The typography literally shifts register between machine and human voice, embodying the martial-law tension between state apparatus and civilian experience. 2. **Generative particle grid-to-entropy cycle as thematic metaphor:** While 7% of designs use generative-art, none implement a looping order-dissolution-reformation cycle tied to a specific political metaphor. The particles do not merely decorate -- they enact the central concept of 계엄령: the imposition, erosion, and reimposition of imposed order. The grid never reforms identically, visualizing the idea that society never fully returns to its pre-martial-law state. 3. **HUD frame as institutional surveillance metaphor:** The 5% of designs using hud-overlay treat it as a futuristic gaming or sci-fi aesthetic. This design repurposes the HUD as a representation of state monitoring infrastructure -- the frame is not cool or aspirational but clinical and watchful. The breathing corner brackets and pulsing status light create ambient unease within a calm-serene envelope, a combination unique to this collection. 4. **Burgundy-cream as ideological color system:** The strict two-hue palette (every color on the red-brown axis, zero cool tones) creates a world with no escape into blue sky or green nature. The burgundy references both the institutional authority of government seals and the muted violence of martial enforcement. The cream references bureaucratic paper, official forms, the blank spaces of censored documents. No other design in this collection uses color absence as political commentary. 5. **Card-flip as declassification metaphor:** While 4% of designs use card-flip, they employ it for product reveals or feature toggles. Here, flipping a card reveals its "classified reverse" -- inverting the color scheme and exposing a declassification stamp. The physical gesture of flipping mimics the act of turning over a restricted document, making the user complicit in the information-access narrative. [Seed: muji, hud-overlay, expressive-variable, burgundy-cream, card-flip, generative-art, floating-elements, calm-serene] [Avoided overused patterns: corporate aesthetic (97%), photography imagery (99%), full-bleed layout (97%), parallax animation (98%), warm palette (98%), mono typography (76%), friendly tone (46%)] [Preferred underused elements: muji (2%), hud-overlay (5%), expressive-variable (2%), burgundy-cream (2%), floating-elements (2%), card-flip (4%), calm-serene (4%), generative-art (7%)]