# Design Language for 계엄령.com ## Aesthetics and Tone 계엄령.com should feel like a lucid dream about a city hearing an emergency broadcast through cotton-candy fog: beautiful at first glance, uneasy on second glance, and finally civic-minded. The phrase 계엄령 carries the weight of martial law, so the design must not look militaristic, triumphal, or bureaucratic. Instead, translate that pressure into a dopamine-bright ethereal warning system: pink siren clouds, lilac night air, mint broadcast waves, and soft rounded typography that makes the topic approachable without making it frivolous. The emotional arc is “dream interrupted by decree.” The opening should be dreamy and buoyant, with jellylike wave forms floating across a duotone sky; as the viewer scrolls, the waves stretch into signal lines, blackout curtains, curfew ribbons, and finally a dawn-like civic horizon. Keep the mood surreal rather than documentary. The site should feel like an animated civic fable about how normal life can become suspended by a single announcement. ## Layout Motifs and Structure Use **parallax-sections** as theatrical stage layers, not as a generic scroll gimmick. Each full-screen section should be a different depth plane of the same dream-city: foreground elastic wave ribbons, midground rounded broadcast panels, background silhouettes of apartment windows and public squares dissolved into mist. Avoid centered card stacks; let the Korean word 계엄령 drift across the viewport in huge cropped pieces, sometimes split across layers so characters appear to pass behind translucent wave curtains. Structure the page as five immersive scenes: 1. **잠든 도시 / Sleeping City:** a full-viewport duotone sky with enormous soft Hangul, slow generative wave halos, and tiny window lights pulsing like sleeping breaths. 2. **방송의 물결 / Broadcast Wave:** horizontal elastic bands enter from different depths, bending typography and small fragments of civic language as if the decree is traveling through air. 3. **정지된 거리 / Paused Streets:** rounded silhouettes of crosswalks, doors, and notice boards freeze under translucent pink-lilac veils; content appears as floating annotations rather than boxes. 4. **질문의 구름 / Cloud of Questions:** large bubble-like question forms orbit around the viewer, using parallax to create a soft maze of “who decides, what changes, what remains.” 5. **새벽의 복원 / Dawn Restoration:** waves loosen, colors brighten, and the layout opens into a full-width horizon where civic memory and vigilance become the closing image. Use diagonal drift and layered overlap instead of traditional grids. Text blocks can be pill-shaped “broadcast captions” attached to wave paths, but they should be sparse and cinematic. The page should read as a scrollable animated poster sequence rather than a product landing page. ## Typography and Palette Typography should be playful-rounded but disciplined, like public signage seen inside a dream. - **Primary Korean display:** `Jua` from Google Fonts. Use for giant 계엄령 word fragments, scene titles, and rounded civic phrases. Set very large, with tight line-height, soft shadows, and occasional SVG distortion along wave paths. - **Secondary rounded Korean/body:** `Gowun Dodum` from Google Fonts. Use for explanatory Korean text, captions, and quieter civic notes. Keep it airy with generous line-height. - **Latin accent:** `Nunito` from Google Fonts. Use for small English labels such as BROADCAST, CURFEW, SIGNAL, CIVIC MEMORY, and SCENE 01. Use rounded uppercase tracking for a gentle interface feel. Duotone palette with a few luminous support tones: - **Emergency candy pink:** `#FF4FA3` for siren clouds, highlights, active wave crests, and character glows. - **Dream violet night:** `#3B1B72` for the deep background and serious civic undertone. - **Mist lavender:** `#CDB7FF` for fog layers, translucent curtains, and soft section transitions. - **Signal mint:** `#55F3D0` for broadcast wave edges and hopeful restoration moments. - **Paper moon:** `#FFF7D6` for readable text panels and small civic annotations. - **Ink plum:** `#180A2E` for body text and high-contrast silhouettes. Use the palette as a controlled duotone system: pink/violet dominates, mint appears only as signal, and paper moon appears as moments of clarity. Avoid warm corporate gradients; any gradient should feel like vapor, siren haze, or dawn fog. ## Imagery and Motifs Use **generative-art** rather than photography. The core motif is the **wave-form decree**: elastic broadcast waves that look playful from afar but become boundary lines, curfew arcs, sealed streets, and question marks as the story progresses. Generate these with SVG paths, CSS gradients, canvas particles, or layered pseudo-elements; they should feel alive, stretching and rebounding with scroll. Primary motifs: - **Elastic broadcast ribbons:** thick, rounded sine-wave bands that wobble around text and occasionally compress the page like pressure in the air. - **Hangul as atmosphere:** crop the characters 계, 엄, 령 into giant soft shapes; use them as clouds, shadows, and translucent masks rather than only as readable title text. - **Dream-city silhouettes:** minimal rounded outlines of windows, lamps, crosswalk stripes, public notice boards, and rooftops, all softened into violet fog. - **Siren bubbles:** floating circular forms in pink and lavender that pulse slowly, pop into tiny mint particles, or reveal short civic questions inside. - **Curtain veils:** semi-transparent vertical gradients that slide across scenes like temporary restrictions; they should never look like hard military barricades. No tanks, soldiers, weapons, flags, or authoritarian spectacle. The visual language should focus on civilian perception, interrupted routine, and the surreal acoustics of emergency power. ## Prompts for Implementation Build a single full-screen narrative experience with HTML/CSS/JS. Load `Jua`, `Gowun Dodum`, and `Nunito` from Google Fonts. The implementation should privilege storytelling, animation, and atmosphere over conversion UI. Avoid CTA-heavy layouts, pricing blocks, stat-grids, feature-card grids, and conventional centered landing sections. Implementation direction: - Start with a viewport-filling hero where 계엄령 is enormous, rounded, and partially hidden behind drifting violet-pink fog. Add a slow canvas or SVG generative wave field that reacts subtly to scroll position. - Use `position: sticky` full-screen scenes so each chapter feels like passing through layers of the same dream. Parallax should move background city silhouettes slowly, wave ribbons at medium speed, and foreground siren bubbles quickly. - Animate wave paths with elastic easing: on scroll, ribbons stretch, overshoot, and settle, as if the broadcast signal is made of rubber. Use CSS `cubic-bezier()` values with bounce-like timing or lightweight JS interpolation. - Let text appear as floating “broadcast captions” attached to moving paths. Short Korean phrases should fade in through fog, bend slightly, then drift aside rather than snapping into grid alignment. - Create scene transitions by morphing wave forms: a soft cloud becomes a waveform, the waveform becomes a curfew ribbon, the ribbon becomes a question mark, and the question mark dissolves into dawn particles. - Use small interactive moments: cursor proximity can make siren bubbles wobble, Hangul masks can reveal mint signal lines, and clicking a floating question can produce a gentle ripple instead of opening a modal. - End with a quiet full-screen dawn scene: no button wall, only an open horizon, loosened wave lines, and a final rounded note about remembering how fragile ordinary civic time can be. ## Uniqueness Notes 1. **Dreamy martial-law interpretation:** The design avoids military clichés and transforms 계엄령 into an ethereal civilian broadcast dream, balancing seriousness with surreal softness. 2. **Elastic wave storytelling:** Wave-forms are not decoration; they evolve into announcements, restrictions, questions, and restoration, giving the whole page one continuous visual grammar. 3. **Hangul as landscape:** The Korean characters become clouds, masks, and parallax terrain, making the domain itself the spatial environment. 4. **Dopamine duotone civic fable:** Bright candy-pink and violet create immediate visual energy while mint and paper-moon accents preserve a reflective civic tone. 5. **Anti-grid immersive sequence:** The layout rejects card-grid, centered corporate sections, pricing blocks, and stat dashboards in favor of sticky full-screen narrative scenes. Chosen seed/style: aesthetic: dopamine, layout: parallax-sections, typography: playful-rounded, palette: duotone, patterns: elastic, imagery: generative-art, motifs: wave-forms, tone: dreamy-ethereal. Frequency analysis patterns avoided: corporate aesthetics, photography/minimal imagery, card-grid and centered layouts, warm gradient palettes, mono typography, generic parallax/scroll-triggered stacks, staggered stat grids, and authoritative sales-page tone. Underused choices intentionally emphasized: dopamine color, generative-art imagery, parallax-sections as narrative scenography, playful-rounded typography, duotone palette, elastic motion, wave-forms, and dreamy-ethereal atmosphere.