# Design Language for yongzoon.com ## Aesthetics and Tone `yongzoon.com` is a **scholar's dreamchamber** — a personal site that exists at the precise intersection of rigorous academic methodology and uncanny spatial logic. Imagine a university professor who also keeps a private journal of lucid dreams, and who has arranged their office not by category but by the emotional weight of objects. The bookshelves lean inward at angles that should not support load. A clock face shows numerals scattered like diaspora. A desk lamp casts three shadows in different temperatures. Everything is *correct*, but correctness here means internally consistent, not Euclidean. The aesthetic is **surreal-scholarly**: the surrealism is not pop-Dali (melting watches), nor is it Magritte-lite (pipe-that-is-not-a-pipe). It is the academic-surrealism of Borges — worlds governed by impossible rules stated with absolute precision. Every visual decision is defended with footnotes that lead to other footnotes that eventually circle back. The palette breathes in terracottas, burnt siennas, deep umber, and dusty sage — warm earthy tones that belong to academic archives, aged paper, and iron-red soil, not to consumer warmth or decorative coziness. These are the colors of a map that has been studied until it faded. The tone is scholarly and intellectual without condescension. Text is precise, parenthetical, occasionally delighted by its own tangents. The voice writes for someone who will read the footnote at the bottom of the page before reading the main body — because the footnote is where the real argument lives. ## Layout Motifs and Structure The page is a **dashboard with an impossible geometry**: a multi-panel reading instrument where panels share space through logic that violates conventional overlap. This is not a standard analytics dashboard (no charts, no KPIs). It is a *cartographic* dashboard — the kind of instrument panel a researcher uses to track the progress of a decades-long inquiry. **Master structure:** - A persistent **left index rail** (220px, fixed) — not a nav menu but an annotated table of contents in tiny type, set like a scholarly index: entries grouped by concept, cross-referenced with dagger symbols (†) and asterisks. The rail is inset 12px from the viewport edge; its background is #2A1F14 (deep espresso) with #C4A882 (aged vellum) type at 10px. - A **primary reading panel** (center, ~540px fluid) that hosts the main content. This panel has a top margin that is 1.5x the left-rail width, creating an asymmetric ledge that reinforces the dashboard's off-balance character. - A **right annotation column** (180px, fixed) holding marginal notes — sidebar commentary, cross-links, concept-definitions — set in italic at 9.5px. The column appears and vanishes based on scroll depth (progressive-disclosure: annotations surface as the reader descends into corresponding sections). - **Floating concept cards** — sharp-edged parallelograms (15° skew) that emerge from beneath the reading panel at defined scroll positions, containing brief theoretical footnotes. The skew angle is consistent: every card shares the same 15° leftward lean, as if all thought leans the same direction. **Sharp-angle geometry:** All containers use exactly two corner radii: `0` (the scholarly archival edge) and a single sharp `border-radius: 2px` applied to one corner only per element — never symmetrically. The rail clips its top-right corner; cards clip their bottom-left. This controlled asymmetric sharpness is the motif: everything is almost square, but one corner confesses to something else. **Grid system:** A 12-column grid underlies the layout, but columns are exposed as faint vertical rules (`#8C6E4F` at 8% opacity) — like graph paper beneath a manuscript. These rules are always visible, never suppressed, reminding the reader that the dashboard is built on a substrate of regular measurement even as the content escapes it. ## Typography and Palette **Palette — warm-earthy, archival, low-saturation:** - `#2A1F14` — deep espresso / primary background of the left rail and floating cards - `#F0E6D3` — aged vellum / primary text on dark surfaces, paper ground of main panel - `#8C6E4F` — tobacco oak / mid-tone used for rules, borders, and secondary labels - `#C4A882` — pale parchment / heading color, label text on dark ground - `#5C3D1E` — dried blood / accent for active states, hover ticks, active index items - `#3A4A38` — dusty sage / used sparingly for marginal-note backgrounds, occasional cross-reference highlights - `#D4895A` — kiln-fired terracotta / used ONLY for kinetic headline characters during animation **Typography — all Google Fonts, verified:** - **Display / Kinetic headline — `Playfair Display`** (variable, wght 400–900). The site title `yongzoon.com` and section heads use Playfair Display at 72–96px, but each character is individually wrapped in a `` and animated: characters enter the viewport by rotating 90° around their own baseline on a Y-axis, the rotation staggering 40ms per character. The characters finish at 0° rotation with a slight overshoot (spring easing). This is the **kinetic-animated** seed element — the text is legible and scholarly, but arrives with the logic of a typecase being set letter by letter. On hover, individual characters tilt 4° toward the cursor. - **Body / Reading — `Lora`** (serif, Google Fonts). Set at 17px / 1.75 leading. Lora is the workhorse of the reading panel — scholarly, warm, slightly idiosyncratic with its calligraphic curves. It reads as a typewriter's more educated sibling. Paragraphs are justified with `text-align: justify` and `hyphens: auto` — the measured, authoritative setting of academic prose. - **Index rail / Marginal — `IBM Plex Mono`** (monospace). Set at 9.5–10px / 1.6 leading in the left rail and annotation column. Monospace reinforces the archival-instrument character of the index. Cross-reference markers (†, *, ‡) are set in Plex Mono at reduced opacity. - **Annotation headers — `Cormorant`** (italic). Used for pull-quote style annotations in the right column, set at 13px italic, color `#3A4A38`. Cormorant's extreme contrast between hairline and stem creates a presence far larger than its point size. ## Imagery and Motifs **Imagery is minimal by design** — no photographs, no illustrations, no abstract backgrounds. The visual weight comes entirely from typography, geometry, and the controlled deployment of two graphic devices: 1. **Fibonacci-spiral crop marks**: At each major section break, a partial compass arc (quarter-circle, 0.8px stroke, `#8C6E4F`) is placed at one corner of the primary panel — alternating corners as the reader scrolls. The arcs reference scientific measurement; they are not decorative. Their radii follow the Fibonacci sequence (8px, 13px, 21px, 34px) — four concentric quarter-arcs nesting inside each other. 2. **Sharp-angle dividers**: Horizontal rules between sections are not lines but **cut marks** — two short lines at 45° angles, meeting at a point, like the cut-corner notation on blueprint paper. These are drawn in SVG, 24px wide, 12px tall, in `#8C6E4F`. They signal a break the way a surgeon's scissors signal precision. 3. **Concept-topology graph**: A persistent SVG in the right-column annotation area — a small (160px × 200px) graph of concept nodes connected by lines. Nodes are 4px circles; edges are 0.6px lines. The graph is not decorative — it represents the actual conceptual structure of the page's argument. As the reader scrolls, the active node pulses with a 2px ring in `#D4895A` (terracotta). The graph is the page's table of contents rendered as a topology. **Motifs — sharp-angles:** - All interactive elements (links, buttons, cards) use CSS `clip-path: polygon()` to cut one corner at 8px — always the same corner for the same element type, never symmetrically. - Hover states reveal a `::after` element that is a thin parallelogram border (1px, `#D4895A`) offset 3px from the element edge. - The scroll progress indicator (top of viewport) is not a bar but a **sawtooth line** — a serrated edge that advances pixel by pixel from left to right, each tooth 6px tall. ## Prompts for Implementation Build `yongzoon.com` as a **single-page scholarly instrument** — a reading apparatus rather than a landing page. The experience is: open the page, orient yourself in the dashboard (left index, center reading, right annotations), and descend into the text at your own pace. Nothing auto-plays. Nothing demands action. The page rewards careful reading and repays re-reads. **Macro structure (top to bottom in the reading panel):** 1. **Identity Header** — The kinetic title `yongzoon.com` in Playfair Display, each character animating in on load (stagger: 40ms/char, Y-axis rotation from 90° to 0°, spring easing, overshoot 10°). Below the title: a single line of Lora italic at 15px describing the author's intellectual preoccupation — specific, not generic. No tagline, no hero image. 2. **Orientation Section** (progressive-disclosure layer 0) — A 3–4 sentence paragraph in Lora that states the organizing question of the site. This is not a bio; it is an intellectual position. 3. **Main Inquiry Sections** (progressive-disclosure layers 1–N) — Each section is gated: the first 80px of each section is visible on page load; the rest is hidden behind a `max-height: 0` transition triggered by a small expand-indicator (a cut-mark SVG that rotates 90° on activation). This is the **progressive-disclosure** pattern — not accordion menus, but scholarly sections that can be read at the surface or excavated. 4. **Annotation Engine** — As the user scrolls into each section, the right annotation column populates: relevant marginal notes (`opacity: 0 → 1` over 400ms, `transform: translateX(12px) → translateX(0)`). Each annotation is timestamped with a revision date in IBM Plex Mono (the scholarly conceit that knowledge is versioned). 5. **Concept Graph activation** — The small topology graph in the right column highlights the active node as the reader moves through sections. This is purely positional: `IntersectionObserver` on each section triggers the graph highlight. 6. **Floating Cards** — At 3 defined scroll positions, sharp-edged parallelogram cards (15° skew, `#2A1F14` background) rise from below the fold with `transform: translateY(40px) → translateY(0)` over 600ms. Each card holds a 2–4 sentence theoretical footnote in Lora 14px. They are triggered once and stay visible. **CSS architecture:** - Use CSS custom properties for all palette values (`--color-espresso`, `--color-vellum`, etc.) - The dashboard layout is CSS Grid: `grid-template-columns: 220px 1fr 180px` on desktop, collapsing to single column on mobile with the left rail becoming a top-anchor inline TOC. - All clip-path corners are computed from a single `--clip-offset: 8px` variable so corner cuts remain consistent. **Animation rules:** - All animations use `prefers-reduced-motion: reduce` guards: if reduced motion, replace rotational letter animations with simple `opacity: 0 → 1` fades. - The kinetic headline uses the Web Animations API (`element.animate()`), not CSS keyframes, to allow per-character staggering without generating N keyframe blocks. - Spring easing: approximate with `cubic-bezier(0.175, 0.885, 0.32, 1.275)`. **AVOID:** - CTA buttons, pricing sections, testimonials, social proof - Photography or raster imagery of any kind - Rounded cards, soft shadows, gradients (this is a different warmth — archival, not cozy) - Generic "hero + features + footer" structure ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **surreal**, layout = **dashboard**, typography = **kinetic-animated**, palette = **warm-earthy**, patterns = **progressive-disclosure**, imagery = **minimal**, motifs = **sharp-angles**, tone = **scholarly-intellectual**. **Differentiators from other designs in the registry:** 1. **Surrealism as epistemology, not decoration.** Most surreal aesthetics in the registry borrow Dali-style visual tricks (impossible objects, melting shapes). yongzoon.com deploys surrealism as a *structural principle*: the dashboard layout violates spatial convention not arbitrarily but according to an internal grammar. Panels relate to each other through impossible adjacency (the annotation column references content not yet scrolled to; the index cross-references forward and backward). The surrealism is in the *logic*, not the visuals. 2. **Kinetic typography at the character level, not the word level.** The frequency report shows kinetic-animated at 3% — and those implementations typically animate whole headings (slide-in, fade-in). yongzoon.com animates individual characters as if a typecase is being set in real time: Y-axis rotation per character, staggered, with spring overshoot. The animation is mechanical and scholarly (type-setting) rather than expressive (dance). 3. **Concept topology graph as live navigation.** No other design in the registry uses an actual graph-theory visualization as the primary navigation element. The small SVG graph in the annotation column is the page's intellectual map — it *is* the table of contents, but rendered as nodes and edges rather than a list. This is the scholarly-intellectual tone made spatial: ideas have relationships, not just sequence. 4. **Progressive-disclosure as the primary content architecture.** The registry shows progressive-disclosure at 3% — and most implementations use it only for FAQ accordions. yongzoon.com makes progressive-disclosure the organizing logic of the entire reading experience: sections are excavatable, not fully revealed on load. This rewards the reader who wants depth and respects the reader who only has time for the surface. 5. **Avoided patterns from frequency analysis:** warm-gradient (88%/77% — this palette is warm but earthy-archival, never decorative-gradient), centered layout (83% — three-column dashboard, not centered), hand-drawn (53% — zero hand-drawn elements, only precise geometry), editorial (49% — scholarly rather than editorial, a different register entirely).