# Design Language for namu.biz

## Aesthetics and Tone

**Concept: The Ringkeeper's Ledger — a timber concern that has kept its books inside the trees.**

*Namu* (나무) is Korean for "tree." namu.biz is built as if a small, century-old forestry house wrote its accounts not on paper but in wood — every fiscal year a growth ring, every drought a thin pale band, every good year a fat dark one. The site is a single felled cross-section, sanded smooth and lacquered, lying on a workbench under a low warm lamp. You read it from the pith (the founding year, dead center) outward to the bark (today). It is **skeuomorphic** in the honest, tactile sense — not glossy chrome buttons, but the believable physics of *real material*: end-grain that catches light, sawdust in the bevels, a steel rule laid across the slab, a brass loupe you can drag over the rings to magnify them. The tone is **grounded-earthy** — patient, unhurried, the voice of someone who measures in decades and trusts that wood does not lie. No urgency, no conversion funnel; just the slow satisfaction of counting rings and finding the story already carved in.

Mood references: a luthier's bench at dusk; the polished trunk-slice tables in a Pacific Northwest visitor center with little brass year-markers pinned to rings ("Magna Carta — 1215"); Wendell Berry's prose; the smell of cut cedar.

## Layout Motifs and Structure

A **timeline-vertical** spine, but bent into the only shape that makes sense here: the scroll *is* a journey from center of the slab to its edge. The page is one tall column, ~600vh, and the controlling visual is a fixed wood-slab "viewport" — a large rounded rectangle of end-grain, centered, that stays put while the *rings beneath it advance* as you scroll. Early scroll = you're looking at the dense tiny rings near the pith (the founding decades). Late scroll = the wide outer rings and finally the cracked, mossy bark (the present).

- **The Pith (chapter 1, top):** dead-center on the slab, a tight knot of concentric rings, the founding year stamped in a brass medallion at the exact core. Heavy, small, dense.
- **The Inner Wood (chapters 2–4):** as you scroll, the "lamp" pans outward; new rings slide into the slab from the edges toward where you're reading. Each ring that passes under a fixed horizontal "reading rule" (a thin steel straightedge across the slab) triggers its annotation card to slide out from the slab's margin on a hairline leader-line — a year, a single sentence of what that ring holds. Cards alternate left/right margin (the only "asymmetry," and it's structural, not decorative).
- **The Sapwood (chapter 5):** rings go pale and wide; the annotations get sparser and the wood lighter — recent years, still "alive."
- **The Bark (chapter 6, bottom):** the slab's edge — rough cambium, a sliver of moss, the saw-kerf. The closing statement sits *in the bark*, set as if branded.

No card-grid anywhere. No hero-with-CTA. No nav bar — instead a slim **caliper gauge** pinned to the right edge: a vernier scale whose jaws spread as you scroll, reading out "Ring 1 of N." Negative space is the unmarked wood between rings; let it breathe.

## Typography and Palette

**Typefaces — Google Fonts only, three families:**

- **Zilla Slab** (display + ring annotations) — the slab-serif voice. Slab-serif is rare in the corpus (~3%). Used at 64–104px for chapter headers, weight 600, tracked tight (-0.01em); used at 19–22px weight 400 for the ring annotation sentences. Slab serifs read "stamped into wood, surveyor's monument, customs ledger" — exactly the register we want. Never italic in headers; italic 400 only for the tiny botanical Latin names.
- **Source Serif 4** (long-form body, the few paragraphs of "house history") — a warm, readable transitional serif at 17–18px, line-height 1.7, color the dark-bark ink below. Generous measure (~62ch). This is the only place real running prose appears.
- **IBM Plex Mono** (numerals, the caliper readout, ring counts, the steel-rule tick labels) — used *only* for numbers and measurement chrome, 12–14px, letter-spacing +0.04em. Monospace numerals keep the gauge from jittering as digits roll. (Mono is near-universal in the corpus, so we confine it strictly to instrument labels — it never carries content, only measurement.)

**Palette — `forest-green` core, warm wood neutrals around it (minimum 3, here eight):**

- `#1E1A12` — **bark-ink**: near-black warm brown, primary text, the deep cracks between outer rings.
- `#3B2F1E` — **heartwood**: dark roasted-walnut brown, the dense early rings.
- `#8A6A3E` — **sapwood**: mid honeyed oak, the wide middle rings, default ring stroke.
- `#D9C29A` — **planed-pine**: pale sanded blond, the lightest growth bands and the slab's lit face.
- `#F2E8D5` — **sawdust**: warm cream, page background / the bench surface in light areas.
- `#1F3D2B` — **forest-green** (the signature): deep conifer green for the moss in the bark, the brass-medallion patina, link underlines, the caliper's etched scale. Forest-green sits at only ~4% in the corpus.
- `#4E6E4A` — **lichen**: a soft sage, used sparingly for hover states and the "still-alive" sapwood glow.
- `#9C7A2E` — **brass**: aged-gold metallic accent for the pith medallion, year-pins, and the steel-rule's brass fittings (rendered with a subtle CSS conic-gradient sheen — that's the skeuomorphic flourish).

Light by default (a slab under a lamp). One inversion: chapter 6 / the Bark goes dark — bark-ink ground, planed-pine text — like the lamp moved behind the slab.

## Imagery and Motifs

**Everything is CSS/SVG/canvas — zero stock photography.** Three motif families:

1. **leaf-organic + the growth ring (the load-bearing visual).** The rings are *generated*, not drawn by hand: a small canvas/SVG routine lays down ~N concentric near-circles with deliberate eccentricity (real rings aren't perfect), varying stroke width and darkness per "year" — fat dark = good year, hair-thin pale = drought. Knots are rendered as the rings bulging and swirling around an invisible branch point. End-grain texture: a fine layered noise (CSS multiple-`box-shadow` or an SVG `feTurbulence` displacement) so the wood looks *cut*, not printed. Around the slab's rim, a ragged bark edge done as an SVG path with `feDisplacementMap`; a couple of `leaf-organic` silhouettes (a single oak leaf, a pine sprig) tucked into chapter dividers, drawn as flat dark-green vector marks, never busy.

2. **The instrument set (skeuomorphic chrome).** A **brass loupe / magnifier** the visitor can drag across the slab — under it, the rings render at higher detail and a tiny mono-type readout shows the ring's year and width in mm. A **steel reading-rule** (the fixed horizontal straightedge) with engraved ticks and brass end-caps, faint drop-shadow onto the wood. The right-edge **vernier caliper** gauge. All metal gets a restrained conic-gradient highlight + 1px inner shadow — believable, not blingy.

3. **Annotation as wood-branding.** Each ring's note connects to its ring by a thin leader-line (`path-draw` reveal as it enters frame — used here because it literally mimics scribing a line across grain). Chapter titles look *branded into* the slab: text with a soft inset `text-shadow` and a faint scorch-brown halo, as if burned in with an iron.

## Prompts for Implementation

Build namu.biz as **one HTML document, one CSS file, one small vanilla-JS ES module** — no framework, no router, no build step beyond a minify pass. It is one continuous vertical scroll, ~600vh, six chapters, narrating *one story*: a family timber house's century told ring by ring. Storytelling is the spine; there is no menu, no second page, no pricing block, no stat-grid, no testimonial wall, no email-capture. If a section feels like a "feature card," delete it and turn it back into a ring.

**The slab is fixed; the rings move.** A `position: fixed` centered rectangle holds a `<canvas>` (or layered SVG) of the wood. On scroll, you do *not* translate the page content past a static image — you advance a `ringProgress` value 0→1 and re-render: at 0 the camera is zoomed into the pith; at 1 it's at the bark. Use `requestAnimationFrame` + a single scroll listener writing to a normalized variable; never animate per-scroll-event directly. Respect `prefers-reduced-motion`: collapse to a static full-slab image with all annotations shown at once, scroll just moves the page.

**Generate the rings.** Seed a deterministic PRNG (so the tree is the same on every load). Lay ~80–140 rings; vary `lineWidth` 0.5–4px and stroke alpha by a pseudo-climate curve; jitter each ring's radius with low-frequency noise so circles wobble like real growth. Add 2–4 knots (local swirl). The pith gets the brass medallion with the founding year in Zilla Slab. This is `generative-art` in service of realism, not abstraction.

**Annotations enter on a leader-line.** As `ringProgress` crosses each annotated ring, fire a `path-draw-svg` on its leader (stroke-dasharray reveal, ~500ms, ease-out), then `fade-reveal` + a 6px `slide-reveal` of the card from the slab margin. Cards alternate sides. Use `stagger` only within a card (year, then sentence, then the tiny mm measurement). Keep transitions in the 350–550ms band, ease-out, nothing springy or bouncy — wood is heavy.

**The loupe.** A draggable circular element; while held over the slab, it renders a magnified clipped copy of the canvas at that point + a mono readout. On touch, it follows the finger. `cursor-follow` is *not* used globally — only this object tracks the pointer, and only while grabbed. Magnetic snap of the loupe to the nearest ring center is a nice touch (the one `magnetic` flourish).

**The caliper gauge** on the right edge: an SVG of two caliper jaws + a vernier scale; `transform` the jaws apart as a function of `ringProgress`; the mono numerals roll with `counter-animate`. It is the only navigation affordance.

**Texture discipline.** End-grain noise must be subtle enough to read text over it where text sits (lay text on the *planed* lighter zones, or on a faint cream card with a 1px brass keyline). Metal sheens: one conic-gradient + one inner shadow each, no more. The dark Bark chapter inverts ground/text but keeps the same wood logic — just lamp-behind.

**AVOID:** CTA-heavy hero, pricing tiers, stat counters as decoration, glassmorphic frosted panels, parallax-for-its-own-sake, neon, dark-mode-by-default, card-grid feature sections.

## Uniqueness Notes

Differentiators this design commits to — none should be duplicated by any other CMassC site:

1. **The scroll IS dendrochronology.** A fixed wood slab whose growth rings *advance under a fixed reading-rule* as you scroll from pith to bark — the timeline is literally the radius of a tree. No other site in the corpus uses a procedurally-generated tree cross-section as both the layout engine and the data structure. The fusion of `timeline-vertical` (~3%) with a generated ring-canvas is the load-bearing conceit.
2. **Honest skeuomorphism, not chrome.** `skeuomorphic` sits at ~4% and almost always means glossy iOS-6 buttons; here it means *believable cut wood, brass fittings, a steel rule, and a draggable loupe* — material physics, not gloss. The brass-loupe-magnifies-the-rings interaction is unique.
3. **Slab-serif confined to "stamped in wood."** `slab-serif` typography (~3%) used deliberately for the surveyor's-monument / branded-into-the-grain register, with monospace strictly quarantined to instrument readouts — a clean three-voice split most sites don't enforce.
4. **forest-green as patina, not foliage.** The ~4% `forest-green` palette appears not as leaves or "eco" branding but as *moss in the bark and aged brass patina* — a green that only shows up at the very edge of the wood. Warm wood neutrals (eight of them, heartwood→sapwood→planed-pine→sawdust) carry the body.
5. **No conversion surface at all.** Per the frequency analysis I deliberately avoid the corpus-saturated patterns — `card-grid` (90%), `parallax` (92%), `cursor-follow` (89%), `glassmorphism` (78%), `magnetic` (80%) are either absent or reduced to one tiny justified flourish each. The site sells nothing on screen; it just lets you count rings.

Chosen seed/style: *aesthetic: skeuomorphic, layout: timeline-vertical, typography: slab-serif, palette: forest-green, patterns: path-draw-svg, imagery: nature-elements, motifs: leaf-organic, tone: grounded-earthy.*
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:46:06
  seed: unspecified
  aesthetic: Concept: The Ringkeeper's Ledger — a timber concern that has kept its books insi...
  content_hash: b77722923142
-->