# Design Language for yongzoon.xyz ## Aesthetics and Tone `yongzoon.xyz` is a **frozen signal** — the moment between transmission and arrival, rendered in silver and cold air. Imagine a meteorological instrument buried in permafrost that has been wired, impossibly, to a professional portfolio. The site feels like standing inside the eye of a slow electromagnetic storm: everything is deliberate, nothing is warm, the silence has texture. The aesthetic is **ethereal-professional** — not the dreamy softness of watercolor ethereal, but the hard, structural ethereal of interference patterns in cold glass. Think: dead-calm North Atlantic surface at 4am, lit only by a satellite dish's ambient glow. The site communicates authority without aggression. It is the resume of someone who has solved problems so large they no longer need to explain the problems. Tone is professional and precise — not cold in the corporate sense, but cold in the *physical* sense: measured, calibrated, with every word placed as if correcting for wind. The visitor feels like they are standing inside a control room where someone very good at their job works quietly. ## Layout Motifs and Structure The structure is a **broken-grid** at the viewport level. The grid is not broken in the brutalist-destruction sense — it is broken in the sense of a grid that has been *precisely misaligned*, the way tectonic plates slip: still load-bearing, still structural, but no longer flush. Four invisible grid columns run at 1fr/2fr/1fr/1.5fr — intentionally asymmetric — and content blocks do NOT respect their column boundaries. A hero text block begins in column 1 and ends mid-column 3. A secondary image bleeds from column 2 into the right margin. A navigation item sits exactly 1.5 columns off its expected anchor point. The broken-grid's misalignment is governed by a single master **offset system**: a CSS custom property `--grid-offset` (default: 47px) that controls how far each major section drifts from its expected column edge. All drifts are multiples or rational fractions of this one value — 47px, 23.5px, 94px, 15.67px. This is not random chaos; it is one measured seismic slip, propagated everywhere. The offset is readable in the markup. **Section architecture (single long scroll, no page breaks):** 1. **Signal Header** — Full-viewport opening. Domain wordmark split across two columns with a deliberate 94px vertical gap between the first and second syllable. A waveform ribbon (rendered in SVG) runs horizontally under the wordmark at 40% opacity. Typewriter effect activates on scroll entry: the tagline is typed character-by-character in a monospace caption above the wordmark, completing in 1.8 seconds. 2. **Displacement Section** — A broken-grid bento of 4 content cells, none aligned to the same column axis. Each cell has a gradient-mesh background using the cool-gray palette (see below). Cells overlap at the z-axis: cell 2 rides 8px above cell 1 in the stack. The overlaps are intentional and visible. 3. **Deep Feature** — A full-width section where a waveform animation (SVG wave, animated with CSS keyframes at 12s period) runs behind large display typography set at 96px / 10vw. Text is not centered — it is left-aligned but shifted by `--grid-offset * 2` (94px from the true left edge). The waveform's amplitude breathes: it inhales from 24px peak to 52px peak over 6 seconds. 4. **Work / Signal Log** — A narrow two-column list, flush-left in column 1, with secondary descriptors sitting in the broken column 2 offset. No cards, no shadows, no borders — only a 1px gradient-fade rule separating each item. 5. **Transmission Footer** — A minimal closing band. Domain repeated in small-caps at bottom-left. Three social coordinates bottom-right. A single ambient waveform fragment (the same SVG motif, reduced to 12% opacity) behind the copyright line. ## Typography and Palette **Palette — cool-grays with one charged accent:** | Role | Hex | Name | |------|-----|------| | Background (void) | `#0a0c10` | Polar night | | Surface (card, cell) | `#141820` | Deep slate | | Border / rule | `#1f2733` | Grid wire | | Body text | `#b8c4d4` | Muted signal | | Strong text | `#e2eaf4` | Cold white | | Caption / secondary | `#6b7d94` | Fog gray | | Waveform line | `#8faec8` | Satellite blue | | Charged accent (single use) | `#4d9fd6` | Ionosphere | | Gradient mesh A | `#1a2234` | Depth field | | Gradient mesh B | `#0f1a2b` | Trench dark | The palette has **no warm tones whatsoever**. Every color is rooted in the cool end of the neutral spectrum. The single charged accent (`#4d9fd6`) appears only on interactive states, typewriter cursor, and one SVG waveform highlight — used sparingly enough that its appearance reads as a signal event. **Typography (Google Fonts only, verified):** - **Display / Wordmark — `Syne`** (variable, wght 400–800). The primary display face. Set the wordmark at `font-size: clamp(64px, 12vw, 160px)`, `font-weight: 800`, `letter-spacing: -0.04em`. Syne at maximum weight has a compressed, aggressive geometry that feels like cold machined steel — appropriate for the ethereal-professional register. H1 sections use Syne at 700. - **Sub-display / Section heads — `Barlow Condensed`** (wght 600, 700). Used at 24–40px for section labels. The condensed geometry reads as *technical classification* — the kind of label on a scientific instrument's dial. `text-transform: uppercase`, `letter-spacing: 0.12em`. - **Body / Descriptors — `Inter`** (variable, wght 400, 500). Set at 16px / 1.65 line-height, `color: #b8c4d4`. Inter's geometric neutrality is appropriate here — the body text is the *data*, not the personality. Body paragraphs max-width 600px. - **Typewriter Caption — `JetBrains Mono`** (wght 400). Used exclusively for the typewriter-effect element in the Signal Header. Characters appear at 60ms intervals, cursor blinks at `#4d9fd6`. Caption text sits at 13px / 1.4. The monospace face reinforces that the words arriving are a *transmission*, not a headline. All four fonts load from Google Fonts with `display=swap`. No custom font files. No invented or non-existent families. ## Imagery and Motifs **Imagery strategy: gradient-mesh as structural material.** No photography. No illustration. No icons (except a single minimal arrow SVG for one call-to-action element). The site's visual mass comes entirely from: 1. **Gradient-mesh panels.** Each content cell and section background uses a CSS `background` built from 3–4 radial gradients stacked in the `background` property — simulating a mesh-gradient field. The radial sources are never centered; they are placed at asymmetric coordinates (e.g., `radial-gradient(ellipse 800px 400px at 20% 70%, #1a2234 0%, transparent 70%)`). The mesh panels use only the cool-gray palette — no warm intrusion. The result reads as *depth* and *distance*: standing at the window of a building, looking out into cold fog. 2. **SVG Waveform ribbon** — the site's single animated motif. A single SVG path element, drawn as a sine wave with controlled harmonics: `f(x) = A·sin(2πx/λ) + 0.3A·sin(4πx/λ)`. The path is stroked at 1.5px in `#8faec8` at varying opacity (40% as decoration, 100% on the charged accent highlight segment). Three instances exist on the page: (a) under the wordmark at 40% opacity, full-width, static; (b) behind the Deep Feature section, animated with amplitude breathing at 8s/12s interleaved periods; (c) a micro instance (20px height) above the footer, purely decorative, static. The waveform is *not* a cliché audio-visualizer — it is the visual metaphor for signal: something is being transmitted, something is arriving. 3. **Grid-wire texture.** A CSS `background-image: repeating-linear-gradient(...)` builds a 1px grid at 80px spacing in `#1f2733` (Grid wire) at 8% opacity. This subtle texture sits on the void background and reinforces the broken-grid layout structure — you can *see the grid that has been broken*. 4. **One gradient bloom.** In the Signal Header, a single large radial bloom (`radial-gradient(ellipse 1200px 600px at 60% 40%, rgba(77,159,214,0.08) 0%, transparent 70%)`) introduces the ionosphere accent as an atmospheric wash — barely visible, but present. This is the only warm-direction visual intrusion. ## Prompts for Implementation Build `yongzoon.xyz` as **a transmission arriving in real time** — a long vertical scroll where every section feels like a different frequency band being tuned in. The implementation has three governing constraints: **Constraint 1 — The offset system is sacred.** Before any markup, declare `--grid-offset: 47px` in `:root`. Every spatial decision that feels like "breaking the grid" must be derived from this variable: use `calc(var(--grid-offset) * 2)`, `calc(var(--grid-offset) * 0.5)`, `calc(var(--grid-offset) * -1)` etc. Never use arbitrary pixel offsets that aren't multiples of 47. The grid's brokenness is coherent, not random. **Constraint 2 — The typewriter effect is a single-run transmission.** On page load, after a 400ms delay, begin typing the Signal Header caption character-by-character using a JavaScript `setInterval` at 60ms per character. Do not loop. Do not repeat. The text types once and the cursor `|` remains blinking after completion. The text should be a short, precise professional statement — something like `"signal architect. systems thinker. problem resolver."` — in JetBrains Mono at 13px. The typewriter runs once per session (use `sessionStorage` to suppress on reload). **Constraint 3 — Waveform paths are computed, not decorative.** The SVG waveform is generated programmatically: write a small inline `