# Design Language for yongjoon.net ## Aesthetics and Tone yongjoon.net should feel like entering a moonlit scholar's garden after rain: quiet moss, dark stone, folded paper, and small cultural artifacts half-hidden in shadow. The chosen aesthetic is **goblincore made contemplative** rather than messy or cute — a cabinet of found natural objects, old Korean roof tiles, damp bark, ink-black water, brass name seals, and tiny bioluminescent traces arranged with monk-like restraint. The mood is personal, introspective, and slightly feral: a digital self-portrait assembled from things picked up on walks, notes kept in the margin, and tools worn smooth by repetition. The site should not announce expertise with corporate polish. It should invite discovery through silence. Imagine a low midnight-blue room where the visitor notices one glowing lichen mark at a time; each section opens like lifting a flat stone and finding a miniature world beneath. The domain name becomes a private threshold, not a brand billboard. The emotional tone is **zen-contemplative**: slow breathing, soft darkness, attention to texture, and the sense that the most important material is what is intentionally left unspoken. ## Layout Motifs and Structure Use a **broken-grid** composition based on irregular stepping stones rather than cards. The page can be a full-screen narrative walk through five spatial chambers, each occupying close to `100vh`, with elements deliberately offset from any obvious centerline. The underlying grid should be an 11-column system with uneven gutters: narrow columns for whispered annotations, wide columns for empty midnight fields, and occasional overlap where a title slips behind a stone panel or a Korean character floats outside the expected margin. Structure the experience as a slow descent: 1. **Moon Gate Arrival:** A nearly empty viewport with `yongjoon.net` placed low and left, a single animated Lottie-like lichen glyph pulsing near the opposite corner, and a faint circular gate drawn as a broken outline. No conventional nav bar. 2. **Found Object Trail:** Three to five asymmetrical fragments — not cards — appear like objects on a dark table: a seal stamp, a twig, a folded note, a shard of celadon glaze. Each fragment can reveal a short line of text through proximity or scroll position. 3. **Broken Garden Grid:** Main content lives in misaligned slabs: vertical text rails, inset captions, and narrow illuminated cracks between panels. Allow content blocks to interrupt each other, with generous negative space and edges that feel discovered rather than measured. 4. **Ink Pond Interlude:** A full-bleed dark-blue section with sparse ripples and a single floating statement. Text should sit off-axis, as if reflected on water. 5. **Quiet Seal Ending:** Close with a compact personal mark: the domain, a small Korean-inspired seal square, and a last lichen animation that slows to stillness. Avoid symmetrical hero stacks, bento grids, pricing sections, testimonial rows, icon feature grids, and any CTA-heavy landing-page logic. Spatial drama should come from imbalance, shadow, and pauses. ## Typography and Palette Typography should be geometric, precise, and calm, contrasted with small cultural notes. - **Primary geometric sans:** `Space Grotesk` (Google Fonts), weights 400, 500, 700. Use for the domain mark, section titles, and short declarative fragments. Its squared curves keep the design contemporary without becoming corporate. - **Body sans:** `Manrope` (Google Fonts), weights 300, 400, 500. Use for quiet explanatory text with loose line-height and narrow measure. - **Korean / cultural accent:** `Noto Sans KR` (Google Fonts), weights 300, 500. Use sparingly for single Hangul words, vertical marginalia, seal captions, and micro-inscriptions. Palette: midnight-blue base with moss, celadon, bone, and old brass accents. - **Deep midnight:** `#071326` — primary background, almost black but still blue. - **Ink blue:** `#0D2442` — secondary panels, pond fields, and shadowed slabs. - **Wet moss:** `#5C7A45` — organic highlight for lichen, small rules, and hover states. - **Celadon shard:** `#A9BFA5` — muted luminous accents and thin outlines. - **Bone paper:** `#E6DDC8` — primary text, restrained and warm against the blue. - **Old brass:** `#B08A4A` — seal details, tiny punctuation marks, and rare glints. - **Spore glow:** `#D8F275` — used extremely sparingly for Lottie pulses and discovered details. Use flat fields, subtle noise, and restrained radial glows; do not rely on large warm gradients, glossy glassmorphism, or neon cyberpunk color. ## Imagery and Motifs Imagery should be **minimal** and mostly generated in CSS/SVG/canvas: no stock photography, no big portraits, no busy illustration packs. The visual world is made of small artifacts and negative space. Core motifs: - **Lichen Lottie Glyph:** A small looping animation of moss/spore growth: dots bloom, connect into an irregular ring, then fade back into the dark. It should feel botanical and secretive, not techy. Use it as the recurring living mark of the site. - **Korean Seal Geometry:** A tiny square seal inspired by dojang stamps, built from blocky abstract strokes rather than literal calligraphy. It can rotate by one or two degrees and appear in old brass or muted red-brown if needed. - **Moon Gate Fragments:** Broken circular outlines, like a garden gate seen through darkness. These arcs can crop off-screen and create a contemplative frame. - **Celadon Shards:** Thin irregular polygons in `#A9BFA5`, used as dividers or background fragments. They should resemble ceramic pieces found in soil. - **Wet Stone Slabs:** Asymmetrical content surfaces with very low-contrast borders, soft inner shadow, and grain. They are not cards; they are stones laid into the page. - **Vertical Marginalia:** Occasional Korean words or coordinates set vertically along the side of a slab, like field notes on a specimen envelope. Keep all motifs sparse. The design should reward close looking: a barely visible spore trail, a seal hidden in the corner, a ripple that only appears as the visitor pauses. ## Prompts for Implementation Implement as a single immersive page that behaves like a quiet walk, not a marketing site. Favor full-screen sections, cinematic pauses, and object-based storytelling. There should be no pricing blocks, no stat-grids, no testimonial rows, no repeated CTA buttons, and no generic feature-card layout. Specific guidance: - Load Google Fonts for `Space Grotesk`, `Manrope`, and `Noto Sans KR`. - Build the composition with CSS Grid, but intentionally break alignment using `grid-column`, `translate`, rotated fragments, and overlapping layers. The grid should be felt as tension, not seen as orderly boxes. - Create a fixed or absolute background layer with midnight-blue grain, slow ink ripples, and a few barely luminous moss points. - Include one Lottie-style animation. If using a JSON Lottie asset is impractical, create an inline SVG/canvas animation that mimics Lottie timing: spore dots scale up in sequence, connect with thin paths, then breathe out. The animation should loop slowly over 8-12 seconds. - Use scroll position for narrative transitions, but avoid the common overused parallax/stagger vocabulary. Instead, let objects **settle**, **dim**, **surface**, and **sink** with long easing curves. Motion should be meditative and irregular, like water absorbing a dropped leaf. - Treat text as discovered inscriptions. Short phrases can appear on hover or when a stone slab enters the center third of the viewport, but keep the amount of copy restrained. - Use pointer interaction sparingly: hovering over an artifact may reveal a tiny annotation, shift a celadon shard, or brighten a lichen trace. No magnetic buttons, no hover-lift cards. - End with a still composition: the domain as a quiet seal, not a conversion footer. ## Uniqueness Notes 1. **Contemplative goblincore rather than rustic clutter:** Goblincore is underused in the frequency analysis, and this version avoids the expected maximal pile of mushrooms and trinkets. It translates the aesthetic into midnight restraint, found fragments, moss glow, and silence. 2. **Broken-grid as stepping-stone choreography:** Instead of common centered layouts and card-grids, the site uses an irregular 11-column field where content behaves like stones, shards, and marginal notes placed by hand. 3. **Cultural motif without brochure styling:** Korean influence appears through dojang-like seal geometry, Hangul marginalia, celadon shards, and moon-gate framing — subtle artifacts rather than tourist imagery or decorative clichés. 4. **Lottie animation as living lichen mark:** The rare lottie-animation pattern becomes a tiny organic breathing symbol, not a product explainer or loading mascot. 5. **Minimal imagery with tactile atmosphere:** Although minimal imagery is common, this direction makes it distinctive through CSS-generated wet stone, ink pond fields, ceramic fragments, and spore traces instead of photography. Chosen seed/style: aesthetic: goblincore, layout: broken-grid, typography: geometric-sans, palette: midnight-blue, patterns: lottie-animation, imagery: minimal, motifs: cultural, tone: zen-contemplative. Avoided patterns from frequency analysis: corporate aesthetic, centered layouts, card-grid systems, warm gradient palettes, mono typography, parallax-heavy motion, scroll-triggered stagger reveals, CTA-heavy landing pages, pricing blocks, and stat-grids.