# Design Language for memorial.wiki ## Aesthetics and Tone memorial.wiki is **a lapidary garden after closing time** — a place that behaves less like a website and more like a slow walk between weathered stones at the blue hour, when the carved names hold light a few seconds longer than the grass around them. The governing aesthetic is **wabi-sabi**: not the lifestyle-blog version with one artful ceramic bowl on a linen napkin, but the structural one — the acceptance of erosion, asymmetry, and the marks that time leaves on a made thing. Every surface here looks *handled*. Edges are soft from use. The paper has foxing. The stone has lichen. Letters have the faint shoulder-wear of a chisel that slipped once and was never corrected. The tone is **zen-contemplative** — quiet, unhurried, never solemn to the point of gloom. A memorial wiki is, at heart, a hopeful object: it exists because someone decided a life was worth writing down. So the mood is *tender attentiveness*, not mourning theatre. No black drapes, no violins, no candle-flicker GIFs. Instead: a grey-blue dusk that feels like the moment you stop and remember someone unexpectedly, mid-afternoon, and the day goes briefly still. Think of it as **the antithesis of the timeline feed**. Social media memorializes by burying. This site memorializes by *holding* — one entry at a time, given the whole screen, given silence around it. The reference points: the engraved frontispiece of a 1780s memorial volume; the rubbing of a brass church plaque taken on tissue paper; the way fog sits in the low parts of a cemetery at 5 a.m.; a stonemason's pencil mark left visible under the finished cut. ## Layout Motifs and Structure The spine of the site is a **timeline-vertical** layout — but not the corporate "our journey since 2014" timeline. Here the vertical axis is literally a *path*: a hand-drawn SVG line, slightly trembling, like the trodden trail through grass between rows of headstones. It runs down the left third of the viewport and never quite straightens. Entries — lives, articles, memorials — hang off this path like markers along a walk. You scroll, and the path draws itself ahead of you a beat before each new marker arrives. - **The walk, not the grid.** There is no card-grid. There is no bento box. Each memorial gets a **full-height "station"** — one screen, one life. Within a station: the name set large and stone-cut on the left near the path; a single epitaph line; a body column of recollections set narrow (around 58 characters) like a column of inscription; and generous, deliberate emptiness around it — *ma*, the negative space that lets a name breathe. - **Asymmetric by erosion, not by trend.** Stations are never centered. Each one is offset a little differently — some text pushed left against the path, some drifting right into the open field — as if placed by hand over decades by different caretakers. The asymmetry should feel *accumulated*, not composed. - **The lych-gate header.** The top of the site is a covered threshold: a wide, low band with the wordmark "memorial.wiki" carved into it, a faint engraved rule beneath, and nothing else — no nav bar fighting for attention. Navigation (search the wiki, recent entries, contribute) lives in a single quiet column that slides in from the path-side margin when summoned, styled like a hand-lettered index card slipped between pages. - **The footer is a register book.** The page ends not with links and a copyright line but with an open ledger spread — two faint ruled pages — where the most recently added names are written in, one per line, in a settling ink. - **Reading width respects the eye.** Body text never exceeds ~620px. The path, the name, the epitaph, and the body sit in a loose four-zone rhythm from left edge inward, but every station re-tunes that rhythm slightly. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / names / wordmark — *Cormorant Garamond* (weights 300 and 500, also 600 italic).** This is the chisel voice. Used very large for the name of each memorial (clamp from ~52px to ~104px), letter-spacing opened slightly (+0.02em) so it reads like spaced lettering on a plinth. Its high stroke contrast and slightly nervous serifs give it the look of letters cut by hand rather than set by machine. Wordmark uses the 500 weight, small-caps-ish via uppercase + tight tracking. - **Epitaph / pull quotes — *Cormorant Garamond Italic 600*.** One italic line under each name. Always a single line. Always italic. The "carved in cursive" line a family chooses. - **Body / recollections — *Spectral* (weights 300, 400, and 400 italic).** A screen-tuned serif with enough warmth and a tall x-height for comfortable long reading; it sits humbly under Cormorant without clashing. Generous leading (1.75). This is the prose voice — diary-like, plain. - **Meta / dates / index card / register — *IBM Plex Mono* (weight 400, also 300).** The archivist's hand: catalogue numbers, dates ("1931 – 2009"), "added 11 May 2026", page references, the search field. Quiet, even, slightly clerical. Used small (12–14px), letter-spacing +0.04em. **Palette — "cool-grays," a dusk-and-stone register (minimum three, here eight):** - `#E9E7E1` — *bone paper*: the base background, a warm-leaning off-white like aged rag paper, never pure white. - `#DCDAD2` — *limewash*: secondary surface, the index card and register pages. - `#9FA6A2` — *lichen grey-green*: hairline rules, the drawn path's resting color, subtle dividers. - `#6E7A7E` — *slate dusk*: secondary text, meta, dates — a cool blue-grey. - `#3A4248` — *graphite*: primary body text; near-charcoal with a blue undertone, never #000. - `#2A3035` — *deep slate*: the lych-gate header band and footer ledger background. - `#B7BEC0 → #8C9698` — *fog gradient*: a very low-contrast vertical wash used only behind a hovered/active station, the "the day went still" effect. - `#7E4B3B` — *iron-oxide*: the one warm accent — the color of rust bleeding from an old fixing pin into stone, and of settling ink in the register. Used sparingly: the active link underline, the freshly-written name in the ledger, the chisel-slip mark. Contrast stays deliberately gentle except for body text on bone paper (graphite on `#E9E7E1` — comfortably readable). Nothing screams; the page is meant to be *low-light*. ## Imagery and Motifs **No photography. No stock. No 3D renders. Everything is SVG, drawn, rubbed, or printed-feeling — and everything looks aged.** - **Paper-aged everywhere.** A faint, irregular foxing texture (sparse warm-grey blots, very low opacity) tiled at large scale over the bone-paper background; a 1px deckled edge on the index card and register; a barely-perceptible vertical "fold shadow" down the center of the footer ledger. The grain is *uneven* — wabi-sabi means it pools in the corners. - **The drawn path** — the hero motif. A single hand-vectored polyline, ~2px, lichen-grey, with a deliberate wobble (Bézier handles nudged off-true). It runs the full scroll length. `stroke-dasharray` animates it into existence just ahead of the reader. At each station it briefly thickens and warms (iron-oxide) like a worn patch where feet have stopped. - **Brass-rubbing letterforms.** When a memorial name first reveals, render it for ~600ms as a "rubbing": the glyphs filled with a tissue-paper texture and a slightly mis-registered iron-oxide shadow offset, then settle into clean graphite — as if someone just lifted the paper off the plaque. - **Lichen.** Tiny SVG lichen rosettes (concentric uneven rings, sage-grey, 8–20px) scattered with intent near the bases of names and along the path — never symmetrical, never more than a few per screen. They are the only "ornament" and they are *growth*, not decoration. - **The candle, demoted.** Candle-atmospheric imagery is in the corpus at ~6% and almost always literal and flickery. Here there is exactly **one** candle reference and it is abstract: a single soft warm radial bloom — `#7E4B3B` fading to nothing, ~40vw wide — that sits low behind the very first station and *does not move*. A held breath, not a flame. It never appears again. - **Engraved rules.** Section breaks are not lines but *grooves*: a 1px lichen-grey line with a 1px bone-paper highlight directly beneath it, so it reads as incised into the page. - **The register names.** In the footer, recently-added entries appear as if written: each name draws on (SVG path of a handwriting-style stroke) in iron-oxide that darkens to graphite over 2s, the way fresh ink settles. ## Prompts for Implementation Build memorial.wiki as **a single-route vertical walk** — one HTML document, one CSS file, one small JS module. Treat the whole page as a slow stroll down a path between markers at the blue hour. The reader's job is to walk and remember; the site's job is to hold one life at a time in the light and then quietly hand them the next. No CTA banners, no pricing tiers, no stat grids, no testimonial carousels, no "join now" pulse buttons, no cookie-styled popups. There is the lych-gate, the path, the stations, the register. That is all. **Structural sequence (top to bottom):** 1. **Lych-gate.** Deep-slate band, full width, ~30vh. "memorial.wiki" carved in Cormorant 500, uppercase, wide tracking, in limewash with a 1px-inset darker letterpress shadow. A single engraved groove rule beneath. One line of IBM Plex Mono, small, slate-dusk: *"a wiki of remembered lives — written down so they keep."* Nothing clickable visible except a tiny mono "≡ index" at the path-side margin. 2. **The first station — the held breath.** The static iron-oxide radial bloom low and behind. One name, very large, brass-rubbing reveal. One italic epitaph line. A short body column. The drawn path begins here, descending from under the lych-gate. 3. **Subsequent stations** (the demo can show 4–6). Each: name, epitaph, narrow recollection column, date range in mono, a couple of lichen rosettes, asymmetric offset that differs from the last. As each enters viewport: the path draws ahead of it, the station's fog-gradient wash fades in behind, the name does its rubbing-reveal, body lines do a soft `fade-reveal` with gentle stagger (≤80ms apart, no bounce — these are settling, not springing). 4. **The index card** (summoned by "≡ index"): slides in from the left margin over the path, limewash with deckled edge, hand-lettered look. Contains: a search field (mono, underlined not boxed), "recently written" list, "add a remembrance" link. Iron-oxide active underline that draws left-to-right (`path-draw-svg` style). Dismisses by clicking the path. 5. **The register footer.** Deep-slate ground, two faint ruled limewash "pages" side by side, center fold-shadow. Recently added names write themselves in, one per ruled line, ink-settling animation. A last mono line, very small, slate-dusk: the count of remembered lives and "tend this garden — anyone may add a name." **Motion principles:** - Everything is **slow**. Page transitions and reveals run 600–1200ms with eased, almost-overdamped curves (`cubic-bezier(.2,.6,.2,1)`). Nothing overshoots. The mood word is *settling*. - The **path draw** is the primary animation, tied to scroll progress (`stroke-dashoffset` mapped to scroll), always rendering a little ahead of the reader so the trail seems to invite. - **No parallax of decorative junk.** The single allowed depth move: the foxing texture and the static candle bloom drift at ~0.92× scroll — barely. The path and text move at 1×. That's it. - **Brass-rubbing reveal** on every memorial name as it crosses ~70% viewport height: texture-filled glyphs + offset iron-oxide ghost → clean graphite over ~600ms. - **Ink-settling** for register names: SVG stroke path draws in iron-oxide, color-shifts to graphite over ~2s. - Honor `prefers-reduced-motion`: path appears already drawn, names appear already settled, fog washes are static. The walk still works; it's just already walked. **Voice in copy:** plain, present-tense, kind. "Here is someone." "She kept bees." Never marketing. Never "celebrate the legacy of." The wiki sounds like a careful neighbor, not a funeral home. ## Uniqueness Notes Differentiators against the frequency corpus: 1. **Structural wabi-sabi, not the lifestyle kind.** Wabi-sabi sits at ~6% in the aesthetic frequency table, and where it appears it's usually "one nice ceramic vase, beige." This design uses it as a *layout and texture philosophy*: accumulated asymmetry, visible chisel-slip, uneven foxing, a path that won't straighten. Erosion as a design system, not a mood board prop. 2. **Timeline-vertical reimagined as a literal walked path.** Timeline-vertical is at ~3% in layout. Every instance I'd expect is a corporate milestone ladder. Here the vertical axis is a hand-drawn, scroll-bound, wobbling SVG trail with worn patches — a cemetery footpath, not a roadmap. 3. **The candle deliberately demoted.** Candle-atmospheric motifs (~6%) almost always mean a literal flickering flame on a memorial-themed page. This site has exactly one candle reference, it is a single static abstract glow shown once, and it never animates — a pointed refusal of the obvious genre cliché. 4. **No photography in a genre that runs 98% photography.** memorial.wiki is entirely SVG, drawn, and "rubbed" — brass-rubbing letterforms, lichen rosettes, engraved grooves, a register that writes itself. It opts out of the single most universal pattern in the corpus. 5. **Anti-feed memorial structure.** Card-grid (88%), centered (86%), full-bleed (89%), parallax (94%), cursor-follow (89%), magnetic (80%), spring (86%) — this design uses essentially none of them. One life per screen, slow settling motion, no magnetic buttons, no cursor toys, no springy bounce. The deliberate quietness *is* the differentiator. Chosen seed / style: **aesthetic: wabi-sabi, layout: timeline-vertical, typography: garamond-classic, palette: cool-grays, patterns: path-draw-svg, imagery: paper-aged, motifs: candle-atmospheric, tone: zen-contemplative** (derived from the seeds.json vocabulary; closest seed line: "wabi-sabi imperfect ceramic" re-pointed toward an archival memorial register). Avoided patterns from frequency analysis: hand-drawn aesthetic (96%), glassmorphism (74%), photography imagery (98%), warm palette (98%), gradient palette (96%), card-grid (88%), centered (86%), full-bleed (89%), parallax (94%), cursor-follow (89%), magnetic (80%), spring (86%), mono-as-primary-display, tilt-3d. The only common pattern retained is path-draw-svg (~32%) and a restrained fade-reveal/stagger — both used in service of the walk, not the trend.