# Design Language for yongzoon.com ## Aesthetics and Tone yongzoon.com should feel like arriving inside a private aurora observatory suspended above a black ocean: intimate, luminous, slightly impossible, and conversational rather than promotional. The direction is **ethereal HUD dream-console** — a personal domain rendered as a drifting instrument panel for thoughts, prototypes, aliases, and half-visible signals. Instead of a homepage that sells, it should behave like a soft-spoken cockpit that notices the visitor, opens a few translucent layers, and says, “come look at this strange light with me.” The mood is nocturnal but not gloomy: misted glass, violet atmosphere, green-blue magnetic ribbons, faint horizon glow, and generative particles that resemble weather maps for ideas. Treat the site as a living field recording of curiosity. Copy should be short and human, with annotations in the margins, as if the interface is quietly narrating what the domain is thinking about tonight. The design can borrow from sci-fi HUD language, but soften it until it feels celestial, personal, and almost handmade from light. ## Layout Motifs and Structure Use a **hud-overlay** structure as the primary layout motif: the viewport is a fixed observation window, with information appearing as layered panes, orbital labels, calibration ticks, and translucent coordinate frames. Avoid a normal centered hero, card-grid, pricing section, or corporate landing-page stack. The page should read as a full-screen narrative instrument, not a brochure. Suggested spatial system: 1. **Aurora Lock Screen:** A 100vh opening scene with the domain placed off-center inside a thin luminous reticle. Behind it, generative aurora bands drift diagonally across a deep gradient field. Small conversational phrases appear as status whispers: “signal is soft,” “names are weather,” “scroll to tune the sky.” 2. **Signal Bands:** Subsequent scenes slide as layered HUD sheets rather than blocks. Each scene occupies most of the viewport and introduces one fragment of identity: experiments, writing, code, memory, future notes. These fragments should appear in floating corner panels tethered to the aurora by thin SVG lines. 3. **Tilted Thought Plates:** Key text panels should be slightly rotated in 3D space, responding to pointer movement with subtle tilt-3d. The tilt should feel like glass catching light, not a gamified hover trick. 4. **Horizon Console:** Near the end, collapse the scattered overlays into a quiet bottom horizon line, like the lights have settled. The final scene should feel like the system dimming rather than pushing a CTA. Composition should favor asymmetric negative space, thin borders, map-like overlays, and floating annotations. Keep the center visually available for the aurora field; place content around it as if the visitor is reading instruments around the sky. ## Typography and Palette Use Google Fonts with a geometric-sans identity and a precise HUD support voice: - **Primary display:** "Space Grotesk" from Google Fonts, weights 400, 500, and 700. Use for the domain name, large scene titles, and luminous coordinate labels. Its geometric construction keeps the experience futuristic while still conversational. - **Body and annotations:** "Inter" from Google Fonts, weights 300, 400, and 500. Use for short explanatory text, side notes, and small human asides. - **Technical microtype:** "IBM Plex Mono" from Google Fonts, weights 400 and 500. Use sparingly for timestamps, latitude-like coordinates, signal readouts, and HUD calibration marks. Palette should be a gradient-first aurora system with dark atmospheric grounding: - **Void blue:** `#06111F` for the main background, deep enough for light to bloom. - **Magnetic violet:** `#6D5DF6` for primary aurora ribbons and active HUD lines. - **Solar mint:** `#72F2C7` for conversational highlights, small glows, and signal nodes. - **Ionosphere pink:** `#F49BFF` for secondary gradients and rare emotional emphasis. - **Frosted cyan:** `#B8F7FF` for hairline borders, reticles, and thin typography. - **Soft moon:** `#EEF7FF` for readable text on dark glass. - **Deep indigo:** `#160B33` for radial shadow pools and panel interiors. Gradients should be layered and translucent: `linear-gradient(135deg, #06111F 0%, #160B33 46%, #0B253B 100%)` as the atmospheric base; aurora ribbons can use `linear-gradient(90deg, transparent, #72F2C7, #6D5DF6, #F49BFF, transparent)` with blur and masking. ## Imagery and Motifs Imagery should be generated in-browser through CSS gradients, SVG filters, canvas particles, and simple DOM layers. Use no photography. The visual language is **generative aurora instrumentation**: light curtains, contour rings, glimmering node constellations, transparent panes, orbital arcs, and tiny calibration glyphs that imply a personal signal map. Core motifs: - **Aurora lights:** Wide blurred ribbons that shift slowly across the viewport, occasionally splitting into thinner bands like magnetic field lines. - **Generative signal dust:** Small particles drifting at different depths, clustering near text panels as if ideas have gravity. - **HUD reticles:** Circular crosshairs, bracket corners, hairline grids, and compass ticks framing the domain without turning the page into a dashboard. - **Glass thought plates:** Semi-transparent panels with gradient borders, mild backdrop blur, and 3D tilt responsive to pointer position. - **Whisper captions:** Short conversational annotations that appear near the edges, not as marketing bullets but as comments from the interface. Decorative marks should feel purposeful and poetic: a line points from a phrase to a shimmer; a node pulses when a section enters view; a coordinate label describes an emotional location rather than a metric. Avoid stock icons and generic tech illustrations. ## Prompts for Implementation Build as a single immersive HTML/CSS/JS experience with full-screen narrative scenes. Load "Space Grotesk", "Inter", and "IBM Plex Mono" from Google Fonts. Use CSS custom properties for the aurora palette and create layered backgrounds with radial gradients, conic gradients, blurred pseudo-elements, and SVG noise. The site should open with a cinematic atmospheric field, then reveal content through HUD overlays that slide, dim, and rotate as the visitor scrolls. Implementation guidance: - Use a fixed `.sky` layer containing animated aurora ribbons; animate via CSS keyframes and small JS pointer offsets so the field feels alive. - Create `.hud-frame` elements with corner brackets, thin borders, inset glows, and `backdrop-filter: blur(...)` for frosted instrumentation. - Add pointer-driven **tilt-3d** to major thought plates using CSS transforms (`perspective`, `rotateX`, `rotateY`, `translateZ`) with very small angles. - Use scroll progress to tune the aurora: scene 1 is blue-violet, scene 2 adds mint, scene 3 adds pink glints, final scene dims to moonlit cyan. - Let text enter as quiet signal acquisition: opacity, blur reduction, and tiny coordinate ticks drawing into place. Avoid conventional parallax-heavy effects despite the atmospheric depth. - Keep copy fragments brief, conversational, and mysterious. The domain should feel like a person talking through a beautiful instrument panel. - AVOID: CTA-heavy layouts, pricing blocks, stat-grids, centered corporate hero sections, card-grid portfolios, stock photography, generic minimal whitespace pages, warm beige SaaS gradients, and dashboard KPI modules. Favor storytelling over conversion. The visitor should feel they have tuned into yongzoon.com for a few minutes, watched its weather, and left with the impression of a luminous personal signal rather than a list of services. ## Uniqueness Notes - Chosen seed/style: aesthetic: ethereal, layout: hud-overlay, typography: geometric-sans, palette: gradient, patterns: tilt-3d, imagery: generative-art, motifs: aurora-lights, tone: conversational. - Differentiator 1: Uses HUD language as a poetic observatory for identity, not as a metrics dashboard or sci-fi control panel. - Differentiator 2: Makes aurora-light generative art the central narrative actor, with content orbiting the sky instead of sitting in cards. - Differentiator 3: Uses conversational interface whispers and emotional coordinates to make the page feel personal, intimate, and alive. - Differentiator 4: Applies tilt-3d only to translucent thought plates, creating a subtle glass-in-light sensation rather than common hover-lift cards. - Frequency analysis to avoid: corporate, card-grid, centered layouts, photography, minimal imagery, warm palettes, parallax, scroll-triggered stagger animations, mono-heavy typography, and authoritative tone are heavily overused. This design deliberately leans into underused hud-overlay, generative-art, aurora-lights, tilt-3d, geometric-sans, ethereal aesthetics, and conversational tone.