# Design Language for jungchi.boo ## Aesthetics and Tone jungchi.boo (정치 — another romanization of Korean "politics" with the ghostly ".boo" TLD) embraces an ethereal aesthetic — translucent layers, soft light diffusion, and the dreamlike quality of mist moving through ancient spaces. The site presents political concepts as atmospheric phenomena: invisible forces that shape the world like wind shapes clouds, unseen but always felt. Inspiration draws from James Turrell's light installations, the misty landscapes of Korean sansuhwa (mountain-water painting), and the otherworldly quality of fog-shrouded temples. The tone is minimal — political ideas communicated through restraint and suggestion rather than declaration. The ".boo" TLD reinforces the ghostly quality: politics as something that haunts society, present but elusive, shaping outcomes from behind veils of process and procedure. ## Layout Motifs and Structure The layout uses a **sidebar** architecture — a persistent left navigation panel with the main content flowing in the larger right area, creating a two-zone interface that separates wayfinding from immersion. **Sidebar Architecture:** - Left sidebar: 240px fixed, position: sticky, containing navigation and contextual labels - Main content area: Fluid width (calc(100% - 240px)), centered reading column of 720px - Sidebar background: Semi-transparent with backdrop-filter blur, allowing the main content's ethereal backgrounds to show through - Mobile: Sidebar collapses to a top navigation bar **Content Flow:** 1. **Mist Gate:** Hero in main area with title emerging from fog-like gradient, sidebar showing section overview 2. **Atmosphere:** Political concept introduction with generous whitespace and minimal text 3. **Currents:** Analysis sections with floating text blocks and subtle background animations 4. **Whispers:** Commentary section with text at reduced opacity that increases on hover/scroll 5. **Clearing:** Footer with a lighter, clearer aesthetic suggesting political transparency ## Typography and Palette **Typography:** - **Headlines:** "Cormorant" (Google Fonts) — an elegant light serif with ethereal delicacy at 2.5rem-4rem, weight 300-400. The thin strokes suggest transparency and lightness. - **Body Text:** "Karla" (Google Fonts) — humanist sans with gentle warmth at 1rem, weight 400, line height 1.8. Extra-generous line height for breathing space. - **Korean Text:** "Noto Sans KR" (Google Fonts) — clean Korean sans maintaining the ethereal lightness at matching weight (300-400). - **Sidebar Labels:** "Karla" at 0.75rem, weight 500, letter-spacing 0.06em for navigation items. **Color Palette:** - **Mist White:** #f5f5f0 — primary background, warm white suggesting fog - **Ghost Lavender:** #9b8ec4 — primary accent, a muted purple suggesting spectral presence - **Twilight Blue:** #5a6a8a — secondary accent for links and interactive elements - **Pale Rose:** #d4a0a0 — subtle warm accent for hover states - **Fog Gray:** #c8c4bc — soft gray for borders and secondary elements - **Deep Charcoal:** #2a2a30 — primary text color, warm dark gray rather than black - **Spirit Mint:** #a8d4c0 — tertiary accent for success states and nature references - **Smoke:** #8a8880 — muted warm gray for de-emphasized text and timestamps ## Imagery and Motifs **Noise Texture Fog:** Background sections use CSS noise overlays at very low opacity (0.02-0.04) combined with large radial-gradient "mist patches" — white circles at 0.05-0.1 opacity positioned at various points, creating the impression of fog layers. **Particle Effects as Political Forces:** Tiny animated particles (2-3px circles in Ghost Lavender at 0.2 opacity) drift slowly across the viewport, representing invisible political currents. 20-30 particles with randomized drift patterns. **Ethereal Blur Transitions:** Content sections transition with blur effects — incoming content starts at filter: blur(4px) and sharpens to blur(0) as it scrolls into the primary viewing zone. This creates a "emerging from mist" reveal. **Bounce-Enter on Scroll:** Elements enter the viewport with a gentle bounce — they translate from 24px below their resting position to 0, with a slight overshoot and settle (cubic-bezier(0.34, 1.56, 0.64, 1)). Duration 600ms, staggered 50ms between siblings. **Spectral Hover Effects:** Links and interactive elements gain a soft glow on hover — box-shadow: 0 0 20px rgba(155, 142, 196, 0.3) expanding from 0 to full over 300ms, suggesting ghostly illumination. ## Prompts for Implementation Build the page as a misty political landscape. The sidebar uses position: sticky, top: 0, height: 100vh with background: rgba(245, 245, 240, 0.85) and backdrop-filter: blur(12px). Navigation items are minimal text links with 0.7 opacity that increase to 1.0 on hover/active. The fog effect: multiple absolutely-positioned divs with large radial-gradient backgrounds (600-1000px), white/cream colors at 0.05-0.1 opacity, scattered at predefined coordinates. These create depth when combined with the noise texture overlay. The blur-reveal scroll effect: use Intersection Observer with threshold array. As elements progress from 0 to 0.5 intersection ratio, interpolate blur from 4px to 0px and opacity from 0.6 to 1.0. Apply via CSS custom property updated from JavaScript. Particles: 25 small divs with position: fixed, border-radius: 50%, width/height: 2-3px, background in Ghost Lavender at 0.2 opacity. Each animates with unique @keyframes for X and Y translation (viewport-spanning drift, 20-40s loops, randomized start positions). The bounce-enter timing function: transform: translateY(24px) to translateY(0) with transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1) on scroll trigger. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the ethereal fog atmosphere and minimal typography create a contemplative political space. ## Uniqueness Notes 1. **Ethereal fog as political metaphor:** Using mist and translucency to represent invisible political forces creates a unique atmospheric design that communicates conceptually through visuals. 2. **Blur-reveal scroll transitions:** Content emerging from blur creates a "materializing from fog" effect that reinforces the ghostly theme. 3. **Spectral particle system:** Drifting translucent particles representing political currents add living atmospheric quality without visual clutter. 4. **Ultra-light serif typography:** Using Cormorant at weight 300 creates nearly-transparent letterforms that feel ghostly and ethereal. 5. **Semi-transparent sidebar with backdrop blur:** The navigation panel itself becomes part of the fog aesthetic, blending with the content behind it. **Seed/Style:** aesthetic: ethereal, layout: sidebar, typography: geometric-sans, palette: triadic, patterns: bounce-enter, imagery: noise-texture, motifs: particle-effects, tone: minimal **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery at surface level (84%), tech motifs (80%). This design uses ethereal aesthetic, sidebar layout, triadic palette, noise-texture imagery, and minimal tone.