# Design Language for yongjoon.dev ## Aesthetics and Tone yongjoon.dev is staged as **the unfolded set of axonometric assembly drawings for a machine that does not exist** — a developer's personal site rendered the way a precision-instrument manufacturer would issue a service manual: every component drawn in true 30°/30° isometric projection, every part numbered, every fastener called out with a leader line, every section labeled in the dry, declarative voice of an engineering bill-of-materials. The conceit: Yongjoon, the person, is not a portfolio of "work" but **a serviceable apparatus** — and this site is the apparatus's official exploded-view diagram, the kind printed on translucent vellum and folded eight times into the back of a hardware box circa 1974, then scanned at 1200dpi and re-issued as a living document. The tone is **grounded-earthy meets scholarly-intellectual**, but never warm — this is the cool, exact warmth of a draughtsman's bench lamp, not a hearth. It is meticulous without being fussy, confident without being loud, and it treats the visitor as a competent technician who appreciates a well-drawn cross-section. Nothing here is "fun"; everything here is *correct*, and the satisfaction is the satisfaction of a part that seats with a click. The mood word is **machined**: surfaces are tooled, edges are chamfered, tolerances are stated. Where most personal sites perform charm, this one performs *fit*. The throughline is the slow rotation of a single object — page-as-turntable. The visitor does not "scroll a feed"; they **rotate the workpiece on a dividing head**, and as it turns, new faces of the machine come into view, each annotated, each with its own callout cloud and revision stamp. The site ends not with a CTA but with the diagram **re-folding itself along its original creases** and the box closing. ## Layout Motifs and Structure The load-bearing structural conceit is **the isometric drafting plane** — a fixed 30° axonometric grid that the entire page lives on. This is the differentiator: not a flat document with isometric *decoration*, but a genuine pseudo-3D drawing surface where every block of content is a **plate** lying on the iso-grid, casting a hard parallel-projection shadow at a fixed 45° offset, never softening, never blurring. **The iso-grid itself:** a triangular lattice — three sets of parallel lines at 0°, 60°, 120° — drawn at 1px in `#2E3A46` at 14% opacity over the base. Major nodes (every 8th intersection) get a small open circle (3px, 1px stroke). This grid is *always visible*, faint, behind everything, like the printed grid on isometric drafting paper. It does not parallax; it is the bedrock. **Plates:** Content arrives as rectangular **plates** that appear to lie flat on the iso-grid — each rendered with a `transform: matrix3d(...)` that skews it onto one of the three iso-faces (top, left-face, right-face). A plate has: a 1px hard border in `#1A2530`, a chamfered corner (8px 45° cut, top-right), a stamped **plate number** in the cut corner ("PL-04", mono, 11px), and a hard offset shadow (no blur, 6px x / 6px y, `#1A2530` at 22%). Plates do not overlap into mush — they **stack like sheet metal**, each lifting 6–10px above the one below, with the gap visible as a clean parallel-projection edge. **The callout system:** Every significant element on a plate gets a **leader line** — a thin (1px) line with a small filled dot at the part, running out to a **callout cloud**: not a speech bubble but a hexagonal or rectangular *balloon* (the ISO 7200 kind), containing a part number and a one-line spec. Callouts are positioned in the margins, never over the drawing. On hover of a part, its callout's border thickens to 2px and the leader line **draws itself** from part to balloon (path-draw-svg). **Vertical rhythm = revision blocks.** The page is divided into **sheets** (≈100vh each), and each sheet has, in its lower-right corner, a **title block** — the boxed table draughtsmen put on every drawing: DRAWN BY / DATE / SCALE / SHEET n OF m / REV. As you scroll into a new sheet, its title block fills in field by field (typewriter, monospace). Sheets: (1) FRONTISPIECE — the closed box; (2) GENERAL ARRANGEMENT — who Yongjoon is, as an overview drawing; (3–5) DETAIL SHEETS — projects/work, each as an exploded view of one subassembly; (6) BILL OF MATERIALS — skills/tools as a numbered parts table laid on the grid; (7) SERVICE NOTES — writing/contact, as marginalia and warning triangles; (8) FOLD LINES — the diagram re-folds and the box closes. **Navigation** is a **vertical revision ladder** pinned to the left edge: SHEET 1 … SHEET 8, each a small box, the active one filled. No hamburger, no top bar. The whole site is one continuous drawing you traverse by rotating. ## Typography and Palette **Typefaces — Google Fonts only, three families, used with draughtsman discipline.** - **B612** (sans, regular + bold). The voice of all annotation, callout text, and body copy. B612 was literally designed for aircraft cockpit displays — legible at small sizes, neutral, exact, with the slightly-square forms that read as *instrument panel*. This is the workhorse: callout balloons at 11–12px, body at 16px / 1.65, never tracked. It is humanist-adjacent but cooler — the right temperature for this site. (NOTE: this is humanist territory but B612 specifically, NOT the over-used grotesk default.) - **Major Mono Display** (mono, regular only). Used *only* for the hard machine data: plate numbers, part numbers, dimensions, the title-block fields, the revision stamps, coordinate readouts. Major Mono Display has the lowercase-only, wide-tracked, almost-stencil quality of a numerically-controlled mill's readout. Set at 11px, tracked +80, frequently in `text-transform: lowercase` (it only has lowercase). This is the *only* monospace on the site and it appears exclusively inside boxes and stamps — never as running text. Restraint is the point: mono is 93% used across the cohort *as body text*; here it is quarantined to metadata. - **Spectral** (serif, regular + italic + the SC small-caps via `font-variant`). The display voice — sheet titles ("GENERAL ARRANGEMENT", "BILL OF MATERIALS"), the frontispiece title, pull quotes from service notes. Spectral is a transitional serif with a slightly mechanical, screen-tuned crispness — it reads as *the title engraved on the nameplate riveted to the machine*. Set in small-caps, tracked +60, for all sheet headers at 28–40px. Italic Spectral is used for the rare aside, the draughtsman's pencil note in the margin. **Palette — "draughtsman's vellum and instrument steel." Cool, exact, no warmth.** - `#E9EBE4` — **vellum** — the base. A pale cool grey-green, the color of aged tracing paper under fluorescent light. NOT cream, NOT ivory — there is no warmth in it. - `#1A2530` — **ink** — near-black with a blue cast, the color of a freshly-inked drafting pen. All linework, all primary text. - `#2E3A46` — **graphite** — a desaturated slate, for the iso-grid lines, secondary linework, plate shadows. - `#6E7B82` — **pencil** — mid cool-grey, for leader lines, dimension lines, de-emphasized annotation. - `#C9402E` — **rubric red** — the single accent. Used *exactly* as red is used on engineering drawings: revision clouds, the active nav box, warning triangles, the one word in a callout that matters, the dotted "fold here" lines. Never for decoration; only for *attention* and *correction*. Less than 4% of pixels. - `#3A6E5C` — **patina** — a deep muted teal-green, used sparingly for the title-block borders and the "approved" stamps, evoking the verdigris on an old brass nameplate. The secondary accent, even rarer than rubric red. - `#F4F5F0` — **highlight vellum** — a half-step lighter than base, for the top-faces of plates so the iso-projection reads as dimensional. High-contrast, near-monochrome with two surgical accents. Cool-grays palette (only 6% of cohort). Zero gradients — every fill is flat, because draughtsman's ink does not blend. ## Imagery and Motifs **Three motif families, all drawn — zero photography.** **1. Axonometric line-objects (the core).** Every "image" on the site is a **30° isometric line drawing** rendered in SVG: 1px `#1A2530` strokes, no fill or flat `#F4F5F0` fill, hidden lines as 1px dashed `#6E7B82`. The objects are *invented mechanical assemblies* standing in for real content — a "career" rendered as a gear train, a "project" as an exploded valve body, "skills" as a rack of labeled modules sliding into a chassis. Each line-object slowly rotates 0°→30° as its sheet enters view (a true rotation about the vertical iso-axis, ~3° of perceptible motion, never spinning). Exploded views: components separated along iso-axis "blow-apart" lines (the long thin dash-dot lines), each component with its own leader and part number. **2. Drafting furniture.** Dimension lines (witness lines + arrowheads + a number in a gap, e.g. `⊢— 142 —⊣`), section-cut symbols (the arrow-and-letter "A—A" with hatched cut faces — hatching = 1px parallel lines at 45°, 4px pitch), centerlines (long-short-long dash), the ⌀ diameter glyph, the ± tolerance glyph, north/orientation rosettes in iso-projection, and **revision clouds** (the lumpy scalloped outline draughtsmen draw around a changed area, in rubric red, with a small triangle-flag carrying the rev letter). These appear throughout as functional ornament. **3. The title block + stamps.** The ISO-7200-style boxed table in every sheet's lower-right (DRAWN BY: Y. / SCALE: 1:1 / SHEET n OF 8 / REV: -). And rubber-stamp marks — "APPROVED", "AS-BUILT", "DO NOT SCALE" — in patina green or rubric red, slightly rotated (±4°), with the soft-edged ink-bleed look of a real stamp (achieved with a subtle SVG turbulence displacement on the stroke, *not* a blur). The frontispiece's closed "box" is itself an iso-drawing of a flat cardboard carton, lid down; the finale re-folds the whole vellum sheet along visible crease lines (rubric-red dotted) and slides it into that box. **Texture:** a single, near-invisible paper-grain (SVG `feTurbulence`, baseFrequency 0.9, opacity 3%) over the vellum base — just enough that the white is *paper*, not screen. No grain on the linework itself; ink is crisp. ## Prompts for Implementation Build yongjoon.dev as **a single HTML document, one CSS file, one small ES module — no SPA, no router, no framework, no build step beyond an esbuild pass.** One continuous vertical scroll, ~800vh, eight sheets, structured as one drawing the visitor rotates and traverses. **Storytelling is the organizing principle, not navigation.** The eight sheets are one document: the official exploded-view service manual for "the Yongjoon apparatus." Sheet 1 opens on a closed carton (iso line-drawing). Scroll: the lid lifts, the folded vellum slides out and *unfolds* (CSS 3D `rotateX`/`rotateY` along the crease lines, sequenced — fold-out 1, fold-out 2, …). Sheets 2–7 are the spreads of that unfolded sheet, each a plate-covered iso-drafting plane with its own title block filling in field-by-field. Sheet 8: every plate settles, the creases reappear in rubric red, the sheet re-folds in reverse, slides back into the carton, the lid drops. End. **No links out. No second page. No CTA, no pricing, no stat-grid** — this is a drawing, not a landing page. (If contact is needed, it lives in Sheet 7 "SERVICE NOTES" as a marginal annotation: "for service, address correspondence to —" with the address in a callout balloon.) **The iso-grid** is a fixed-position SVG behind everything: three line-sets at 0°/60°/120°, 1px `#2E3A46` @14%, open circles at major nodes. It never moves. Everything else is positioned *relative to it* using `transform: matrix3d` skews onto the three iso-faces — write a small JS helper `placeOnIsoFace(el, face, u, v)` that takes grid coordinates and outputs the matrix. **Plates** animate in with a **slide-along-iso-axis** entrance: each plate starts 40px down-the-iso-Z, opacity 0, and seats into place (spring, slight overshoot, then a 1px "click" — the border flashing 2px for 80ms on landing). Stagger plates within a sheet by 90ms. Their hard offset shadows are real box-shadows (no blur). Top-faces get `#F4F5F0` so the dimensionality reads. **Callouts / leader lines** are SVG paths. On `mouseenter` of any part-with-callout: the leader line draws from part→balloon (stroke-dashoffset animation, 240ms ease-out), the balloon border goes 1px→2px, and the part itself gets a 1px rubric-red highlight ring. On `mouseleave`, reverse. Cursor: a small **iso-crosshair** (two short lines at 30°/150° + a 2px dot) follows the pointer with a slight spring lag — this is the only cursor-follow effect and it must feel like a draughtsman's eye, precise, not floppy. **Rotation gesture:** the hero line-object of each sheet rotates ~3° about the vertical iso-axis as the sheet scrolls through viewport center (scroll-linked, scrub, *not* a one-shot). Subtle. The visitor should feel the workpiece is *on a turntable they control*, never that it's "spinning." **Title blocks** fill in via typewriter (Major Mono Display, ~28ms/char) field-by-field as each sheet locks into view: DRAWN BY → DATE → SCALE → SHEET n OF 8 → REV. Revision clouds (rubric red, scalloped SVG path) pop in around any "updated" annotation with a tiny 2-frame jiggle. **Dimension lines** between plates draw their witness lines first, then the arrowheads slide in from both ends to meet at center, then the number fades in the gap. Section-cut hatching draws line-by-line (fast, 1px @ 45°, 4px pitch). Everything that *can* be drawn rather than faded *is* drawn — this is a drafting site; reveal = the pen moving. **Motion budget:** restrained, mechanical, parallel. No easing-bounce-everywhere — springs are stiff (high tension, moderate friction), like a detent. Honor `prefers-reduced-motion`: drop the fold-out and rotations, keep static plates fully annotated. The page must be a complete, beautiful *printed drawing* even if every animation is disabled. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **The page IS an isometric drafting plane, not flat content with iso decoration.** Every content block is a `matrix3d`-skewed *plate* lying on a true 30°/30° triangular iso-grid, with hard parallel-projection shadows and stacked-sheet-metal layering. Isometric aesthetic sits at 13% in the cohort and *almost always means "iso icon illustrations on a flat layout"* — committing the entire layout surface to the axonometric projection, with a JS iso-coordinate helper, is the structural signature here. 2. **The ISO-7200 service-manual conceit, fully executed.** Title blocks, part numbers, leader-line callout balloons, revision clouds, section-cut symbols, dimension lines, "APPROVED/AS-BUILT" stamps, fold-lines, blow-apart exploded views — the entire visual vocabulary of mechanical engineering drawings, used *functionally* (callouts actually annotate; revisions actually mark changes). No other site frames a person as "a serviceable apparatus with an exploded-view diagram." 3. **Monospace quarantined to metadata.** Mono is 93% of the cohort *as body type*; here Major Mono Display appears ONLY inside stamps, title-block fields, part numbers, and dimensions — never one word of running text. Body is B612 (cockpit-display sans), display is Spectral small-caps (engraved-nameplate serif). The font roster itself is a deliberate non-default. 4. **Cool, zero-warmth, zero-gradient palette.** Warm palettes are 98% and gradients 92% of the cohort. yongjoon.dev is built on `#E9EBE4` cool vellum + `#1A2530` blue-black ink with exactly two surgical accents (`#C9402E` rubric red for attention/correction, `#3A6E5C` patina for stamps), every fill flat — because draughtsman's ink does not blend. 5. **Reveal-as-drawing.** Where other sites fade/parallax, this one *draws*: leader lines stroke-dashoffset in, dimension arrowheads slide to meet, hatching renders line-by-line, the vellum sheet physically unfolds along creases on entry and re-folds into a carton at the end. The whole document has a beginning (closed box) and end (closed box) — a finite drawing, not an infinite feed. Avoided over-used patterns from frequency analysis: hand-drawn aesthetic (94% — this is *hard-line drafting*, the opposite), glassmorphism (86% — every surface is opaque flat sheet metal/vellum), warm palette (98%), gradient palette (92%), card-grid (93% — plates are iso-skewed and sheet-metal-stacked, not a flat grid), centered layout (79%), photography imagery (97% — zero photos, all SVG line-objects). Chosen seed/style: **isometric technical docs**.