# Design Language for namu.club ## Aesthetics and Tone namu.club ("namu" — 나무 — the Korean word for *tree*) is a **xylological reading-room**: a private dendrology society that meets inside the cross-section of a felled trunk. The aesthetic is **botanical-illustration plate-work crossed with dark-academia archive dust** — picture a 19th-century forestry monograph (the kind with hand-engraved leaf venation and hand-lettered Latin binomials) that has been left open on a green-baize library table beside a magnifying loupe and a pot of iron-gall ink. Nothing glossy, nothing neon, nothing photographic. Every surface is **aged rag-paper warmth**, every line is **engraver's hairline**, every block of color is the **flat matte of a watercolor wash that dried too fast at the edges**. The tone is **scholarly-intellectual with a grounded-earthy patience** — it speaks the way a person speaks when they are kneeling next to a sapling: quiet, unhurried, slightly reverent, never selling anything. The site should feel like it could be read by candlelight. Warmth comes not from sunset gradients but from **the way old paper holds lamplight** and **the way moss greens against bark browns**. There is a faint melancholy here — the club studies things that outlive everyone in it — but it is the good kind of melancholy, the kind that makes you plant something. ## Layout Motifs and Structure The organizing metaphor is the **tree-ring chronology** — a stump read from the centre outward. The entire site is a **single immersive vertical scroll** structured as **concentric annual rings**: the viewport opens dead-centre on the pith (the heartwood, the origin), and as the visitor scrolls, the page expands ring by ring through successive "growth years," each ring a horizontal band of content with a slightly different paper tone and a hand-inked ring-boundary line (a wavering SVG path, never a clean rule). - **Timeline-vertical spine** (only 3% in the frequency analysis — this site claims it): a thin engraved vertical line runs down the exact horizontal centre of every band, like the core sample a forester drills. Section markers hang off it as small ringed nodes. - **Layered-depth** (10%, underused): three paper plies — back ply (the deepest aged sheet), mid ply (the illustration plate), front ply (hand-lettered captions and the loupe cursor) — each parallaxing at a different rate so the page feels pressed, not flat. - **Ma negative space**: generous unprinted margins, the way a scientific plate leaves room for the engraver's signature. Content never touches the edge. - **No card-grid, no bento-box, no dashboard.** Bands stack like pressed specimens in a herbarium folder — asymmetric, each band weighted left or right depending on whether the illustration "grew" toward light on that side. - A persistent **brass loupe** follows the cursor; passing it over a leaf illustration reveals the venation detail and the Latin caption beneath, as if magnified. Band sequence (rings, centre → bark): 1. **Pith** — the wordmark "namu.club" set tiny at true centre, a single seed-dot. 2. **Heartwood** — what the club is, in two engraved paragraphs. 3. **First growth ring** — the founding, hand-dated. 4. **Sapwood rings** — the practices: grafting circle, seed library, the walking survey. 5. **Bark** — how to be let in (a quiet invitation, not a CTA). 6. **The forest floor footer** — fallen leaves, a colophon, the society's seal. ## Typography and Palette **Fonts (Google Fonts only):** - **Display, wordmark, ring-year numerals — *Cormorant Garamond* (weights 300 / 500 / SemiBold 600, with true italics).** A high-contrast garamond revival with long, almost botanical ascenders; set large and airy for band titles, set in italic for all Latin binomials. The thin weight at large sizes reads like an engraver's title plate. - **Body & engraved paragraphs — *EB Garamond* (regular 400, italic).** Warm old-style serif with the ink-trap irregularities intact; long passages feel like a forestry monograph, not a webpage. - **Hand-lettered captions, ring labels, marginalia — *Caveat* (regular & 600).** A real handwriting face used sparingly for specimen tags, drill-core notes, the "verso" annotations beside each illustration — the field-notebook voice. - **Society seal & micro-labels — *IM Fell English SC* (small caps).** For the colophon, the seal motto, the "MEMBER" and "EST." stamps — antique press small-caps with deliberately worn serifs. **Palette (matte washes over aged paper — minimum hand-mixed five):** - `#F3EAD8` — *foxed rag paper* (the base sheet, slightly uneven) - `#E7D9BE` — *deeper aged ply* (back layer, the shadowed margin) - `#3B5A3A` — *moss verdigris* (primary ink-green for headings and the ring spine) - `#6E8B5A` — *young leaf* (secondary green, fresh-growth accents, hover states) - `#6B4A2E` — *bark umber* (rules, the loupe rim, body links) - `#2B2014` — *iron-gall near-black* (body text — never pure #000) - `#A8492C` — *fox-red lacquer* (the society seal, a single warm punctuation, autumn leaf accents) - `#C9B98F` — *lichen ochre* (band-tone shift on alternating rings) ## Imagery and Motifs **No photography, no 3D renders, no stock anything.** Every visual is **hand-built SVG line-illustration in the spirit of a botanical engraving** — line-illustration sits at only 11% in the frequency analysis, photography at 98%; this site refuses the crowd. - **The concentric ring system itself** is the hero graphic: nested wavering circles drawn as SVG paths with subtle hand-jitter, each ring labelled in *Caveat* with a fictional growth year, slowly rotating a fraction of a degree on scroll like a slab settling. - **Leaf-organic plate engravings** (leaf-organic motif 7%, underused): five recurring specimen illustrations — a ginkgo fan, a pine cluster, an oak lobe, a willow blade, a maple star — each rendered as fine cross-hatched line art with a hand-lettered binomial tag. They live in the mid ply and respond to the loupe. - **The drill-core sample**: a thin horizontal SVG strip running the centre spine, showing alternating light/dark "rings" like a real increment borer pull. - **Pressed-specimen corners**: each content band's illustration is "mounted" with four tiny ink corner-marks, like photo corners in a herbarium folder. - **Iron-gall ink blooms**: faint, irregular SVG splotches in `#2B2014` at low opacity, bleeding at the edges, used as section punctuation — the look of a dip pen resting too long. - **The society seal**: a circular IM-Fell-small-caps emblem — a stylized cross-section stump with a motto ring — stamped in `#A8492C` at the colophon, slightly off-register like a real wax-then-ink press. - **Falling leaves** on the footer only: three or four SVG leaves drifting on a slow sine path, settling at the bottom edge. ## Prompts for Implementation Build namu.club as **one route, one long vertical scroll, one HTML file + one CSS file + one JS module** — a roughly 70-second descent through a stump read from its centre. There is **no CTA, no pricing block, no stat grid, no testimonial row, no email-signup band, no feature cards.** There is only the ring sequence and the loupe. **Storytelling structure (rings, vertical scroll, fade-reveal + scroll-triggered):** 1. **Pith.** Open with the viewport nearly full of warm `#F3EAD8` paper grain; dead centre, a single dark seed-dot and the words "namu.club" in tiny Cormorant italic. A first faint ring is being inked around it (SVG `path-draw-svg`, 3% in frequency for path-draw... actually path-draw is 39% — *use it sparingly and only for the ring boundaries*, not as a gimmick everywhere). 2. **Heartwood.** As the visitor scrolls, the centre stays put while a ring expands outward; two engraved EB-Garamond paragraphs fade up inside the ring, left-weighted, with a ginkgo plate mounted on the right under its binomial tag. The loupe cursor, when it crosses the ginkgo, magnifies the venation in a small inset. 3. **First growth ring.** A wavering ring-boundary line draws itself across the band; a *Caveat* hand-label reads a fictional founding year; the band tone shifts to `#C9B98F` lichen ochre. The drill-core strip on the centre spine adds one more ring. 4. **Sapwood rings (three sub-bands).** The grafting circle, the seed library, the walking survey — each its own ring, each with one line-engraving (pine, oak, willow), each band alternating left/right weight and paper tone. Text appears with a slow `fade-reveal`; the centre spine threads through unbroken. Parallax: back ply moves slowest, illustration mid ply medium, *Caveat* captions float fastest. 5. **Bark.** The outermost ring before the edge — the invitation. Quiet EB-Garamond prose, no button styling; if there must be a way in, it is a single underlined link in `#6B4A2E` that draws its underline on hover (`underline-draw`, 16%) like a pen finishing a word. An iron-gall ink bloom punctuates the end. 6. **Forest floor (footer).** The page bottoms out on `#E7D9BE`; three or four SVG leaves drift down on slow sine paths and settle; the IM-Fell society seal is stamped off-register in `#A8492C`; a tiny colophon names the typefaces as if crediting an engraver. A maple-star plate sits in the corner with its binomial. **Motion rules:** everything is *slow* — easings long and gentle, nothing springs or bounces; the rings rotate by fractions of a degree on scroll; the loupe is the only fast-tracking element and even it lags slightly behind the cursor like real brass has weight. Honour `prefers-reduced-motion` by freezing all ring rotation and parallax and simply showing the bands stacked. Texture: a single tiled SVG/CSS paper-grain at very low opacity over the whole page; a faint vignette so the corners feel lamp-lit. The loupe magnification can be a CSS `clip-path` circle that follows the pointer over the illustration layers. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Tree-ring chronology as the literal layout.** Concentric annual rings expanding from a fixed pith — not a card-grid (90%), not full-bleed hero stacks (88%), not a dashboard (33%). The page *is* a stump cross-section; I found no other corpus design built on a centre-out ring expansion. 2. **Botanical-engraving line-illustration instead of photography.** Photography is at 98% and line-illustration at only 11%; namu.club uses hand-built SVG engravings with hand-lettered Latin binomials and a brass loupe, refusing photographic imagery entirely. 3. **The timeline-vertical spine claimed at 3%.** A single drilled increment-core line down the centre of every band, with ringed nodes — using one of the rarest layout patterns in the corpus, and using it structurally rather than decoratively. 4. **Earthy scholarly stillness over warm-inviting hype.** No CTA, no pricing, no stats, no neon, no gradient meshes — palette is matte washes of moss, bark, foxed paper and a single fox-red seal; motion is deliberately slow and heavy. A counterpoint to the dopamine/glassmorphism mainstream. 5. **A real handwriting face (Caveat) used as field-notebook marginalia** beside engraved Garamond body — the dual-voice of a forester's notebook, not a generic mono+humanist pairing (mono is at 94%; this site uses no mono at all). Chosen seed/style: **botanical illustration garden** (with dark-academia archive dressing, layout: timeline-vertical, motifs: leaf-organic + layered-depth, palette: forest-green / warm-earthy / muted, imagery: line-illustration, typography: garamond-classic + handwritten, tone: scholarly-intellectual / grounded-earthy). Avoided patterns from frequency analysis: photography (98%), card-grid (90%), full-bleed (88%), parallax-as-gimmick / cursor-follow (89%) is reframed as a weighted brass loupe rather than a trailing dot, spring (85%) and magnetic (81%) are dropped entirely in favour of long slow easings, mono typography (94%), warm gradient meshes, glassmorphism (79%), and any CTA/pricing/stat-grid layout.