# Design Language for namu.systems ## Aesthetics and Tone namu.systems is **a forestry almanac for software** — "namu" (나무) is the Korean word for *tree*, and this site treats a systems-engineering practice the way a quiet arborist treats a forest: not as a fleet of servers but as a slow grove that is pruned, grafted, and overwintered. The aesthetic is **wabi-sabi infrastructure** — the deliberate imperfection of a hand-cut botanical plate crossed with the cold legibility of a dependency graph. Picture the back rooms of a 19th-century natural-history museum, where someone has pinned a circuit diagram next to a pressed maple leaf and decided the two belong on the same card. The tone is **zen-contemplative, grounded-earthy** — never the breathless "ship faster" register of a SaaS landing page. Copy speaks in the patient voice of a field notebook: *"This branch was reinforced in the third winter. It now carries four times its original load."* Whitespace is treated as forest floor — open, unhurried, faintly damp. Nothing strobes, nothing nags. The page should feel like walking into a cool conservatory after a noisy street: the temperature drops, the light goes green-gold, and you slow down without being told to. Crucially, this is **not** a "nature-themed tech startup" with leaf emojis and a gradient mesh. There is no gloss, no frost, no neon. The arboreal metaphor is structural and earnest — growth rings *are* the version history; root systems *are* the dependency tree; deadwood pruning *is* deprecation. The tree is the system. ## Layout Motifs and Structure The composition is **ma-negative-space** built on a **growth-ring grid**: instead of a uniform 12-column lattice, the page is organized as a set of **concentric arcs** radiating from a single seed-point in the upper-left margin. Each major section is a "ring" — a band of content that curves almost imperceptibly (a 2200px-radius arc, so the curvature reads as a *feeling* rather than a shape), with the oldest/foundational content in the innermost rings and the newest at the outer edge. Reading top-to-bottom is reading the tree from heartwood to bark. - **The seed-point.** A single fixed anchor at roughly `12vw / 14vh` from which all rings, all hairlines, and all leaf-vein dividers originate. Every SVG stroke in the page can trace its geometry back to this one coordinate. It is never labeled; it is just felt as the gravitational center. - **Vertical bias, single living column.** One column, ~62ch wide, drifting slightly left or right ring-by-ring as a real trunk leans. No sidebars, no card-grid, no bento boxes. Content is *stacked like sediment*, not *tiled like tiles*. - **Margin marginalia.** The wide outer margins are not empty — they hold tiny right-aligned "field annotations" in mono: ring numbers, dates set as `WINTER 14`, latin-binomial-style labels for each system component (`Systema radicale` for the data layer, `Phloem` for the API surface). These never scroll into the main column; they live in the gutter like pencil notes. - **Leaf-vein dividers.** Sections are separated not by horizontal rules but by a single hand-plotted **midrib-and-veins SVG** that grows leftward across the page as you scroll past it (`path-draw-svg`, underused at 39% but here used *organically* rather than as a flourish). - **No hero.** The page opens mid-thought, on the seed-point and three lines of text, the way a field guide opens on a plate, not a billboard. ## Typography and Palette **Fonts (Google Fonts only — a two-voice pairing: an engraver's serif for the almanac, a precise mono for the field annotations):** - **Display & Body — *Cormorant Garamond*** (weights 300, 400, 500; italics used freely). A high-contrast Garamond revival with reedy, almost botanical stems — at large sizes the thin strokes look like leaf veins, which is exactly the point. Headings set at 300 weight, 64–110px, generous `line-height: 1.15`, letter-spacing slightly negative. Body at 400, 20–22px, `line-height: 1.85` — wide leading so paragraphs breathe like spaced saplings. Pull-quotes and the "field notebook" passages set in 400 *italic*, slightly indented, as if handwritten in the margin. - **Annotations, ring numbers, code, latin labels — *Spectral SC* for the small-caps latin binomials** (e.g. `Systema Radicale`), and ***JetBrains Mono*** (weight 400, 11–13px, `letter-spacing: 0.12em`, uppercase) for ring counters, dates, and any literal code or config shown. The mono is the *cold instrument* against the serif's *warm specimen*. - **One concession to playfulness:** the wordmark "namu" may be set in Cormorant Garamond 300 with the *u* descender extended downward into a hairline root that connects to the first leaf-vein divider. **Palette — `forest-green` (underused at 4%) deepened into a herbarium register, warm-neutral paper, oxidized-copper accent:** - `#1B2A1F` — **Heartwood Green**: the primary text color and the darkest rings. Not black — a near-black green with the warmth of wet bark. - `#F4F0E4` — **Pressed-Paper Cream**: the page ground. The flat, slightly yellowed white of old herbarium mounting board. No pure `#FFFFFF` anywhere. - `#3F6B4A` — **Living Sap**: mid-green for the leaf-vein SVGs, the growth-ring arcs, and hovered links. The color of a sun-backlit leaf. - `#7A8B6F` — **Lichen Grey-Green**: muted secondary text, the gutter annotations, hairline borders. - `#A6552E` — **Oxidized Copper**: the single warm accent — used sparingly for the seed-point glyph, the "current ring" marker, and emphasis. Reads as both rust on a herbarium pin *and* the cut face of cedar. - `#D9CBA8` — **Cambium Tan**: optional fill for the innermost ring band and for the recessed "specimen card" backgrounds. Contrast pairings: Heartwood Green on Pressed-Paper Cream for all body; Living Sap on Cream for links (with a vein-draw underline on hover); Oxidized Copper used at <5% of surface area, ever. ## Imagery and Motifs **No photography. No 3D renders. No gradient meshes. No stock illustration.** Every visual is a hand-built SVG line drawing in the spirit of a Curtis's Botanical Magazine plate — single-weight strokes, the occasional fine stipple, never a fill where a line will do. - **The Cross-Section Plate (the centerpiece).** One large, slowly-drawn SVG of a tree trunk cut clean: concentric growth rings, each ring labeled with a year/version, a few rings visibly thicker ("good years" = major releases), one ring scarred ("the incident"), the bark cracked in a hand-irregular way. This is the site's logo, hero, and table of contents at once. Rings illuminate one at a time as you scroll. - **The Root System.** Below the fold, an inverted dendrite of roots — this is the literal architecture/dependency diagram, drawn as a botanical root plate, each rootlet ending in a tiny mono label. Roots that are "load-bearing" are drawn heavier. - **Leaf-vein dividers** (described above) — midrib + secondary veins, plotted from the seed-point, redrawn fresh per section so no two leaves are identical (a `generative-art` touch — pull a seeded random for each vein angle within ±7°). - **Pressed-specimen corners.** Section headers carry a tiny SVG of "tape" — four faint diagonal strokes at the corners as if the section were a leaf taped onto the page. Imperfect on purpose: each piece of tape is rotated a random 1–3°. - **Pinning pins.** Anchors / footnotes rendered as tiny entomology-pin SVGs (Oxidized Copper head, Lichen shaft). - **Stippled grain.** A very faint SVG-filter `feTurbulence` paper grain over the whole ground — barely perceptible, the tooth of mounting board. - **Motifs to weave throughout:** growth rings, leaf venation, root dendrites, deadwood/pruning scars, the changing of seasons as the unit of time (`WINTER 14`, never `v14.0.2`). ## Prompts for Implementation Build namu.systems as **a single-route, vertically-scrolled botanical almanac of a software practice** — one HTML file, one CSS file, one JS module. The reader should feel they are turning the pages of a field guide where every plate happens to describe an engineering system. Target a calm 70–90 second descent from heartwood to bark. **There is no CTA bar, no pricing table, no stat grid, no testimonial carousel, no "trusted by" logo wall, no email-capture popup, no feature-comparison cards.** There is the tree, and the notes pinned beside it. **Storytelling structure (rings, top to bottom, each separated by a fresh leaf-vein divider that draws on scroll):** 1. **The Seed-Point.** Page opens on near-empty Pressed-Paper Cream. Upper-left: a single small Oxidized-Copper glyph (the seed). Three lines of Cormorant 300: the practice's name as "namu" with its rooting *u*, then a one-line statement of intent in the field-notebook register. The Cross-Section Plate is faintly visible, undrawn, like a watermark. 2. **Heartwood — Origins.** Innermost ring. What the practice is founded on — the oldest commitments, the load-bearing beliefs. Cambium Tan background band. The first 2–3 growth rings of the Cross-Section Plate illuminate as this ring scrolls into view (`scroll-triggered` line-draw on the SVG paths — `stroke-dashoffset` animation, easing slow-in slow-out, never bouncy). 3. **Growth Rings — What We've Built / Seasons.** The full Cross-Section Plate now front and center, fixed for a moment while text scrolls *past* it; each ring lights up in turn, its margin annotation (`WINTER 9`, `Systema Radicale reinforced`) fading in to the gutter. One ring is the scar — pause on it, a sentence about the incident and what changed. 4. **The Root System — Architecture.** Scroll reveals the inverted root plate beneath. Hovering a rootlet (`underline-draw` style, but the *vein* itself thickens slightly — a `morph` of stroke-width, 200ms) surfaces a one-line mono label of that component. No modal, no tooltip box — the label is already in the gutter and just brightens. 5. **Pruning — What We Removed.** A short, honest ring about deprecation and deadwood: a few branch SVGs drawn, then a hand-cut line through them, the cut face shown in Oxidized Copper. Calm, not dramatic. 6. **Grafting — How We Work With Others.** Collaboration / process, illustrated as a graft union — two stems bound with the random-rotated "tape" SVG. 7. **Bark — Contact / Colophon.** Outermost ring. A quiet way to reach the practice (a single mailto link with a vein-draw underline; an entomology-pin anchor), plus a colophon: fonts named, "drawn by hand in SVG," the seed-point coordinate printed in mono as a sly easter egg. **Motion & interaction principles:** - **Everything that animates, *grows*** — line-draws (`stroke-dashoffset`), leaf-vein extensions, ring illuminations, fades-up of marginalia. Easing is always slow, vegetal: `cubic-bezier(0.22, 0.61, 0.36, 1)`. **Never** spring, never elastic, never bounce — trees do not boing. - **No cursor-follower, no magnetic buttons, no parallax-on-everything.** One restrained custom-cursor touch is permitted: near the Cross-Section Plate the cursor becomes a thin Lichen crosshair (a botanist's loupe reticle), and *only* there. - **Reduced-motion:** all line-draws resolve instantly to their final drawn state; the plates are still beautiful static botanical illustrations. - **Type sets the rhythm:** wide `line-height`, long measure, generous section padding (`clamp(8rem, 14vh, 12rem)` top/bottom). Let the page breathe like understory. - **Sound:** none. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Wabi-sabi rendered as a botanical *herbarium plate*, not as ceramics.** Wabi-sabi sits at 8% and almost always appears as "imperfect ceramic / clay vessels." namu.systems is, as far as the corpus shows, the only one to express wabi-sabi imperfection as a 19th-century pressed-specimen / botanical-engraving aesthetic — randomized tape rotations, hand-irregular bark cracks, no two leaf veins alike. 2. **`forest-green` palette (4%, underused) pushed into a true herbarium register** — Heartwood Green `#1B2A1F` as text, Pressed-Paper Cream `#F4F0E4` as ground, with a single Oxidized-Copper `#A6552E` accent doing the work of a rusted entomology pin. No `#FFF`, no green-on-black "eco tech" cliché, no gradient mesh. 3. **A growth-ring concentric-arc grid instead of a column grid** — sections are *rings* radiating from one seed-point; reading down the page is reading a trunk from heartwood to bark. The Cross-Section Plate doubles as logo, hero, and table of contents. 4. **The arboreal metaphor is structural, not decorative** — growth rings *are* the changelog (`WINTER 14`, never `v14.0.2`), the root dendrite *is* the architecture diagram, pruning *is* deprecation. The tree is the system, earnestly. 5. **Explicitly avoids the corpus's near-universal patterns:** no glassmorphism (79%), no hand-drawn-doodle aesthetic (96%) — line drawing here is engraver-precise, not sketchy — no photography (98%), no card-grid (90%), and motion deliberately rejects `spring`/`magnetic`/`cursor-follow` (81–89%) in favor of slow `path-draw-svg` growth. 6. **Two-voice typography**: Cormorant Garamond's vein-thin serifs as the *specimen*, JetBrains Mono / Spectral SC small-caps as the *cold instrument label* — warm botanical plate vs. cool taxonomic tag, on the same card. Chosen seed/style: **japanese zen portfolio** → reinterpreted as `aesthetic: wabi-sabi, layout: ma-negative-space, typography: elegant-serif, palette: forest-green, patterns: path-draw-svg, imagery: line-illustration, motifs: leaf-organic, tone: zen-contemplative`. Avoided patterns from frequency analysis: glassmorphism (79%), hand-drawn (96%), photography (98%), card-grid (90%), full-bleed hero (88% / 12%), parallax (91%), cursor-follow (89%), magnetic (81%), spring (85%).