# Design Language for namu.day ## Aesthetics and Tone namu.day is **the field-press almanac of one tree, told in the language of a two-colour risograph print**. "나무" (*namu*) is the Korean word for *tree*; "day" is the unit. So the site is a single broadsheet that follows ONE specific tree — an unremarkable zelkova standing in a courtyard — from before dawn to after dusk, the way a 1970s naturalist's roneo-printed bulletin would: cheap paper, ink that doesn't quite register, a smell of solvent, hand-set headlines, a stubborn refusal to be glossy. The tone is **patient, dry-witted, observational, faintly devotional**. Not "wellness-brand calm," not "cottagecore whimsy" — closer to a botanist who has watched the same tree for thirty years and finds it more interesting than any forest. Copy is written in plain declaratives with the occasional Latin aside and the occasional very small joke. Nothing is sold. Nothing is gamified. The reader is trusted to slow down on their own. Visually it is **wabi-sabi by way of the duplicator machine**: misregistration is the house style, not an accident. Two ink plates — a deep botanical green and a fluorescent risograph orange-pink — are laid down slightly out of alignment so every shape has a 1–3px halo of the wrong colour on one edge. Paper grain shows through everything. Solid fills are never solid; they're a 40–70% halftone of dots you can almost count. The page feels handmade, a little tired, and completely sincere — the opposite of the 79% of the corpus that reaches for frosted glass and the 95% that reaches for smooth gradients. ## Layout Motifs and Structure **The page is a single broadsheet column the width of a folded newspaper (max 760px text measure), but it scrolls as a vertical core sample.** The governing metaphor is a tree's cross-section unrolled into a strip: as you scroll down you are reading *outward from the pith*, ring by ring, and simultaneously *forward through the day*, hour by hour. Scroll position is time of day; horizontal bands of halftone are the growth rings. **Structural spine.** A 1px green hairline runs down the left third of the column for the entire document — the *cambium line*. Hour markers (04:51 첫빛 / 06:20 / 09:00 / 12:34 정오 / 15:00 / 18:42 / 21:10 / 23:00 마지막빛) hang off it like notches on a measuring stick, set in small caps with their Korean gloss beneath. Everything else — paragraphs, plates, marginalia — is pinned relative to this line. **Block taxonomy** (stacked, never a grid, never cards): - **Plates** — full-measure two-colour halftone illustrations (a leaf in section, the bark's lenticels, an ant's route, the underside of the canopy at noon), each captioned in the dry almanac voice with a fake plate number ("PL. VII — *Zelkova serrata*, abaxial surface, 09:14"). - **Field notes** — running prose, ragged-right, set in a serif revival, with occasional words struck through (visible strike, like a real correction) and replaced. - **Marginalia** — narrow notes that sit in the empty right gutter, rotated a hair off vertical, in the handwritten-companion face: measurements, a bird species, "smells of rain coming." - **The ring strip** — at every hour boundary, a thin horizontal band of halftone dots, slightly off-register, that the cambium line crosses; its dot density encodes that hour's light level. - **The colophon** — a true printer's colophon at the very bottom: edition, "press run: 1 (one) tree," paper stock, the two Pantone-ish ink names, and the date the observations were made. On viewports under 640px the right-gutter marginalia fold *inline* beneath the paragraph they annotate, indented and rotated, so the broadsheet logic survives on a phone. ## Typography and Palette **Type stack — Google Fonts only, deliberately NOT mono (mono appears in 94% of the corpus; this design refuses it entirely).** - **Spectral** (weights 300, 400, 500, 600; italics) — the body serif. A screen-built serif with real ink-trap personality and a tall x-height; reads like a well-set bulletin at 18px. All running field-note prose, captions, the colophon. Letter-spacing 0, line-height 1.62. - **Fraunces** (variable, weights 400–900, "soft" and "wonk" axes turned up) — the display face for hour markers, plate numbers, the masthead "namu.day". Its wonky terminals and old-style proportions read like wood type that's been printed a thousand times. Used at 32–96px, tight tracking (-0.01em), small-caps where the masthead allows. - **Gowun Batang** — the Korean companion for all Hangul (the hour glosses 첫빛/정오/마지막빛, the occasional Korean field note). A gentle Batang/serif Hangul that sits naturally beside Spectral without shouting. - **Caveat** (weight 400–500) — the marginalia hand. Only ever used rotated, only ever small (13–15px), only ever in the orange-pink ink. It is the naturalist's pencil. **Palette — two inks on one paper, plus their misregistration ghosts. Cool-leaning, anti-warm.** - `#F4F0E6` — *Newsprint Bone.* The paper. Not white, not cream-warm; a slightly grey, slightly green-tinted bone, like recycled stock. - `#1C3A2E` — *Cambium Green.* Ink plate one. A deep, almost-black forest green; all primary text, the cambium hairline, the darker halftones. - `#FF5C39` — *Riso Fluoro.* Ink plate two. The signature risograph fluorescent orange-pink; marginalia, plate numbers, the off-register halos, the "now" indicator, link underlines. - `#7A8F6E` — *Lichen.* A muted sage used only as a low-percentage halftone for the ring strips and plate midtones — never as a text colour. - `#0E1A14` — *Pith.* Near-black green for the deepest shadows in plates and the colophon rule. - Paper texture: a fixed, very low-opacity (4–6%) procedural grain (SVG `feTurbulence`) over the whole document; multiply blend. ## Imagery and Motifs **No photographs. No stock. No 3D renders. No icon font.** (98% of the corpus leans on photography — this is a flat refusal.) Every image is a **two-plate halftone illustration generated in SVG**: line work on the green plate, fill dots on the green plate at varying density, a second sparse dot layer on the fluoro plate offset by 2px, paper showing between the dots. The drawings are botanically literal — a zelkova leaf with its asymmetric serrations, a transverse slice of twig showing xylem, the diamond-fissured bark, a single seed (samara), the branching angle of a one-year shoot — rendered with the patience of a real plate engraving but the printing of a school duplicator. **Recurring motifs:** - **Growth rings** — concentric halftone arcs; the masthead has them, every hour boundary has a chord of them, the loading state is a single ring being drawn. - **The cambium hairline** — the 1px green vertical that organises the whole page; it "ticks" (a 1px fluoro notch) at every hour. - **Registration crop marks** — actual printer's crop/registration marks (the circled crosshair) in the four page corners and beside every plate, in fluoro. Decorative, honest, and rare in this corpus. - **Struck-through corrections** — text that's been crossed out and rewritten, visible, as if proofed by hand. - **Plate numbers in Roman numerals** — PL. I through PL. XII, scattered down the strip. - **A wandering ant** — one tiny SVG ant that, on a slow timer, walks a bezier path up the bark illustration and off the edge. The only "character." Never narrated. ## Prompts for Implementation Build namu.day as **one HTML file, one CSS file, one ES module** — no framework, no build step, no router, no service worker, no analytics, no fetch. Target under 90KB uncompressed. All "interaction" is scroll-driven and time-driven; there are no buttons except a single "to the top of the day" link in the colophon. **Opening sequence (first 2.5 seconds):** - 0.0s — Newsprint Bone fills the screen. Grain fades in over 400ms. - 0.3s — a single growth ring draws itself (SVG `stroke-dashoffset`, ~900ms, an `ease` that hesitates near the end like a pen running low) in Cambium Green, with a fluoro ghost ring 2px off behind it. - 1.1s — the masthead "namu.day" sets itself: Fraunces letters drop in with a 28ms stagger, each landing with a tiny vertical overshoot (3px) and settle — like type being tapped into a forme. - 1.4s — the Korean subtitle "한 그루 나무의 하루" fades up in Gowun Batang beneath it. - 1.6s — the cambium hairline draws downward off the masthead to the fold. - 2.0s — the first field note (the 04:51 첫빛 entry) is already there; nothing more "loads." **Scroll behaviour — this is the whole experience:** - The scrollbar is restyled into a thin **core-sample gauge** on the right: a vertical green track with a fluoro thumb shaped like a notch; beside the thumb a live `04:51 → 23:00` clock interpolates with scroll position. This is the only HUD. - As each **hour boundary** enters the viewport, its **ring strip** wipes in horizontally (a halftone band, ~600ms, `cubic-bezier` with a slight elastic tail), the cambium line's fluoro tick lights, and the hour marker's Fraunces numerals do a quick 1-step counter roll into place. - **Plates** reveal with a **two-pass print effect**: first the green plate fades up (220ms), then ~120ms later the fluoro plate slides in from 3px offset and "registers" — settling to its 2px misalignment, never to zero. Crop marks beside the plate blink once when registration completes. - **Marginalia** in the right gutter fade in with a tiny rotation settle (from 0° to its resting -1.5° or +2°) and a 60ms stagger between sibling notes. - **Struck-through corrections** animate when scrolled to: the strike line draws left-to-right (SVG, 180ms), then the replacement word fades in just above it. - The **ant**: an SVG path-following timer, independent of scroll; every ~40s it appears at the base of the bark plate and walks (CSS `offset-path`, ~22s, no easing — bugs don't ease) up and out. - All animation respects `prefers-reduced-motion`: rings appear already drawn, plates appear already registered, the ant simply doesn't walk, the clock still tracks scroll. - Type sets with a faint **ink-spread** on first reveal: 1px text-shadow in Cambium Green at 12% that fades to 0 over 300ms, mimicking ink soaking into paper. **Tone of motion:** everything should feel like a *hand-operated machine* — slight overshoots, hesitations, things that never land perfectly square. Nothing snaps; nothing is frictionless. No parallax of background layers, no cursor-trailing particles, no smooth-scroll hijack. The page moves at the speed the reader pushes it. **AVOID:** CTA buttons, "Get started," pricing tables, feature grids, stat counters bragging numbers, testimonial carousels, hero-with-form, glassmorphic panels, smooth multi-stop gradients, dark-mode toggle, cookie-banner theatre. There is no funnel here — only a tree and a day. ## Uniqueness Notes Differentiators from the 424 designs already in the registry, and from the seed defaults: 1. **A genuine two-plate risograph print model — misregistration as the law, not a filter.** Where the corpus uses "grain-overlay" (8%) and "noise-texture" (5%) as a thin cosmetic dusting, namu.day is *built* on a two-ink halftone separation: every shape carries a 1–3px wrong-colour ghost on one edge, every fill is countable dots, real printer's registration/crop marks frame the page. This is duplicator-machine wabi-sabi, distinct from the ceramic/imperfect-pottery flavour of the existing wabi-sabi designs. 2. **Scroll = depth = time, literally encoded as tree rings.** The page is a core sample: vertical position is both distance outward from the pith and hour of the day, with halftone "ring strips" at every hour and a restyled scrollbar that reads as a coring gauge with a live `04:51→23:00` clock. No card grid, no bento, no dashboard — a single broadsheet column with a structural cambium hairline. 3. **Zero photography, zero mono type, zero gradients, zero glass — by deliberate refusal.** Against a corpus that is 98% photographic, 94% mono-typed, 95% gradient, and 79% glassmorphic, this design uses only generated SVG halftone botanical plates, a Spectral/Fraunces/Gowun Batang/Caveat stack, flat halftone fills, and opaque newsprint. Anti-warm palette (cool grey-green bone + deep forest green + fluoro orange-pink) in a corpus that is 98% warm. 4. **One subject, no commerce, dry-naturalist voice.** Most "nature/botanical" entries in the registry are brand sites, spas, or shops with funnels. namu.day follows a single ordinary zelkova for one day with a fake plate-numbered field-journal voice, hand-struck-through corrections, a printer's colophon ("press run: 1 tree"), and a wandering ant as its only character. Nothing is for sale. Chosen seed/style: **wabi-sabi imperfect ceramic** — reinterpreted away from pottery toward the imperfect, off-register, solvent-smelling object that is a small-press risograph broadsheet. Composite vocabulary: *aesthetic: wabi-sabi · layout: editorial-flow / single-column · typography: serif-revival · palette: forest-green (cool-leaning, anti-warm) · patterns: path-draw-svg / scroll-triggered · imagery: line-illustration (two-plate halftone) · motifs: leaf-organic / growth-rings · tone: zen-contemplative crossed with raw-authentic.* Avoided overused patterns flagged by frequency analysis: hand-drawn (96%), glassmorphism (79%), photography (98%), card-grid (90%), full-bleed hero (88%), centered (84%), warm palette (98%), gradient (95%), parallax (91%), cursor-follow (89%), spring (85%), magnetic (81%), mono typography (94%), pastoral-romantic tone (34%).