# Design Language for yamichika.net ## Aesthetics and Tone yamichika.net reads in Japanese as **夜道近 — "the night road, close at hand"** — and the entire site is built as *a single unbroken walk along a mountain footpath at dusk*. Not a hiking brand. Not a meditation app. Something stranger and quieter: the site is the **field-notebook of a path-keeper** — the person in an old rural prefecture whose job, for four generations, has been to walk the same 4.2-kilometre mountain trail every evening at last light, repairing the stone steps, re-tying the rope handrails, replacing the small paper lanterns at the seven shrine-stones, and noting in a cloth-bound ledger what changed since yesterday: a fallen branch, a new fox-den, the river half a hand higher, a stranger's footprint going up but not coming down. The aesthetic is **wabi-sabi (侘寂) — imperfect, weathered, incomplete, and honest about it** — but specifically the *dusk* register of wabi-sabi: the half-hour the Japanese call 逢魔時 (ōmagatoki, "the meeting-time of spirits"), when colour drains, edges soften, and you walk more by memory than by sight. Wabi-sabi sits at 8% in the frequency analysis, and within that 8% the implementations are overwhelmingly *daylight ceramics* — a beige product page with a chipped bowl photographed on linen. yamichika refuses the studio entirely. There is no product. There is no shop. There is a path, a ledger, seven stones, and the last twenty-five minutes of light, and the visitor walks it. The tone is **zen-contemplative crossed with grounded-earthy** — patient, attentive, slightly tired in the good way, completely uninterested in selling anything. The path-keeper's voice in the copy is plain and exact: distances in steps and hand-widths, weather in the words a person actually uses on a hillside, no adjectives that aren't load-bearing. The mood the visitor should leave with is the specific calm of *having walked somewhere real with someone who knows it*. ## Layout Motifs and Structure The structure is a **single vertical immersive-scroll that descends — never ascends** — because you walk the path *down* the mountain at dusk, from the high shrine-stone toward the village lights, and the page scrolls the way you'd descend: each scroll-tick lowers you a few stone steps. Immersive-scroll sits at 16%, but the descent metaphor and the *fixed time-of-day* mechanic (see below) are the differentiators. **The walk has seven sections, one per shrine-stone (七つの石, "the seven stones"):** 1. **石一 — The Trailhead Gate (鳥居口).** Full-bleed dusk sky, a weathered torii silhouette, the path's mouth. The path-keeper's hand sets down the cloth ledger on the top step. Wordmark *yamichika.net* hand-cut into a wooden trail-marker post, slightly leaning. One line: *"4.2 km. Twenty-five minutes of light left. Walk with me."* 2. **石二 — The Stone Steps (石段).** A long descent of 108 uneven stone steps rendered as a continuous SVG path the scrollbar travels down. Ledger margin-notes appear beside specific steps: *"step 31 — loose since the autumn rain, wedged a wood shim under the left corner."* 3. **石三 — The Rope Handrail (縄手摺り).** The path narrows along a slope. A hand-twisted rope (drawn, animated, swaying) runs alongside the scroll. Knots in the rope are anchors — each knot, on hover, tells you what it was tied to repair. 4. **石四 — The River Crossing (沢渡り).** A small log bridge. The river height is noted against a worn measuring-pole. The water is the only thing on the site that moves on its own — a slow, dark, repeating ripple, never bright. 5. **石五 — The Fox Stone (狐石).** A shrine-stone with a stone fox. The ledger records the den below it — kits counted, last seen, what the path-keeper leaves out (and what is *never* taken, which is noted with respect, not worry). 6. **石六 — The Lantern Row (灯籠並び).** Seven small paper lanterns are lit, one by one, as the visitor scrolls — the only light source as the sky finishes darkening. By the end of this section the page is lit *only* by lantern-glow against near-black. 7. **石七 — The Village Light (里の灯).** The path ends at a low wall; below, the scattered warm windows of the village. The ledger is closed. A single line: *"Same path tomorrow. Last light again."* — and a tiny, plain way to leave one's own margin-note (a guestbook-as-ledger, handwritten-feel, no form-fields styled as a "CTA"). **The fixed-time mechanic:** a thin horizontal **light-bar** is pinned to the top edge of the viewport at all times — a 25-segment gauge of "minutes of light remaining." It depletes as you scroll down the walk. It is the site's only persistent UI. There is no nav menu. There is no header. There is no footer with link-columns. You navigate by walking, or you don't. **Strictly avoided layouts:** card-grid (93%), centered hero-text-over-photo, dashboard, bento-box, split-screen. Nothing on this page is a card. Nothing is a tile. The page is a path — one continuous descending ribbon — and breaking it into rectangles would be a category error. ## Typography and Palette **Fonts — Google Fonts only:** - **Shippori Mincho** (Google Fonts; weights 400/500/600/700/800) — the path-keeper's *carved and printed* voice. A Japanese-rooted mincho serif with crisp, slightly old-fashioned strokes. Used for: the wordmark *yamichika.net* (set 600, tracked +40, lowercase, the period before "net" rendered as a small carved dot but kept a literal `.` underneath for copy-paste), the seven section titles (石一…石七, large, weight 700), and all "carved into wood/stone" text — trail-markers, the measuring-pole numerals, the village-name on the low wall. - **Klee One** (Google Fonts; weights 400/600) — the *ledger hand*. A warm, brush-influenced Japanese style face that reads like careful fountain-pen handwriting. Used for *every margin-note in the ledger* — the step repairs, the river heights, the fox counts, the visitor's own guestbook entries. This is the site's emotional core voice. Set 400, line-height 1.85, slightly irregular left-margin (each note nudged ±3px) so the column never looks typeset. - **Zilla Slab** (Google Fonts; weights 300/400) — the *quiet technical voice*: distances, times, the light-bar's minute labels, the colophon, the rare bit of dry instruction. Mono-adjacent reliability without using an actual monospace (mono is at 93% — avoided deliberately). Set 300, tracked +20, small caps where it labels things. **Palette — the colours of a mountain path losing its light (dusk → near-dark + lantern):** - `#2A2E2B` **岩苔 (iwagoke, "rock-moss")** — the base dark; warm near-black-green, the colour of wet stone in shadow. Page background drifts from a dim slate toward this as you descend. - `#1A1916` **夜土 (yoru-tsuchi, "night earth")** — the darkest value, the trail underfoot in the final sections; reads black but is brown-warm. - `#7C7259` **枯草 (karekusa, "dry grass")** — muted ochre-grey; the rope, the worn measuring-pole, the dry edges of the path. The site's "mid-tone neutral." - `#A8452E` **錆朱 (sabi-shu, "rusted vermilion")** — the torii, the fox stone's bib, the ledger's binding-thread; a single deep weathered red, used sparingly, the only "warm accent." - `#E4B85C` **灯火 (tomoshibi, "lantern-flame")** — the warm gold of the seven paper lanterns and the distant village windows; appears *only* as light-source glow in sections 6–7, never as a flat fill. - `#C9C2AE` **薄明 (hakumei, "faint dawn/dusk light")** — the pale parchment of the ledger pages and the sky's last residual brightness; the lightest value on the site. - `#5A6157` **杉影 (sugi-kage, "cedar shadow")** — a desaturated grey-green for distant trees, fog, the soft far edges of every scene. Contrast is intentionally *low to moderate* — this is dusk; nothing here is meant to be high-contrast (28% in the data) or neon. Text is `#C9C2AE` or `#E4B85C` on the dark grounds; the ledger flips it (`#1A1916` ink on `#C9C2AE` paper). Everything is `muted` and `warm-earthy` — never `gradient` in the candy-mesh sense; the only gradients are *atmospheric light falloff* around lanterns and the sky's vertical dim. ## Imagery and Motifs **Primary medium: hand-drafted vector-art (line-illustration), single-weight ink, no photography anywhere.** Photography sits at 97% in the imagery data — yamichika has *zero* raster photographs. Every element is an SVG line drawing in `#7C7259` or `#C9C2AE` stroke (0.75–1.4px), occasionally with a flat `#5A6157` or `#A8452E` fill, on the dusk grounds. The drawing style is *deliberately a little uncertain* — lines that don't quite close, a stone step whose far edge is sketched twice, the wabi-sabi honesty that the path-keeper drew these in fading light by hand. **Recurring motifs:** - **The cloth ledger** — appears open in every section, its left page showing the scene's drawing, its right page filling with Klee One margin-notes as you scroll. Bound with a visible `#A8452E` thread along the spine. Slightly warped pages. - **Stone steps** — the SVG path the scroll travels; 108 of them across the descent (108 = 煩悩, the bonnō, the Buddhist count of worldly attachments — quietly thematic, never stated). - **Hand-twisted rope** — a two-strand twist drawn as a repeating SVG, with real knots at the anchor points; sways with a slow `path-draw-svg` shimmer. - **The seven shrine-stones (石)** — each a different weathered shape; a torii at the first, a stone fox at the fifth, a small jizō-like figure half-sunk in moss at others. Never cute. Worn, lichened, kind. - **Paper lanterns (提灯)** — small, oval, drawn with the bamboo ribs visible; light one-by-one in section 6 with a warm `#E4B85C` radial glow that's the only light by section 7. - **The measuring-pole** — a worn stake by the river marked in *sun* (寸, traditional hand-width units), water level shown against it. - **Footprints** — occasionally in the path's drawing: the path-keeper's own, and once, the stranger's "going up but not coming down" — a tiny, unsettling, unexplained detail in the section-4 ledger note. - **Fog / cedar shadow** — soft `#5A6157` blurred shapes at the edges of every scene, thickening as the walk descends and light fails. **No** glassmorphic cards (5% but everywhere it appears it's the same frosted panel), **no** gradient-mesh blobs, **no** neon glow, **no** lens flare, **no** 3D renders. The only "texture" is a faint, hand-laid paper grain on the ledger pages and a barely-there charcoal grain over the dark grounds — both subtle enough to read as material, not as a filter. ## Prompts for Implementation Build yamichika.net as **one static page — one HTML file, one CSS file, one small JS module (~7KB minified)** — no build step, no framework, no router. The only external dependency is the Google Fonts link (Shippori Mincho, Klee One, Zilla Slab). The full page excluding fonts should sit comfortably under 100KB; all imagery is inline or referenced SVG. **The walk (vertical scroll, descending, ~7 viewport-heights, seven 石 sections):** - **Pin the light-bar** to the viewport top: a 25-segment horizontal gauge labelled in Zilla Slab small caps ("LIGHT — 25 min" → "1 min"). It depletes via `scroll-triggered` progress as the visitor descends. When it reaches the last 5 segments, the page background eases toward `#1A1916` and the lanterns become the only light. This is the site's clock and its only persistent UI — there is no nav, no menu, no sticky header. - **The scroll IS the descent.** The central spine of the page is the 108-step SVG path; as you scroll, a soft `#E4B85C`-tinted marker (the path-keeper's lantern, small) travels *down* it via `path-draw-svg` offset. Steps reveal their ledger-notes with a quiet `fade-reveal` + `stagger` as the lantern-marker passes them — text fading in from `#C9C2AE` at low opacity, settling, the Klee One hand. Never a slide, never a bounce; everything here moves the way a tired careful person moves. - **Section transitions are landings**, not slides — the path widens into a small flat area at each 石, the scene's drawing assembles via `path-draw-svg` (lines drawing themselves, 0.75–1.4px stroke, the wabi-sabi "doesn't quite close" style preserved), and the section title (石一…石七) sets in Shippori Mincho 700. - **Subtle cursor interaction (not cursor-follow gimmickry):** when the visitor's pointer is still for >4 seconds, a faint Klee One line drifts up near it — a ledger-aside the path-keeper would say if you'd stopped walking ("the moss here is dry — three days now"). Move, and it fades. This is `micro-interactions`, used once, meaningfully. - **The river (石四)** is the only self-animating element: a slow, dark, low-amplitude `ripple` on the water SVG — never sparkling, never bright. Everything else on the page is still until the visitor's scroll moves it. - **The lantern row (石六)**: as the visitor scrolls through it, seven `#E4B85C` radial-glow lanterns light in sequence with a soft `blur-focus` warm-in — and the page's ambient light visibly drops to match, so by the end the visitor is reading by lantern-glow against `#1A1916`. - **The ending (石七)**: the village windows appear as scattered warm `#E4B85C` points below a low wall. The ledger closes (a gentle `morph` of the open-book SVG to a closed cloth bundle, `#A8452E` thread visible). One Shippori Mincho line: *"Same path tomorrow. Last light again."* Then a single plain text-field with a Klee One placeholder — *"leave a note in the ledger"* — styled as a ruled ledger line, **not** as a button-led form. A short colophon in Zilla Slab 300. **Storytelling first.** Every section earns its scroll-distance with the path-keeper's voice and a hand-drawn scene. Honour the wabi-sabi brief: visible imperfection, weathering, asymmetry, things left incomplete on purpose. Honour `prefers-reduced-motion` by drawing all SVGs in their final state and letting the visitor scroll a static path. Mobile: same descent, the light-bar slims to a 1px depleting line, the ledger pages stack (drawing above, notes below). **AVOID, explicitly:** any CTA band, any pricing block, any stat-grid or counter-animate "X happy customers," any card-grid of features, any testimonials carousel, any sticky nav, any newsletter-popup, any glassmorphism panel, any hero with a button. There is nothing to buy here and the design must never imply otherwise. The visitor walks a path with the path-keeper, and leaves. ## Uniqueness Notes Differentiators from the patterns in the frequency analysis: 1. **Wabi-sabi as dusk-walk, not daylight-ceramics.** Wabi-sabi is at 8%, and that 8% is almost uniformly a beige product page photographing a chipped bowl on linen. yamichika has *no product, no studio, no still-life* — it relocates wabi-sabi to a mountain footpath in the half-hour of failing light (逢魔時), making "imperfect/weathered/incomplete" a property of *a place being walked*, not an object being sold. 2. **A depleting light-clock as the only persistent UI.** No nav, no header, no footer-link-columns — navigation is *walking the path*, paced by a 25-minute light-gauge that physically darkens the page as you descend. This replaces the near-universal sticky-nav + hero + footer skeleton (centered 79%, full-bleed 84%, card-grid 93%) with a single descending ribbon. 3. **Zero photography in a field where it's 97%.** Everything is hand-drafted single-weight SVG line-art in dusk colours, drawn in the "lines don't quite close" wabi-sabi register — and the *only* self-animating element on the entire page is one slow dark river ripple. No glassmorphism (86% aesthetic / 5% imagery), no gradient-mesh, no neon, no cursor-follow gimmickry — and no monospace despite mono being at 93% in typography. 4. **The ledger-hand (Klee One) as emotional core, not decoration.** Most "handwritten" type (24%) is a one-off accent on a heading. Here the ledger margin-notes — step repairs, river heights, fox counts, the stranger's footprint "going up but not coming down" — *are the content*, and the visitor adds their own in the same hand at the end. 5. **Descent, not ascent; 108 steps; the seven stones.** The page only scrolls *down* the mountain (you walk the path down at dusk, toward the village lights), across 108 stone steps (the bonnō count — thematic, never stated) and seven shrine-stones, ending at scattered warm village windows rather than a call-to-action. **Chosen seed / style:** `wabi-sabi imperfect ceramic` (from seeds.json) — reinterpreted away from "ceramic still-life" toward "weathered mountain path at dusk." Primary aesthetic vocabulary: `wabi-sabi`; layout `immersive-scroll` (descending variant); typography Japanese-mincho `serif-revival` + `handwritten` ledger hand + restrained `slab-serif` technical voice; palette `muted` / `warm-earthy` (dusk → near-dark + lantern-gold); imagery `line-illustration` / `vector-art`, no photography; motifs `nature` / `cultural` (path, stone, rope, lantern, fox-stone, river); tone `zen-contemplative` + `grounded-earthy`. **Avoided per frequency analysis:** hand-drawn-cute (94%) — this is hand-*drafted* and austere, not whimsical; glassmorphism (86%); card-grid (93%); centered hero-over-photo / full-bleed-text-hero; mono typography (93%); cursor-follow (89%) used only as a single restrained still-pointer aside; photography (97%) — none at all; gradient candy-mesh (92%) — only atmospheric light-falloff gradients.