# Design Language for jeongchi.boo ## Aesthetics and Tone jeongchi.boo (정치 — Korean for "politics" with the playful ".boo" TLD) channels a seapunk aesthetic — the aquatic-digital subculture that merges ocean imagery with internet culture and early-2010s visual language. The site reimagines political discourse through an underwater lens: political currents become ocean currents, waves of public opinion become literal waves, and deep-state theories become deep-sea explorations. Inspiration draws from vaporwave's aquatic cousin — turquoise gradients, dolphin iconography, coral reef textures, and the shimmering quality of light through water. The tone is edgy-rebellious — politics viewed from below the surface, challenging conventional political presentation with irreverent aquatic humor. The ".boo" TLD adds a ghostly-playful undertone, suggesting the haunting undercurrents of political life. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** architecture — the page flows sideways like an ocean current, with content arranged as a lateral journey through political-aquatic zones. **Horizontal Scroll Architecture:** - Viewport-width panels (100vw x 100vh) arranged horizontally, scroll-snap mandatory - Total width: 6 panels flowing left-to-right like a submarine viewing window - Each panel has a distinct depth gradient (lighter at top, darker at bottom) suggesting water depth - A persistent top bar (48px) shows current "depth level" and horizontal progress - Small vertical scroll within panels is allowed for text-heavy content **Panel Sequence:** 1. **Surface:** Hero with shimmering water-surface effect and title floating on waves 2. **Shallow Reef:** Political concept overview with coral-colored cards and swimming icon elements 3. **Mid-Water:** Analysis section with bioluminescent accent elements in darker water 4. **Deep Current:** Deeper political analysis with minimal light, focused typography 5. **Abyss:** Archive/reference section in near-black with scattered light points 6. **Surfacing:** Closing section that transitions back to light with optimistic forward-look ## Typography and Palette **Typography:** - **Headlines:** "Righteous" (Google Fonts) — a rounded display face with playful aquatic flow at 2.5rem-4.5rem, weight 400. Its curved letterforms suggest underwater typography. - **Body Text:** "Quicksand" (Google Fonts) — rounded sans-serif at 1rem, weight 400, line height 1.7. The soft, bubbly character reinforces the aquatic environment. - **Korean Text:** "Gothic A1" (Google Fonts) — Korean sans-serif maintaining the rounded quality at matching sizes. - **Data/Labels:** "Overpass Mono" (Google Fonts) — monospace for statistics and political data at 0.8rem. **Color Palette:** - **Deep Ocean:** #0a2e3d — darkest blue-green for deep-water backgrounds - **Turquoise Glow:** #40e0d0 — primary seapunk turquoise for accents and interactive elements - **Coral Pink:** #ff7f7f — warm coral for secondary highlights and political heat indicators - **Bioluminescent Blue:** #00bfff — bright electric blue for deep-water luminous accents - **Seafoam White:** #e8fff5 — pale mint-white for text on dark backgrounds - **Kelp Purple:** #6b3fa0 — deep purple for tertiary accents and depth gradients - **Sand Gold:** #d4a847 — warm gold for retro-futuristic accents - **Abyss Black:** #051520 — near-black blue for deepest sections ## Imagery and Motifs **Custom Underwater Illustrations:** Political concepts illustrated with aquatic metaphors — a debate podium as a coral formation, voting as a school of fish moving in formation, policy as water current flow diagrams. SVG line illustrations with seapunk coloring. **Leaf-Organic as Seaweed:** Organic flowing shapes (CSS-created with large border-radius values) represent underwater plant life. These drift slowly with CSS animations (20-40s loops) creating gentle underwater movement. **Water Surface Shimmer:** The hero section features a CSS-created water surface effect using multiple overlapping radial-gradients that animate their positions, creating a caustic-light shimmer pattern. **Tilt-3D on Hover:** Content cards respond to mouse position with a subtle 3D tilt effect (CSS perspective + rotateX/Y based on cursor position within the card), creating a "floating in water" dimensional feel. **Bubble Particles:** Small circular elements (4-12px) in Turquoise Glow and Bioluminescent Blue drift upward from bottom of panels using CSS keyframe animations, simulating rising bubbles. ## Prompts for Implementation Build the page as a horizontal underwater journey. The flex container uses flex-direction: row, overflow-x: scroll, scroll-snap-type: x mandatory. Each panel is 100vw x 100vh with a vertical gradient background that darkens progressively across panels. The water surface effect in the hero uses overlapping animated radial-gradients: three gradient layers at different scales, each animating background-position on different timing loops (8s, 12s, 16s). The result is a caustic light pattern. The tilt-3D effect: JavaScript tracks mousemove on each card, calculates cursor position relative to card center, then applies transform: perspective(600px) rotateX(${y}deg) rotateY(${x}deg) where x/y are scaled to max 5 degrees. Includes a gentle return-to-center animation on mouseleave. Rising bubbles: 15-20 small div circles with position: absolute, bottom: -20px, animated with @keyframes that translate Y from 100% to -100% viewport height over 8-15s (randomized per bubble) with slight horizontal drift. Horizontal progress indicator: a thin bar at the top that fills proportionally to scroll position, colored in Turquoise Glow. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the underwater political journey and seapunk aesthetics create an immersive, edgy exploration experience. ## Uniqueness Notes 1. **Seapunk aesthetic for political content:** Reimagining politics through an underwater/internet-culture lens creates a visually and conceptually unique political site. 2. **Horizontal scroll as ocean current:** The lateral navigation metaphor transforms browsing into a journey through political depths. 3. **Progressive depth darkening across panels:** Each panel's gradient getting deeper creates a literal and metaphorical descent into political complexity. 4. **Tilt-3D cards as underwater floating:** The perspective shift on hover creates a tactile sense of objects floating in water. 5. **Political concepts as aquatic metaphors:** Illustrating debates as coral formations and voting as fish schools creates memorable visual analogies. **Seed/Style:** aesthetic: seapunk, layout: horizontal-scroll, typography: eclectic-hybrid, palette: retro-futuristic, patterns: tilt-3d, imagery: custom-illustration, motifs: leaf-organic, tone: edgy-rebellious **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%), tech motifs (80%). This design uses seapunk aesthetic, horizontal-scroll layout, retro-futuristic palette, and edgy-rebellious tone.