# Design Language for yongzoon.net ## Aesthetics and Tone yongzoon.net should feel like a private porcelain data atelier: calm, premium, and quietly engineered. The site is not a personal business card and not a loud portfolio; it is a slow reveal of an identity alias rendered as a luxury object under museum light. Imagine a frost-white room with suspended sapphire glass, satin-metal seams, pearl ceramic plinths, and 3D abstract-tech sculptures hovering in still air. The mood is serene enough to feel meditative, but the details should imply precision, taste, and a hidden technical craft. The luxury-premium direction should avoid obvious black-and-gold clichés. Use soft analogous blues, blue-greens, and violet shadows instead: expensive like a high-end audio device, a concept car interior, or a watch movement photographed through misted crystal. The name `yongzoon` can be treated as an invented signature mark: familiar to yongjoon/yongzoon variants, but more crystalline, more collected, and more restrained than the aurora observatory of yongzoon.com or the moss-garden language of yongjoon.net. ## Layout Motifs and Structure Use a broken-grid composition that behaves like floating display cases rather than cards. Establish a 14-column grid with several invisible vertical axes: a left archival rail, a wide central negative-space chamber, and a right-side cascade for small annotations. Each full-screen scene should intentionally break alignment: one headline may sit high and left, a 3D object may occupy the lower-right third, and microcopy may cross the seam between two translucent panels. Structure the page as a sequence of cinematic rooms: 1. **Signature Atrium:** A full-screen opening with the domain set off-center, a hovering 3D monogram shard, and thin calibration lines that never become a HUD dashboard. 2. **Alias Chamber:** Broken blocks reveal the relationship between YongJoon and YongZoon as a softened phonetic reflection, using staggered letter fragments and mirrored glass slivers. 3. **Quiet Machine Room:** Abstract-tech objects, cable-like arcs, and ceramic modules suggest tools, thoughts, and systems without listing features. 4. **Archive of Signals:** Short prose fragments sit on uneven plinths, each with scale-hover interactions, like touching objects in a gallery. 5. **Still Horizon:** The closing scene returns to near-empty space: a single luminous line, the domain, and a pearl-blue glow. Avoid centered hero conventions, bento dashboards, card-grids, pricing blocks, stat-grids, and repeated CTA strips. Navigation can be minimal: small room markers along one edge, behaving like engraved ticks on a luxury instrument. ## Typography and Palette Typography should follow a frutiger-clean sensibility: legible, polished, ergonomic, and subtly futuristic without becoming mono-heavy. - **Primary interface sans:** `Noto Sans` from Google Fonts, weights 300, 400, 500, 700. Use for body text, quiet labels, and refined navigation. Its clarity supports the calm premium tone. - **Display sans:** `Afacad` from Google Fonts, weights 400, 500, 600, 700. Use for the domain wordmark and large broken-grid titles; it feels clean and contemporary with a softer personality than geometric tech fonts. - **Technical accent:** `IBM Plex Sans` from Google Fonts, weights 300, 400, 500. Use sparingly for tiny object captions, serial numbers, and metadata-like inscriptions, but do not let the site become terminal or dashboard themed. Analogous palette, cool and premium: - Porcelain white: `#F4F7F5` for the main luminous surface. - Mist aqua: `#C9E8E2` for translucent glass highlights. - Glacial teal: `#69B7B0` for soft active states and quiet glow. - Sapphire blue: `#1F5F8B` for deep structural lines and title emphasis. - Blue-violet shadow: `#2A2D68` for depth, scene transitions, and dark glass. - Ink navy: `#071521` for rare high-contrast moments. - Pale platinum: `#D8DEE4` for hairlines, engraved borders, and brushed-metal gradients. Use gradients only as material effects: pearl sheen, satin reflection, and soft refraction. Avoid generic corporate gradient backgrounds. ## Imagery and Motifs Imagery should center on bespoke 3D-render language created through CSS, SVG, or lightweight WebGL-style DOM layers. The core object is an abstract-tech **Zoon Prism**: a hovering translucent form made from rounded rectangular plates, glass fins, and pearl-metal nodes. It should rotate slowly, cast blue-violet shadows, and occasionally split into letter-like segments that hint at `Y`, `Z`, and `O` without becoming a literal logo. Motifs to include: - **Porcelain circuit inlays:** Extremely thin lines embedded in pale panels, like circuitry under glaze rather than exposed tech traces. - **Sapphire lens halos:** Soft elliptical rings around important text, suggesting expensive optical glass. - **Floating plinth shadows:** Content blocks appear as objects resting in light, not as web cards. - **Alias refractions:** Letters duplicate through transparent vertical slabs, creating calm distortions between `joon` and `zoon`. - **Brushed platinum seams:** Hairline borders with subtle diagonal sheen, used to separate broken-grid chambers. - **Scale-hover touch:** On hover, objects scale up by only 2-5%, deepen their shadow, and reveal a hidden engraving or secondary reflection. No stock photography. No portraits. No icon packs. If icons are required, make them thin-line, custom, and material-aware, like etched symbols on glass. ## Prompts for Implementation Build a single immersive HTML/CSS/JS narrative with full-screen scenes and slow atmospheric transitions. Load `Noto Sans`, `Afacad`, and `IBM Plex Sans` from Google Fonts. Use CSS custom properties for the palette and create material depth with layered radial gradients, `backdrop-filter`, masked highlights, SVG noise, and pseudo-element reflections. Implementation guidance: - Make the opening viewport feel like a luxury object reveal: the domain appears after a soft focus pull, while the Zoon Prism rotates almost imperceptibly. - Use CSS Grid for the 14-column broken-grid system; offset panels with `transform`, negative margins, and overlapping grid rows rather than symmetrical stacks. - Treat text as short gallery inscriptions. Use restrained copy blocks, generous negative space, and scene titles that feel engraved rather than shouted. - Add scale-hover interactions to plinths, prism fragments, annotation labels, and room markers. The motion should be smooth, quiet, and material-based, not bouncy. - Use scroll progress to shift lighting angle across scenes; reflections glide over panels as if the visitor is walking through a showroom. - Animate alias refractions: letter fragments can slide behind translucent slabs, blur slightly, then settle into readable words. - Keep narrative more important than conversion. Avoid CTA-heavy layouts, pricing blocks, stat-grids, testimonial rows, feature-card grids, and generic SaaS sections. - Prefer one or two interactive hero objects over many repeated components. The experience should feel curated, not populated. ## Uniqueness Notes - Chosen seed/style: aesthetic: luxury-premium, layout: broken-grid, typography: frutiger-clean, palette: analogous, patterns: scale-hover, imagery: 3d-render, motifs: abstract-tech, tone: calm-serene. - Differentiator 1: Luxury is expressed through porcelain, sapphire glass, and platinum seams rather than overused black/gold opulence or corporate gradients. - Differentiator 2: The broken grid is staged as a sequence of floating museum display cases, not as cards, bento blocks, or a centered landing-page stack. - Differentiator 3: The personal-domain story is told through alias refraction between `joon` and `zoon`, giving this site a distinct identity apart from yongjoon.net and yongzoon.com. - Differentiator 4: The main visual actor is a bespoke 3D abstract-tech prism with scale-hover material reveals, not photography, minimal icons, or aurora/goblincore motifs used in adjacent designs. - Differentiator 5: The tone remains calm-serene throughout: slow focus pulls, quiet inscriptions, and soft lighting replace authoritative marketing language. - Frequency analysis notes: deliberately avoids the overused card-grid, centered layout, warm palette, corporate aesthetic, photography, parallax-heavy patterning, mono typography, and authoritative tone. It leans into underused luxury-premium, analogous palette, 3D-render imagery, abstract-tech motifs, frutiger-clean typography, broken-grid structure, and scale-hover interaction.