# Design Language for namu.farm ## Aesthetics and Tone namu.farm is the public ledger of a working tree nursery on a Korean hillside — *namu* (나무) being simply "tree." This is not a flower-shop softness and not a cottagecore daydream; it is the **field-survey aesthetic of people who measure sapling girth with calipers and log frost dates in a hardbound book**. The whole site reads like an open page from a forestry ledger that has learned to breathe: ruled margins, stamped batch numbers, hand-corrected figures, and — drifting over the ruled paper — clean **isometric line-drawings of trees rendered as if surveyed from a 30°/30° axonometric grid**. The mood is **grounded-earthy and quietly authoritative**: a nurseryman showing you the rows, naming each cultivar in dry Latin, telling you which ones took and which ones the deer got. Light is flat northern daylight — no golden hour, no bokeh, no lens flare. The emotional target is *trust earned by precision*: you believe these trees will live because the page in front of you counts everything. There is a faint almanac humor in the marginalia ("Row 7 — replanted thrice, stubborn") but never cuteness. Think: a Forestry Commission planting record crossed with an isometric blueprint of an orchard, printed on recycled card stock the color of dried birch. ## Layout Motifs and Structure The spine is a **single vertical timeline running down the exact center of the page** — a 2px hairline rule with small tick-marks every viewport-height, like a measuring staff (the *jangdae* a forester carries). Each "station" on this staff is one nursery section, and stations alternate: the **left margin holds the ledger text** (cultivar name, batch number, planting notes set as a typed ruled table) while the **right field holds the isometric drawing** of that tree-section sitting on a faint axonometric floor-grid; the next station mirrors it. This is a **timeline-vertical layout, not a card-grid** — there are no cards, no rounded boxes, no shadows; content sits directly on the ruled paper, divided only by hairlines and the central staff. The header is a single ruled "ledger heading": domain name set small-caps at upper-left, a stamped circular batch-seal at upper-right ("PLOT 04 · SPRING"), nothing else — no nav bar, no hamburger, no buttons. Navigation *is* the staff: the tick-marks are clickable and a thin label slides out beside the active tick. The footer is the bottom of the page literally drawn as the bottom edge of the ledger sheet — a doubled rule and a tiny "end of plot" colophon. Generous left/right margins (the unprinted edge of the card) keep the column narrow and bookish on wide screens; on mobile the isometric drawings stack *below* their ledger text and the staff hugs the left edge. ## Typography and Palette **Fonts (Google Fonts only):** - **Headings & cultivar names — `Familjen Grotesk`** (variable, 400–700). A Swedish neo-grotesque with a slightly humanist warmth and a tall x-height; used in small-caps for section headers and in title case for Latin cultivar names. It carries the "civic survey form" voice without feeling cold. - **Ledger body, tables, batch numbers — `Spectral`** (400 / 500 / 400-italic). A workhorse serif with sturdy slab-ish serifs and excellent figures; set in the ruled tables and running notes. Old-style numerals for measurements; the italic carries the hand-corrected marginalia. - **Stamps, tick-labels, micro-captions — `Fragment Mono`** (400). A monospace used *only* at small sizes for batch codes (`NF-2026-07`), grid coordinates, and the staff tick-labels — the typewriter that filled in the form. Tracking `0.08em`, uppercase. **Palette (cool, paper-led — deliberately avoiding the warm-gradient norm):** - `#F2EFE6` — *birch card* — base paper, the unprinted ground. - `#1F2A22` — *forest ink* — near-black green for all type and hairlines. - `#3C5A40` — *nursery green* — primary accent: isometric line-work, active ticks, table rules. - `#7C8B6F` — *sage muted* — secondary fills, inactive ticks, faint axonometric grid. - `#9A3B26` — *stamp oxide* — single hot accent, used ONLY for the circular batch-seal ink, hand-correction marks, and the "replanted" marginalia. - `#C8C2AE` — *card shadow* — the faint ruled-margin lines and the unselected text. No gradients except a single near-invisible vertical paper-tone shift on the body (`#F2EFE6` → `#EDE9DD`). High-contrast text on paper; the oxide red appears on less than 3% of pixels. ## Imagery and Motifs - **Isometric tree-section drawings (one per station, ~7 stations):** each drawn as a flat 2px-stroke axonometric SVG in *nursery green*, no fill, sitting on a 30°/30° dotted floor-grid. Section 01 — *bare-root whips in a trench*, a neat isometric row of leafless 1m sticks angled in a furrow. Section 02 — *a grafted apple cordon on wires*, the graft union drawn as a small bandaged knuckle. Section 03 — *a potted Acer palmatum*, the only drawing allowed a few translucent *stamp-oxide* leaves. Section 04 — *a windbreak hedge in elevation-meets-iso*, alder and hawthorn alternating. Section 05 — *a coppice stool with regrowth poles* fanning up. Section 06 — *a root-ball wrapped in hessian*, twine drawn stitch by stitch. Section 07 — *a mature standard tree* drawn full and calm, the "graduate." - **The measuring-staff motif** recurs everywhere: the central rule, the margin rules, even the loading indicator is a tick climbing the staff. - **Stamp-seals:** circular rubber-stamp roundels in *stamp oxide* with concentric type ("INSPECTED · NAMU FARM · PLOT 04"), placed slightly off-angle (1.5–3°) as if pressed by hand. One per station as a "batch passed" mark. - **Marginalia:** short *Spectral*-italic notes in *stamp oxide* hanging in the left margin, sometimes with a tiny caret pointing at a corrected figure. - **Axonometric floor-grid:** a faint *sage muted* dot-grid only under the drawings, fading at its edges, anchoring the iso world to the ledger page. - **Botanical decimal index:** thin Latin binomials with a Dewey-ish decimal (`Quercus robur — 04.2`) running as quiet captions. ## Prompts for Implementation Build as **one HTML page, one CSS file, one ES module** — no framework, no build step. The page is a roughly 90-second walk down a tree-nursery ledger; it tells the story of a sapling from bare-root whip (Section 01) to mature standard (Section 07). **Do NOT include:** CTA buttons, pricing tables, stat counter grids, testimonial sliders, "trusted by" logo walls, newsletter capture, FAQ accordions, contact forms, cookie banners, chat widgets, hero video. The only "conversion" is reaching the bottom of the plot. **Structure & storytelling:** 1. **Ledger heading** — paper fades in; domain small-caps top-left; the circular *PLOT 04 · SPRING* seal **stamps in** with a 1-frame scale-overshoot and a 2° rotation settle (this is a `spring` entrance — use it sparingly, only on stamps). The central measuring-staff draws downward (`path-draw-svg`) from 0 to first tick. 2. **Seven stations**, alternating left-text / right-iso. As each scrolls into the upper third: the station's hairline rules **draw in left-to-right** (`path-draw-svg`), the ledger table rows do a tight `stagger` reveal (8ms apart, 4px rise, no blur, no bounce), the isometric SVG strokes **trace themselves on** along their own paths over ~700ms, the axonometric dot-grid fades up beneath, and last the stamp-roundel presses in. Use `scroll-triggered` reveals tied to a single IntersectionObserver; respect `prefers-reduced-motion` by showing everything statically. 3. **The staff is the nav.** Tick-marks down the left/center are buttons; the active one gets *nursery green*, a *Fragment Mono* label slides out 10px on hover/focus, and clicking smooth-scrolls to that station. A thin "you are here" bead rides the staff as you scroll. 4. **Marginalia behavior:** hovering a corrected figure in a table makes its *stamp-oxide* margin note + caret fade in (`fade-reveal`, ~200ms); on touch they're shown permanently. 5. **Closing:** Section 07's mature tree sits still; below it a doubled rule, a one-line *Fragment Mono* colophon (`END OF PLOT · NF-2026 · drawn by hand`), and the staff terminates in a final tick. No "back to top" rocket — just the quiet end of a page. **Texture & feel:** add a very low-opacity paper-fiber noise via a tiled SVG `feTurbulence` filter at ~3% alpha over the whole body; nothing else. All hairlines are crisp 1–2px, never blurred. Isometric drawings must keep a true 30° axonometric skew (`transform: skewX/skewY` or pre-baked SVG) — never perspective. Motion budget is deliberately tiny: draw-on lines, staggered rows, three or four spring stamps. No parallax layers, no cursor-trailing particles, no tilt-3D on hover. The page should feel like turning a single, very well-kept page. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **The ledger-staff spine instead of a card-grid.** ~90% of the corpus uses card-grid and ~88% full-bleed; this design has *no cards and no full-bleed sections* — a single narrow bookish column ruled down the center by a literal measuring-staff that doubles as navigation. Content sits directly on ruled paper. 2. **Isometric line-drawings used as botanical specimens, not as tech/SaaS icons.** Isometric appears in only ~12% of the corpus and almost always reads as product/dashboard illustration; here the axonometric grid hosts *trees* — trenches of bare-root whips, grafted cordons, hessian root-balls — turning a "tech" visual language into a forestry survey. 3. **Cool paper palette with a single oxide-red stamp accent — refusing the warm-gradient default.** 98% warm + 95% gradient is the corpus norm; this is birch-card grey-cream, forest ink, two greens, and *one* rust used on under 3% of pixels, with essentially no gradient. 4. **Authoritative-grounded forestry tone, not pastoral-romantic.** A `.farm` domain in this corpus would default to cottagecore/pastoral-romantic (~34% tone); this is a nurseryman's logbook — dry Latin binomials, batch codes, calipered measurements, terse marginalia. 5. **Deliberately minimal motion** in a corpus saturated with parallax (~91%), cursor-follow (~89%) and tilt-3D: only `path-draw-svg` line-tracing, a tight `stagger`, and a few `spring` rubber-stamp presses — no parallax, no cursor particles, no 3D tilt. Chosen seed/style: *aesthetic: isometric, layout: timeline-vertical, typography: grotesque-neo, palette: forest-green, patterns: path-draw-svg, imagery: line-illustration, motifs: leaf-organic, tone: grounded-earthy* Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (79%), photography (98%), card-grid (90%), full-bleed (88%), centered (84%), warm (98%), gradient (95%), parallax (91%), cursor-follow (89%), spring-everywhere (85%), magnetic (81%), pastoral-romantic tone (34%).