# Design Language for yongjoon.xyz ## Aesthetics and Tone yongjoon.xyz should feel like a quiet room where personal data, memory, and unfinished thought have been placed on unglazed clay shelves. The visual direction is **wabi-sabi instrumentation**: hand-warmed terracotta surfaces, irregular ink-like curves, and restrained data-viz marks that behave less like analytics and more like breath. It is contemplative, earthy, and precise without becoming corporate or technical. The site should not announce credentials; it should reveal a person through sediment, pauses, coordinates, and small disturbances. The mood is a dawn archive in a mountain tea house: fired-clay walls, rice-paper glow, a single charcoal line graph tracking attention over time, and diagonal bands of light cutting across the floor. Imperfection is important. Edges can be slightly uneven, curves can wobble, circles can be off-center, and chart points can feel hand-placed. The domain name becomes a meditative object rather than a logo, appearing like a kiln stamp pressed into warm earth. ## Layout Motifs and Structure Use **diagonal-sections** as the dominant spatial system, but avoid glossy angled SaaS panels. The page should be a sequence of full-screen diagonal earthen slabs, each clipped at a different shallow angle as if sheets of handmade paper have been stacked across the viewport. The diagonal rhythm should guide the eye from upper-left to lower-right, then occasionally reverse into a quiet counter-slope to create a breathing cadence. Suggested narrative structure: 1. **Kiln Mark / Opening Silence** — a full-viewport scene with `yongjoon.xyz` set in tall condensed type along a diagonal baseline. Behind it, a slow pulse expands through a faint circular data ring, like warmth moving through clay. 2. **Trace Field** — a diagonal band containing sparse fragments: coordinates, short sentence shards, small nodes, and gently curving SVG lines. This is not a stat grid; it is a map of attention. 3. **Uneven Ledger** — a quiet section where three or four asymmetrical text blocks sit on staggered diagonal ledges. Use negative space and thin dividing rules that do not meet perfectly. 4. **Flow Curve Chamber** — a full-screen visual interlude dominated by flowing bezier curves, contour lines, and pulse points that brighten and dim like a living seismograph. 5. **Last Ember** — a closing scene with the domain reduced to a small clay stamp, surrounded by a single animated curve and a warm off-white void. Do not use card grids, centered hero formulas, dashboards, pricing blocks, testimonial bands, or conventional portfolio tiles. Navigation, if present, should be quiet and almost ceremonial: tiny vertical marks at the edge of the screen or a diagonal progress thread rather than a menu bar. ## Typography and Palette Use Google Fonts with a condensed, contemplative hierarchy: - **Primary display:** "Roboto Condensed" from Google Fonts, weights 300, 400, and 700. Use for the domain, section names, diagonal labels, and sparse oversized words. Apply uppercase selectively with generous letter spacing, but keep some lowercase moments for intimacy. - **Narrative text:** "Noto Sans" from Google Fonts, weights 300, 400, and 500. Its calm neutrality prevents the clay palette from feeling nostalgic or decorative. - **Data annotations:** "IBM Plex Mono" from Google Fonts, weights 400 and 500. Use sparingly for coordinates, timestamps, curve labels, and tiny marginal notations. Palette: terracotta-warm, muted, mineral, and non-glossy. - Fired terracotta: `#B85F3E` - Raw clay: `#D49A73` - Warm rice paper: `#F3E5D0` - Soot ink: `#2F2721` - Dried persimmon: `#E07A4F` - Oxidized sage: `#7C8A6A` - Ash shadow: `#6B5A4D` - Quiet ember highlight: `#F0B36A` Use gradients only as dusty temperature shifts, never as bright corporate washes. Backgrounds should layer `#F3E5D0`, `#D49A73`, and transparent soot texture through CSS radial gradients, subtle noise, and diagonal masks. ## Imagery and Motifs Imagery should be primarily generated with CSS and inline SVG. The central motif is **data-viz as contemplative landscape**: line charts become footpaths, scatter plots become kiln speckles, and pulse rings become ripples in tea. Build thin SVG bezier curves that drift across diagonal sections, with small circular nodes that softly pulse at irregular intervals. These pulses should feel like awareness returning, not notification badges. Use flowing-curves throughout: contour-map lines, smoke-like arcs, river paths, and imperfect circular traces. Let some lines extend beyond the viewport edges so the site feels like a cropped fragment of a larger field. Add very subtle clay grain using layered CSS gradients and mask textures; the surface should feel handmade but not rustic. Avoid photography unless it is heavily abstracted into monochrome clay silhouettes. No stock portraits, no office imagery, no device mockups. Decorative elements can include: stamped coordinate glyphs, hairline diagonal rules, offset sun discs, imperfect rings, small hand-drawn tick marks around curves, and low-opacity data labels such as `origin`, `pause`, `signal`, `weather`, `interval`, `return`. Icons should be avoided; marks should feel like notations in a field notebook. ## Prompts for Implementation Implement as a single full-screen narrative experience with embedded CSS and JS. Load "Roboto Condensed", "Noto Sans", and "IBM Plex Mono" from Google Fonts. Build the page as viewport-height diagonal chapters using `clip-path: polygon(...)`, large skewed pseudo-elements, and SVG overlays pinned between sections. The interaction model should be slow, atmospheric, and scroll-responsive: diagonal planes slide at different speeds, curves draw themselves gradually, and pulse nodes brighten when their section nears the center of the viewport. Use JavaScript only to choreograph the contemplative motion: update CSS variables for scroll position, animate SVG stroke dash offsets, stagger tiny pulse delays, and create a diagonal progress thread along one edge. Keep transitions soft and imperfect: `cubic-bezier(.33,.02,.18,.99)`, long durations, slight offsets, no snappy app-like motion. The site should tell a quiet story of attention moving through clay, data, and breath. Prioritize immersive visual storytelling over conversion. AVOID CTA-heavy layouts, pricing blocks, stat-grids, testimonial strips, feature cards, app dashboards, centered corporate hero sections, glossy gradients, and over-explained service copy. Text should be sparse and poetic; the strongest content is the pacing, the diagonal composition, the warm materiality, and the animated curves. ## Uniqueness Notes - Seed: aesthetic: wabi-sabi, layout: diagonal-sections, typography: condensed, palette: terracotta-warm, patterns: pulse-attention, imagery: data-viz, motifs: flowing-curves, tone: zen-contemplative. - Differentiates from the related yongjoon.dev direction by replacing luxury neon orbital panels with clay, breath, handmade imperfections, and quiet earth-tone data marks. - Uses data-viz as poetic landscape rather than dashboard analytics, avoiding the overused corporate, card-grid, centered, dashboard, and stat-grid patterns shown as dominant in the frequency analysis. - Treats diagonal sections as stacked paper and clay slabs, not sharp futuristic panels, making the geometry feel tactile and meditative. - Leans into underused wabi-sabi, terracotta-warm, pulse-attention, flowing-curves, and zen-contemplative categories while deliberately avoiding the highly saturated use of photography, minimal imagery, warm gradients, parallax-heavy spectacle, mono typography, and authoritative SaaS tone.