# Design Language for yongzoon.xyz ## Aesthetics and Tone yongzoon.xyz is an homage to the aesthetic of a **vintage neon-lit jukebox** -- the kind of physical object where chrome bezels, faux-leather panels, and illuminated glass tubes coexisted in a single glorious machine designed to seduce your coins out of your pocket. The skeuomorphic philosophy here is not the polished Apple-circa-2010 variety but something rawer and more theatrical: the tactile maximalism of 1950s American diners, Korean vinyl bars, and underground Tokyo kissaten, all cross-wired with the electric defiance of a punk zine photocopied at 2 AM. The name "yongzoon" (용준, roughly "dragon excellence") carries a latent mythic charge, and the design channels this into a mood of restless grandeur -- an artifact that feels simultaneously precious and dangerous, like a rare 45rpm single crackling on a turntable wired to a neon transformer. The tone is **edgy-rebellious** but filtered through a vintage connoisseur's eye. Not destructive rebellion -- curated rebellion. The kind of person who hand-selects a leather-bound journal and then fills it with anarchist poetry in impeccable calligraphy. Every surface texture, every glow effect, every typographic decision should communicate that this site was built by someone who cares deeply about craft but refuses to play by sanitized corporate rules. ## Layout Motifs and Structure The layout is a **hero-dominant single-descent** -- the entire experience is anchored by an enormous, immersive opening panel (minimum 100vh, ideally 110vh with subtle overflow) that functions like the face of a jukebox: a glowing, textured, mechanically-detailed surface that invites the viewer to look closer. Below this hero, content is revealed through **progressive-disclosure** mechanics -- sections are not simply stacked but are gated behind scroll-triggered reveals that mimic the physical action of pulling open a drawer, flipping a panel, or pressing a chrome button. **The Hero Panel (0-110vh):** A full-viewport composition built as a layered skeuomorphic surface. The background is a deep matte charcoal (#1C1A22) overlaid with a subtle leather-grain texture (CSS noise via `background-image` using a tiny repeating PNG or SVG filter). Centered in the viewport is a large rounded-rectangle "faceplate" (max-width 780px, aspect-ratio ~4:5) rendered with CSS `box-shadow` to simulate beveled chrome edges -- multiple inset and outset shadows in metallic grays (#9B9BA3, #5A5A66, #2E2E38) creating a 3D bezel effect. Inside the faceplate, the site name is displayed in Cormorant Garamond, backlit by a neon glow. **Below the Hero -- The Drawer Sections:** Three to four content sections are structured as "drawers" that slide up into view as the user scrolls. Each drawer is a self-contained rectangular panel (width: min(90vw, 720px), centered) with its own skeuomorphic treatment: - **Drawer 1 ("Signal"):** A faux brushed-aluminum panel with horizontal grain lines (CSS linear-gradient stripes at 0.5px intervals in alternating #3A3A44 and #42424E). Content fades in with a 600ms stagger. - **Drawer 2 ("Archive"):** A dark wood-veneer panel simulated with radial-gradient layering in browns (#2C2218, #3D3024, #4A3C2E). Contains a grid of small "record sleeve" cards. - **Drawer 3 ("Frequency"):** A glass-panel section with a frosted-glass effect (backdrop-filter: blur(12px) over a neon-gradient background), housing the site's manifesto or statement text. **Navigation:** No conventional nav bar. A single floating chrome "dial" element (fixed, bottom-right, 56px diameter circle with beveled shadow) acts as the only navigation affordance. Clicking/tapping it reveals a radial menu of section anchors that fan out in a semicircle, each labeled with a single word in small caps Cormorant Garamond. The dial rotates 90 degrees on open with a CSS spring transition. ## Typography and Palette **Primary Display Font:** "Cormorant Garamond" (Google Fonts, weights 400, 600, 700) -- a refined, high-contrast serif with sharp bracketed serifs and generous x-height. Used for all headings, the hero title, and the navigation labels. The Garamond classification is essential to the vintage-meets-electric tension: it is the typeface of 18th-century literary salons repurposed as the glowing marquee of a neon sign. Display size: `clamp(2.4rem, 6vw, 5.2rem)`. Letter-spacing: `0.04em`. Color varies by context: #FF2D6B (hot neon pink) for the hero title, #E8E4DC (warm ivory) for section headings, #FF8C42 (electric amber) for accent words. **Body Font:** "Inter" (Google Fonts, weights 300, 400, 500) -- a neutral, highly legible sans-serif that provides maximum contrast against the ornate display font. Used for all body copy and UI labels. Size: `clamp(0.95rem, 1.1vw, 1.1rem)`. Line-height: 1.72. Color: #B8B4AC (warm silver). The deliberate plainness of Inter against the drama of Cormorant Garamond creates a tension that mirrors the site's overall aesthetic: refinement interrupted by electricity. **Monospace Accent:** "IBM Plex Mono" (Google Fonts, weight 400) -- used sparingly for metadata, timestamps, and the floating dial labels. Size: 0.75rem. Letter-spacing: 0.12em. Text-transform: uppercase. Color: #6B6B7B (muted lavender-gray). **Color Palette:** | Role | Hex | Name | Usage | |------|-----|------|-------| | Background | #1C1A22 | Midnight Plum | Primary background, hero panel | | Surface | #2A2831 | Velvet Charcoal | Drawer panels, card backgrounds | | Neon Primary | #FF2D6B | Hot Magenta | Hero title glow, primary CTA glow, link hover | | Neon Secondary | #FF8C42 | Electric Amber | Accent highlights, decorative neon strokes | | Neon Tertiary | #00E5A0 | Phosphor Green | Secondary glow effects, active states | | Text Primary | #E8E4DC | Warm Ivory | Headings, high-emphasis text | | Text Body | #B8B4AC | Warm Silver | Body copy, descriptions | | Chrome Light | #9B9BA3 | Brushed Chrome | Bezel highlights, metallic accents | | Chrome Dark | #2E2E38 | Gun Metal | Shadow edges, depth accents | | Wood Tone | #3D3024 | Walnut Veneer | Drawer 2 background texture | The palette is **neon-electric** at its core: high-saturation accent colors (#FF2D6B, #FF8C42, #00E5A0) burning against deep, desaturated dark surfaces. The neon colors never appear as flat fills -- they always manifest as glows, using layered `box-shadow` and `text-shadow` to simulate the physics of gas-discharge tubes: a bright core color surrounded by a softer, wider halo at reduced opacity. Example for the hero title: `text-shadow: 0 0 8px #FF2D6B, 0 0 24px rgba(255,45,107,0.5), 0 0 64px rgba(255,45,107,0.2)`. ## Imagery and Motifs **No photographs.** All visual elements are CSS-generated, SVG, or inline decorative constructions that reinforce the skeuomorphic-neon hybrid aesthetic. **Chrome Bezel System:** The signature visual motif. Every major container element is framed by a simulated chrome bezel -- a multi-layered `box-shadow` stack that creates the illusion of a raised, polished metal edge. The bezel recipe uses four shadows: an outer dark shadow (#0A0A0F at 0.6 opacity, 8px spread), an outer highlight (#9B9BA3 at 0.3 opacity, 2px spread, negative offset), an inner dark groove (#1C1A22, inset, 3px), and an inner highlight (#5A5A66, inset, 1px, negative offset). This bezel appears on the hero faceplate, each drawer panel, the navigation dial, and the record-sleeve cards. Its consistent application creates a visual grammar of physicality -- every surface feels like it could be touched, turned, or pressed. **Leather Grain Texture:** The hero panel background carries a subtle leather texture generated with an SVG `feTurbulence` filter (baseFrequency="0.65", numOctaves="4", type="fractalNoise") composited at 4% opacity over the base color. This creates a tactile warmth that pure flat color cannot achieve -- the viewer subconsciously reads the surface as a material, not a screen. **Neon Tube Decorative Lines:** Thin horizontal and vertical accent lines (2px width) appear as section dividers and decorative borders, rendered as CSS gradients that simulate neon tubing. Each line has a bright core stroke in #FF2D6B or #00E5A0, flanked by a soft glow achieved with a wider pseudo-element carrying a matching `box-shadow`. These lines occasionally flicker -- a CSS `@keyframes` animation that modulates opacity between 0.85 and 1.0 at irregular intervals (steps: 0% 1.0, 4% 0.87, 8% 1.0, 52% 1.0, 54% 0.9, 56% 1.0, 100% 1.0) to simulate the characteristic instability of real neon gas tubes. **Record Sleeve Cards:** In Drawer 2, content items are presented as small rectangular cards (aspect-ratio: 1/1, ~160px) styled to resemble vinyl record sleeves. Each card has a dark background with a centered circular element (the "record" -- a CSS-drawn circle with concentric groove lines using repeating-radial-gradient in #2A2831 and #1C1A22). On hover, the circular element shifts upward 8px (the record "sliding out" of the sleeve), and a neon glow appears beneath it. **Dial Knob Detailing:** The floating navigation dial is rendered with concentric radial gradients to simulate a machined metal knob -- a bright center highlight (#9B9BA3), a mid-tone ring (#5A5A66), and a dark outer edge (#2E2E38), with a tiny notched indicator line (a 2px-wide CSS border segment in #FF8C42) pointing to the current section. The knob rotates smoothly as the user scrolls between sections, its indicator always pointing to the active drawer. **SVG Dragon Watermark:** A single, highly stylized dragon silhouette (referencing the "yong"/dragon character) is rendered as an inline SVG at very low opacity (0.03-0.05) behind the hero faceplate. The dragon is composed entirely of clean geometric curves -- no fine detail, just the essential serpentine form -- creating a barely-perceptible mythic presence that rewards close inspection. ## Prompts for Implementation Build yongzoon.xyz as a **single-page vertical scroll narrative** -- a descent from the hero jukebox faceplate through three progressive-disclosure drawers, culminating in a minimal sign-off. The experience should feel like operating a beautiful, mysterious machine: each scroll action reveals a new compartment, each compartment has its own material surface and neon accent, and the whole thing hums with barely contained electrical energy. **Hero Faceplate Construction (0-110vh):** - The hero occupies the full viewport plus 10vh overflow (the bottom edge of the faceplate peeks below the fold, inviting scroll). - Center the faceplate element vertically and horizontally using CSS Grid (`place-items: center`) on the viewport container. - The faceplate itself is a `
` with `border-radius: 24px`, the full chrome bezel shadow stack, and the leather-grain SVG filter as a background layer. - The site name "yongzoon.xyz" is rendered in Cormorant Garamond at 700 weight, `clamp(3rem, 7vw, 5.6rem)`, centered inside the faceplate with the neon-pink text-shadow treatment. - Below the title, a single tagline in Inter 300 at 1rem, color #B8B4AC, letter-spacing 0.2em, uppercase: a cryptic phrase that sets the tone (e.g., a single evocative line, not a value proposition). - The SVG dragon watermark sits as an absolutely-positioned element behind the title text, scaled to ~60% of the faceplate width. - A subtle CSS animation pulses the neon glow intensity on the title every 4 seconds -- a slow sine-wave modulation of the text-shadow spread, not a blink. **Progressive Disclosure Drawer Mechanics:** - Each drawer section starts with `opacity: 0; transform: translateY(40px)`. - An `IntersectionObserver` (threshold: 0.15) triggers a CSS transition: `opacity: 1; transform: translateY(0)` over 800ms with `cubic-bezier(0.16, 1, 0.3, 1)` (spring-like ease-out). - Within each drawer, child elements stagger their reveal by 120ms each, creating a cascade effect. - The drawers do NOT parallax-scroll. They slide into place and then scroll normally with the page. The progressive-disclosure is the entry animation only. **Drawer Surface Treatments:** - Each drawer has a distinct CSS-generated material texture (brushed aluminum, wood veneer, frosted glass) as described in Layout Motifs. These textures are achieved entirely with CSS gradients, filters, and backdrop-filter -- no image assets. - Neon accent lines (2px, glowing) separate content blocks within each drawer. The neon color alternates: Drawer 1 uses #FF2D6B, Drawer 2 uses #FF8C42, Drawer 3 uses #00E5A0. **Navigation Dial:** - Fixed position, `bottom: 24px; right: 24px`, z-index above all content. - The dial's rotation is driven by a scroll listener that maps `scrollY` to a 0-270 degree range across the full page height. - On click, the dial expands (scale 1 to 1.4 over 300ms, spring easing) and reveals 3-4 anchor labels arranged in a semicircular arc using CSS `transform: rotate(Ndeg) translateX(80px)` on each label. - Each label is Cormorant Garamond, small caps, 0.8rem, color #E8E4DC, with a neon underline on hover. **Neon Flicker System:** - A single CSS `@keyframes neonFlicker` animation is defined and applied to all neon elements with varying `animation-delay` values to prevent synchronization. - The flicker is subtle -- never more than 15% opacity variation -- to suggest electrical imperfection without causing visual fatigue. **Color and Glow Implementation:** - All neon colors use the triple-shadow technique: core color at full opacity (tight spread), 50% opacity (medium spread), 20% opacity (wide spread). - Background surfaces use `mix-blend-mode: normal` -- no blend modes that could wash out the neon. - The overall page background is #1C1A22, not pure black, to maintain the warm plum undertone that keeps the neon from feeling cold or sterile. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie banners, footer link forests, stock photography, hamburger menus, gradient hero banners, card-grid dashboards. This is a storytelling artifact, not a conversion funnel. **Bias toward:** Full-screen immersive moments, material texture experimentation, typographic drama, restrained animation that serves the skeuomorphic illusion, and a sense of discovery -- the user should feel they are exploring an object, not scanning a webpage. ## Uniqueness Notes 1. **Skeuomorphic-neon hybrid:** No other design in this collection combines physical-object simulation (chrome bezels, leather grain, wood veneer, machined metal dial) with neon-electric color treatment. The standard approach to skeuomorphism uses warm, muted palettes; here, the physicality is electrified with saturated glow effects, creating a visual language of "vintage machine powered by dangerous electricity" that is entirely unique. 2. **Radial dial navigation replacing all conventional nav patterns:** Instead of a top bar, hamburger menu, sidebar, or scroll indicators, navigation is handled by a single rotating chrome dial fixed to the viewport corner. This is a physical-metaphor interaction pattern (turning a dial to change channels/stations) that reinforces the jukebox concept while avoiding every overused navigation layout in the frequency analysis. No other design uses a rotating knob as the sole navigation mechanism. 3. **Progressive-disclosure drawers with distinct material surfaces:** While progressive-disclosure appears in 7% of designs, none implement it as physically-styled "drawers" where each revealed section has a different simulated material (brushed aluminum, wood veneer, frosted glass). The combination of scroll-triggered reveal animation with skeuomorphic surface differentiation creates a spatial narrative -- the user is opening compartments of a machine, not scrolling past sections of a page. 4. **Neon flicker physics simulation:** The neon accent system goes beyond static glow effects by implementing a physically-modeled flicker pattern that simulates real gas-discharge tube behavior -- irregular opacity variations at specific keyframe intervals rather than simple pulse or blink animations. This micro-detail elevates the neon treatment from decorative to environmental. 5. **Dragon watermark as subliminal identity mark:** The ultra-low-opacity SVG dragon behind the hero faceplate is a deliberately hidden detail that most viewers will only notice on second or third visit, rewarding attention and creating a layer of meaning (the "yong" in yongzoon meaning dragon) that operates below conscious perception. **Seed/style:** skeuomorphic, hero-dominant, garamond-classic, neon-electric, progressive-disclosure, minimal, vintage, edgy-rebellious **Avoided overused patterns:** corporate aesthetic (97%), photography imagery (99%), full-bleed layout (97%), warm palette (98%), parallax animation (98%), nature motifs (48%), friendly tone (46%), mono typography (76%). Deliberately chose underused alternatives: skeuomorphic (2%), hero-dominant (3%), neon-electric (1%), edgy-rebellious (5%), garamond-classic (4%).