# Design Language for yongzoon.xyz ## Aesthetics and Tone yongzoon.xyz is a skeuomorphic digital cabinet of curiosities -- a site that emulates the tactile reality of physical interfaces with uncanny fidelity. The visual identity resurrects the rich materiality of early iOS/macOS design (pre-flat-design era) but applies it to a scholarly, intellectual context. Imagine a mahogany writing desk with brass hardware, translated pixel-for-pixel to the browser: beveled buttons that depress on click, surfaces that reflect ambient light, toggle switches with satisfying spring physics. The split-screen layout divides the viewport into two distinct material surfaces (left: dark polished wood, right: illuminated parchment), creating a dramatic duality. Art Deco display typography provides ornamental elegance, while neon-electric accents spark across the faux-physical surfaces like electrical discharges through antique equipment. Water bubble elements drift lazily through the interface, suggesting the site exists underwater in some steampunk scholar's submarine library. The tone is scholarly-intellectual -- deep thinking wrapped in beautiful objects. ## Layout Motifs and Structure A **split-screen** layout dividing the viewport into two persistent halves -- left (dark, navigational) and right (light, content) -- creating a physical duality like opening a book or a cabinet. **Primary structure:** - **Left panel (40vw, 100vh, fixed):** A dark surface (#1a1420) with subtle wood-grain texture (CSS radial-gradient simulating grain). Contains the name "YONGZOON" in vertical Art Deco display type (writing-mode: vertical-rl). Below, navigation items styled as brass-rimmed buttons with beveled edges (box-shadow: inset) and spring animation on press. Water bubbles drift upward through this panel. - **Right panel (60vw, scrollable):** A warm parchment surface (#f0e8d4) where content flows vertically. Each content section is a "drawer" -- a skeuomorphic container with slight depth (box-shadow creating a raised-surface illusion). Sections include: About, Works, Research, Musings. - **Flowing curves divider:** The boundary between left and right panels is not a straight line but a subtle S-curve (SVG clip-path), creating an organic flowing-curves motif that softens the split. - **Header bar:** A thin strip (48px) across the top of the right panel, styled as a brass rail with neon-accented status indicators. **Spatial relationships:** Left panel content is vertically centered with generous padding (clamp(40px, 6vw, 80px)). Right panel content uses 480px max-width within its 60vw, creating substantial inner margins. Content sections ("drawers") have 16px padding with 2px rounded borders and subtle depth shadows. ## Typography and Palette **Fonts:** - **Display/Vertical title:** "Poiret One" (Google Fonts) -- a geometric Art Deco display face with elegant, thin strokes, used at clamp(36px, 5vw, 60px) in vertical writing mode. Weight 400. The Deco geometry echoes brass instrument gauges and Art Nouveau lettering. - **Body text:** "Merriweather" (Google Fonts) -- a sturdy, readable serif at 17px/1.75 line-height. Weight 400 for body, 700 for emphasis. The slightly heavy serifs have a physical, stamped quality that supports the skeuomorphic conceit. - **Labels/Interface:** "Fira Sans" (Google Fonts) -- a humanist sans-serif at 12px, weight 500, for button labels, navigation items, and status text. **Color Palette (neon-electric on antique):** - **Dark panel:** #1a1420 (deep purple-black for left panel) - **Wood accent:** #2a2030 (slightly lighter for surface depth variations) - **Parchment:** #f0e8d4 (warm cream for right panel background) - **Drawer surface:** #e8dcc8 (slightly darker parchment for content containers) - **Brass:** #c8a050 (metallic gold for skeuomorphic hardware elements) - **Neon blue:** #00aaff (electric blue accent for active states, links) - **Neon pink:** #ff44aa (electric pink for hover effects, notifications) - **Text dark:** #2a2020 (near-black for right panel text) - **Text light:** #e0d8cc (warm white for left panel text) ## Imagery and Motifs **Core visual motifs:** - **Water bubbles:** SVG circles (8-24px diameter) with radial-gradient fills simulating light refraction (highlight at top-left) drift upward through the left panel. 10-15 bubbles at any time, with CSS animation: translateY(-120vh) over 12-30s (varied), slight horizontal wobble via translateX(sin wave approximation with keyframes). They suggest the submarine-library atmosphere. - **Flowing curves separator:** The left/right split uses an SVG path with smooth cubic bezier curves as the clip-path boundary, creating a sinuous organic division. This path subtly animates (control points shift 5-10px over 15s cycle), making the boundary feel alive. - **Skeuomorphic buttons:** Navigation items have multi-layered box-shadows simulating physical depth: outer shadow (dark, offset down-right), inner highlight (light, offset up-left), and on-press the shadows invert (inner shadow becomes dominant). Spring animation (cubic-bezier(0.175, 0.885, 0.32, 1.275)) on the press/release creates tactile feedback. - **Brass hardware:** Thin circular borders with linear-gradient fills (simulating cylindrical brass rails) appear as section header decorators and the top header rail. Created purely with CSS gradients and border-radius. ## Prompts for Implementation **Full-screen split cabinet experience:** The site should feel like operating a beautiful piece of antique scientific equipment -- every interaction has weight, every surface has materiality. The split-screen creates a constant duality between dark navigation and light content. **Split-screen implementation:** - Use CSS grid: grid-template-columns: 40vw 60vw on the viewport container. - Left panel: position: fixed (or sticky), height: 100vh, overflow: hidden. - Right panel: overflow-y: auto for content scrolling. - SVG clip-path on the boundary for the flowing-curves divider. **Skeuomorphic depth system:** - Raised surface: box-shadow: 2px 2px 6px rgba(0,0,0,0.3), -1px -1px 3px rgba(255,255,255,0.1), inset 0 1px 0 rgba(255,255,255,0.08). - Pressed state: box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3), inset -1px -1px 2px rgba(255,255,255,0.05). - Transition between states: 150ms cubic-bezier(0.175, 0.885, 0.32, 1.275) for spring feel. **Water bubble system:** - 15 absolutely-positioned span elements within left panel. - Each: border-radius: 50%, background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.4), rgba(0,170,255,0.1) 60%, transparent). - Animation: translateY(-120vh) with varied durations (12-30s) and slight horizontal keyframe wobble. **AVOID:** Flat design, minimal aesthetics, CTA-heavy layouts, pricing blocks. This site celebrates materiality and depth. ## Uniqueness Notes **Differentiators from other designs:** 1. **Skeuomorphic submarine scholar's cabinet:** No other design combines rich physical-material emulation (brass, wood, parchment) with an underwater atmosphere (floating bubbles, deep-sea darkness) in a scholarly context. 2. **Flowing-curves animated split-screen boundary:** While other designs use split screens, the sinuous, animated SVG boundary between panels creates a living, breathing division that is structurally unique. 3. **Neon-electric accents on antique surfaces:** The collision of electric blue/pink neon with brass and wood-grain skeuomorphism creates a temporal paradox -- Victorian craftsmanship electrified by cyberpunk energy -- found in no other design. **Chosen seed/style:** aesthetic: skeuomorphic, layout: split-screen, typography: art-deco-display, palette: neon-electric, patterns: spring, imagery: water-bubbles, motifs: flowing-curves, tone: scholarly-intellectual **Avoided overused patterns:** photography imagery (91%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (98%), mono typography (82%), mysterious-moody tone (72%).