# Design Language for 계엄령.quest ## Aesthetics and Tone 계엄령.quest should feel like a forbidden civic simulator discovered inside a 2006 public-information kiosk: glossy Frutiger Aero optimism strained through the shock of an emergency decree. The mood is energetic, bright, wet, and urgent rather than grim — translucent blue panels, oxygen-green highlights, lensy bubbles, and polished civic interface chrome collide with the serious subject of martial law. The visual metaphor is “democracy as a living greenhouse network”: when the emergency signal enters, leaves, water, and circuits reroute power toward collective resistance. Avoid memorial-black heaviness as the default. Instead, begin in an unnaturally clean aqua environment, almost too fresh and bureaucratically cheerful, then let the story disturb that calm with red-orange warning pulses, warped glass, and botanical circuitry that grows across the screen. The tone should be fast, kinetic, and alive: not a corporate explainer, not a legal archive, but a quest through a civic nervous system waking itself up. ## Layout Motifs and Structure Use stacked full-screen sections as “checkpoint chambers” in a vertical quest. Each section occupies a near-complete viewport and behaves like a layer of a translucent civic machine: Intake, Signal, Assembly, Override, Dawn. The sections should not look like cards or centered marketing blocks; they should feel like glossy environmental rooms with curved horizons, floating interface rails, and botanical wiring wrapping around the edges. Composition should use a left-side vertical “oxygen tube” timeline that swells and contracts like a water level gauge. Content panels dock to this tube at alternating heights, but remain embedded in the atmosphere rather than boxed in a grid. Headlines can arc slightly across the top of each viewport, while supporting text sits in glass capsules that overlap enormous botanical-circuit illustrations. Use depth through translucent stacked membranes, large radial highlights, and foreground bubble fields, not through parallax-heavy mountains of layers. Spatial rhythm: each stacked section gets a distinct civic state. The opener is a bright aqua idle screen with a single blinking decree glyph. The middle sections become denser with circuit vines, warning seals, and rippling ballot-like panels. The final section clears into pale morning light, with the oxygen tube blooming into a living branch network. ## Typography and Palette Typography should mix refined institutional gravity with clean Frutiger-era interface clarity: - Display / narrative headlines: **Libre Baskerville** (Google Fonts), weight 700, with tight line-height and elegant Korean pairing fallback through **Noto Serif KR**. Use it for large dramatic phrases, timestamp titles, and chapter names. - Body / Korean reading text: **Noto Serif KR** (Google Fonts), weights 400 and 700, for serious civic narration with literary texture. - Interface labels and small system text: **Noto Sans KR** (Google Fonts), weights 500 and 800, for glossy kiosk controls, alert chips, and route markers. Palette: complementary aqua-blue versus emergency coral, supported by botanical greens and civic neutrals. - Aero water blue: `#35C8FF` - Deep civic blue: `#0457A8` - Emergency coral: `#FF5A3D` - Signal orange: `#FFB000` - Greenhouse leaf: `#49D17D` - Mist white: `#F2FFF9` - Glass shadow navy: `#06304A` - Ink blue-black: `#071827` Use glossy gradients sparingly as material, not as generic background decoration: aqua-to-mist highlights on capsules, coral glows only for emergency moments, and leaf-green light traveling along circuit veins. ## Imagery and Motifs The signature image system is botanical circuitry: ginkgo leaves, fern fronds, and greenhouse stems drawn as precise vector illustrations, but their veins are also PCB traces. Leaves should contain tiny nodes, solder-pad dots, and branching copper-like routes that glow from blue to green as the narrative progresses. This makes the civic body feel organic and technological at once. Use Frutiger Aero motifs with intent: floating water bubbles become “public attention nodes,” glossy droplets magnify fragments of Korean text, and curved glass ribbons behave like civic channels. Add translucent emergency-stamp rings that look official but slightly dissolved by water. Small quest-like wayfinding icons can appear as luminous badges: a shield leaf, a circuit gavel, a dawn droplet, a signal seed. Lottie-style animation should be specified for a central living emblem: a rotating glass orb containing a ginkgo leaf whose veins light up as circuit paths. If Lottie is unavailable, implement the same feeling with inline SVG paths, CSS stroke-dash animations, and layered radial gradients. Avoid photography; this world should be illustrated, synthetic, and immersive. ## Prompts for Implementation Build a full-screen narrative experience rather than a conventional landing page. The visitor scrolls through stacked civic chambers, each revealing a stage of the quest. Use HTML sections with strong scene names and CSS custom properties for section-specific colors. Keep the page theatrical: each viewport should have a foreground atmospheric layer, a main botanical-circuit illustration, and a small amount of sharp narrative text. Animate the oxygen-tube timeline as the main story device. As the user advances, the tube fills with aqua light, briefly flashes coral during crisis sections, then branches into green circuits at the end. Use SVG stroke-dashoffset animations, CSS keyframes for bubbles and refractions, and optional IntersectionObserver to trigger section states. Favor liquid ripples, glass sheen sweeps, orb rotations, and growing circuit vines over generic parallax, staggered cards, or counter animations. Implementation should avoid CTA-heavy layouts, pricing blocks, stat-grids, dashboards, and centered hero formulas. There may be no “Sign up” or product conversion logic. Instead, use quest language: “enter the signal,” “trace the decree,” “restore the circuit,” “reach dawn.” The design should feel like moving through a civic myth rendered in glossy public-interface materials. ## Uniqueness Notes - Chosen seed/style: aesthetic: frutiger-aero, layout: stacked-sections, typography: baskerville-refined, palette: complementary, patterns: lottie-animation, imagery: botanical-illustration, motifs: circuit, tone: energetic. - Differentiator 1: treats martial-law narration through bright Frutiger Aero civic-interface optimism rather than the more expected dark memorial, terminal, or anti-design protest language. - Differentiator 2: combines botanical illustration with circuit motifs so democracy appears as a living electronic greenhouse, not as a document archive or news timeline. - Differentiator 3: uses an oxygen-tube vertical timeline and full-screen checkpoint chambers instead of overused card-grid, centered, dashboard, or stat-grid compositions. - Differentiator 4: places a Lottie-style glass ginkgo orb at the center of the identity, giving the page a memorable animated emblem rather than relying on stock photography or minimal icons. - Frequency analysis to avoid: corporate aesthetic, photography/minimal imagery, card-grid and centered layouts, warm gradient palettes, mono typography, and default parallax/scroll-triggered/stagger animation patterns are heavily overrepresented; this design instead leans into underused frutiger-aero, stacked-sections, baskerville-refined, complementary palette, botanical-illustration, and lottie-animation.