# Design Language for namu.land ## Aesthetics and Tone namu.land is **a survey map of a single tree, fired into a slab of unglazed clay**. "Namu" is the Korean word for *tree*; "land" is the ground it stands in. So the entire site is one object: a hand-pressed ceramic tile, roughly A2-sized, on which a cartographer-potter has incised the contour lines of one ancient namu — not the leaves, not the bark, but the *terrain the tree makes* — its root-spread as a watershed, its canopy as an elevation field, its trunk as the survey datum point. The mood is **wabi-sabi imperfect ceramic**: nothing is glossy, nothing is symmetrical, nothing pretends to be new. Edges are uneven. The "paper" is bisque-fired stoneware the colour of cold ash and river silt. The "ink" is iron-oxide wash that has pooled and crawled the way oxide does in a kiln. Tone is **zen-contemplative bleeding into grounded-earthy** — slow, quiet, a little melancholic, the feeling of standing under a tree older than your grandparents and reading its rings like a map legend. There is no excitement here. There is patience. The site should feel like it was *unearthed*, not launched. Reference points: Korean buncheong ware (slip-brushed, casually imperfect); ordnance-survey contour maps from the 1920s; Andy Goldsworthy's leaf-and-stone works photographed in flat light; the cracked-glaze *kintsugi* repair line, but drawn in oxide instead of gold; topographic LIDAR scans of forest floors rendered as bone-white lines on charcoal. The opposite of this site: anything wet-looking, anything neon, anything that bounces. ## Layout Motifs and Structure The page is **one continuous vertical scroll modelled as a core sample** — you are drilling down through the tree-land from canopy-air at the top to taproot-bedrock at the bottom. No card grid. No bento. No hero-then-features. The structure is a **stacked stratigraphy of seven horizontal strata**, each stratum a different "depth" with its own clay tone and its own oxide-line density: 1. **Air / Crown** (top, lightest clay, sparsest lines) — the wordmark *namu.land* incised large, a few stray contour rings drifting like pollen. 2. **Canopy** — the elevation-field of the leaf-mass: dense, nested closed contours, a green-grey oxide pooling in the lows. 3. **First Branch Fork** — the diagonal seam begins here; the strata below are raked. 4. **Trunk / Datum** — a single vertical incised line down the centre, the survey benchmark; the narrowest stratum, almost a held breath. 5. **Soil Line** — the horizon of the design: above is light, below is dark. A rough horizontal scored band, like a kiln shelf line. 6. **Root Watershed** — contours invert and spread, branching downward and outward, the densest oxide pooling of the whole page. 7. **Bedrock / Taproot** (bottom, darkest clay, a single deep line vanishing off-page) — the footer, treated as the bottom edge of the ceramic tile: cracked, unglazed, with the maker's stamp. **The raked seam.** From stratum 3 down, every stratum boundary is a single irregular hand-incised line at roughly **7 degrees off-horizontal**, never a clean rule — drawn as an SVG path with deliberate wobble. Diagonal-sections sit at ~5% in the corpus; this site uses a *gentle* rake, not a dramatic one, so it reads as the natural slump of clay rather than a graphic-design move. **Negative space is the clay body itself.** No section is "full". Each stratum keeps a generous margin of bare bisque around its contour-line cluster — the lines huddle, they do not fill. Asymmetric placement throughout: the trunk datum is *not* centred, it sits at about 44% from the left, the way a real tree refuses your grid. **Reading rhythm:** one stratum ≈ one viewport-height, so the whole site is a roughly seven-screen descent, ~70 seconds at a contemplative scroll. ## Typography and Palette **Fonts — all Google Fonts, three voices, each doing one job:** - **Display / Wordmark / Stratum labels — *Cormorant Garamond* (weight 300 and 500, large optical sizes).** Used at 90px–200px for *namu.land* and for the stratum names ("CANOPY", "SOIL LINE", "TAPROOT") set in small-caps with very wide letter-spacing (~0.5em), so they read like the engraved legend on an old map. Cormorant's needle-thin serifs at light weight look *incised*, scratched into clay with a stylus point. - **Body / Field notes — *Spectral* (weight 400, italic for asides).** A serif with enough warmth and ink-trap personality to feel hand-set, used for the short contemplative passages of text in each stratum. Set generously leaded (1.8), measure kept narrow (~36em), ragged-right. - **Coordinates / Survey marginalia — *Spline Sans Mono* (weight 400).** The only sans, and it's a mono. Used tiny (11–13px) for fake survey data that runs up the left margin of the page like a vertical ruler: "ELEV +14.2m", "GRID 37.5°N", "CORE SAMPLE 03 / 07", "OXIDE WASH Fe₂O₃". This is the site's pulse — quiet machine-text against the handmade everything-else. Mono sits at 94% in the corpus, so here it is deliberately *demoted* to marginalia, never a headline. **Palette — unglazed-stoneware neutrals with oxide wash, NOT the corpus-default warm gradient:** - `#1E1B16` — **bedrock charcoal** (darkest clay, footer, deepest contour ink) - `#3A3127` — **kiln-shadow brown** (lower strata body) - `#6E6353` — **wet-clay umber** (mid strata, secondary text) - `#A89A82` — **bisque grey-tan** (the main "paper" of the upper strata) - `#D6CDB8` — **cold-ash bone** (lightest clay, top stratum, the incised lines on dark grounds) - `#5C6B4F` — **celadon-shadow green** (the canopy oxide pool — the only chromatic note, muted and dirty, never bright) - `#8A5A3C` — **iron-oxide rust** (the kintsugi-repair line, sparing — appears exactly twice on the whole page, where a "crack" in the clay is mended) No gradients except *clay-fade*: each stratum's background is a single flat tone, but the *transition* between two strata is a 1–2vh band where the two tones meet with a grainy dither, not a smooth ramp. High-contrast is avoided; everything sits in the muted middle except bedrock charcoal and cold-ash bone at the extremes. ## Imagery and Motifs **Everything is SVG line-work plus a grain texture. Zero photography. Zero 3D renders. Zero stock illustration. Zero hand-drawn-doodle cartoonishness.** The visual vocabulary is *cartographic*, drawn with the restraint of a survey draftsman: - **Contour lines (the core motif).** Nested closed loops at consistent "interval", thin (0.75px) oxide strokes. They describe the tree as terrain: a dense bullseye where the trunk is, loose wandering rings for the canopy spread, a *negative* watershed of branching lines below the soil line for the roots. Generated once as static SVG paths — irregular, never perfect circles. Where contours cross a stratum seam, they bend, they do not break cleanly. - **The datum benchmark.** A small surveyor's symbol — a circle with a dot, plus a triangle — incised at the base of the trunk. The page's only true geometric primitive. - **Crawl-pooled oxide patches.** Soft-edged irregular fills (SVG with a turbulence filter at low frequency) where "glaze pooled in the lows" — only in the canopy (celadon-shadow green) and the root-watershed (kiln-shadow brown). They look like watercolour bleeds but are matte, not wet. - **The kintsugi crack.** One jagged path running diagonally across two strata, stroked in iron-oxide rust — the ceramic broke and was mended. It is *load-bearing narrative*, not decoration: text near it references the tree's old lightning scar. - **The maker's stamp (footer).** A small impressed seal — three strokes that abstractly read as 木 (the hanja for "tree" / "namu") — bottom-right corner, debossed into the bedrock-charcoal clay. - **Margin ruler.** A faint vertical tick-scale running the full left edge, like the elevation scale on a map, labelled in Spline Sans Mono. Grain: a single fine-noise SVG/CSS overlay at ~6% opacity over the entire page so the "clay" never reads as flat digital colour. ## Prompts for Implementation Build namu.land as **one HTML file, one CSS file, one JS module — a single vertical core-sample through a ceramic tile of one tree's terrain.** No navigation bar. No CTA. No pricing. No stat-grid. No testimonials. No email capture. No "features". The page sells nothing; it is an artifact you scroll *down into*, surface to bedrock. **Narrative spine (seven strata, top to bottom):** 1. **Air / Crown.** Cold-ash bone clay. *namu.land* in Cormorant 200px, incised. A line of Spectral italic: "*A map of one tree, drawn in the language of land.*" A few stray contour rings drift in, drawn by `path-draw-svg` stroke-dashoffset animation as the stratum enters view — slow, 3–4 seconds, like ink seeping. 2. **Canopy.** Bisque grey-tan. Dense nested contours bloom outward; celadon-shadow oxide pools in the centre. Short field-note in Spectral about the canopy "elevation". Margin ruler reads "ELEV +14m". 3. **First Branch Fork.** The 7° rake starts. The contour cluster splits in two; the seam between this stratum and the next is the first irregular incised diagonal. A line about the tree "choosing two ways at once". 4. **Trunk / Datum.** Wet-clay umber, the narrowest stratum. A single vertical incised line down the page at 44%-from-left; the surveyor's benchmark symbol sits at its base. Almost no text — just "CORE SAMPLE 04 / 07 — DATUM" in mono. This is the quiet centre; let it breathe with huge empty clay. 5. **Soil Line.** Kiln-shadow brown. A rough horizontal scored band crosses full-width — the horizon. Above it the contours are sparse; the kintsugi rust crack begins here, running down-left across into stratum 6. Text: the tree's lightning scar, "mended by forty years of growth". 6. **Root Watershed.** Darker. Contours *invert* — they branch downward and outward like a river delta seen from above; kiln-shadow brown oxide pools heaviest here. The densest line-work of the page. A reflective passage about what holds a tree up being invisible. 7. **Bedrock / Taproot.** Bedrock charcoal — the bottom edge of the tile. A single deep contour line runs off the bottom of the screen. The 木 maker's stamp, debossed, bottom-right. A final line of Spectral, small: "*The tree does not end. The map does.*" Footer info (year, the words "made of clay and oxide") in mono, tiny. **Motion — deliberately slow, deliberately un-springy:** - The *only* primary mechanic is **scroll-triggered `path-draw-svg`**: each stratum's contour lines draw themselves in via stroke-dashoffset when scrolled into view, with long durations (2.5–5s) and gentle ease-out — *never* spring, *never* elastic, *never* bounce. Parallax, cursor-follow, magnetic, spring, stagger-pop are all banished — they are at 70–91% in the corpus and they are *wrong* for clay. - One subtle exception: a faint **clay-settle** on the wordmark — on load, *namu.land* fades up from 0 over 1.8s with a 2px vertical drift down, like dust settling. Once. No hover wiggle. - The grain overlay may animate at ~0.5fps (a slow imperceptible jitter) so the clay feels alive without being distracting. - Oxide pools: their turbulence-filter seed shifts *very* slowly (one cycle per ~40s) so the "glaze bleed" breathes. Almost subliminal. - Respect `prefers-reduced-motion`: contours appear already-drawn, wordmark appears static, grain is frozen. **Texture & finish:** flat clay-tone backgrounds per stratum; grainy dither bands at every stratum boundary instead of smooth gradients; the whole page wrapped in a ~6%-opacity fine-noise overlay; the outermost page edge given a 2–4px irregular "torn bisque" border (an SVG mask with wobble) so the site reads as a *physical tile* floating on the browser's default near-black, not a webpage that fills the window. **Voice of all copy:** terse, observational, a survey-draftsman who has fallen a little in love with what they're measuring. Never markety. Never a verb in the imperative. Present tense, short sentences, the occasional fragment. ## Uniqueness Notes 1. **The tree-as-terrain conceit.** Across the corpus, "nature" and "leaf-organic" motifs (13% and 7%) almost always render trees literally — branches, leaves, bark, woodgrain. namu.land never draws a leaf or a branch. It draws the *contour map* of a tree as if the tree were a landform — canopy = elevation field, roots = watershed, trunk = survey datum. The semantic pun (namu = tree, land = ground) becomes the entire visual system. No other site in the corpus treats its subject as cartography. 2. **Wabi-sabi ceramic as the literal substrate, not a vibe.** Wabi-sabi sits at ~8% and tends to mean "muted earth tones + a bit of texture". Here the page is modelled as one fired stoneware tile — torn bisque edges, kiln-shelf lines, glaze-pooled oxide, a kintsugi rust-mend that is part of the story, a debossed 木 maker's stamp. The imperfection is structural, down to "no section is full" and "the trunk is not centred". 3. **Mono demoted to marginalia.** Mono typography is at 94% — effectively universal, almost always as headlines or body. namu.land flips it: the only mono (Spline Sans Mono) appears at 11–13px as survey marginalia running up the left edge ("ELEV +14.2m", "CORE SAMPLE 03 / 07"), while the headlines are thin incised Cormorant Garamond and the body is hand-set-feeling Spectral. 4. **Motion that refuses the corpus's reflexes.** Parallax (91%), cursor-follow (89%), spring (85%), magnetic (81%), stagger (72%) are all explicitly banned. The single primary mechanic is slow `path-draw-svg` contour-drawing (2.5–5s, ease-out only) plus a one-time clay-settle on the wordmark — calm, heavy, ceramic, never bouncy. 5. **Stratigraphic single-scroll, no card-grid / no full-bleed-hero.** Card-grid (90%), full-bleed (88%), centered (84%), hero-dominant layouts are avoided. The page is a seven-stratum core sample drilled top-to-bottom with a gentle 7° rake from stratum 3 down — closest to `stacked-sections` + a touch of `diagonal-sections` (both ~2–5%). Chosen seed/style: **wabi-sabi imperfect ceramic** *(aesthetic: wabi-sabi, layout: stacked-sections + diagonal-sections, typography: elegant-serif + tech-mono-as-marginalia, palette: earth-tones / muted clay neutrals, patterns: path-draw-svg + scroll-triggered, imagery: line-illustration / generative-art contours + grain-overlay, motifs: leaf-organic reframed as cartographic contour + crystalline-free, tone: zen-contemplative / grounded-earthy)*. Avoided patterns from frequency analysis: hand-drawn aesthetic (96%), glassmorphism (79%), photography imagery (98%), warm palette (98%), gradient palette (95%), card-grid (90%), full-bleed (88%), parallax (91%), cursor-follow (89%), spring (85%), magnetic (81%), stagger (72%), mono-as-primary-typography (94%).