# Design Language for namu.quest ## Aesthetics and Tone namu.quest is a **mossy stump-tavern quest board** for a fictional woodland guild called **나무수색대 (Namu Susaekdae — "Tree Reconnaissance Corps")**, an unofficial collective of goblin-coded foragers, retired arborists, lichen-readers and amateur dendrologists who post and accept tree-related field missions on a corkboard of damp pine bark nailed to a hollowed-out stump deep inside a Korean temperate forest. The board is half mushroom-economy bulletin and half medieval tabletop quest-log, but rendered without a single pixel of armor, sword, dragon, or gold-coin iconography — every quest is botanical: *retrieve three intact ginkgo gametophytes after the autumn drop*, *witness the first sap-rise on the south face of a 240-year-old walnut*, *transcribe the bark-graffiti carved by hikers on the kissing trees of Bukhansan*, *return a misplaced hornbeam seedling to its provenance plot*. The aesthetic is **goblincore-quest-board** — a deliberately rare register on the corpus (goblincore at 1% frequency, fairycore at 1%, anti-design at 4%) executed with **earnest, slightly soggy reverence**. Imagine a corkboard photographed at 6 a.m. in October fog: paper curl, drying glue tracks, two-toned damp staining, a beetle resting on a thumbtack, three overlapping flyers held by mismatched pins, the warm green-brown half-light of canopy filtered through wet leaves. The tone is **grounded-earthy** crossed with **whimsical-creative** (6% + 6%, both far below the dominant 66% friendly / 48% authoritative) — affectionate toward decay, suspicious of polish, comfortable with smudges, and quietly thrilled that lichens are, technically, two organisms in a happy arrangement. The site is not a marketing page, not a product page, not a SaaS dashboard. It is a **standing field-board you can sidle up to**, with paper that flutters when you scroll and pins that you can imagine pulling. There is no CTA, no pricing, no stat-grid, no testimonial. There is a stump, a board, a stack of accepted quests, and a smell of wet bark you have to imagine for yourself. ## Layout Motifs and Structure The page is one **vertical timeline-scroll** (timeline-vertical at 5% — underused), but the timeline is not a corporate "our journey since 2018" rail. It is a **descending chain of pinned flyers down the trunk of a single virtual tree**, drawn as a hand-inked **central tree-trunk SVG** running floor-to-floor down the right third of the viewport. The trunk widens slightly at each "node" where a quest-flyer is pinned, and narrows between flyers — the literal vascular cambium of the page. **Five vertical sections, presented in stratified forest order from canopy down to root:** 1. **상층 — Canopy Banner** (top-of-viewport masthead). A **diagonal section** (4% frequency, underused) tilted at exactly 4° clockwise — the angle a board makes when one nail rusts faster than the other. The banner reads `나무수색대 // namu.quest // 木 偵察隊` in three scripts stacked. A single beetle SVG walks slowly across the title every 22 seconds. 2. **중층 — Today's Pinned Quests** (the corkboard proper). An **organic-flow / broken-grid hybrid** (organic-flow at 5%, broken-grid at 10%) of 6–9 quest flyers pinned at slightly varied rotations (-7° to +5°), with 1–2 flyers half-overlapping their neighbours by 8–14 px. Each flyer is its own rectangle of sun-faded paper, recycled receipt, or graph-paper torn from a lab notebook. Flyers are not on a grid — they are **placed by a goblin who cared more about pin-economy than alignment**. 3. **하층 — The Standing Codex** (bestiary of trees). A **stacked-sections** field with each tree species filling the full viewport once. The species name is set in oversized handwritten Korean alongside its Latin binomial, with a botanical line-illustration drifting in from the left margin and a small "quest-count" tally (`▮▮▮▮▯ 4 of 5 logged`) drawn as scratched tally-marks, never as a digital progress bar. 4. **근층 — Root Layer / Dispatch** (mycelial network diagram). A wide **path-draw-svg** (22% frequency, but used here at uncommon scale) of a fungal mycelium network connecting all the quests pinned above. As you scroll, each thread is drawn live by a stroke-dashoffset animation. Hover a node and the thread ripples (ripple at 10%). 5. **부엽토 — Leaf-litter Footer** (humus). A messy bottom band of overlapping fallen-leaf SVGs in seven shades, with the quietest possible legal text and a single woodcut-style colophon: *"Printed in moss-green ink on recycled bark, 2026."* The right third of every section contains the **trunk-rail**, a continuous SVG path that the eye follows from canopy to root. The left two-thirds is the reading column. There is no horizontal navigation; the only nav is a small **pinned ribbon** in the upper-left that bookmarks the five sections as **🍃 🌲 📌 🍄 🪵** — emoji used not for cuteness but because they are the only place in the codex where colour-emoji raster art is allowed to appear. The grid is **f-pattern** (2% frequency — underused) inverted: text reads down the left edge, illustrations float to the right, and the trunk-rail anchors the right margin. Negative space (ma-negative-space, 9%) on the left side is treated as **forest air**, never as designerly emptiness — it has a faint vertical noise overlay to read as woodgrain humidity. ## Typography and Palette **Fonts (Google Fonts only):** - **`Gowun Batang`** — primary Korean serif, soft brushed strokes that read like a nature-diary hand. Used for body Korean at 17 px / 30 px line-height, weight 400 throughout, weight 700 reserved for quest-flyer titles. Quest titles set at 28 px with letter-spacing -0.01 em. - **`Crimson Pro`** — Latin body and tree binomials. 16 px / 28 px line-height, weight 400 roman for prose, italic 400 for *Ulmus parvifolia*-style species names. The italic small-caps variant is used for dispatch-codes. - **`Caveat`** — handwritten margin annotations (handwritten at 25%, here used sparingly so it earns its presence). 20 px, weight 600, slightly tilted at -2°. Used **only** for goblin-side margin notes ("paper smelled like rain", "do NOT step on the slime mold"), never for primary content. - **`JetBrains Mono`** — quest-codes, GPS coordinates, timestamps, dispatch numbers (mono at 81% — the dominant register, but here rationed strictly to coordinate-style data). 13 px / 22 px line-height, weight 500. All-caps with letter-spacing 0.08 em for codes. - **`UnifrakturCook`** — display Blackletter, used **once and only once**, as the masthead word "QUEST" hidden inside the canopy banner. A single 64-px Blackletter character, half-faded, half-overgrown by an ivy SVG. This is the page's signature — a Blackletter Q wreathed in rendered moss. **Palette — seven hand-mixed forest pigments, no neon, no pure black, no pure white:** - `#1F2D24` — **deep canopy** — primary text colour. A near-black that has 8% green chroma so it reads as ink that has aged on bark, never as `#000`. - `#3A4A2C` — **moss-shade** — secondary structural colour, used for the trunk-rail, frame-rules, and tally marks. - `#7C8E5A` — **lichen-green** — accent for active quests and hover states. Only the third hue, deliberately desaturated. - `#C7882F` — **damp-amber / pine-resin** — a single warm accent used for pin-heads, the beetle, and the masthead Blackletter Q. Never used for buttons or CTAs (there are no CTAs). - `#A23E2A` — **rust-iron** — used only for the rusted-nail pin-shadows and exactly two emphatic words on the entire page (the two underlined words in the canopy banner mission statement). - `#E4D8B8` — **paper-cream / 한지** — primary flyer paper. Slight warmth, subtle 3% noise. - `#1A1F18` — **humus-black** — the deepest shadow tone, used only for the leaf-litter footer band and beetle shadow. The palette is **earth-tones + forest-green** (5% + 4% — underused against the 81% gradient / 80% warm dominance). There is **no gradient anywhere**, by deliberate refusal. The closest thing to a gradient is a 10-stop dithered noise that simulates damp paper soak — never a smooth CSS linear-gradient. ## Imagery and Motifs **Quest-flyer paper.** Each flyer is a hand-textured rectangle composed of three CSS layers: a base `#E4D8B8`, a multiplied SVG noise filter at 6% opacity to read as cotton fibre, and a `box-shadow` of `2px 3px 0 #1F2D24, 0 0 0 1px #3A4A2C` to read as a torn-paper edge with goblin-applied tape. Five distinct paper variants alternate: receipt-thermal (slightly warm), graph-paper (faint 5×5 mm green grid), lab-notebook (numbered ruled lines), 한지 mulberry (long fibre direction), and birch-bark (subtle horizontal lenticels). No two adjacent flyers share a paper type. **Pin and tape iconography.** Every flyer is held by either: - a hand-illustrated **rusted thumbtack** (`#A23E2A` head with `#1A1F18` shadow, 8 px diameter), placed at one of the four corners with a tiny irregular hole punched through the paper; - a strip of **masking tape** (translucent `#E4D8B8` at 60% opacity with a slight torn-edge SVG mask) running across one corner; - or a single **pine-needle stitched through** the paper as a goblin's improvised pin — three needles per board. These are SVG, never Unicode characters, and they cast a 1 px sub-pixel offset shadow. **Botanical line-illustrations (custom, line-illustration at 5%).** Each tree-species section in the Standing Codex has a hand-drawn ink illustration of the species' leaf, fruit, and bark detail — drawn at 0.75 px stroke weight in `#3A4A2C`, in the style of a 1970s Korean field-guide woodcut. Twelve species total: 소나무 (pine), 은행나무 (ginkgo), 단풍나무 (maple), 자작나무 (birch), 느티나무 (zelkova), 호두나무 (walnut), 잣나무 (Korean pine), 산딸나무 (kousa dogwood), 서어나무 (hornbeam), 박달나무 (East Asian birch), 가시나무 (oak), 향나무 (juniper). Illustrations float in from the left margin at scroll-trigger. **Mycelium network (root-layer signature element).** A 1200×400 px SVG of a fungal hyphal network, hand-drawn with pen-tool curves. Not a generative graph — a deliberately **artisanal, asymmetric, slightly tangled** network where threads sometimes loop back on themselves. Approximately 80 threads, 40 nodes (mushroom caps), 12 fruiting bodies (small `#C7882F` clustered dots). On scroll-into-view, threads draw left-to-right with stroke-dashoffset over 4.2 seconds. **The beetle.** A 24×16 px hand-drawn SVG stag beetle (사슴벌레) lives on the page. It walks across the canopy banner once every 22 seconds — a slow, two-step walk-cycle (six keyframes), pausing for 0.4 s in the middle as if smelling the air. It is the only non-static creature on the page and carries no functionality whatsoever. It is there because beetles are there. **Slime-mold timestamp.** The current time in the Korean forest reserve (KST) is rendered in the canopy banner as a **slime-mold-style organic blob** that rearranges its shape every minute to form the digits. Built from morphing SVG paths with `path-draw-svg + morph` (15%, used here unconventionally on numerals). It is the only digital readout on the page and it is rendered as protoplasm. **Leaf-litter footer.** Eighteen SVG fallen-leaf shapes in the seven palette colours, arranged in a 1200×140 strip with subtle parallax (fallback-only — no aggressive parallax, parallax is at 77% saturation in the corpus and is being deliberately downplayed). Leaves rotate ±15° on hover only; otherwise they are still. **Forbidden imagery.** No photography. No stock illustrations. No 3D renders. No glassmorphic cards. No neon glow. No gradient meshes. No flat-design icon sets. No emoji other than the five forest-glyphs in the bookmark ribbon. No flames, no swords, no shields, no scrolls-with-tassels, no D20s, no anything that says "this is a game site." It is a **botanical** quest board. ## Prompts for Implementation - Build as a **single static HTML page** with one CSS file and one small vanilla JS file. No framework, no build step, no analytics, no service worker, no font preloader beyond `` for Google Fonts. The page must work with JS disabled — only the beetle walk, the slime-mold time, the mycelium draw-in, and the flyer hover-rotate require JS. Everything else is pure CSS. - Implement the trunk-rail as a **single fixed-position SVG path** in the right gutter, 320 px wide, full-viewport-height, with `position: sticky` on a per-section basis so that as each section scrolls, the trunk node for that section pulses gently (scale 1.0 → 1.04 → 1.0 over 1.6 s, ease-in-out). - Quest-flyer rotations must be **deterministic but irregular**: assign each flyer a `--rot` custom property between -7° and +5° via `nth-child` rules, never via random JS. Goblins are chaotic but the chaos must be reproducible. - Use **`prefers-reduced-motion: reduce`** to halt the beetle walk, freeze the slime-mold to a static digit display, and skip the mycelium draw-in (paths render at full opacity instantly). This is the only concession to motion-reduction; everything else (scroll, hover) is allowed. - The **page must tell a story top-to-bottom**: arriving at the canopy is dawn-fog; arriving at the leaf-litter is dusk-humus. Time-of-day shifts subtly — the page's overall tint warms by 4% lightness as you scroll downward, mimicking late-afternoon golden hour reaching the forest floor. Implemented as a single `body::before` overlay with a CSS variable driven by `IntersectionObserver` reporting scroll depth. - All text content must be **real, specific, and signed** with goblin-foragers' nicknames (송이꾼 — "matsutake-hunter", 이끼반장 — "moss-foreman", 청솔모지기 — "squirrel-keeper"). No placeholder filler text. Each quest flyer reads as a real posting: a title, a one-paragraph mission brief in Korean, a Latin species line in italic, GPS coordinates in mono (real Korean forest-reserve coordinates: 37.6584° N 128.6833° E for 오대산, 35.3370° N 127.7308° E for 지리산, etc.), a difficulty marked as `난이도: ◯◯◐◯◯` (filled to the goblin's discretion), a reward in **edible terms** ("3 dried persimmons + 1 pinecone of choice"), and a signature. - The **"begin a quest" action does not exist**. There is no button, no form, no dispatch portal. To accept a quest you are expected to walk into the actual forest. The site explains this in a single line of italic Crimson Pro at the bottom of each flyer: *"수락은 숲에서. (Accept in the forest.)"* - Animations: stagger (68%) is used **inversely** — flyer pin-ins are deliberately UN-staggered (all flyers settle simultaneously on load over 0.8 s), so the page lands like *one* gust of wind on the corkboard, not a sequence. The mycelium draw-in is the only place stagger appears, threading 80 paths over 4.2 s with a 0.05 s offset between siblings. - Hover micro-interactions: hovering a flyer **lifts it 4 px**, casts a softer shadow, and gently rotates it toward 0° (correcting its tilt as if a goblin's hand is straightening it). Releasing the hover lets it fall back to its original tilt with a 0.3 s spring (spring at 34%, used sparingly here). - Cursor: a custom cursor of a **small pine-resin droplet** (`#C7882F`, 12 px) that leaves a faint 6-frame trail of fading droplets behind it (cursor-follow at 22%, but the goblin twist is that the trail is sticky resin, not a glow). - Storytelling: the page is structured so that a first-time reader, scrolling once from top to bottom without clicking anything, **reads a complete narrative** — the framing of the corps, today's quests, the trees being studied, the mycelial connections beneath, and the litter that closes the cycle. The site is a forest visit, not a marketing funnel. - AVOIDED PATTERNS (deliberate, from frequency analysis): no CTA-heavy hero, no pricing block, no stat-grid (replaced by tally-marks), no testimonial carousel, no FAQ accordion, no newsletter form, no dashboard cards, no card-grid (overused at 50%, here replaced by broken-grid corkboard), no gradient (overused at 81%, here replaced by flat earth pigments), no centered single-column hero (overused at 59%). ## Uniqueness Notes **Differentiators from other designs in the registry:** 1. **A goblincore-quest-board metaphor where every quest is botanical, with zero RPG iconography.** The closest neighbour in the corpus, lunch.quest, uses an editorial-RPG quest-sheet metaphor with d20s, runes, codices, and dice — namu.quest deliberately strips out every game-trope (no swords, dragons, gold, dice, runes, scrolls-with-tassels, hit-points) and replaces them with **purely arboreal** field tasks. The "quest" is a forestry assignment. No other site in the surveyed 340 commits to a goblincore-foraging register (goblincore at 1% frequency) — and none of the rare goblincore appearances pair it with a quest-board layout. 2. **Trunk-rail as the only navigation, no horizontal nav, no buttons, no CTA.** The site has zero call-to-action and zero conversion path. The closing line of every flyer is *"수락은 숲에서. (Accept in the forest.)"* — a deliberate refusal to be a website that wants something from you. Of the 340 designs analyzed, almost none have zero CTAs; the registry skews 80%+ toward conversion-shaped layouts. namu.quest stands as a **standing-board** — informational, observational, non-transactional. 3. **The slime-mold time-of-day clock and the wandering beetle.** A live clock rendered as a morphing SVG protoplasm and a beetle that walks across the masthead every 22 seconds are decorative, non-functional, and tonal — they exist purely to communicate **the site is alive in the small ways that a forest is alive**. No other surveyed design uses a numerals-as-organism approach, and ambient wildlife-as-decoration is essentially absent from the corpus. 4. **Hand-mixed earth palette with explicit refusal of gradient.** The corpus is 81% gradient and 80% warm; namu.quest commits to seven flat hand-mixed forest pigments with **no gradient anywhere**, replacing smooth interpolation with dithered noise to simulate damp paper soak. This is a structural rejection of the dominant palette grammar. 5. **Five-stratum vertical reading order mirroring forest stratification (canopy → understorey → standing → root → litter).** Most timeline-vertical sites (5% frequency) use chronological framing ("our journey 2018→2026"). namu.quest uses **botanical stratification** — the same vertical timeline read as physical forest layers. The structure is a cross-section of woodland, not a corporate history. 6. **Blackletter `Q` overgrown by moss as the single graphic signature.** A one-glyph display use of UnifrakturCook, half-faded and wreathed in rendered ivy, is a rare combination — Blackletter is essentially absent in the corpus, and using it as a single overgrown letterform rather than a banner is a unique typographic gesture. 7. **All twelve tree species and all quest content authored as real Korean forestry references.** Real species, real reserve coordinates (오대산, 지리산, 한라산, 설악산, 백두대간 ridge), real Korean folk names for foragers. No filler placeholder copy, no English-default — Korean is primary, Latin binomials secondary, and the page's "language of record" is forest-Korean with English merely as gloss. **Chosen seed/style:** `goblincore earthy chaos shop` (from `tools/design/seeds.json`) — re-interpreted as a **forest quest-board** rather than a shop, executed as a botanical timeline-vertical of pinned flyers down a tree trunk. Combines the underused `goblincore` aesthetic (1%) with `timeline-vertical` layout (5%), `earth-tones + forest-green` palette (5% + 4%), `handwritten + mono` typography mix used sparingly against the dominant `mono` register, `paper-aged + line-illustration + botanical-illustration` imagery (14% + 5% + 6%), `path-draw-svg + ripple + morph` patterns (22% + 10% + 15%), `leaf-organic + crystalline` motifs (4% + 9% — crystalline reinterpreted as fungal mycelium nodes), and `grounded-earthy + whimsical-creative` tone (6% + 6%, against the dominant 66% friendly / 48% authoritative). **Avoided overused patterns (from frequency analysis):** - `gradient` palette (81%) — replaced with flat earth pigments and dithered noise - `mono` typography monoculture (81%) — rationed to coordinate-style data only, paired with serif-Korean and handwritten margins - `parallax` (77%) — used only for footer leaf-litter, not as primary motion vocabulary - `dashboard` layout (74%) — refused entirely; no metrics, no cards, no tiles - `photography` imagery (80%) — refused entirely; only hand-drawn SVG line-illustration - `card-grid` (50%) — replaced with broken-grid / organic-flow corkboard placement - `centered` hero (59%) — replaced with diagonal canopy banner and left-aligned reading column - `hand-drawn` aesthetic (75%) — present, but executed as goblincore-foraging rather than the dominant whimsical-illustration register