# Design Language for namu.works ## Aesthetics and Tone namu.works is a **fully skeuomorphic, full-screen digital workbench** — the website *is* the top-down photographic plan view of a working luthier-cabinetmaker's bench, with every piece of UI rendered as a real, individually-made woodworking object resting on (or fastened to) a slab of waxed European beech. The Korean word *나무* (namu) means *tree* / *wood*; the `.works` TLD signals labor, manufacture, a workshop in operation. Together they read as **"wood works"** — and the site takes that compound at its absolute literal word: nothing on the page is ever an icon, button, link, or card. Every clickable element is a **hand-tool, a clamp, a wax-stamped joint sample, a paper traveler, a chisel, a sliding bevel, a cabinet-scraper card, or a small leather wallet of dovetail templates** — each one rendered with photorealistic shadow, end-grain, brass screw, oxidized blade-patina, and the specific wear pattern a tool earns after twelve years on a single bench. The tone is **grounded-earthy / scholarly-intellectual / raw-authentic** — three rare combinations in the corpus (6%, 11%, 3% individually; almost never combined). The voice is the voice of a master cabinetmaker speaking to an apprentice at the end of a long Friday: low, precise, undecorated, fond of measurement, mistrustful of marketing. Every piece of microcopy is a margin-note in pencil — never a headline, never a CTA. There are no exclamation points anywhere on the site. There are also no stock photographs of forests, no parallax canopies, no animated leaves, no aerial drone shots of "craftsmanship." The trees in namu.works are *already lumber*, already milled, already plane-flat, already loved by use. The deepest reference is the **Roubo workbench plates of 1769** (André Roubo, *L'Art du Menuisier*) re-photographed under raking 4 p.m. November light from a north-facing studio window in Insadong — that exact, slightly amber, slightly cold winter slant. The second reference is the wall behind George Nakashima's bench at New Hope, PA, c. 1981. The third is a Korean *소목장* (sōmokjang, fine-furniture master) tool roll from the National Intangible Heritage Center collection. None of these are reproduced as photographs; they are reproduced as **vector-rendered tools sitting on a real slab**. ## Layout Motifs and Structure The page is a **single, fixed, full-bleed top-down workbench** — viewport-locked at first load to exactly the bench surface (no scroll for the first 8 seconds, no header, no nav bar, no hero text overlaid). The bench occupies 100vw × 100vh, its long axis horizontal, its near edge running across the bottom of the viewport with a subtle bull-nose. This is a **hero-dominant + ma-negative-space + minimal-navigation** composition (7% + 9% + 6% individually) — but executed without a hero *image*: the hero IS the bench plus the eight tools laid on it. The layout is a **broken-grid** (10% in corpus) overlaid on a real underlying carpenter's logic: the bench has a **front vise on the left, a tail vise at the lower right, a sliding deadman in the middle, two rows of 3/4-inch dog holes spaced 6 inches on center, and a tool-tray running the full back edge.** Every interactive element on the site sits in a position that would actually make sense on a working bench: - **Front vise (lower left, ~22% from left, jaw open 1.4 inches):** holds a dovetailed pine sample; clicking the dovetail opens the **Work** section (case studies, joinery commissions). - **Tail vise (lower right, ~78% from left):** clamps a small **paper traveler** — a handwritten job-card on cream cardstock. Clicking it opens **Process** (how a commission moves through the shop, week by week). - **Tool tray (back edge, full width):** seven tools laid in order of use across a single dovetailed run — marking gauge, mortise gauge, sliding bevel, dovetail saw, crosscut saw, paring chisel, mallet. Each is a navigation item. Hovering on a tool *lifts* it 6 px with a pencil-soft drop-shadow and reveals a graphite-pencil label written directly on the bench wood. - **Dog holes (two rows mid-bench):** are not interactive, but each one is a real, individually-rendered 3/4-inch hole with the slight oval wear of repeated dog seating. There are exactly 14 dog holes; six of them have small brass holdfasts seated, and three of those brass holdfasts function as **scroll anchors** when scrolling does begin. - **Sliding deadman (vertical bar at center):** the only vertical element. It is the **scroll-bar replacement** — as the user scrolls (after the initial 8-second hold), the deadman slides slowly down the bench in lockstep with scroll progress. There is no other scroll indicator. - **Bench dog (a single square brass dog, mid-right):** is the **theme toggle**. Tapping it rotates the dog 90° in 3D and the entire bench shifts from "morning light" to "evening lamplight" mode (warm sodium-yellow rim light from upper-right replaces north-window blue-white). When scroll *does* begin, the bench **does not move** — instead, **a shop apron unfolds upward from the bottom edge** (a single piece of waxed canvas, hand-rendered, with two brass grommets and three pencil-stub pockets), revealing the **Work / Process / Materials / Hours / Contact** strata one at a time, each stratum rendered as a **page from the workshop's leather-bound order book** sliding up from inside the apron. Each page is a single column of typewritten + handwritten text on cream, ruled, slightly grain-bowed paper, rotated by ±0.4° to look genuinely placed by hand. This is **timeline-vertical** (5%) executed as **a stack of paper, not as a UI timeline**. ## Typography and Palette **Fonts (all confirmed Google Fonts only):** - **`Caudex`** — primary serif for body and section text. A lapidary, lightly humanist serif with a slow, slightly ecclesiastical rhythm. Used 17 px / 28 px line-height, weight 400 for body. Weight 700 only for tool-name labels in the order book. Caudex was chosen over the corpus-saturated `EB Garamond` and `Cormorant` because it is deeply underused (essentially not appearing in the 340 surveyed designs) and because its low x-height and steep stress make it read like a 19th-century tool-catalog footnote, which is exactly correct. - **`Bitter`** — slab-serif (2% in corpus, "slab-serif" tag) for tool labels and order-book headings. Set 13 px / 20 px line-height, weight 600, letter-spacing 0.02 em. Bitter's sturdy slab feel matches the brass-and-steel hardware aesthetic. - **`Caveat`** — handwritten (25% in corpus, deliberately *not* underused but used here in a deeply non-standard way: as **pencil margin notes only**, never as a headline). Set at 19 px, weight 400, color always `#5b4a36` (graphite-on-wood), rotated −1.2°. Each Caveat string is positioned absolutely on the bench wood, never inside a card or container. - **`Nanum Myeongjo`** — Korean serif for the wordmark *나무.works* and for any Hangul on the order book. Set at the wordmark size (only visible after the apron unfolds, as a **wax stamp** on the first order-book page), weight 800. The wordmark itself is rendered as a **3.4 cm circular red sealing-wax stamp** — pressed onto the cream paper of the order book — reading 나무 in seal-script style with `.works` curving below in tiny Bitter weight 600. The seal is `#7a1f1f` wax with a subtle stearin-bloom and a hand-pressed-not-perfectly-centered alignment. **Color palette (eight values, anchored to a real beech-and-brass workshop):** - `#d9b97b` — **waxed beech** (primary bench surface, ~62% of viewport). The most important color on the site. It is not flat: it carries a SVG procedural grain pattern overlaid at 14% opacity. - `#a07b48` — **end-grain shadow / chamfered edge** (used at the front and back edge of the bench, vise jaws, dog holes' interior walls). - `#5b4a36` — **graphite-on-wood** (all pencil text, all gauge lines, knife-marked cut lines). - `#3a2a1c` — **walnut handles** (chisel handles, mallet head, dovetail-saw handle). - `#8a6a3a` — **oiled brass** (vise hardware, holdfasts, bench-dog faces, screw heads). - `#f0e6d2` — **cream order-book paper** (the apron-page paper, plus all body-text containers). - `#7a1f1f` — **sealing-wax red** (only the wordmark stamp and one single ribbon-marker hanging from the order book). - `#1f1a14` — **shop-deep shadow** (tool tray interior, the under-bench area visible at the far edge, evening-mode rim). This is a **warm-earthy / honeyed-neutral** palette (1% / 4% in corpus). Critically, there are **no gradients** on the entire site — every surface is solid color plus procedurally-generated grain noise. In a corpus where 81% of designs use gradients, this is a deliberate, structural refusal. ## Imagery and Motifs **The bench.** A single, painstakingly hand-rendered SVG `` of a 6-foot European beech split-top Roubo workbench, photographed top-down at exactly 4 p.m. November light. The grain runs left-to-right (long-axis with the bench). Three pencil knife-marks, two old dovetail-saw kerfs, one small glue-up scar near the tail vise. **No filters, no overlays, no parallax — the bench never moves.** It is the floor of the world. **The eight tools.** Each rendered as a **layered SVG** with separate elements for: blade, bevel, handle, ferrule, brass pin, wear pattern, and cast shadow. Tools are NOT photographs; they are **vector-art** (2% in corpus) at illustrated-but-photoreal density: 1. **Marking gauge** (Korean *그무개* style, with brass-faced beam and persimmon-wood stock). 2. **Mortise gauge** (twin-pin, English pattern, ~1885). 3. **Sliding bevel** (8-inch, brass and rosewood). 4. **Dovetail saw** (Lie-Nielsen-style, brass back, 15 tpi). 5. **Crosscut saw** (Disston D-8, well-worn medallion). 6. **Paring chisel** (1/2-inch, white-oak handle, slight bevel mushroom). 7. **Mallet** (round Japanese *gennō*-adjacent, persimmon). 8. **Cabinet scraper card** (brass-burnished edge, sitting in a small leather wallet — the wallet IS leather-texture imagery, 2% in corpus). **The order book.** A leather-bound 1/4-folio book sliding up from the apron pocket. **Leather-texture imagery** (2% in corpus) — hand-rubbed cordovan with three faint horizontal scratches. The pages are cream stock with a 24-line baseline grid printed in `#c5b58a`, very faint. Headers are typewritten (Olivetti Lettera 32 specimen), body is Caudex, margin notes are Caveat in pencil at −1.2° rotation. **Wood-grain procedural texture.** A custom SVG `` + `` filter generates a unique grain pattern per session, seeded by `Date.now()` so every visit shows slightly different bench wear — a deliberate **generative-art** trace (3% in corpus) hidden inside what looks like a static photograph. **Motifs avoided on purpose:** no leaves, no canopies, no sap, no growth-rings (sibling namu.biz already owns growth-rings), no roots, no acorns, no leaves-falling cursor effect, no parallax forest, no nature-photography hero. **The trees here are already lumber.** Anything that would feel like "tree website" is structurally absent. **One small motif:** a single **brass nameplate** screwed into the front edge of the bench, slightly worn, engraved in tiny Bitter caps: `NAMU · WORKS · EST. NN`. The `NN` is left literally as `NN` — a deliberate, untouched placeholder, the way a real bench-maker would leave a stamp blank until commissioning. ## Prompts for Implementation - Build as a single static HTML file plus one CSS file plus one small vanilla JS file. **No framework, no build step, no analytics.** The page should be functional with JavaScript disabled (apron unfolds on scroll using only CSS `position: sticky` + `transform`). - **The bench is the entire above-fold experience** — no hero text, no CTA buttons, no overlay copy. The user lands on a bench and must understand, from craft alone, that the tools are the navigation. Ambiguity is the point. The first 8 seconds enforce stillness: any scroll input during that window is captured and discarded with a tiny haptic-style "tick" sound (a single chisel-tap WAV, 22 kHz, 14 KB) and the bench micro-shakes 1 px — *the wood resists you, the way real wood does*. This is a deliberate **anti-design / avant-garde** gesture (3% / 3% in corpus). - Tool hover: 6 px lift + soft graphite drop-shadow. **No glow, no neon, no scale.** Cursor changes to a tiny chisel-bevel SVG cursor while over a tool. Use `cursor: url("data:image/svg+xml;...") 4 4, pointer;`. - **Unfolding apron:** on first scroll-after-8-seconds, the canvas apron rises from the bottom of the viewport over 1.6 seconds with a slight asymmetric ease (canvas physics — heavier on the brass-grommet side). It uses a **path-draw-svg** technique (22% in corpus) to draw the canvas seams and pencil-stub pockets in real-time as the apron rises. Once the apron is up, normal vertical scroll engages the order-book pages. - **Order-book pages** stack with **fade-reveal** (6% in corpus) at ±0.4° random rotation. Page corners are slightly creased SVG paths. A red silk **ribbon-marker** (`#7a1f1f`) hangs out the bottom-right of the book and *physically* responds to scroll — a tiny springy `cursor-follow` (22%) sway driven by a 1-line damped-spring JS. - The **deadman scroll-indicator** is the only "modern" UI affordance, and it is rendered as a real wooden vertical bar with a brass thumbscrew. Drag the thumbscrew to scrub scroll position. - **Evening mode** (bench-dog rotation): a 900 ms cross-fade between two pre-baked light states. Re-bake the SVG `` with warmer values, soften shadows, raise the `#1f1a14` shop-shadow lift. **No theme toggle in any header** — the bench-dog *is* the toggle. New users will not find it. That is intended. - **Storytelling beat:** the order-book contains five real-feeling commissions with handwritten margin notes — *Lot 17: small walnut secretary, glue-up Tuesday, client wants book-matched front*. These are authored as if from a real shop diary; copy must feel intercepted, not marketed. - **Avoid absolutely:** pricing tables, stat grids, testimonials, "Our Process" infographics, animated counters, hero videos, scroll-snap full-bleed sections with overlaid copy, blur backdrop-filter glassmorphism, any neon glow, any animated leaves or particles, any FAQ accordion, any "Get Started" CTA. - **Bias toward immersive narrative:** the user should leave the site feeling they have stood at a master's bench for ninety seconds and watched a chisel be sharpened — not feeling they have visited a portfolio. ## Uniqueness Notes 1. **A literal, fully skeuomorphic top-down workbench as the entire site, with hand-tools as the only navigation.** Skeuomorphic appears in only ~3% of the corpus and is almost always used as soft-UI (rounded buttons, neumorphic cards). Nobody in the surveyed corpus has built **a single photographic-density workbench plan view as the navigation chrome itself**. The closest neighbours (frutiger-aero glossy, neomorphism soft-ui) live in glass-and-plastic rendering languages; namu.works lives in beech, brass, walnut, and waxed canvas. 2. **No gradients anywhere, in a corpus where 81% of designs use them.** Every surface is solid color + procedural grain. This is a structural refusal of the dominant rendering convention of 2025 web design. 3. **No hero text, no CTA, no overlay copy on the landing screen — and the first 8 seconds intentionally reject scroll input.** The bench micro-shakes when scrolled too early. This is an **avant-garde / anti-design** gesture (3% / 3%) executed in service of, not against, craft authority — the tool resists you the way real wood does. No sibling namu.* site, and essentially no surveyed site, holds the user motionless on first load. 4. **Caudex + Bitter + Caveat + Nanum Myeongjo as the typographic stack.** Caudex is essentially absent from the surveyed corpus; the corpus is dominated by Inter (humanist 39%) and Space Mono (mono 81%), neither of which appears anywhere on this site. The deliberate avoidance of `Inter` and `Space Mono` is itself a positioning move. 5. **The wordmark is a red wax seal stamped on cream paper, not a logotype.** It only becomes visible after the apron unfolds — the brand is *literally* withheld until the user has earned it by waiting and scrolling. No other site in the corpus uses a sealing-wax wordmark, and the deferred-reveal mechanic is unique. 6. **Differentiation from sibling namu.* sites.** namu.land is a horizontal-scroll cadastral plate; namu.biz is a vertical anatomical tree cross-section; namu.farm is an inflated-3d hexagonal hydroponic dream. namu.works refuses all three: it is fixed-position, top-down, and has no tree on it at all — only the lumber the tree became. The shared family motif is *namu = wood*; each sibling chooses a different stage in wood's life. namu.works is **the bench, after the tree.** **Chosen seed:** `skeuomorphic soft ui app` (interpreted *not* as soft-UI / neumorphism, but as **photo-density wooden-workshop skeuomorphism** — a deliberate inversion of the seed's usual reading). **Frequency-derived choices:** - PREFERRED (underused, ≤5%): skeuomorphic (3%), slab-serif (2%), leather-texture (2%), warm-earthy (1%), honeyed-neutral (4%), avant-garde (3%), anti-design (3%), single-column-as-stacked-paper (variant of single-column 11%), timeline-vertical (5%), grounded-earthy (6%), raw-authentic (3%), candle-atmospheric-adjacent (4%), generative-art (3%), vector-art (2%), path-draw-svg (22%, used non-decoratively). - AVOIDED (overused, ≥40%): mono typography (81% — none used), gradient palette (81% — none used), parallax (77% — replaced with sticky bench), stagger (68% — single-tool reveals, never staggered grids), photography (80% — replaced with vector-rendered tools), card-grid (50% — there are no cards), dashboard (74% — there is no dashboard), centered (59% — the bench is asymmetrically composed), full-bleed (47% — the bench is full-bleed but everything else lives inside the order book, breaking the convention), friendly tone (66% — the tone is grounded-earthy, not friendly), authoritative (48% — the tone is authoritative-by-craft, not by marketing).