# Design Language for namu.quest ## Aesthetics and Tone namu.quest is the working field-journal of a fictional **dendrological survey** — a long, patient ascent through one impossibly large tree. *Namu* (나무) is the Korean word for *tree*, and the site treats that word literally: the entire experience is the act of climbing a single specimen from buried taproot to topmost bud, pausing on each major bough to read what the surveyor pinned there. The aesthetic is **botanical-illustration plate-work crossed with dark-academia archive** — the look of a 19th-century herbarium folio that has spent a hundred years in a university map drawer: rag paper gone the colour of weak tea, copperplate engravings of leaf venation, pressed-and-labelled specimens with their threads still visible, marginalia in two hands (one careful, one hurried), and the faint coffee-ring of someone who worked too late. The tone is **scholarly-intellectual but not cold** — the voice of a naturalist who has clearly fallen a little in love with the subject. Sentences are precise; captions are dated; Latin binomials appear and are then quietly translated. Nothing shouts. There are no calls to action, no "sign up to climb higher," no product. The reward for scrolling is simply *more tree* — another bough, another leaf-plate, another note in the surveyor's hand. Atmosphere over information; the slow vertical ascent over any branching path. It should feel like late-afternoon light through a canopy: dappled, warm at the edges, green-shadowed at the centre, with dust moving in the beams. ## Layout Motifs and Structure The site is **immersive-scroll, single continuous column, full-bleed** — no centred content-well box, no card-grid, no dashboard, no nav chrome. The viewport is the trunk; scrolling *down* is the camera climbing *up* the tree (the scene moves downward past a fixed sense of "up"), so the reader's first instinct — scroll down to read more — becomes the act of ascending. This inversion is the structural spine of the whole thing. **Vertical anatomy (top of page → bottom of page, i.e. crown → root):** 1. **The Bud (overture, 100vh).** A single dormant terminal bud rendered as a hand-inked plate, centred, with the title set small beside it like a specimen label. A 2.6s ink-bleed animation: the bud's outline draws itself on (SVG path-draw), then unfurls one young leaf. Non-skippable; the reader spends the first moments doing nothing but watching a leaf open. 2. **Boughs (the body) — five to seven sections, each ≥100vh.** Each bough is a *plate*: one hand-set tableau combining a large botanical engraving (a leaf, a section of bark, a flower in cross-section, a seed-pod), a column of body prose set like a journal entry, a pinned "specimen card" with thread and a dated label, and one or two marginal notes in a looser hand. Plates alternate which side the engraving sits on, so the eye sways left-right as it descends — a deliberate, slightly drunken **broken-grid** rhythm rather than a tidy alternation. 3. **The Trunk seam.** Between boughs, the column narrows to a single hairline rule — a hand-drawn growth-ring profile — that the reader passes through like a knot in the wood. Each seam carries a tiny year-mark (a fictional survey date) so the descent doubles as a timeline. 4. **Roots (the close, ~140vh).** The plates invert: white-on-dark, the engravings become root systems and mycorrhizal threads, the prose becomes shorter, almost whispered. The final frame is a single seed on dark soil with one line of text. No footer links, no "back to top" button styled as a CTA — just a faint upward arrow that, if used, replays the bud overture. **Spatial rules:** generous *ma* — at least one full empty plate-width of paper around every engraving; captions hang in the margin, never under the image in a caption-block; the body column is asymmetrically placed (never dead-centre) and never wider than ~62ch; all numerals (dates, plate numbers, vein counts) are set in the mono face and right-aligned in the margin like field measurements. ## Typography and Palette **Typefaces (all available on Google Fonts):** - **Cormorant Garamond** — the body voice and the surveyor's "careful hand." Variable, used at 400 for prose, 500 italic for the translated binomials and pull-passages. Set ~1.0625rem, line-height ~1.8, slightly loose tracking. It has the faintly hand-cut irregularity of a private type revival, which suits a one-person survey. - **EB Garamond** — used *only* for the largest plate headings ("Bough I — The Sun Leaves", etc.), 600, with old-style figures, set large but never huge; headings are weighty by gravity, not by size. - **Caveat** — the "hurried hand": marginalia, the dated specimen-card labels, the little corrections that point at the engravings with a drawn arrow. Always at a slight rotation (±1.5°), never used for anything a reader *must* be able to read quickly — it is texture and intimacy, not navigation. - **IBM Plex Mono** — every numeral: plate numbers, survey dates, vein counts, the year-marks at each trunk seam, the elevation-style "height up the tree" readout that ticks as you scroll. Lowercase, small, in the margin, the colour of dried ink. **Palette (minimum five, all in use):** - `#F4EEDC` — *rag paper*, the dominant ground for the body plates: warm, slightly uneven, the colour of aged folio stock. - `#E7DCBF` — *foxed margin*, a darker paper tone used for the specimen cards and the page edges where the light has yellowed it more. - `#2E3A24` — *canopy shadow*, the principal text colour and the ground colour of the Roots section: a deep green-black, like ink mixed with leaf-mould. - `#4F6B3A` — *living green*, used sparingly for engraving fills, the unfurled overture leaf, and active states: a real chlorophyll green, not minty, not neon. - `#9C6B3C` — *heartwood*, a warm tannin brown for growth-ring rules, bark engravings, the trunk seams, and the mono numerals. - `#7C2D2A` — *pressed-petal red*, the single accent: the thread on every specimen card, one drawn correction-arrow per plate, the seed in the final frame. It is the design's "honour mark" — rare, deliberate, never decorative filler. - `#C9B98E` — *desk dust*, a pale muted gold reserved for the dappled-light overlay and the faint coffee-ring texture. Light grain (~7% paper-fibre noise, ~0.5px structure) over everything; a barely-there warm vignette on each plate; the Roots section keeps the same grain but inverted onto `#2E3A24`. ## Imagery and Motifs - **Botanical-illustration engravings.** The entire visual vocabulary is hand-inked copperplate-style botanical plates rendered as crisp SVG line-work with flat tint fills (no photographs, no gradients-as-imagery, no 3D): a single sun-leaf with every vein traced; bark in cross-section showing rings; a flower bisected to show its parts labelled with leader lines; a winged seed; a tangle of fine roots; a single mycorrhizal filament. Each plate has a fictional plate number ("PL. IV"), a Latin-style binomial, and a survey date in the margin. - **Pressed specimens.** Recurring object: a "specimen card" — a rectangle of foxed paper with a real leaf or pod *pressed* onto it, held by two crossed lengths of `#7C2D2A` thread, with a dated label in the Caveat hand. These act as the closest thing the site has to "cards," but they are tableau elements, not a grid. - **Growth rings.** The trunk seams between boughs are hand-drawn concentric-ring profiles; the same ring motif appears small as a "you are here / how high you've climbed" mark in the margin. - **Dappled light.** A slow-drifting `#C9B98E` light-pattern overlay — soft-edged blotches, ~6% opacity — moves a few pixels with scroll and a few more on cursor proximity, like sun through leaves shifting in wind. The only "atmospheric" effect; restrained. - **Marginalia & leader-lines.** Drawn arrows in `#7C2D2A` that connect a Caveat note to a part of an engraving; the path of each arrow draws itself on as the plate enters view (path-draw-svg). - **Coffee-ring & thumb-smudge.** One faint `#C9B98E` ring on exactly one plate, one slightly darker thumb-shaped smudge near a page edge — small evidence of the human hand. Used once each, never repeated. ## Prompts for Implementation Build namu.quest as **one long full-bleed static HTML document** — no SPA, no router, no modals, no menu bar, no hamburger, no sticky header. The reader scrolls top-to-bottom through five-to-seven boughs the way you'd page upward through a herbarium folio at a quiet desk. - **The ascent inversion is the core mechanic.** As the reader scrolls *down*, large background engraving layers translate *downward* faster than the foreground (gentle parallax, multiple depths: distant canopy, mid bough, near leaf), giving the read sensation of the camera rising up the trunk. A small IBM Plex Mono readout in the right margin shows a fictional "height" climbing (e.g. `+ 11.4 m`) tied to scroll position — it ticks, monospaced, like an altimeter. - **Overture (≤2.8s, non-skippable):** on `#F4EEDC`, an SVG bud outline draws itself on with a slow stroke-dashoffset animation, then one young leaf unfurls (path morph + a slight scale-spring), then the title label fades in beside it. Then the page settles and scrolling unlocks. - **Plate entrances:** as each bough scrolls into view, the big engraving fades up from ~0 with a 1–2px settle; its leader-line arrows draw themselves on (SVG path-draw); the Caveat marginalia fade in last, staggered, at their slight rotation. Easing should feel *organic* — long, soft, slightly overshooting — never snappy or mechanical. Honour `prefers-reduced-motion`: drop parallax and path-draw to simple fades; keep the altimeter static. - **Trunk seams:** between boughs, a hand-drawn growth-ring rule whose innermost rings draw on as you cross it, with the year-mark in mono. It should feel like passing a knot in the wood. - **Roots close:** the last ~140vh inverts to `#2E3A24` ground with grain; engravings become pale root systems; prose shortens; the altimeter keeps climbing past the last bough into "crown" numbers, then the final frame holds a single `#7C2D2A` seed on dark soil with one line of Cormorant italic. The only interactive element is a faint upward arrow that replays the overture. - **Cursor:** subtle — cursor proximity nudges the dappled-light overlay and very slightly tilts the nearest engraving (≤2°, tilt-3d, springy). No magnetic buttons, no cursor-trail, no glow. - **Typography in motion:** binomials in Cormorant italic can do a one-time slow underline-draw the first time they enter view; the translation appears beside them, smaller, in roman. Headings never animate beyond a plain fade. - **AVOID:** any CTA-heavy layout; pricing blocks; stat-grids / counter-walls of numbers (the only numerals are the in-fiction survey measurements); testimonial carousels; FAQ accordions; email capture; "get started" / "subscribe" buttons; card-grids; dashboards; hero-with-three-feature-columns. There is nothing to buy and nothing to sign up for — the page is a *read*, an ascent. ## Uniqueness Notes Differentiators from sibling designs: 1. **Scroll-down-equals-climb-up inversion.** The corpus is saturated with parallax and immersive-scroll, but I've found none that *invert the spatial metaphor* so that scrolling down moves the reader upward through a vertical subject, complete with a monospaced "altimeter" readout in the margin. The whole site is one continuous vertical traverse of a single tree, root-at-the-bottom-of-the-page, crown-at-the-top. 2. **Pressed-specimen "cards" instead of a card-grid.** Where 90% of the corpus reaches for card-grids, namu.quest's only card-like object is a thread-bound pressed-leaf specimen card embedded inside a tableau — never tiled, never gridded, dated in a hurried hand. 3. **Two-hands marginalia system with self-drawing leader-arrows.** A careful body hand (Cormorant) and a hurried annotation hand (Caveat), with `#7C2D2A` arrows that draw themselves on to connect a note to a part of an engraving — a documented, recurring device, not a one-off flourish. 4. **Botanical-illustration as the *entire* image language.** Zero photography, zero gradient-mesh, zero 3D renders: only hand-inked SVG copperplate plates with flat tannin/chlorophyll tints — sitting on the under-used `imagery: botanical-illustration` (~2% of corpus) and `aesthetic: botanical` rather than the corpus-default photography/glassmorphism. 5. **The single honour mark.** One colour — pressed-petal red `#7C2D2A` — is rationed across the whole experience (the specimen thread, exactly one correction-arrow per plate, the final seed) and never used decoratively, against an otherwise green-brown-paper field. Chosen seed / style: **"botanical illustration garden"** — expressed as `aesthetic: botanical (with dark-academia archive accents), layout: immersive-scroll (full-bleed, broken-grid), typography: serif-revival, palette: forest-green, patterns: path-draw-svg, imagery: botanical-illustration, motifs: leaf-organic, tone: scholarly-intellectual`. Avoided patterns from frequency analysis: card-grid (90%), centered content-well (84%), glassmorphism (79%), photography imagery (98%), cursor-follow trails / magnetic buttons (89% / 81%), dashboard layouts (33%), gradient palettes (95%), hand-drawn-as-cartoon (96%) — namu.quest's hand-drawn register is engraved-botanical-plate, not whimsical doodle.