# Design Language for jungchi.boo ## Aesthetics and Tone `jungchi` carries the weight of a Korean compound: *jung* (정, heart/feeling/center) and *chi* (치, wisdom/order/governance) — two forces in perpetual negotiation. The `.boo` TLD lends it a playful haunt, a ghost in the governing machine. The site is a **retro-futurist political cabinet room preserved under glass**: dark mahogany walls traced with art-deco gilt filigree, but every surface is overlaid with a holographic HUD — tactical grid lines, sweep-scan reticles, and translucent data panels floating like projected AR over carved oak furniture. The aesthetic is **art-deco governance meets neon-lit sci-fi operations room** — think the Council Chamber from a 1930s Fritz Lang film that was secretly converted into a Cold War situation room, then retrofitted with Seoul neon signage and a retro-CRT display pipeline. Every line is precise, geometric, authoritative — but the palette glows with forest-greens and amber neons that pulse with slow biological rhythm rather than digital strobe. The tone is **nostalgic-retro**: not ironic pastiche but genuinely felt longing for a time when order felt possible, and the future still seemed navigable. The visitor feels like an archivist decoding transmissions from a parallel 1937 where the HUD was invented alongside the art-deco radio. Mood references: Metropolis (1927), the war rooms of Stanley Kubrick, Seoul's Euljiro neon district at 2am, the interior of the Korean National Assembly building, the cover of a 1938 science fiction pulp magazine. ## Layout Motifs and Structure The composition is **asymmetric** — not the mild asymmetry of a two-column offset, but deliberate structural imbalance where information weight sits off-axis, creating tension that resolves only as the visitor scrolls. **Primary structural logic:** - A dominant **left-margin HUD rail** (80–100px wide) running the full viewport height — a vertical strip of art-deco geometric ornament interrupted by scan-line indicators and small numeric counters. This rail is present on all scroll positions (position: fixed). - The main content column occupies roughly 58% of the viewport width, offset 20% from the left edge, creating a right-leaning asymmetry with generous negative space to the left. - A **secondary floating panel** appears at the right edge at certain scroll depths — a translucent dark-green overlay with HUD-style border radiates and small type, like a secondary readout screen. **Spatial cadence:** - Section openings use wide negative space before content arrives — a deliberate pause, the breath before a policy announcement. - Text blocks never reach full container width; they are constrained to approximately 55–60ch, set against the dark field like teletype output on a command terminal. - Horizontal rule ornaments between sections are art-deco geometric compositions: a centered diamond flanked by receding parallel lines drawn as SVG, the stroke color being the forest-green neon. **Scroll behavior:** - The HUD rail ticks through numbered indicators as sections pass — not a progress bar but a coordinate readout: `[SECTOR 01]`, `[SECTOR 02]`, etc., updating via scroll event. - The floating right panel slides in with a morph transition (clip-path polygon expanding) and fades at section boundaries. ## Typography and Palette **Typography (all Google Fonts, verified):** - **Display / Section Titles**: [`Cormorant SC`](https://fonts.google.com/specimen/Cormorant+SC) — small-caps roman, weight 600, for primary headings. Its compressed elegance carries art-deco authority without the obvious Deco clichés. Set at `clamp(2.8rem, 6vw, 7rem)` with tracking `0.08em`. Color: `#a8d5a2` (pale forest neon). - **HUD Labels / Coordinates**: [`Share Tech Mono`](https://fonts.google.com/specimen/Share+Tech+Mono) — all-caps, weight 400, tracking `0.2em`, size `0.65rem–0.85rem`. Used for scan-line annotations, sector indicators, timestamp readouts, and all numeric HUD overlays. Color: `#4ddb91` (active green). - **Body / Narrative Text**: [`Libre Baskerville`](https://fonts.google.com/specimen/Libre+Baskerville) — weight 400 at `clamp(0.95rem, 1.8vw, 1.1rem)`, line-height 1.8. The classical serif grounding the retro-authority of the content against the neon HUD surface. - **Accent / Pull Quotes**: [`Josefin Sans`](https://fonts.google.com/specimen/Josefin+Sans) — geometric, weight 300, caps-lock, tracking `0.15em`. Used for pull-quotes rendered as HUD data-labels, positioned in the secondary floating panel. **Palette (hex values):** | Role | Name | Hex | |---|---|---| | Background | Cabinet Dark | `#0b1a0d` | | Background Alt | Forest Void | `#0f2212` | | Surface Panel | Mahogany Translucent | `rgba(22, 42, 24, 0.85)` | | Primary Neon | Signal Green | `#4ddb91` | | Secondary Neon | Pale Canopy | `#a8d5a2` | | HUD Amber | Retro Amber | `#d4a035` | | HUD Amber Glow | Amber Trace | `rgba(212, 160, 53, 0.25)` | | Art-Deco Gold | Gilt Line | `#c8a84b` | | Text Primary | Cream Script | `#e8e2d4` | | Text Secondary | Typewriter Ivory | `#b8b09a` | | Scan Line | Ghost Grid | `rgba(77, 219, 145, 0.07)` | | Reticle Stroke | HUD Wire | `rgba(168, 213, 162, 0.4)` | **Color application logic:** - The page background is near-black `#0b1a0d` — forest green so dark it reads as black until a neon element reflects against it, at which point the green undertone glows through. - Neon elements (`#4ddb91`) use `text-shadow: 0 0 8px #4ddb91, 0 0 24px rgba(77,219,145,0.4)` — a soft double-halo that reads as genuine neon tube emission, not CSS decoration. - Art-deco gilt lines (`#c8a84b`) are always thin (1px stroke) and used exclusively for decorative geometric ornament — never for functional UI chrome. ## Imagery and Motifs **All visual elements are constructed as inline SVG and CSS.** No photography. No raster images. No icon fonts. **The sci-fi HUD overlay system (primary motif):** The page is conceived as a display rendered on a retro-CRT terminal — slightly curved edges, subtle scan-line texture (repeating horizontal rules at 2px intervals, `rgba(77,219,145,0.07)` opacity, implemented as a CSS `background-image: repeating-linear-gradient`). The scan-line overlay sits at `z-index: 100` as a fixed pseudo-element, covering the entire viewport. **Art-deco structural ornament (secondary motif):** - SVG diamond-and-rule dividers between sections: a central diamond (8×8px, filled `#c8a84b`) flanked by double parallel lines tapering to vanishing points — like the decorative header of a 1930s legal document. - The left HUD rail contains repeating geometric ornament: stacked rectangles of decreasing width, spaced by thin rules, suggesting a louvered intake vent or art-deco tower base detail. - Corner reticle brackets (SVG): thin right-angle brackets appearing at the four corners of key content panels — the classic HUD targeting frame, here rendered in `#a8d5a2` with 0.4 opacity. **Neon-glow atmospheric elements:** - A large background circle (~60vw diameter) rendered as a radial gradient from `rgba(77,219,145,0.04)` to transparent, centered at approximately 70% horizontal, 30% vertical — a diffuse neon atmosphere suggesting an off-screen light source, like Seoul street neon bleeding through rain-wet glass. - Small horizontal sweep lines animate across the screen at 12-second intervals — thin 1px lines at `rgba(77,219,145,0.15)` opacity, moving top-to-bottom over 3 seconds then resetting. These are the "scan" that gives the CRT feel. **Morph transitions (interaction pattern):** Content sections enter the viewport through a `clip-path` morph: they begin as narrow horizontal slits (e.g., `polygon(0 45%, 100% 45%, 100% 55%, 0 55%)`) and expand to full rectangle over 0.6s with `cubic-bezier(0.16, 1, 0.3, 1)` easing — like a camera iris or HUD panel opening. Triggered by IntersectionObserver at 20% threshold. **Retro-amber accent elements:** Timestamps, sector coordinates, and version tags (`[v1.0.3]`, `[2024-11-04 02:17]`) appear in `#d4a035` mono type — scattered through the layout like telemetry readouts on a mission control display. These are decorative fiction; the content is real but the presentation treats it as mission data. ## Prompts for Implementation **The story to tell.** The visitor is an analyst who has just been granted clearance to the `jungchi.boo` secure terminal. The screen initializes: a sweep-scan crosses top to bottom, sector indicators tick through `[SECTOR 00]` to the active sector, and the content decrypts into view panel by panel. Nothing is sold. Nothing is promoted. The experience is a briefing: each section delivers intelligence, context, and reflection — and the visitor leaves with the feeling that they have read something that mattered, in a room where things that matter get decided. **Implementation priorities:** 1. **CRT scan-line overlay**: A fixed `::after` pseudo-element on ``, full viewport, `pointer-events: none`, `z-index: 9999`, `background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(77,219,145,0.06) 2px, rgba(77,219,145,0.06) 4px)`. Gives the entire page the CRT texture without affecting interactivity. 2. **Left HUD rail (fixed, full-height)**: A `position: fixed; left: 0; top: 0; height: 100vh; width: 80px` element with `background: rgba(11,26,13,0.95); border-right: 1px solid rgba(168,213,162,0.15)`. Populated with: a vertical `writing-mode: vertical-rl` label reading `[JUNGCHI-TERMINAL]` in Share Tech Mono, and scrolling sector indicator that updates via JS `window.scroll` event — comparing `scrollY` to section offsets. 3. **Morph section reveals**: Each `
` starts with `clip-path: polygon(0 45%, 100% 45%, 100% 55%, 0 55%); opacity: 0` and transitions to `clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1` when IntersectionObserver fires. Transition duration 0.7s, easing `cubic-bezier(0.16,1,0.3,1)`. 4. **Neon glow text effect**: Applied to `

` elements using: ```css color: #a8d5a2; text-shadow: 0 0 6px #4ddb91, 0 0 20px rgba(77,219,145,0.35), 0 0 40px rgba(77,219,145,0.15); ``` The layered halos create depth — tight core glow, medium spread, wide ambient. Never applied to body text (would reduce legibility). 5. **Sweep scan animation**: A single `
` with `position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent 0%, rgba(77,219,145,0.4) 50%, transparent 100%); z-index: 10000; pointer-events: none`. Animated via `@keyframes sweep { 0% { top: -2px; } 100% { top: 100vh; } }` with `animation: sweep 3s linear infinite; animation-play-state: paused` — triggered to play every 12 seconds via `setInterval`. 6. **Art-deco dividers (SVG inline)**: Between each section, an SVG element: ```svg ``` 7. **Floating right readout panel**: Appears at scroll depth 40% via IntersectionObserver. A `position: fixed; right: 0; top: 30vh; width: 200px; background: rgba(15,34,18,0.9); border: 1px solid rgba(168,213,162,0.2); padding: 16px` panel with corner reticle SVG brackets and 3–4 lines of Josefin Sans data-label text in `#d4a035`: jurisdiction, coordinates (fictional), status: `ACTIVE`. 8. **Horizontal rule style override**: All `
` elements replaced with the SVG divider above. No default browser `
` styling used anywhere. 9. **Typography scale in CSS custom properties**: ```css --type-display: clamp(2.8rem, 6vw, 7rem); --type-section: clamp(1.6rem, 3vw, 3rem); --type-body: clamp(0.95rem, 1.8vw, 1.1rem); --type-hud: 0.75rem; --font-display: 'Cormorant SC', serif; --font-mono: 'Share Tech Mono', monospace; --font-body: 'Libre Baskerville', serif; --font-accent: 'Josefin Sans', sans-serif; ``` 10. **No CTAs, no pricing, no stat grids.** The page sections are: IDENTIFICATION, MANDATE, RECORD, TRANSMISSION, ARCHIVE. Each is a scroll-depth narrative block, not a conversion funnel. The terminal initializes; the analyst reads; the session ends. ## Uniqueness Notes 1. **CRT scan-line + art-deco gilt + Korean neon: a triple-register collision no other registry entry uses.** The combination of 1930s art-deco ornament (geometric gilt SVG dividers, Cormorant SC small caps), Cold War situation-room HUD elements (sector coordinates, sweep-scan, clip-path iris reveals), and Seoul neon street green (`#4ddb91`) creates an aesthetic impossible to place in a single decade or geography — which is the point. `jungchi` is about the friction between order and feeling; the design enacts it. 2. **The fixed left HUD rail as primary navigation.** The corpus uses fixed navigation in various forms, but none uses a full-height decorative-functional rail whose primary content is vertical typewriter text and scrolling sector coordinates — not a hamburger menu, not a progress bar, but an operations-room coordinate display that happens to also show your position in the document. 3. **Morph via `clip-path` iris open, not fade or slide.** The frequency analysis shows `morph` at low usage. This implementation uses polygon clip-path expansion — the "iris opening" metaphor of a camera shutter or HUD panel activating — which is geometrically distinct from the blob-morphing and shape-shifting typically associated with `morph` patterns. It fits the sci-fi HUD motif precisely. 4. **Forest-green so dark it reads as near-black until illuminated.** `#0b1a0d` is green-black — the color of a darkened forest floor at night, not a forest in daylight. Against it, `#4ddb91` neon reads as the only living light source. This palette inversion (darkness as the dominant, neon as the exception rather than atmosphere) creates a quieter, more archival feel than the typical dark-neon approach. 5. **Sweep-scan as ambient ritual, not loading indicator.** The horizontal sweep line crosses the viewport every 12 seconds — slow enough to feel like maintenance rather than activity, like a radar sweep in a monitoring room. No other registry design uses periodic ambient scan animation as atmospheric texture rather than interactive feedback. **Chosen seed:** aesthetic: art-deco, layout: asymmetric, typography: variable-fluid, palette: forest-green, patterns: morph, imagery: neon-glow, motifs: sci-fi-hud, tone: nostalgic-retro **Avoided patterns (from frequency analysis):** centered layout (85% — avoided in favor of asymmetric), photography imagery (85% — avoided entirely), fade-reveal (high usage — replaced with clip-path iris morph), hover-lift (high usage — not used), CTA-heavy structure (avoided per brief), stat-grids (avoided per brief).