# Design Language for yongzoon.xyz ## Aesthetics and Tone yongzoon.xyz should feel like a chrome reef discovered inside an arcade cabinet after midnight: bright, kinetic, slightly impossible, and full of tiny electric creatures darting through polished metal corridors. The aesthetic is **isometric energetic ocean-tech** — not calm spa water, not corporate futurism, but a sparkling habitat where tropical fish become signal packets and glitch artifacts become bubbles of personality. Imagine a 1990s aquarium screensaver rebuilt with isometric stagecraft, liquid mercury rails, iridescent fins, and playful bursts of corrupted color. The tone is fast, curious, and performative. The site should invite exploration through motion and discovery rather than through standard marketing persuasion. It can be funny, luminous, and strange: every scroll should feel like entering another tank in a cybernetic fish market, with chrome surfaces reflecting neon scales and broken pixels. ## Layout Motifs and Structure Use a **sidebar** as the main spatial anchor, but make it a living aquarium instrument panel rather than a conventional navigation rail. The sidebar should be fixed on the left, narrow at rest, and shaped like a vertical chrome filtration column with glowing isometric tabs, tiny depth ticks, fish silhouettes, and animated pH-style readouts. It should track the visitor's movement through the story as if mapping water pressure. The main content should unfold as a sequence of full-screen isometric reef chambers. Each chamber is a tilted diamond-floor stage with layered depth: chrome platforms, transparent water panes, diagonal glass tunnels, and floating glitch windows that swim in perspective. Avoid centered hero sections and card grids. Instead, compose every scene as an aquarium diorama viewed from an isometric angle, with the domain title, narrative fragments, and micro-interactions placed on raised ledges. Suggested structure: 1. **Chrome Hatchery:** the opening viewport reveals the domain as a mirrored tank sign, with fish-shaped glitch streaks orbiting the letters. 2. **Signal Current:** a diagonal corridor of animated currents carries short identity fragments, project hints, and small clickable artifacts. 3. **Reef Console:** the sidebar becomes more active, exposing filters, coordinates, and fish icons that correspond to narrative zones. 4. **Glitch Lagoon:** distorted panels ripple, duplicate, and reassemble into playful observations or personal notes. 5. **Night Aquarium:** the final scene dims into black chrome and luminous fins, leaving the visitor inside a living metallic ecosystem rather than a CTA block. ## Typography and Palette Use Google Fonts with a geometric, high-energy hierarchy: - **Display:** "Space Grotesk" from Google Fonts, weights 600 and 700. Use for the domain title, large chamber names, sidebar labels, and angular isometric callouts. Its squared geometry matches chrome panels without feeling sterile. - **Body:** "Outfit" from Google Fonts, weights 400, 500, and 600. Use for narrative fragments, short descriptions, and interface notes; keep copy compact and rhythmic. - **Accent / coordinates:** "IBM Plex Mono" from Google Fonts, weights 400 and 500. Use sparingly for depth numbers, tank measurements, cursor labels, and glitch captions. Palette should be chrome-metallic with tropical interference: - Liquid chrome: `#C9D3DC` - Polished shadow steel: `#1B222B` - Mirror black: `#06080C` - Electric cyan: `#22F7FF` - Tropical fin orange: `#FF6A2A` - Reef magenta: `#FF2BD6` - Acid lime scale: `#B8FF2C` - Deep aquarium blue: `#073B66` Use gradients like `linear-gradient(135deg, #F3F7FA 0%, #8D99A6 38%, #1B222B 72%, #22F7FF 100%)` for metal planes. Keep backgrounds mostly dark so chrome highlights and tropical fish colors feel incandescent. ## Imagery and Motifs Build imagery from CSS, SVG, and optional lightweight Lottie-style animation concepts. The key motif is **tropical fish as glitch organisms**. Fish should not be realistic illustrations; they should be angular isometric glyph-creatures made of chrome triangles, neon fins, missing scanlines, and pixel-sorted tails. A fish might briefly fragment into RGB blocks, then snap back into a clean metallic silhouette. Motifs to include: - **Isometric fish tanks:** tilted transparent boxes with refracted borders, inner glow, and diagonal floor grids. - **Chrome coral:** branching metallic forms that resemble both coral and circuit traces, lit by cyan and magenta edge highlights. - **Glitch bubbles:** small circular artifacts that duplicate, chromatically split, or show tiny text fragments as they rise. - **Sidebar water gauge:** a vertical current meter with animated ticks, pressure labels, and fish icons that migrate between sections. - **Pixel plankton:** small square particles drifting in perspective, occasionally arranging into arrows or coordinates. Avoid stock photography. If texture is needed, use synthetic noise, scanlines, caustic reflections, prism bands, and metallic gradients. The visual world should be handmade through code rather than imported as generic ocean imagery. ## Prompts for Implementation Implement as a single immersive HTML/CSS/JS narrative with full-screen chambers and a persistent animated sidebar. Load "Space Grotesk", "Outfit", and "IBM Plex Mono" from Google Fonts. The page should feel like piloting a tiny submarine through an isometric chrome reef. Use CSS transforms to create diamond platforms: `rotateX(55deg) rotateZ(45deg)` for floors, with layered pseudo-elements for bevels and reflections. The sidebar can use `position: fixed`, metallic gradients, inset shadows, animated SVG gauges, and active section markers that glow when a chamber is in view. Use JavaScript IntersectionObserver to change the sidebar's current, fish icon, and color temperature as the visitor scrolls. For Lottie-style motion, create looping SVG/CSS animations: fish swim across diagonal paths, tails stutter with stepped glitch frames, bubbles rise with chromatic offsets, and chrome coral pulses with traveling highlights. Include short glitch bursts on headings using duplicate text layers clipped with `clip-path`, but keep the effect ornamental and energetic rather than illegible. Bias toward full-screen storytelling, theatrical depth, and animated environmental detail. Avoid CTA-heavy layouts, pricing blocks, testimonial rows, stat-grids, centered SaaS heroes, and repetitive cards. Every section should answer visually: what new chamber did I just enter, what creature moved, and how did the sidebar instrument respond? ## Uniqueness Notes - Chosen seed/style: aesthetic: isometric, layout: sidebar, typography: geometric-sans, palette: chrome-metallic, patterns: lottie-animation, imagery: glitch-art, motifs: tropical-fish, tone: energetic. - Differentiator 1: the sidebar is not navigation; it is a chrome aquarium life-support column that changes pressure, color, and fish markers as the story progresses. - Differentiator 2: isometric structure is used for full-screen reef chambers and transparent tanks, not ordinary technical-docs icons or dashboard widgets. - Differentiator 3: tropical fish motifs are rendered as glitch organisms with pixel fins, RGB bubbles, and metallic bodies, creating a playful identity distinct from calm ocean or nature themes. - Differentiator 4: chrome-metallic gradients are paired with tropical neon accents, avoiding the repository's overused warm, gradient, corporate, centered, and card-grid patterns. - Frequency analysis to avoid: corporate aesthetic, photography/minimal imagery, card-grid and centered layouts, warm palettes, parallax-heavy reveals, mono typography, and authoritative tone. Prefer the underused isometric, glitch-art, chrome-metallic, lottie-animation, geometric-sans, tropical-fish, and energetic choices from the planned seed.