# Design Language for yamichika.com ## Aesthetics and Tone yamichika.com is **a mountain pilgrimage rendered as a 16-bit hiking journal** — imagine the field notebook of a cartographer who walked the old Yamichika pass (山近道, "the near-mountain road") every season for forty years, except the notebook was kept on a 1991 portable computer with a four-colour LCD and a stuck pixel near the moon. The result is a quiet, contemplative site that looks like a side-scrolling adventure game paused mid-step: low-resolution pixel terrain, dithered fog, a single walking figure, and a status bar that reports not health or coins but *altitude*, *birdsong*, and *light remaining*. The tone is **zen-contemplative dressed in pixels** — the opposite of the usual pixel-art register, which is nostalgic-playful and arcade-loud. Here pixel-art becomes a discipline of *reduction*: every hill is the fewest blocks that can still read as a hill, every tree the smallest legible cluster. The mood is the held breath at a switchback when the valley opens below — patient, spacious, faintly melancholy, never cute. Copy is sparse, lowercase, written like trail markers: "spring · the moss bridge is slick", "you are 1,140 steps from the summit shrine". The visitor is not a player chasing a score; they are a walker, and the only objective is to keep walking until the path runs out and the screen fades to the colour of dusk. Inspiration: the parallax dawn skies of *Another World* and *Out of This World*; the dithered weather of early Game Boy *SaGa* maps; Hokusai's *Thirty-six Views* reimagined at 160×144; the contour lines of a survey map; the muted, foggy palette of a Bhutanese ridgeline at 6 a.m.; the patience of a *kō* pilgrimage where the walking *is* the prayer. ## Layout Motifs and Structure The site is a **single horizontal-scroll trail, divided into five "ri" (里, an old unit of road-distance)** — five viewport-width segments the visitor walks through left to right: *Trailhead*, *The Cedar Tunnel*, *Stone Steps*, *The Cloud Sea*, *Summit Shrine*. Horizontal-scroll sits at only 8% in the frequency analysis, and almost every instance there is a portfolio carousel or product gallery; yamichika claims the form for **literal walking** — scrolling right *is* moving along the mountain road, and the parallax depth (foreground rocks, mid-ground forest, far ridgeline, sky) makes the motion feel like footsteps, not slides. Structure rules: - **No card-grid, no bento-box, no centered hero stack** — the page is one continuous painted landscape strip, ~5 viewport-widths long, with content embedded *in the terrain* (a signpost is a heading; a wooden trail-shrine is a paragraph; a flat rock with carved characters is a quote). - **A persistent bottom status bar** (the "journal HUD"): a 3px-bordered pixel panel showing current *ri* name, an altitude meter that fills as you scroll, a tiny day-arc showing the sun's position (it descends across the five segments — Trailhead is morning, Summit Shrine is dusk), and a "birdsong" indicator that flickers between two pixel-bird glyphs. - **A persistent walking figure** ("the pilgrim"): a 14×20px sprite at the lower-left third of the viewport, mid-stride, with a 4-frame walk cycle that animates *only while the visitor is actively scrolling* — stop scrolling and the pilgrim stops, plants their staff, and the screen goes still. This is the core interaction metaphor. - **Vertical "rest stop" overlays**: at each *ri* boundary the trail passes a small structure (a torii, a bench, a stone lantern). Clicking it opens a half-screen pixel "journal page" panel that slides up from the bottom — handwritten-pixel text about that stretch of road. Closing it returns you to the walk. These are the only modal moments. - **Minimal navigation**: top-left, a tiny pixel compass rose; the only other nav is the altitude meter itself, which is draggable like a scrubber to fast-travel along the trail. - **No footer.** The trail ends at the summit shrine; ringing its pixel bell (a click) plays one soft tone and the screen slowly dithers to the dusk colour with a single line of text: "you walked the whole road. it is enough." ## Typography and Palette **Fonts (Google Fonts only):** - **Silkscreen** (weights 400/700) — the true bitmap face, used *only* for the smallest UI: the status-bar labels, altitude numerals, the *ri* names, the compass ticks. Set at exact pixel multiples (8px, 16px) with `image-rendering: pixelated` companions so it never anti-aliases. This is the "system font" of the journal computer. - **VT323** (weight 400) — the journal *body* face: a monospace terminal type that reads as the cartographer typing notes into the machine. Used for all trail-marker copy, the rest-stop journal pages, and the dusk closing line. Always lowercase, generous line-height (1.7), letter-spacing `0.02em`. Its slight CRT softness is the one place the design allows a blurred edge — the rest is hard pixels. - **Shippori Mincho** (weights 400/600) — the *carved-stone* face: used sparingly and large for the three or four moments where the trail passes a real engraved stone (the trailhead name 山近, a sutra fragment on a flat rock, the summit shrine plaque). Rendered as crisp vector serifs to contrast deliberately against everything pixelated — stone outlasts the machine. Vertical writing-mode (`writing-mode: vertical-rl`) for the stone inscriptions. **Palette — "four-colour LCD, foggy ridge edition":** The base discipline is a *4-tone* ramp per layer (like a real handheld), but the site uses a few of these ramps across depth planes: - `#0F1A14` — **deep cedar-shadow** (darkest ink; foreground rocks, the pilgrim's outline, status-bar border, text on light panels) - `#2E4A3A` — **moss-pine** (mid-ground forest mass, the cedar tunnel, signpost wood) - `#6E8C6E` — **fog-sage** (the cloud sea, distant ridgelines, dither fill, the "lit" altitude meter) - `#C7D6BE` — **dawn-paper** (sky near horizon, journal-page background, the lightest pixel) - `#E9EFE0` — **bleached linen** (page background behind the trail strip, journal modal field) - `#B7763C` — **trail-clay accent** (the dirt path itself, the torii, warning markers like "slick moss" — the *only* warm hue, used <8% of pixels) - `#3A5A78` — **far-water blue** (a glimpsed lake in *The Cloud Sea ri*, the morning sky band; appears in exactly one segment) - `#E8C45A` — **lantern-gold** (the sun glyph in the day-arc, the summit bell, the single stuck pixel near the moon — the rarest colour, a few dozen pixels total) Dither — never gradients — handles every transition: a checkerboard of `#6E8C6E`/`#C7D6BE` for fog thickness, of `#0F1A14`/`#2E4A3A` for forest depth. The whole site should look like it could be screenshotted onto a 160×144 panel and lose almost nothing. ## Imagery and Motifs **Primary imagery: vector-art drawn to a strict pixel grid** (vector-art ~6% in frequency, and there used for icon sets — here it builds an entire walkable landscape). Everything is hand-authored SVG with deliberately blocky path coordinates snapped to an 8px master grid, plus `shape-rendering: crispEdges`. No photography, no gradient meshes, no 3D renders. Recurring motifs: - **The contour-line ridgeline** — far mountains drawn as 2–3 stacked silhouettes in the fog-ramp, their tops a stepped staircase of blocks, never a smooth curve. A faint set of survey contour lines overlays the sky in `#6E8C6E` at 20% — the cartographer's annotations bleeding through. - **Dithered fog banks** — drifting checkerboard clouds in *The Cloud Sea ri*, animated by shifting their tile-offset 1px every 600ms so they crawl like real mountain mist. - **The cedar tunnel** — a corridor of tall trunk-blocks the trail passes *through*, where the palette darkens two steps and the birdsong indicator goes quiet (the journal HUD literally dims). - **Stone lanterns, torii, trail-shrines, a moss bridge, switchback signposts** — the structural furniture, each a small distinct pixel object that doubles as a content anchor. - **Pixel flora keyed to season** — a tiny season toggle (spring/summer/autumn/winter) re-tints the forest ramp and swaps flora sprites: cherry-blossom flecks, deep green, maple-red dither, bare branches + snow stipple. Default: a fog-bound early autumn. - **The pilgrim sprite & their cast shadow** — a 1px-tall flickering shadow ellipse that lengthens across the five segments as the day's-arc sun lowers. - **The stuck pixel** — one immovable `#E8C45A` dot near the top-right of every segment, exactly where the "moon" hangs in daylight. A fixed flaw in the machine, an Easter egg, a small joke about imperfection. Hovering it shows a VT323 tooltip: "dead pixel. or the moon. forty years and i never decided." - **A faint 1px scanline + slight vignette** over the whole canvas — just enough to say *this is a screen*, never enough to obscure. ## Prompts for Implementation Build yamichika.com as **one HTML file, one CSS file, one small ES module (~7KB minified)** — no framework, no build step, no service worker. The only external dependency is the Google Fonts link (Silkscreen, VT323, Shippori Mincho). Target under ~95KB total excluding fonts; all art is inline SVG, so it should fit easily. **Storytelling structure (five *ri*, left-to-right horizontal scroll, ~5 viewport-widths):** 1. **Ri 01 — Trailhead.** Morning light (`#3A5A78` sky band, `#E8C45A` low sun in the day-arc). A carved stone reading 山近 in vertical Shippori Mincho. A wooden signpost: "yamichika — the near-mountain road · 8 ri to the summit shrine · walk slowly". The pilgrim sprite stands at rest until the first scroll input, then begins the 4-frame walk cycle. Status bar boots up with a 3-step pixel "power-on" flicker. 2. **Ri 02 — The Cedar Tunnel.** Palette darkens two steps; birdsong indicator goes still and the HUD dims to 70% brightness. Trunk-blocks scroll past in the near plane (fast parallax). A trail-shrine here opens a journal page about how the founder cleared this tunnel by hand. Exiting the tunnel, brightness restores with a single-frame "blink". 3. **Ri 03 — Stone Steps.** The trail-clay accent forms a steep stepped staircase; the altitude meter climbs faster here (visual: it fills two ticks per viewport-width instead of one). A flat rock carries a sutra fragment in vertical Shippori Mincho. The pilgrim's walk cycle slows (5-frame instead of 4) to suggest effort. 4. **Ri 04 — The Cloud Sea.** The mid-ground drops away; dithered fog banks fill the lower half and crawl. A glimpse of `#3A5A78` lake far below through a gap in the mist. The far ridgeline now sits *below* the trail. Lightest, most spacious segment — mostly sky and fog with one bench rest-stop ("sit. the cloud sea moves slower than you think."). 5. **Ri 05 — Summit Shrine.** Dusk: day-arc sun nearly set, sky shifts to the fog-and-paper ramp going cool. A small pixel shrine with a `#E8C45A` bell. A plaque in Shippori Mincho. Ringing the bell (click): one soft sustained tone, the pilgrim plants their staff and bows (a 3-frame pose), and the whole canvas slowly dithers — tile by tile, ~2.5s — to `#0F1A14`, leaving one VT323 line centered: "you walked the whole road. it is enough." Below it, in Silkscreen: "↺ walk it again" — clicking warps back to Trailhead at morning. **Motion & interaction:** - **Walk-cycle-on-scroll** is the signature: the pilgrim animates *only* while scroll-delta is nonzero; idle = planted staff, still screen. Honour `prefers-reduced-motion` by replacing the walk cycle with a simple position update and freezing fog/parallax. - **Parallax planes**: 4 layers (foreground rocks ×1.4, trail+structures ×1.0, mid-forest ×0.55, ridgeline+sky ×0.18). All movement snapped to whole pixels — never sub-pixel — so it judders correctly like a real handheld. - **The day-arc**: the sun glyph's position is a pure function of scroll progress (0% = morning-low-left, 100% = dusk-low-right), arcing over the top. The shadow under the pilgrim lengthens accordingly. - **Typewriter-effect** (17% in frequency, used here with restraint): trail-marker copy and journal pages type in character-by-character in VT323 with a blinking block cursor — *but only when that signpost first enters the viewport*, and the visitor can skip to full text by clicking. This is the cartographer typing into the machine, not a gimmick. - **Altitude meter as scrubber**: draggable to fast-travel; releasing eases the canvas to the dropped position with a short pixel-step settle. - **Rest-stop modals**: half-screen journal page slides up from the status bar; VT323 text on `#C7D6BE`; closing it slides it back down. No backdrop blur (wrong texture) — just a 1px dither veil over the dimmed trail. - **Ambient micro-loops**: fog tile-offset shift, birdsong glyph flicker, a single grass-tuft sprite that sways 1px every ~2s, the stuck pixel doing nothing forever. **Hard exclusions:** no hero CTA stack, no pricing tiers, no stat-grid / counters, no testimonials, no logo wall, no email capture, no newsletter, no FAQ accordion, no chatbot, no cookie banner, no card-grid of "features". The page sells nothing and counts nothing — it is a walk that ends, then offers to begin again. ## Uniqueness Notes Differentiators from other designs in this codebase, each a deliberate move against the frequency analysis: 1. **Pixel-art as contemplative discipline, not arcade nostalgia.** Pixel-art sits at only 3% in the corpus, and every instance reads playful/retro-gaming-loud. yamichika collapses pixel-art into the 12% zen-contemplative tone — slow, foggy, melancholy, lowercase — which essentially no other site attempts. The aesthetic's whole point here is *reduction*, not *fun*. 2. **Horizontal-scroll as literal walking, not a gallery.** The 8% of sites using horizontal-scroll all treat it as a carousel of items. Here, scrolling right *is* footsteps on a mountain road, bound to a walk-cycle sprite that animates only while you move — the navigation gesture and the narrative are the same act. 3. **A status bar that reports altitude, birdsong, and remaining light** instead of any metric a normal site would surface. There is no "stats grid" (avoided, ~36% dashboard layouts in corpus) — the only numbers are *steps to the shrine* and *altitude*, and they exist to deepen the walk, not to impress. 4. **A deliberately broken pixel** (`#E8C45A` stuck dot) baked into every segment as a permanent, in-fiction flaw — a wabi-sabi gesture executed in the most un-wabi-sabi medium (a digital LCD), and a quiet refusal of pixel-perfection in a pixel-art site. 5. **Dither everywhere, gradients nowhere.** Gradient palettes appear in 92% of the corpus; yamichika uses zero gradients — every tonal transition is a hand-placed checkerboard dither in a 4-tone ramp, so the entire site could be screenshotted onto a 160×144 handheld panel with almost no loss. 6. **An ending that ends.** No footer, no "back to top", no infinite scroll — the trail terminates at a shrine bell whose ring fades the screen to dusk-black with one line of text. The only forward action is to walk it again. Avoided patterns from the frequency analysis: glassmorphism (86%) and hand-drawn (94%) aesthetics; card-grid (93%), full-bleed (84%), centered (79%), bento-box, and dashboard layouts; warm (98%) and gradient (92%) palettes; cursor-follow (89%), magnetic (76%), spring (83%), and tilt-3d patterns; photography imagery (97%); pastoral-romantic (30%) and warm-inviting tones. Borrowed sparingly and re-purposed: typewriter-effect (17%) as the cartographer's typing; mountain-landscape motif (1%) as the entire walkable world. Chosen seed: *aesthetic: pixel-art, layout: horizontal-scroll, typography: tech-mono, palette: forest-green, patterns: typewriter-effect, imagery: vector-art, motifs: mountain-landscape, tone: zen-contemplative*