# Design Language for namu.works ## Aesthetics and Tone namu.works is the digital plan-room of an imagined master joiner — "namu" being the Korean word for *tree / wood* — and the entire site behaves like a set of **isometric working drawings for wooden joints that are never explained in words, only drawn**. The governing aesthetic is **isometric technical documentation**: the cold, exact register of a CAD detail sheet or a vintage Japanese *sashimono* construction manual, executed in true 30°/30° axonometric projection with visible dimension lines, leader arrows, hatch fills, and revision stamps. Nothing is photographed; nothing is rendered with bevel-and-emboss "realism". Everything is a *line drawing of a thing* — the dovetail, the mortise-and-tenon, the kanawa-tsugi scarf, the through-wedged housing — floating on a pale draughting field as if just lifted off a light table. The tone is **grounded-earthy crossed with scholarly-intellectual**: it speaks the way a workshop instructor speaks while sketching on butcher paper — terse, declarative, confident in the geometry, never salesy. There is no warmth-by-gradient here and no whimsy; the warmth comes from the *honesty of construction*, from the sense that every line on screen could be transferred to oak with a marking knife. The mood is quiet, precise, and faintly nostalgic for the era of ink-on-vellum — a workshop where the lights are even, the bench is flat, and the only sound is a plane taking a continuous shaving. Where most of this corpus reaches for parallax sunsets and cursor-trailing sparkles, namu.works reaches for the *snap of a chalk line*. ## Layout Motifs and Structure The site is a **single horizontal-scroll plan sheet** — one continuous "drawing roll" that the visitor pans left-to-right (wheel, drag, or arrow keys), exactly as one would unroll a long technical drawing across a bench. It is **emphatically not a card-grid, not a centered hero stack, not a bento box.** The roll is divided into **six plates**, each plate a self-contained construction detail: 1. **Plate 00 — Title block.** A real engineering title block in the lower-left corner: project = `NAMU / WORKS`, scale = `1:1`, drawn-by, date, sheet `00 OF 06`. The "drawing" above it is the wordmark itself constructed as an isometric assembly of timber members. 2. **Plate 01 — The Dovetail.** A through-dovetail joint exploded along its slide axis, pins and tails drifting apart and re-seating on scroll. 3. **Plate 02 — The Mortise & Tenon.** A haunched mortise-and-tenon with the tenon shown both housed and withdrawn; section hatching reveals the glue line. 4. **Plate 03 — The Scarf (kanawa-tsugi).** A Japanese splice joint with its central hardwood key; the key drives home as the visitor pans past. 5. **Plate 04 — The Wedged Through-Tenon.** A stool-leg-to-seat joint, wedges fanning the tenon cheeks; foxed wedges shown in ghost line. 6. **Plate 05 — Index / colophon.** A sheet of small-scale thumbnails of all prior plates with their grid coordinates, plus the closing note, set like a drawing index. Spatial grammar throughout: a faint **isometric grid** (the standard 30°-rhombus draughting paper) underlies the whole roll and never scrolls *with* the content — it stays pinned, so plates appear to slide across stationary graph paper. Each detail sits in **negative space the way a drawing breathes** — a single large object, a swarm of thin dimension lines, and a lot of pale emptiness. Leader lines connect labels to features at exact angles (always 0°, 30°, 60°, or 90°). A persistent slim **scale bar** lives along the bottom edge of the viewport and recalibrates per plate. No top navigation bar; movement between plates is via the scale bar's tick marks or by simply panning. ## Typography and Palette **Type system — Google Fonts only:** - **Drawing annotations & all UI labels:** `Spectral` is *not* used here — instead the lettering register is **`Saira Condensed`** (weights 300, 500), the narrow, upright industrial sans that reads exactly like the stencilled lettering on a title block. Used at small sizes, uppercase, letter-spacing `0.14em`, for dimension callouts, plate numbers, and the title-block fields. - **Headline / plate titles:** **`Big Shoulders Stencil Display`** (weight 400–700) — a true cut-stencil display face whose bridges evoke spray-mask signage in a workshop; used only for the six plate titles ("THE DOVETAIL", "THE SCARF"), at large size, never animated wildly — it simply *prints on* line by line as if drawn with a ruling pen. - **Body / instructional micro-copy:** **`IBM Plex Mono`** (weight 400, 500) — the only place running text appears; it carries the terse one-or-two-sentence notes beneath each detail, set ragged-right at a generous line-height (1.8) so it reads like a typewritten spec note clipped to the drawing. - **Numerals everywhere** (dimensions, scales, coordinates) are tabular-figure `IBM Plex Mono` for that on-the-grid alignment. **Palette — a draughting-table monochrome with two ink colours:** - `#F4F1E8` — *vellum* — the warm-paper base of the whole sheet (a tracing-paper cream, not white). - `#E7E2D2` — *light-table glow* — the slightly cooler tint used inside detail "windows" and behind the title block. - `#1B2A22` — *bench-ink green-black* — the primary line colour; nearly black but biased green, like old India ink on aged paper. All object outlines, hatching, and headline stencils. - `#9AA398` — *pencil grey-green* — the secondary line weight: the isometric grid, construction lines, and ghost/hidden-detail dashes. - `#B5471F` — *cinnabar revision red* — used **only** for: the revision stamp, "this part moves" leader arrows, the active scale-bar tick, and section-cut indicators. Sparingly, like a red pencil correcting a print. - `#5C6E54` — *moss accent* — an even rarer third ink, reserved for the title-block rule lines and the index plate's coordinate labels, to keep the page from going fully grey. No gradients. No glow. No glass. The only "texture" is an optional <2%-opacity paper-fibre noise on the vellum, and a faint vignette as if the drawing roll curls at the edges of the bench. ## Imagery and Motifs Every visual is a **constructed isometric line-drawing**, authored in SVG, not a photo and not a 3D render: - **The six joints**, each drawn in correct axonometric projection with: solid lines for visible edges, `4 2` dashed lines for hidden edges, 45°-spaced hatch fill for cut faces, centre-lines with long-short dashes, and small filled-arrow leaders. - **Dimension lines** — extension lines, dimension lines with tick or arrow terminators, and dimension text broken into the line — drawn around each joint at exact angles; some dimensions are real wood sizes (`24`, `38`, `120` mm) for verisimilitude. - **Exploded-assembly arrows** — long thin green arrows showing the slide/drive axis of each joint's moving member; their arrowheads are open triangles, not solid blobs. - **The revision triangle** — a small numbered triangle (`△ 1`) in cinnabar near the title block, the only "stamp" on the sheet. - **Grain ticks** — the one figurative flourish: along each timber member's faces, three or four hand-drawn-feeling short curved strokes indicating wood grain direction — the *only* hand-drawn-feeling marks in the whole design, used precisely *because* the rest is so rigid. - **The isometric draughting grid** — the eternal background: pale 30°-rhombus graph paper, with every fifth line slightly heavier, pinned to the viewport. - **The scale bar** — a black-and-white alternating ruler segment along the bottom, with a cinnabar pointer marking scroll position. - **Corner registration marks** — small `+` crop-marks at the four corners of the "sheet", as on real printed drawings. - **The wordmark** — `namu.works` built as a tiny isometric stack of mortised members in Plate 00, the dot of `.works` being a square peg about to be driven into a hole in the `u`. ## Prompts for Implementation Build namu.works as a **single HTML page, one CSS file, one vanilla ES module** — no framework, no build step, no service worker. The page is a **horizontally-scrolling drawing roll**: capture vertical wheel delta and translate it to horizontal pan of a `position: sticky`-anchored track; also support click-drag panning, ←/→ keys, and clicking scale-bar ticks (smooth-scroll to the corresponding plate). On touch, native horizontal swipe. Reduced-motion users get an instant-jump version with no exploded animation — the joints simply render assembled. **Storytelling structure (six plates, left-to-right, the visitor "unrolls the plan"):** - **Plate 00 — Title block & wordmark assembly.** The isometric `namu.works` wordmark draws itself member by member (SVG `stroke-dashoffset` "inking" — each line appears as though drawn by a ruling pen, ~120ms per member, staggered). The square peg of `.works` slides into its hole on completion with a single, dry, un-bouncy `cubic-bezier(0.2, 0, 0, 1)` move. The title block in the corner fills field by field in `Saira Condensed`. - **Plate 01 — The Dovetail.** As this plate enters the centre of the viewport, the pins board and the tails board, currently *seated*, slide apart ~80px along the joint axis (green exploded arrows fade in), pause, then re-seat. Dimension lines draw on as the joint settles. Micro-copy in `IBM Plex Mono`: a single spec note like *"Through dovetail. 1:6 slope. No glue at the pins."* - **Plate 02 — Mortise & Tenon.** The tenon withdraws from the mortise, rotates 8° to show its haunch, returns; a section-cut line in cinnabar sweeps across to "reveal" the housing with 45° hatch fill. - **Plate 03 — The Scarf (kanawa-tsugi).** The two long members lie nearly meeting; on entry, the central hardwood key descends from above and is "driven" home in three short discrete steps (no easing overshoot — it's a mallet, not a spring), pulling the joint tight. - **Plate 04 — Wedged Through-Tenon.** The through-tenon is shown protruding; two wedges fan into the saw kerfs, spreading the cheeks; foxed (blind) wedges shown as ghost dashed lines inside the mortise. - **Plate 05 — Index / colophon.** Thumbnails of plates 01–04 at small scale with grid coordinates (`A-2`, `B-4`, …); a closing note set as a drawing index line; the registration `+` marks and the revision triangle get a last beat of attention as the roll runs out. **Interaction & motion grammar:** - All transitions are **dry and mechanical** — short durations (160–320ms), `cubic-bezier(0.2,0,0,1)` or stepped (`steps(3)`) easing. **No springs, no elastic, no bounce, no parallax sunsets, no cursor-trailing particles.** The closest thing to "playful" is a part snapping into its socket. - **The grid never moves with content** — only the plates translate; the draughting paper, scale bar, corner crop-marks, and title block are pinned. This is the signature trick. - **Leader-line redraw on scroll:** as a plate centres, its dimension/leader lines `stroke-dashoffset`-animate from 0 to full, like an instructor's hand laying them down. - **Hover on a labelled feature** thickens *that* line from grey to bench-ink and brightens its leader arrow to cinnabar — the documentation "highlighting" the part you're reading about. No tooltips, no popups. - Keep the page **silent and still when idle** — no ambient float, no breathing glow. The drawing just sits on the bench. **AVOID:** CTA buttons, "Get started", pricing tables, stat counters / animated numbers as marketing, testimonial carousels, logo walls, newsletter capture, contact forms, FAQ accordions, chat bubbles, hero-with-overlay-text photography, gradient meshes, glassmorphism, dark-mode neon, hand-drawn doodle frames around everything. This is a plan sheet, not a landing page. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Horizontal "drawing roll" instead of vertical scroll.** In a corpus where 88% are full-bleed and 84% centered with vertical scroll, namu.works is panned left-to-right like unrolling a physical plan — and crucially the *background grid stays pinned* while plates slide across it, an inversion of the usual parallax (where background moves slower than foreground; here it doesn't move at all). 2. **True isometric technical-drawing language as the entire visual system** — dimension lines, hatch fills, hidden-line dashes, leader arrows, title block, revision stamp, registration marks — not "isometric icons sprinkled on a card grid". Isometric appears in only ~12% of the corpus and almost always decoratively; here it *is* the design. 3. **Anti-warmth, anti-gradient palette.** 98% of the corpus is "warm" and 95% uses gradients; namu.works is a flat draughting-table monochrome (vellum + green-black ink + grey-green pencil) with cinnabar red used *only* as a correction-pencil accent and moss as a rare rule-line ink. Zero gradients, zero glow, zero glass. 4. **Dry, mechanical motion** — stepped easing and short hard cuts that read like a mallet blow or a part snapping into a socket — explicitly rejecting the corpus-dominant spring (85%), magnetic (81%), elastic, and cursor-follow (89%) behaviours. The only "hand-made" marks are the wood-grain ticks, deliberately the lone soft element among rigid lines. 5. **Content is wordless construction details, not copy blocks.** Each "section" is a joint you watch assemble, captioned by at most one terse `IBM Plex Mono` spec note — no headings-and-paragraphs marketing rhythm anywhere. **Chosen seed / style:** `isometric technical docs` — i.e. *aesthetic: isometric, layout: horizontal-scroll, typography: condensed, palette: monochrome, patterns: path-draw-svg, imagery: line-illustration, motifs: grid-lines, tone: grounded-earthy.* **Avoided patterns from frequency analysis:** hand-drawn (96% — used only as four tiny grain ticks per member, nothing more), glassmorphism (79% — none), warm palette (98% — none, deliberately cool), gradient (95% — none), parallax (91% — inverted/none), cursor-follow (89% — none), spring (85% — replaced with stepped/dry easing), magnetic (81% — none), card-grid (90% — replaced with a horizontal drawing roll), photography (98% — none, all SVG line work).