# Design Language for 가능성.com ## Aesthetics and Tone 가능성 means "possibility" in Korean — the latent energy of what could become, the shimmer at the edge of manifestation. This site channels a **late-night Seoul vaporwave dreamstate**: the visual language of neon-drenched Gangnam storefronts dissolving into analog VHS static, Korean Hangul characters warping through CRT scan lines, and the nostalgic ache of a future that was promised but never arrived. The aesthetic is specifically **Korean retro-futurism filtered through vaporwave melancholy** — not the cliche palm trees and roman busts of Western vaporwave, but the particular beauty of Korean PC-bang culture circa 2002, Cyworld profile decorations, and the glow of convenience store signs reflected in rain-slicked asphalt. The tone is **authoritative yet wistful** — a voice that speaks with the certainty of someone who has glimpsed every possible timeline and returned to report on each one. It commands attention not through volume but through the quiet gravity of someone who knows. Every element radiates controlled power wrapped in neon haze. The mood sits at the intersection of confidence and dreaminess — an oracle speaking from within a cloud of retrograde static. The inspiration palette draws from: the color bleed of overexposed Kodak Gold 200 film shot at 2AM in Myeongdong, the interface chrome of Windows XP Korean language packs, the iridescent surface of a scratched CD-ROM catching fluorescent light, and the specific shade of magenta that Korean neon signs cast on concrete walls during light rain. ## Layout Motifs and Structure The layout employs an **organic-flow** composition system — content elements are not locked to rigid grids but instead drift and settle like luminous particles suspended in dark fluid. Nothing snaps to a hard edge. Sections breathe and overlap, creating a sense of **layered depth** where foreground content floats above mid-ground atmosphere above deep-background void. **The Possibility Field:** The viewport is treated as a dark void (#0a0612) from which content emerges in luminous clusters. Rather than traditional sections stacked vertically, content exists as **floating islands** — discrete blocks of text and imagery that hover at different perceived z-depths. The primary content occupies roughly 60% of viewport width but shifts laterally as the user scrolls, tracing a gentle sinusoidal path down the page. This organic meandering creates a reading experience that feels like following a luminous thread through darkness. **Depth Layers (front to back):** 1. **Foreground (z:3):** Typography headlines, interactive elements — sharp focus, full opacity, with subtle tilt-3d perspective transforms responding to cursor position 2. **Mid-ground (z:2):** Photography panels and body content — slightly reduced contrast, faint gaussian blur at edges (2px), positioned 20-40px offset from foreground elements to create parallax separation 3. **Atmosphere (z:1):** Floating Hangul characters (가, 능, 성), neon gradient washes, scan-line overlays — 15-25% opacity, slowly drifting via CSS animation 4. **Deep void (z:0):** Pure dark background with faint radial gradients of color that pulse almost imperceptibly (8-second cycle) **Section Transitions:** Rather than hard breaks between sections, content clusters fade into and out of the void through opacity gradients. A faint horizontal neon line (1px, #ff2d95 at 30% opacity) occasionally appears between major sections, flickering twice before stabilizing — mimicking the behavior of a warming fluorescent tube. **Navigation:** A vertical strip along the left edge (40px wide) contains small Korean numerals (일, 이, 삼, 사, 오) that serve as section indicators. They glow brighter as their corresponding section enters the viewport. No traditional navbar — the domain name 가능성 appears once at the top-left in a persistent but nearly transparent state (12% opacity), brightening to 80% on hover. ## Typography and Palette **Primary Display Font:** "Libre Baskerville" (Google Fonts, weights 400, 700) — the refined, authoritative Baskerville revival used for all major headings and the domain name treatment. Its high-contrast strokes and elegant bracketed serifs project intellectual authority while its warmth prevents coldness. Set at `clamp(2.8rem, 6vw, 5.2rem)` for primary headlines. Letter-spacing: 0.04em. Color: #ffffff with a faint text-shadow of 0 0 30px rgba(255, 45, 149, 0.4) to create a neon-bleed halo. Line-height: 1.08 for dense, monumental presence. **Korean Display Font:** "Noto Serif KR" (Google Fonts, weights 500, 700) — used for Korean text elements including the domain name 가능성 and atmospheric floating characters. Its serif structure harmonizes with Libre Baskerville while properly rendering Hangul. Set at `clamp(2.4rem, 5vw, 4.8rem)` for display uses. The heavier weight (700) is used for the domain lockup; 500 for atmospheric floating characters. **Body Text:** "IBM Plex Sans" (Google Fonts, weights 300, 400, 500) — a humanist sans-serif with enough technical precision to feel contemporary but sufficient warmth to avoid sterility. Weight 300 (Light) for body paragraphs, 400 for emphasis, 500 for UI labels. Set at `clamp(0.95rem, 1.8vw, 1.15rem)`. Line-height: 1.72. Letter-spacing: 0.01em. Color: #c4b8d4 (soft lavender gray) for comfortable reading against dark backgrounds. **Accent Mono:** "Space Mono" (Google Fonts, weight 400) — used sparingly for technical annotations, metadata timestamps, and the section numbering system. Set at 0.75rem. Letter-spacing: 0.08em. Text-transform: uppercase. Color: #00e5c7 (electric teal). **Color Palette — "Neon Midnight Seoul":** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Void Black | Deep UV Black | #0a0612 | Primary background, the infinite dark field | | Neon Magenta | Korean Neon Pink | #ff2d95 | Primary accent, link hovers, section dividers, glow effects | | Electric Teal | Possibility Cyan | #00e5c7 | Secondary accent, metadata, interactive states, counter-accent | | Haze Purple | VHS Static Violet | #7b2fbe | Tertiary accent, atmospheric gradients, mid-depth elements | | Warm Lavender | Scan Line Gray | #c4b8d4 | Body text, subtle UI elements | | Ghost White | CRT Phosphor White | #f0e6ff | Headlines, high-emphasis text (slightly purple-shifted white) | | Deep Indigo | Midnight Layer | #1a0f2e | Card backgrounds, elevated surfaces | | Amber Warning | Convenience Store Gold | #ffb347 | Sparse highlight, used only for singular focal moments | **Gradient Usage:** - Primary atmospheric gradient: linear-gradient(135deg, #0a0612 0%, #1a0f2e 40%, #0a0612 100%) — the base void with indigo lift - Neon bleed gradient: radial-gradient(ellipse at 30% 50%, rgba(255,45,149,0.08) 0%, transparent 70%) — ambient magenta glow - Teal accent gradient: radial-gradient(circle at 70% 30%, rgba(0,229,199,0.06) 0%, transparent 60%) — secondary atmospheric glow - These gradients layer atop each other and shift position slowly (20-second CSS animation cycle) to create living, breathing darkness ## Imagery and Motifs **Photography Treatment — "Neon-Washed Moments":** All photography is treated through a specific post-processing pipeline that transforms standard images into vaporwave artifacts: 1. Desaturate to 20% of original saturation 2. Apply a duotone map: shadows mapped to #0a0612, highlights mapped to #ff2d95 3. Layer a second duotone at 40% opacity: shadows #1a0f2e, highlights #00e5c7 4. Add horizontal scan lines (2px spacing, 1px height, #ffffff at 3% opacity) as a CSS pseudo-element overlay 5. Apply a subtle VHS tracking distortion: the image shifts 2px horizontally at random intervals via a CSS animation that offsets `background-position` in 3-frame steps Photography subjects should evoke urban Korean nightscapes — rain-reflected neon, empty subway platforms at midnight, the glow of vending machines in dark alleys, convenience store interiors seen through fogged glass, rooftop views of Seoul's skyline dissolving into low cloud. No people in focus — only silhouettes, reflections, or motion-blurred figures. **Floating Hangul Characters:** The three syllables of 가능성 (가, 능, 성) appear as enormous atmospheric elements — each character rendered at 20-40vw size, positioned at z-depth 1 (atmosphere layer), at 4-8% opacity in #7b2fbe. They drift slowly (60-second full traversal) across the background, rotating at 0.5 degrees per second. On scroll, they exhibit a subtle parallax offset opposite to scroll direction, creating a sense of vast depth. Each character has a faint outer glow: 0 0 80px rgba(123,47,190,0.15). **CRT Scan Line Overlay:** A persistent full-viewport overlay of horizontal lines — created via a repeating-linear-gradient: 2px transparent, 1px rgba(255,255,255,0.02). This overlay sits at z-index above all content, applying to the entire page. It creates the impression of viewing the site through a vintage CRT monitor without being heavy-handed enough to impair readability. **Neon Line Motifs:** Thin horizontal and vertical lines (1px) in #ff2d95 and #00e5c7 appear as structural accents — framing content blocks, underlining headings, or drawing themselves across the viewport on scroll trigger. These lines animate with a drawing effect (SVG stroke-dasharray/dashoffset or CSS clip-path reveal) and occasionally flicker (opacity oscillation between 0.6 and 1.0 over 200ms, triggered once on viewport entry). **Glitch Moments:** At three specific scroll positions (25%, 50%, 75% of page), a brief glitch effect fires: the entire viewport shifts 4px left for 50ms, then 2px right for 30ms, then returns. Simultaneously, a horizontal band (40px tall) of chromatic aberration (red channel offset 3px left, blue channel 3px right via CSS filter or layered pseudo-elements) sweeps vertically across the screen over 300ms. These moments are designed to feel like the site's reality is momentarily destabilized — a crack in the surface of possibility. **Possibility Particles:** Tiny luminous dots (2-3px diameter, #00e5c7 and #ff2d95, 30-50% opacity) drift upward slowly across the viewport — 15-20 particles visible at any time, created via CSS animation on pseudo-elements or lightweight JS. They represent nascent possibilities rising from the void. On hover near a particle cluster, they scatter outward gently (transform: translate with random offsets). ## Prompts for Implementation Build 가능성.com as a **single-page vertical descent into the space of possibility** — a full-screen narrative experience where the user sinks deeper into layers of neon-lit content emerging from absolute darkness. The experience should feel like falling slowly through a luminous void where meaning coalesces around you. **Opening Void (first 100vh):** The page loads to pure void black (#0a0612). Nothing visible for 600ms. Then: a single horizontal line of #ff2d95 begins drawing itself from the center of the viewport outward in both directions simultaneously (400ms, ease-out). The line reaches 60% viewport width, then pulses once (opacity flash to 100% then settle to 70%). After a 200ms pause, the domain name 가능성 fades in above the line — first 가 (200ms fade), then 능 (200ms), then 성 (200ms) — in "Noto Serif KR" at weight 700, color #f0e6ff, size clamp(3rem, 8vw, 6rem). Each character carries a magenta text-shadow that intensifies as it appears: 0 0 40px rgba(255,45,149,0.5). Below the line, a subtitle in "IBM Plex Sans" weight 300 fades in: a single evocative phrase in small caps, #c4b8d4, letter-spacing 0.3em. The three atmospheric Hangul characters are already present in the deep background, barely visible, slowly drifting. **Section One — "The Nature of Possibility" (100vh-250vh):** As the user scrolls past 80vh, the opening lockup begins to fade (opacity tied to scroll position). The first content island rises from below: a large photography panel (70vw x 50vh) showing a rain-drenched Seoul street at night, treated with the neon-washed duotone pipeline. The image enters with a tilt-3d transform — initially rotated 4deg on the Y axis, settling to 0 over 600ms as it enters the viewport center. Beside it (offset 40px above and 80px right), a text block in Libre Baskerville delivers the first conceptual statement about possibility. The text block has a left border of 2px solid #00e5c7. As the image scrolls past center, it begins a slow Ken Burns drift (scale from 1.0 to 1.05 over 10 seconds, transform-origin: center). **Section Two — "Probability Collapses" (250vh-400vh):** Two photography panels appear at different z-depths — one large (foreground, sharp) showing a vending machine corridor, one smaller (mid-ground, slightly blurred, 60% opacity) showing a subway tunnel. They overlap by 30%, creating a collage effect. Text flows organically around and between them. A tilt-3d effect on both images responds to cursor position: `transform: perspective(800px) rotateX(calc(var(--mouse-y) * 2deg)) rotateY(calc(var(--mouse-x) * 3deg))`. The glitch moment triggers here — the viewport stutters, chromatic aberration sweeps, reality cracks. After the glitch, a new text passage appears with slightly elevated brightness, as if the glitch revealed something previously hidden. **Section Three — "The Weight of What Could Be" (400vh-550vh):** The atmospheric Hangul characters reach their maximum opacity (8%) in this zone. Content islands become sparser — more void between elements, longer scroll distances with nothing but drifting particles and neon gradients. A single large headline in Libre Baskerville spans 80% of viewport width, color #ff2d95, with a slow pulse animation (opacity 0.85 to 1.0, 4-second cycle). Below it, a photography panel with the most aggressive VHS treatment — visible scan lines, color channel separation, slight horizontal jitter. The image shows a rooftop at night, the city skyline dissolving into fog and light pollution. **Section Four — "Becoming" (550vh-700vh):** The teal accent (#00e5c7) begins to dominate — neon lines switch from magenta to teal, text accents shift, atmospheric gradients introduce more teal radial glow. This color transition happens gradually over the scroll distance, signifying a shift from contemplation to emergence. Content blocks are smaller, more numerous, arranged in an organic constellation pattern. Each block carries a tilt-3d hover effect. Photography here is brighter — still duotoned but with highlights pushed toward #f0e6ff, showing moments of light breaking through: sunrise through building gaps, a phone screen's glow in darkness, the first lights of morning on the Han River. **Closing Void (700vh-800vh):** Content recedes. The three atmospheric Hangul characters (가, 능, 성) slowly converge toward the center of the viewport, increasing in opacity to 15%. They settle into a final arrangement that reconstructs the word 가능성 in the atmospheric layer. A final neon line draws itself horizontally across the viewport, then fades. The void returns to pure #0a0612. A single line of Space Mono text fades in at the very bottom: the domain name in Latin characters, "ganungsung.com", at 0.7rem, #c4b8d4 at 40% opacity, letter-spacing 0.5em. **Technical Notes:** - All tilt-3d effects use CSS `perspective()` and `rotateX/Y` transforms driven by CSS custom properties updated via a lightweight mousemove listener (throttled to 60fps via requestAnimationFrame) - Scroll-triggered animations use IntersectionObserver, NOT scroll event listeners - The VHS scan-line overlay is pure CSS (repeating-linear-gradient on a ::after pseudo-element, pointer-events: none) - Glitch effects are CSS animations triggered by adding/removing a class via IntersectionObserver - Particle system: 20 absolutely-positioned spans with CSS keyframe animations (translateY from 100vh to -10vh, randomized duration 15-30s, randomized horizontal position) - No JavaScript frameworks — vanilla JS only, under 3KB total - AVOID: CTA buttons, pricing blocks, stat-grids, testimonial carousels, team sections, footer link columns. This is an experiential art piece, not a conversion funnel. ## Uniqueness Notes 1. **Korean vaporwave specificity over Western cliche:** This design deliberately avoids the overplayed Western vaporwave tropes (Greek busts, palm trees, Arizona tea cans) and instead roots its retro-futurism in specifically Korean visual culture — PC-bang aesthetics, Hangul typography as atmospheric element, Seoul urban nightscape photography, convenience store neon. This cultural specificity is absent from other designs in the collection and gives 가능성.com an authentic rather than derivative identity. 2. **Tilt-3D as perceptual depth engine:** While tilt-3d appears in only 3% of designs, this site makes it a core structural mechanism rather than a decorative flourish. Every photography panel and major content block responds to cursor position with perspective transforms, creating a persistent sense that the user is peering into a dimensional space rather than reading a flat page. Combined with the layered-depth z-system (4 explicit depth layers), the result is a site that feels genuinely three-dimensional without WebGL. 3. **Atmospheric Hangul as structural navigation:** The three syllables of 가능성 (가, 능, 성) serve simultaneously as deep-background decoration, thematic anchors, and spatial landmarks. No other design uses the domain name's own characters as enormous drifting atmospheric elements that converge into meaning at the page's conclusion. This creates a narrative arc embedded in the typography itself — scattered possibility becoming unified identity. 4. **Organic-flow layout in dark-neon palette:** The frequency analysis shows organic-flow at 5% and dark-neon at 4% — both underused individually and virtually never combined. Most dark-neon designs use rigid grid structures (dashboards, HUD overlays). This design subverts that expectation by pairing the electric color palette with flowing, organic content placement, creating a tension between the sharp precision of neon light and the unpredictable drift of its placement. 5. **Baskerville serif authority in vaporwave context:** The pairing of Libre Baskerville — a font that connotes academic authority and institutional weight — with a vaporwave aesthetic creates a deliberate dissonance. The authoritative tone speaks through the visual language of nostalgia and digital decay, suggesting that the most profound truths arrive in degraded, imperfect forms. This typography-mood mismatch is unique in the collection. **Seed/Style:** vaporwave, organic-flow, baskerville-refined, dark-neon, tilt-3d, photography, layered-depth, authoritative **Avoided overused patterns:** corporate aesthetic, centered layout, warm palette, mono typography, nature motifs, friendly tone, minimal imagery style, parallax as primary animation, stagger animation **Preferred underused patterns:** vaporwave (3%), organic-flow (5%), baskerville-refined (2%), dark-neon (4%), tilt-3d (3%)