# Design Language for yongjoon.dev ## Aesthetics and Tone `yongjoon.dev` is a **sun-drenched field journal** — the kind you'd find tucked into a hiking pack alongside a bruised tangerine and a folded trail map. The aesthetic is dopamine-positive without being loud: think afternoon light hitting orange lichen on grey stone, or the particular burnt warmth of a Korean persimmon drying on a string. The whole site buzzes with contained vitality — the energy of someone who genuinely likes what they do and doesn't need to prove it. This is not the high-contrast dopamine of neon nightclubs or electric-pink social apps. It is the dopamine of saturated warmth — toasted clay, deep moss, overripe citrus, and the particular amber of sunlight through dried leaves. The site smells like a wooden desk near an open window. The tone is approachable-casual in the truest sense: sentences that think out loud, pauses where they belong, no pitch, no bullet-point salesmanship. Every design choice should feel like someone's hand is visible in it — a crinkled corner, an underline that draws itself in, a grain of noise that catches the light differently at each scroll depth. The site is alive, but quietly. ## Layout Motifs and Structure The layout follows a **pure z-pattern** — a rare and underused structural choice in this registry (only 2% of designs use it). The z-pattern is not a grid trick; it is the literal path a comfortable reader's eye takes when unburdened by columns and cards. `yongjoon.dev` uses this as its entire compositional logic. **Z-path anatomy (desktop, 1280px+):** - **Node 1 — Top-left:** The wordmark `yongjoon.dev` in large, grounded sans-grotesk. No tagline, no navigation bar yet — just the name, anchored northwest, with a micro SVG leaf-stamp beside it. - **Node 2 — Top-right:** A short punchy phrase (10–15 words) that stakes a claim without being a tagline. Right-aligned, smaller. Typeset in a lighter weight. - **Diagonal drift 1:** A large noise-textured block element (the "cliff face") — a rectangle torn at a slight 3° angle — carries the eye from node 2 downward-left. This element holds a background illustration: an abstract topographic contour map in 2-tone burn (deep charcoal on warm clay), rendered as SVG fill regions. - **Node 3 — Bottom-left:** The main content mass. Long-form text, or a featured project — whatever the heaviest content unit is. Set wide (70ch), starting from the left edge of the page with a single hanging indent. - **Node 4 — Bottom-right:** A closing gesture — a small illustration, a date stamp, a version number, a link cluster. Light, spacious. Acts as the natural "exhale" after reading. **Mobile reflow:** Z-pattern collapses to single-column, top to bottom, respecting the same 4-node reading order. The diagonal element becomes a full-width horizontal band. **Spatial logic:** - No nav bar in the conventional sense — a horizontal rule at the very top holds the wordmark and a single icon-only menu button (far right). The icon unfolds into an overlay with 3–4 links maximum. - Sections are separated by whitespace and horizontal chalk-rules (a 1px rule with a 6% opacity noise filter applied, giving it a chalk-on-board quality), never by cards or dividers. - The page does not grid-align content. It composes it — nudging items to their natural z-path positions, not columns. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Primary / Wordmark — `Plus Jakarta Sans`** (Google Fonts, variable: wght 200–800). The dominant grotesk. Set the wordmark at 72px, wght 700, tracking –0.02em. Subheadings at 28px, wght 600. Body at 17px, wght 400. The variable weight axis is used for a single hover interaction: links and headings gain +100 weight on cursor approach over 180ms, then release. This is the underline-draw's companion motion. - **Secondary / Annotations — `DM Sans`** (Google Fonts, variable). Used for side notes, dates, version labels, and the nav links. Lighter, slightly looser tracking (+0.01em). Set smaller (13–15px). Creates contrast without introducing a serif or display category. - **Accent / Rare use — `Fraunces`** (Google Fonts, variable optical-size, wght 100–900). Used exactly once: a single pull-quote or the featured project's title, set at opsz 144, wght 300, italic, in deep-charcoal on warm-clay. The luxury of a contrasting serif deployed once, like an accent stone in a piece of jewelry. **Palette (burnt-orange family, nature-grounded):** - `#C84B11` — **Ember** (primary accent, CTA underlines, the wordmark dot, interactive highlights) - `#E87F45` — **Persimmon** (hover state, gradient midpoint, warm glow fills) - `#F5E8D3` — **Parchment** (page background — not white, never white; this is the warm base of everything) - `#2B2018` — **Deep Bark** (primary text, wordmark, heavy type; dark warm-brown, not black) - `#5E7A52` — **Lichen Green** (secondary accent, used sparingly on dates and nature-motif elements only) - `#9B7A58` — **Driftwood** (mid-tone, used in hr rules, secondary borders, the chalk-rule color base) - `#1A1209` — **Char** (deepest dark, reserved for the topographic SVG fill and dark-mode override) Background is always Parchment. No dark-mode as a primary experience — a single `prefers-color-scheme: dark` override swaps Parchment → Char, text → Parchment at 85%, and Ember → Persimmon for legibility. ## Imagery and Motifs **Noise texture is the atmosphere.** Every flat color region on the page has a 4–6% SVG feTurbulence filter applied — `type="fractalNoise" baseFrequency="0.65" numOctaves="4"` — composited with `feBlend mode="soft-light"` over the fill. This is not a background pattern; it is a continuous atmospheric layer that breathes over every element. At low opacity it reads as material depth: the page feels like heavy paper, not a screen. **No photographs.** Photography at 87% registry saturation is the single most avoided choice here. All imagery is line-based and SVG-native. **Topographic contour motif:** - The centerpiece visual is an abstract topographic map — not of any specific place, but generated from a sinusoidal height function layered with 3-octave Perlin noise. Rendered as SVG `` fill regions in 2 tones (Deep Bark fills at 8% opacity, Ember fills at 4% opacity), producing a stacked-contour landscape reading. 10–15 contour levels. The map tiles the "cliff face" diagonal element of the z-layout. - Secondary contour rings appear as decorative elements around section breaks — single-stroke rings (1px, Driftwood color) that suggest elevation markers without literalizing them. **Leaf-stamp motif:** - A minimal leaf silhouette (a single broadleaf shape, not detailed botanical illustration) used in two sizes: 24×24px beside the wordmark as a glyph-equivalent, and 64×64px as a floating decorative aside on the right edge near Node 4. Rendered in SVG, filled with Lichen Green at 60% opacity. Deliberately simple — a mark, not an illustration. **Underline-draw interaction:** - Every `` link and every `

` heading, on hover or focus, draws an underline from left to right over 220ms using `clip-path: inset(0 100% 0 0)` → `inset(0 0% 0 0)`. The underline is 2px, Ember color, offset 3px below the baseline. On exit, the line withdraws from right to left over 140ms. This is the primary interaction language — used throughout, never mixed with other hover effects on the same element. **Grain + noise layering:** - The noise-texture seed is realized as two independent layers: 1. A CSS `backdrop-filter: contrast(1.15) brightness(0.97)` applied globally, which amplifies the SVG feTurbulence into a perceivable grain at close reading distance. 2. A `mix-blend-mode: multiply` SVG noise tile (`8×8 px`, tileable, generated from `feTurbulence`) positioned `fixed` behind all content at 3% opacity. This creates the sensation of reading on textured paper even as the user scrolls. ## Prompts for Implementation Build `yongjoon.dev` as a **single-page personal site that moves at the pace of a Sunday walk** — no countdown timers, no animated number counters, no hero video. The entire experience is driven by the reader's eye following the z-path, pausing where the warm parchment and grain slow them down, reading an underline draw itself into existence, and leaving with a clear sense of who this person is. **Implementation blueprint:** **1. The grain undercoat (first, before anything else):** Create the atmosphere layer first. A fixed-position `` with a `` + `` + `` filter applied to a `` of Parchment (`#F5E8D3`). This SVG sits at `z-index: 0`, `pointer-events: none`, `position: fixed`, `top: 0`, `left: 0`. Every element stacks above it. This is the skin of the page. **2. The z-layout shell:** Use CSS Grid with a 12-column base but fill only the z-path nodes: - Node 1: `column: 1 / 5`, `row: 1` (top-left) - Node 2: `column: 9 / 13`, `row: 1` (top-right) - Diagonal band: `column: 1 / 13`, `row: 2`, using `clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 80%)` to create the torn-angle diagonal. Inside: the topographic SVG map. - Node 3: `column: 1 / 8`, `row: 3` (bottom-left, heavy content) - Node 4: `column: 9 / 13`, `row: 3` (bottom-right, closing gesture) **3. Topographic SVG generation:** The topo map is a static SVG (not canvas, not WebGL — this is a document, not an app). Generate 12 contour paths using a simple JavaScript function at build time: `f(x,y) = sin(x*0.3)*cos(y*0.25) + sin(x*0.1 + y*0.15)*0.5 + noise(x,y)*0.3`. Marching squares at iso-levels 0.0, 0.1, ..., 1.1. Fill even-index contours with Deep Bark at 7% opacity, odd-index with Ember at 4% opacity. Bake into SVG markup. **4. Underline-draw CSS:** ```css a, h2 { position: relative; text-decoration: none; } a::after, h2::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 100%; height: 2px; background: #C84B11; clip-path: inset(0 100% 0 0); transition: clip-path 220ms cubic-bezier(0.4, 0, 0.2, 1); } a:hover::after, h2:hover::after { clip-path: inset(0 0% 0 0); } ``` On mouse-leave, use a separate transition class that sets `clip-path: inset(0 0% 0 100%)` over 140ms (withdraws from right to left), then resets. **5. Weight-hover on headings:** ```css h1, h2, h3, a { font-variation-settings: 'wght' 400; transition: font-variation-settings 180ms ease; } h1:hover, h2:hover, h3:hover, a:hover { font-variation-settings: 'wght' 600; } ``` This runs simultaneously with the underline-draw, creating a subtle swell that complements the line's arrival. **6. Leaf stamp:** A single inline SVG (not an img tag) placed in the markup beside the wordmark. Broadleaf silhouette — ovate shape with a single central midrib. Width 24px, fill `#5E7A52` at 60% opacity. A second instance at 64×64 floats near Node 4, `position: absolute`, `right: -32px`, `opacity: 0.5`. On scroll past Node 3, this larger leaf animates into place with `transform: rotate(-12deg) translateY(0)` from `rotate(-12deg) translateY(24px)` over 400ms. **7. Chalk rules:** ```css hr.chalk { border: none; height: 1px; background: #9B7A58; filter: url(#chalk-noise); opacity: 0.35; } ``` The `#chalk-noise` SVG filter is a simple `feTurbulence baseFrequency="0.9" numOctaves="2"` + `feDisplacementMap scale="1.5"`. This makes every rule look like it was drawn with a soft pencil. **8. Navigation overlay:** Single hamburger-equivalent icon (top-right in the `
` stripe). On click, a full-viewport overlay appears with `background: #2B2018` at 95% opacity, 3 navigation links centered vertically in DM Sans, each 40px, Parchment color. Links use the underline-draw interaction. Overlay dismisses with Escape or re-click. **Bias instructions:** - Every section should breathe. Minimum 80px vertical padding on all sections. - Do not add testimonials, pricing blocks, or stat-grids. - The page tells a story via reading order, not feature lists. - The diagonal topo-map band is the only visually "loud" element. Everything else defers to it. - If in doubt, add more whitespace and reduce a font size by 2px. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **dopamine**, layout = **z-pattern**, typography = **sans-grotesk**, palette = **burnt-orange**, patterns = **underline-draw**, imagery = **noise-texture**, motifs = **nature**, tone = **approachable-casual**. **Differentiators from existing 551-design registry:** 1. **Z-pattern at 2% registry frequency** — Only one in fifty designs uses this layout. Most z-pattern implementations treat it as a vague "diagonal flow." Here the z-path is structural DNA: every element is assigned to a specific node and the diagonal is a physical torn-edge band element, not an implied reading path. This is a z-pattern that earns its name. 2. **Dopamine via warmth, not neon** — The registry's dopamine aesthetic overwhelmingly means neon, electric hue, and high-contrast saturation. This design redefines dopamine as burnt-orange warmth — the color system reads as peak-season organic produce rather than a rave poster. No comparable approach exists in the 551 analyzed. 3. **Noise-texture as atmosphere, not decoration** — At 3% imagery frequency, noise-texture is underused. Existing noise-texture designs apply it as a static overlay. Here it is a live two-layer system (SVG feTurbulence + CSS backdrop-filter) that makes the entire page feel materially present. Combined with the parchment background, the result is a reading surface, not a screen. 4. **Topographic contour as signature visual** — The nature motif at 16% (overused) is nearly always expressed as botanical photography, leaf backgrounds, or forest gradients. This design expresses nature as elevation data — abstract topographic contour lines rendered as a mathematical SVG, drawn from a sinusoidal height function. No photograph, no stock, no illustration. The landscape is computed. 5. **Plus Jakarta Sans as grotesk primary** — The sans-grotesk typography category exists in the registry but the dominant choices are Manrope, Inter, and system-ui. Plus Jakarta Sans brings a distinctive humanist warmth and a more expressive `g` and `a` form, distinguishing it from the neutral grotesk default while staying resolutely non-decorative. 6. **Underline-draw as the sole interaction pattern** — Rather than mixing hover-lift, scale, glow, and tilt (common in dopamine-aesthetic sites), this design commits to one interaction pattern applied universally and executed precisely. The withdraw-from-right exit direction is uncommon (most implementations snap or fade; this one recedes). A single well-crafted gesture read as more considered than five mediocre ones.