# Design Language for 가능성.com ## Aesthetics and Tone 가능성.com should feel like standing on a glass pier at dawn while a neon-cold mountain range rises out of an impossible turquoise sea. The Korean word 가능성 means possibility, so the visual story is not “options in a list” but a cinematic threshold: fog parts, water refracts, and each scroll step reveals another future peak. The chosen tone is bold-confident rather than dreamy; the site speaks like a navigator who has already crossed the storm and is pointing toward the next summit. The aesthetic is seapunk filtered through alpine negative space: translucent aqua panels, pearlescent frost, chrome sea foam, digital tide marks, and stark black typography cutting through mist. Avoid tropical kitsch and avoid generic ocean wellness calm. This is colder, sharper, and more declarative — a possibility engine built from glacial water, salt spray, and steep horizons. The mood reference is “arctic rave expedition”: waterproof synth color, monumental silence, and the certainty of a flag planted on a future nobody else saw yet. ## Layout Motifs and Structure Use ma-negative-space as the core composition principle. Large areas of empty frosted sky and pale water should dominate the viewport, with content placed as small, deliberate anchors: a headline near the lower-left tide line, a Korean wordmark suspended high on the right, a single vertical route marker crossing the screen like a mountaineering rope. The whitespace is not blank; it is pressure, fog, altitude, and the unknown distance between the current self and a possible self. The site should unfold as a full-screen narrative sequence of four “visibility states” rather than conventional stacked sections: 1. **Fog Horizon:** a near-empty first viewport with the huge word 가능성 emerging from translucent vapor. Only one sentence and one small coordinate label should be visible; no button cluster. 2. **Tidal Map:** the layout shifts into a sparse topographic chart where thin contour lines and wave rings describe unreal islands. Text appears in isolated caption blocks floating far apart, each block no wider than 28rem. 3. **Peak Aperture:** a full-bleed photographic mountain silhouette or CSS/photo hybrid appears through a circular frost mask, while copy sits outside the image in calm negative space. 4. **Signal Summit:** final viewport uses a single monumental statement, a horizon line, and small animated markers that imply many routes without turning them into cards or stats. Prefer asymmetric restraint over centered hero formulas. Avoid card grids entirely. If supporting points are needed, make them appear as tiny expedition annotations pinned to the landscape, not as tiles. Navigation should be minimal and almost cartographic: small labels, coordinates, tide-depth marks, and a thin route line. ## Typography and Palette Typography should combine oversized Korean impact with precise expedition labels: - **Primary Korean display:** "Black Han Sans" (Google Fonts). Use for 가능성 and short Korean statements at enormous scale, weight 400, tight line-height around 0.86, letter spacing from -0.04em to -0.07em. It should feel like black basalt emerging from turquoise mist. - **Latin display companion:** "Archivo Black" (Google Fonts). Use for English fragments such as POSSIBLE / ROUTE / SIGNAL. Keep it uppercase, compact, and confident. - **Body and UI:** "Noto Sans KR" (Google Fonts). Use for Korean explanatory text and mixed-language paragraphs, weight 400–700, with generous line-height. - **Micro-labels:** "Space Grotesk" (Google Fonts). Use for coordinates, altitude/tide labels, route IDs, and tiny interface inscriptions. Palette: translucent-frost with seapunk electric accents and mountain shadow contrast. - Frost glass: `#EAFBFF` - Glacier white: `#F7FDFF` - Seafoam cyan: `#50F5D0` - Deep tide teal: `#006B7A` - Alpine shadow: `#062B3A` - Abyss black-blue: `#021016` - Pearl lavender reflection: `#C9D7FF` - Signal coral accent: `#FF5E7E` Use gradients sparingly as environmental atmosphere, not as corporate decoration: `linear-gradient(180deg, #F7FDFF 0%, #EAFBFF 42%, #50F5D0 100%)` for fog-water transitions, and deep overlays from `#062B3A` to `#021016` for summit shadow. Surfaces should feel like frosted acrylic with `rgba(234, 251, 255, 0.42)` backgrounds, soft inner highlights, and thin borders in `rgba(80, 245, 208, 0.45)`. ## Imagery and Motifs Use photography as a rare, high-impact apparition rather than a constant background. Select mountain-landscape photography with strong silhouettes, mist, snow fields, or craggy ridgelines; treat the image through translucent cyan overlays, frost masks, and soft clipping shapes so it appears discovered through weather. The mountain is the metaphor for possibility: not a motivational stock-photo peak, but an unknown landform surfacing from an electric sea. Motif system: - **Frost apertures:** circular or oval windows with blurred edges that reveal cropped mountain photography underneath. They should feel like wiping condensation from glass. - **Tide-contour lines:** thin SVG or CSS lines that combine ocean wave rings with topographic mountain contours. These lines can drift by 2–6px on hover or scroll. - **Route beacons:** tiny coral dots and cyan ticks that pulse once, then settle. They mark possible futures without becoming a data visualization grid. - **Hangul as terrain:** oversized cropped characters from 가능성 can become abstract black cliffs in the background, partially masked by fog. - **Pearl bubbles and ice flecks:** sparse micro-elements, never dense decoration. They should move slowly and respond to cursor proximity with subtle refraction. Avoid generic icons. If marks are needed, create them from route symbols: triangles for peaks, hollow circles for tide pools, slashes for wind direction, and short Korean annotations like “미정”, “도달”, “열림”, “다음”. ## Prompts for Implementation Build a full-screen narrative experience in a single HTML/CSS/JS composition. The opening should occupy the entire viewport with almost no traditional UI: a foggy aqua field, an enormous Black Han Sans 가능성 wordmark cropped by the viewport edges, and a thin horizon line that slowly brightens. As the user scrolls, the site should feel like visibility improving across an expedition map. Use CSS masks, `backdrop-filter: blur()`, translucent layers, and SVG contour paths to create frost, tide, and altitude. Animation direction should rely on micro-interactions instead of overused parallax/stagger formulas. Let labels “defrost” on hover by sharpening from blur to crisp text. Let route beacons emit a single ripple when entering view. Let contour lines subtly flex as if affected by tide pressure. Let the giant Hangul title shift by a few pixels with cursor movement, like a dark mountain seen through water. Use scroll only to transition between visibility states; avoid constant parallax machinery. Implementation should avoid CTA-heavy layouts, pricing blocks, stat-grids, feature-card grids, and centered SaaS hero patterns. If a call to action is unavoidable, make it one quiet expedition command such as “가능성을 열기” positioned like a map label, not a glossy button. Content should read as a sequence of discoveries: the fog reveals the word, the tide map reveals routes, the aperture reveals the peak, the final signal confirms that possibility is a place you can move toward. Use layered CSS backgrounds for atmosphere: radial cyan glows behind fog, a low-contrast noise texture if available via CSS gradients, and clipped mountain silhouettes. JavaScript should only enhance: cursor refraction, line activation, beacon pulses, and scroll-state class changes. The page should feel immersive, cinematic, and spatial, with large pauses of negative space between moments. ## Uniqueness Notes 1. **Seapunk alpine fusion:** Instead of a typical ocean-only seapunk treatment, the site combines electric tide color with cold mountain-landscape imagery, making possibility feel like a peak rising from digital water. 2. **Ma-negative-space as weather:** Empty areas are treated as fog, altitude, and distance rather than minimalist blankness, creating a confident but quiet visual rhythm. 3. **Hangul terrain system:** The Korean characters of 가능성 become monumental cliffs and cropped silhouettes, giving the domain a typographic landscape no English-only design can copy. 4. **Micro-interaction-led motion:** The design favors defrosting labels, beacon pulses, and tide-contour flexing over the batch’s heavily used parallax, scroll-triggered, and stagger animation patterns. 5. **Annotation instead of cards:** Supporting content appears as expedition notes and route marks, explicitly avoiding the overused card-grid and centered layout patterns from the frequency analysis. Chosen seed/style: aesthetic: seapunk, layout: ma-negative-space, typography: display-bold, palette: translucent-frost, patterns: micro-interactions, imagery: photography, motifs: mountain-landscape, tone: bold-confident. Avoided patterns from frequency analysis: corporate aesthetic, card-grid layouts, centered hero structures, warm gradient palettes, mono-heavy typography, generic minimal photography treatment, parallax-heavy storytelling, scroll-triggered/stagger reveal systems, CTA-heavy SaaS sections, pricing blocks, and stat grids.