# Design Language for namu.market ## Aesthetics and Tone namu.market ("namu" = 나무, tree) is the digital storefront of an **underbark barter-hoard** — a goblin-run forest-floor market that opens only after the canopy closes, where traders deal in the things that fall, peel, rot, and glitter at the base of old trees: knotted burl-buttons, bracket-fungus shelves polished like agate, beetle-husk beads, jar-lids of fermented sap, snail-shell whistles, lichen-dyed thread, charred bark tally-sticks. The aesthetic is **goblincore earthy chaos** held together by a market-stall logic: nothing is sleek, everything is *sorted by a system only the goblin understands* — heaped, labelled in chalk, weighed on bent scales, priced in acorns. The mood is **grounded-earthy and gleefully cluttered**: damp soil, leaf-mould, mushroom gills, dragonfly iridescence catching one stray sunbeam through the trunks. Not cute-cottagecore tidy — this is the *messier, hungrier* sibling: dirt under the fingernails, treasure in the pockets, a magpie's pride in odd things. The tone of all copy is a market-crier's patter: blunt, boastful, conspiratorial, fond of weights and trades, never corporate, never a "call to action" — more a "come look at *this* one." ## Layout Motifs and Structure The page is **one long descent down a tree** — not a scroll *through* sections but a *climb down the trunk* from sun-warmed canopy to root-tangle dark, in five **strata**: Canopy (intro), Bark (the goods), Hollow (the goblin's own hoard-cabinet), Leaf-mould (trades & rumours), Roots (the closing dark). Layout is a deliberate **broken-grid masonry**: stall-crates of wildly unequal size tessellated like cordwood — some crates 1×1, some 2×3, some a long 4×1 plank — with **no card-grid uniformity**, gaps stuffed with small "found objects" (a single beetle SVG wedged between two crates, a chalk price-tag tilted 7°). Each stratum band is set off by an **irregular torn-bark horizon** (jagged SVG path, never a straight rule) and the whole column **drifts subtly off-axis** — content sits 2–4% left of true centre, as if the trunk leans. Navigation is a **vertical bark-ladder** pinned left: five carved notches, the active one filled with a smear of moss-green; no top bar, no hamburger, no footer-of-links — the Roots stratum *is* the footer. No hero-with-CTA, no pricing tier blocks, no stats grid, no testimonial carousel. ## Typography and Palette **Type system (Google Fonts only):** - **Display / market-crier face:** `Zilla Slab` (weights 500–700) — a sturdy, slightly rustic slab serif with chunky square serifs; used oversized for stratum titles ("THE BARK", "THE HOLLOW") at 64–110px, tracked tight at `-0.01em`, often set with one word knocked askew 3–6°. - **Crier-italic accents:** `Zilla Slab` italic for the goblin's interjections ("— and a *fine* one too"). - **Body / ledger face:** `Spectral` (weights 300–500, plus 300 italic) — a generous, slightly inky serif with calligraphic stress; used for descriptions, "this trade weighs…" ledger lines, and the long Roots monologue at 18–20px / 1.7 line-height. - **Tally / price face:** `Cutive Mono` — a typewriterish mono used ONLY for prices-in-acorns, weights, and tally-stick numerals, set small (12–13px) on chalk-tag elements, letter-spacing `0.04em`. (Mono is deliberately *demoted* to a label role, not the site voice — a counter-move against the 94% mono-as-primary convention.) **Palette (jewel-tones grounded in forest-green earth — not the corpus-default warm gradient):** - `#1B231A` — **root-dark** (deepest background, the Roots stratum, near-black bottle green) - `#2E3B26` — **leaf-mould** (mid panel ground, mossy umber-green) - `#41331F` — **wet-bark brown** (crate edges, ladder notches) - `#C7B27A` — **chanterelle gold** (primary text on dark, aged-paper labels) - `#7E9B4E` — **moss-smear green** (active-state fills, accents) - `#3D6E5C` — **lichen teal** (secondary accent, link underdraw) - `#9B4A2F` — **bracket-rust** (warning/sold tags, beetle-shell red-brown) - `#5B6FA8` — **dragonfly indigo** (the one cold, iridescent glint — used sparingly on hover sheens) - `#E8DEC2` — **chalk-cream** (price-tag stock, the single near-white) High-contrast pairing throughout (chanterelle gold on root-dark); accents are jewel-saturated against the muted earth — never pastel, never gradient-washed. ## Imagery and Motifs - **No photography.** All goods are **generative-art SVG "specimens"** — each market item drawn as a 200–360px object on its crate: a burl-button rendered as concentric warped wood-rings (procedurally jittered ellipses), a bracket fungus as stacked organic-blob shelves with fine gill-lines (SVG hatch), a snail-shell whistle as a true logarithmic spiral, a beetle as six-fold sharp-angle geometry with an indigo elytra-sheen overlay. Specimens have hand-inked 0.7px outlines and flat fills — woodcut, not glossy render. - **Leaf-organic litter:** between crates, scattered SVG detritus — single leaves (skeletonised vein-paths), acorn caps, a snapped twig, a curl of birch-bark — rotated at odd angles, semi-transparent, drifting 6–10px on scroll. - **Chalk-tag system:** every price is a small parallelogram of `#E8DEC2` "chalk slate" pinned at a tilt, with a chalk-scrawl number in `Cutive Mono` and a tiny acorn glyph as the currency mark (₳corns). - **Torn-bark horizons:** each stratum boundary is a jagged, fibrous SVG edge — looks like bark peeled back to reveal the layer beneath. - **The goblin's hand:** a recurring four-fingered knuckly hand SVG appears once per stratum — pointing, weighing, palming a bead — never a face, only the hand. - **Bracket-fungus rings & lichen blotches** as decorative corner motifs on the largest crates; **a single carved-bark trunk texture** (subtle noise + vertical fibre lines) as the page's base background. ## Prompts for Implementation Build namu.market as **one HTML page, one CSS file, one ES module** — no framework, no build step, no service worker. The page is a ~75-second descent down a tree-trunk market: five strata, top to bottom, each a heaped masonry of stall-crates. There is **no CTA button, no pricing tiers, no signup form, no testimonials, no stats grid, no logo wall, no FAQ accordion, no cookie banner, no chatbot**. The "conversion" is *delight at oddities*, nothing more. **Storytelling structure (five strata, vertical descent):** 1. **Canopy** — page opens bright: `#C7B27A` near-white sky leaking through a black trunk-silhouette frame. `Zilla Slab` title "namu.market" with "market" knocked 5° askew. The goblin's hand SVG draws itself (path-draw-svg, ~1.2s) pointing *down* the ladder. One line of `Spectral` italic crier-patter fades up. 2. **The Bark** — the big stall floor: 9–14 stall-crates in broken-grid masonry, sizes 1×1 to 4×2, each holding one generative SVG specimen + a tilted chalk-tag price + a `Spectral` blurb. Crates **stagger-reveal** (each crate enters on scroll with a short, slightly *over-damped* spring + 8° settle-wobble, like being set down on a counter). Hovering a crate: it **lifts** 6px, casts a softer shadow, and a faint dragonfly-indigo sheen sweeps across the specimen once (CSS mask animation). Clicking a crate: it **morphs** open (the crate "card-flips"/unfolds along a torn-bark seam) to show a longer ledger entry — "this trade weighs three sap-jars and a promise." 3. **The Hollow** — narrower column, darker (`#2E3B26`): the goblin's *personal* hoard-cabinet — a vertical stack of mismatched drawer-rows, each drawer **slides open** on hover to reveal one not-for-sale treasure (a marble, a key, a tooth) with a one-line confession in `Spectral` italic. 4. **The Leaf-mould** — trades & rumours: an irregular timeline-vertical of past barters, each node a small SVG token connected by a hand-drawn dotted ink path that **draws in** as it scrolls into view; copy is gossip ("traded the snail-whistle to a wren — bad deal, won't say more"). 5. **The Roots** — full descent into `#1B231A` near-dark; the masonry dissolves; one centred column of `Spectral` 20px monologue — the goblin signing off, listing what's gone, what's kept, when the market opens again ("when the moss is wet enough"). A last beetle SVG crawls across and off-screen. This stratum is also the footer: tiny `Cutive Mono` line with the year-in-acorns and nothing else. No links. **Motion vocabulary:** lean on **ripple** (clicking a crate sends a soft soil-coloured ripple through neighbouring crates), **morph** (crates unfolding, drawers), **stagger** with **over-damped/elastic settle-wobble** on crate entrance, **path-draw-svg** for the goblin's hand, dotted barter-paths, and torn-bark horizons drawing themselves. Use **slide-reveal** for drawers. **Do NOT use cursor-follow blobs, parallax mouse-tilt-3d on every card, or a magnetic-button hero** — motion should feel like *objects being handled on a counter*, weighty and physical, never floaty/cinematic. Respect `prefers-reduced-motion`: drop wobble & ripple, keep simple fades. All animation in CSS where possible; ES module only orchestrates scroll-triggers (IntersectionObserver) and the crate open/close + drawer state. **Texture & detail:** base background is a tiled subtle bark-fibre noise (CSS gradients + a faint SVG turbulence filter at low opacity). Stratum boundaries are jagged SVG `` clip-edges, never `
`. Every chalk-tag is real DOM (parallelogram via `clip-path`), tilted with a per-tag random `--tilt` custom property set inline. Specimens are inline `` so their strokes can animate. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Goblincore in its hungry, hoarding register — not the tidy cottagecore cousin.** The 8% cottagecore / 34% pastoral-romantic corpus tilts twee and serene; this is dirt, barter, magpie-greed, and a market-crier's patter. Earthy *chaos*, deliberately, with a broken-grid masonry instead of the 90%-default card-grid. 2. **No photography at all — every product is a generative woodcut SVG specimen.** Against the 98% photography convention and the 96% hand-drawn-as-decoration convention, here the *goods themselves* are procedural vector specimens (warped wood-rings, log-spiral shells, six-fold beetles), woodcut-flat, not glossy 3D render and not photos. 3. **Jewel-on-earth palette, zero gradient-wash, zero warm-default.** Bottle-green darks, chanterelle gold, bracket-rust, one cold dragonfly-indigo glint — sidestepping the 95% gradient / 98% warm palette ruts in favour of flat, saturated, soil-grounded colour. 4. **Mono is demoted to chalk-price labels only; the site voice is a slab serif + inky body serif.** A direct counter to the 94% mono-as-primary-typeface convention. 5. **The "descent down a tree-trunk" structural conceit** — five strata from canopy to roots, with a carved bark-ladder as the only nav and the Roots stratum doubling as the footer — replaces hero/sections/CTA/footer-links scaffolding entirely. **Chosen seed/style:** `goblincore earthy chaos shop` — *aesthetic: goblincore, layout: broken-grid (masonry), typography: slab-serif, palette: forest-green / jewel-tones, patterns: ripple + morph + stagger, imagery: generative-art, motifs: leaf-organic, tone: grounded-earthy.* **Avoided patterns from frequency analysis:** hand-drawn-as-aesthetic (96%), glassmorphism (79%), photography (98%), card-grid (90%), full-bleed centred hero (88%/84%), warm palette (98%), gradient palette (95%), parallax (91%), cursor-follow (89%), magnetic buttons (81%), mono-as-primary (94%) — all consciously sidestepped per the notes above.