# Design Language for amamiya-honpo.net ## Aesthetics and Tone amamiya-honpo.net is a **rain-shrine general store as cyberpunk emaki** — imagine a 280-year-old rural Japanese honpo (本舗 — "headquarters store") that quietly survived three regime changes, two corporate buyouts, and one off-grid AI uprising, and is now selling rice, lacquer, kerosene, and replacement neural-mesh filaments out of the same cedar-beamed front room. The roof still leaks in the same three places. The maneki-neko on the counter has a glowing barcode tattoo on its raised paw. The shop ledger is written in brushstroke kanji *and* in a JSON sidecar that nobody alive remembers commissioning. The name decomposes deliberately: 雨宮 (*amamiya*, "rain shrine") + 本舗 (*honpo*, "main store") — a sacred-commercial hybrid that has always existed in Japanese countryside life, where the local kami of rainfall and the local merchant of rice were often housed under the same eave. We push that hybrid into a near-future register without breaking its pastoral core. **The site is not "neon Tokyo cyberpunk."** Neon Tokyo is loud, vertical, electric, and crowded. amamiya-honpo is **agrarian cyberpunk** — slow, horizontal, kerosene-lit, and *empty*. Most of the screen at any given moment is rain. The dominant tonal register is **pastoral-romantic** as it would be written in 2089 by someone who has lived in the same valley for sixty years and remembers when the satellites still answered. Romance, here, is not flirtation — it is the romance of *attachment to place*: this hill, this awning, this paper lantern, this quietly humming relay station mounted to the roof of the storehouse. The cyberpunk elements never dominate; they intrude as gentle anachronisms. A drone the size of a sparrow nests in the eaves. The well's water-level is reported by a moss-covered sensor that pings once an hour. The shrine bell is rung by a small servo when no one has visited the inner sanctuary for more than four days. The mood reference set: - **Studio Ghibli's *Mononoke* forest interludes** — the ones with no dialogue, only mist and moving foliage — but lit by sodium-vapor and faint OLED. - **Hayao Miyazaki's storyboards for *Whisper of the Heart*** redrawn over a *Ghost in the Shell* establishing-shot color script. - **Hiroshi Yoshida's woodblock landscapes** (1920s, *shin-hanga*), reproduced on aged sepia parchment that someone has, very carefully, traced over in a fine-line stylus stroke that emits 0.3 lumens of green LED light when the parchment is moved. - **The rain scenes from Akira Kurosawa's *Dreams***, slowed by 40%. - **The cabinet of an old country-road *zakka* shop**, the kind where a wooden drawer labeled in faded sumi reads "電池 (batteries)" in 1953 handwriting, but the drawer contains a small holographic projector. The tone never raises its voice. There are no exclamation marks. There are no announcements. The site is the shop being open. The visitor is the customer who has stepped under the *noren* curtain to escape the rain. ## Layout Motifs and Structure The structure is a **horizontal-scroll emaki (絵巻)** — a hand-painted picture scroll that unfurls from right to left as the visitor scrolls. Horizontal-scroll is at 6% in the frequency analysis, and within that 6% almost every implementation is a portfolio gallery or a product carousel. amamiya-honpo claims the form for **narrative landscape** — a continuous painted hillside that the visitor walks across, with the shop's rooms, ledgers, well, and inventory revealed as embedded vignettes along the way. **The reading axis: right-to-left.** Native Japanese emaki are read from the right; we honor that direction. The page begins at the **far right edge** (the *kentō*, or registration mark) and the visitor scrolls **leftward** to advance. This is unusual on the modern web and is the design's first quiet refusal. Mouse-wheel-down maps to leftward scroll; trackpad and touch follow horizontal-natural. A small persistent **scroll compass** in the lower-right corner shows a dragonfly progressing along an ink line — the dragonfly is at the right end at page-load and migrates leftward as the visitor scrolls. The ink line is the unrolled portion of the scroll; the un-unrolled portion is implied by the unmarked space ahead of the dragonfly. **Total scroll length: roughly 6 viewport widths** (≈ 12,000px on a 1920-wide display). This is calibrated so that on a typical laptop trackpad the journey from far right to far left takes ~75 seconds of unhurried scroll — about the length of a real *emakimono* unrolled at reading pace. **The seven scenes (right-to-left):** 1. **The Approach (kentō / opening seal).** A weathered wooden signpost on a hillside path. The shop's full name, brushed in vertical kanji: *雨宮本舗*. A koan-length tagline in horizontal small caps below: *open since the rain learned to whisper*. The visitor's cursor is, for the first three seconds of page-load, a small paper umbrella opening. 2. **The Noren Curtain.** A four-panel indigo *noren* hangs across the screen. As the visitor scrolls leftward, the noren parts in the center and the shop interior reveals itself behind it. This is the only "transition" gesture in the entire scroll; every other scene flows continuously. 3. **The Front Room.** A long horizontal painting of the shop's front room: tatami floor, low *chabudai* table, a single oil lamp, three woven baskets. Mounted on the back wall is a small **status-board** built of wooden tiles — the tiles flip lazily, like a 1970s European train-station Solari board, and display the day's: rainfall (mm), well-water level (寸/sun), inventory turnover, and the local cicada count from the shrine grove. 4. **The Ledger Wall.** A continuous shelf of bound ledgers stretches across two viewport-widths. Each ledger is a story. Hovering over a ledger pulls it forward and opens it to a single brushed page describing one of the shop's "wares" — but the wares are not products, they are **services rendered, atmospheric and pastoral**: *the lending of a paper umbrella in mid-July*, *the witnessing of a marriage proposal beside the well*, *the boarding of a courier-drone whose battery cell dimmed to amber on the climb up the eastern ridge*. Each ledger's entry ends with a sumi-stamped date in the *Reiwa-Plus* calendar, an invented era that began the year the shop reopened after the 2071 floods. 5. **The Garden Spill.** The interior wall ends and the painting opens onto an exterior moss garden. A small stone *suikinkutsu* (water-koto) sits in the foreground; an audio cue is offered (declined by default) — if accepted, a single drop of water plinks every 14 seconds, hand-recorded, played through a soft low-pass. The sky in this scene is not blue; it is **sepia twilight**, lit from below by a faint cyan service-light from the shop's eaves. 6. **The Storehouse (kura).** A whitewashed *kura* with thick earthen walls. Its single window is open, and through it the visitor sees the shop's hidden modern infrastructure: a dozen neatly stacked battery cells, a server rack the size of a stepstool, a single humming green LED. The contrast is gentle, not jarring. The kura is treated with the same reverence as the shrine. 7. **The Inner Shrine (closing colophon).** At the far left, the scroll ends at a small wayside shrine — a fox statue with one chipped ear, a bamboo *omikuji* tube, and a hand-painted colophon in vertical brush: a haiku, the shop's contact information rendered as a single mailing address (no email, no form), and the **scroll's final seal** — a vermillion *hanko* stamped with the kanji 留 (*tomeru*, "to stay; to be remembered"). **The vertical axis is reserved for atmosphere, not navigation.** Light atmospheric layers (drifting rain, falling cedar needles, a far-distant pine-silhouette skyline) parallax vertically as the visitor scrolls horizontally — but no scene-content is ever placed off-screen vertically. Everything you need is on the horizontal scroll axis. This is the design's second refusal: vertical scroll is for sky and weather only. **Scene transitions are the *kasumi* (霞) cloud-bands** of classical Japanese painting — soft horizontal bands of fog that obscure the exact join between scenes. Where two scenes meet, a wash of pale sepia-cream cloud drifts across, hiding the seam. The visitor never feels they have entered a "new section" — they have simply walked further along the hillside. ## Typography and Palette **Fonts (Google Fonts only):** - **Zilla Slab** — Variable, weights 300/500/700. The site's primary slab-serif voice. Used for: shop wordmark "*amamiya-honpo.net*" (set lowercase, weight 500, tracked +30, with the period before "net" replaced visually by a small hand-drawn ink dot — but the underlying character remains a normal period for copy/paste). Used also for: scene titles in the painted vignettes, the ledger-page entry headings, and the colophon text. Zilla Slab is chosen because slab-serifs sit at only 6% in the typography frequency analysis, and within that 6% nearly every site reaches for *Roboto Slab*, *Bitter*, or *Arvo* — Zilla Slab is rarer and, critically, has a slightly *editorial-romantic* warmth in its lowercase 'a' and 'g' that suits a pastoral cyberpunk shop. We always render Zilla Slab on a slight 0.5px text-shadow in a near-transparent ink-bleed brown (`rgba(58, 38, 28, 0.18)`), to suggest that every glyph has been pressed onto sepia paper rather than rendered to a screen. - **Klee One** — weights 400/600. Used **exclusively** for vertical-set Japanese passages — the shop wordmark in kanji, the haiku at the colophon, the brushed entries inside the ledgers. Klee One is a Japanese pen-script face designed by Fontworks and available on Google Fonts; it has just enough hand-warmth to read as "shop calligraphy" without looking like a costume font. We set Klee One vertically using `writing-mode: vertical-rl` and `text-orientation: upright`, with line-height 1.85 and letter-spacing -0.04em (vertical equivalent). - **JetBrains Mono** — weight 400, 500. Used **only** for the four cyberpunk-anachronism elements: the wooden status-board tile readouts (rainfall, well-level, inventory, cicadas), the sensor-ping timestamps in the kura window, the green-LED service-light label, and the courier-drone battery-cell amber/green readout in the ledger entry. JetBrains Mono on the cyberpunk surfaces is rendered in a faint phosphor-green (`#7DA88B`) with a subtle 1px CRT-scanline overlay; everywhere else on the page, mono is forbidden. The visual rule is: *the past is set in slab, the contemporary infrastructure is set in mono, and the human voice (Japanese) is set in pen-script*. Three voices, never blended. **The palette: sepia-nostalgic with a single phosphor accent.** Sepia-nostalgic appears at 2% in the palette frequency analysis — effectively unclaimed. We commit to it fully and add only one electric color, used sparingly as a memory of the cyberpunk register. | Role | Hex | Description | |---|---|---| | Sepia paper (primary background) | `#F2E4CB` | Aged hand-laid washi paper — the dominant tone, ~60% of every viewport | | Sepia ink (primary text & line) | `#3A2A1C` | Sumi-brown ink, slightly warm; never pure black | | Sepia mid (illustration midtones) | `#A88B6A` | Cured-clay brown for painted shapes, mossy stones, wood beams | | Sepia shadow | `#6B4A30` | Deep tea-stain — shadows under eaves, the shrine fox's silhouette | | Sepia highlight | `#FAF1DD` | The brightest hand-painted highlight; lamp-glow rim, paper-edge sun | | Indigo noren | `#243B4F` | The single deep blue — the shop's noren curtain and the well-water | | Vermillion hanko | `#B73A2F` | The closing seal and the shrine fox's nose; appears exactly twice on the entire site | | Phosphor service-green | `#7DA88B` | The cyberpunk anachronism: status-board tiles, sensor LEDs, drone telemetry. Reserved. | | Amber low-battery | `#D49B4A` | Used once: the courier-drone battery indicator in the ledger | **Color discipline.** The phosphor service-green never bleeds into the sepia surfaces — it appears only inside framed elements (the status board, the kura window, the LED rim). The sepia surfaces never reach pure white or pure black; the lightest tone is `#FAF1DD` and the darkest sumi is `#3A2A1C`. The whole page should feel like it was photographed on Kodak Plus-X film in 1960 and is being viewed on a slightly warm matte display in 2089. ## Imagery and Motifs **Primary imagery: vector-art, hand-drafted.** Vector-art sits at 6% in the imagery frequency analysis, mostly used for icon-grids. amamiya-honpo treats vector-art as **continuous narrative landscape painting** — every element on the page is a hand-drafted SVG, line weight 0.75–1.5px, drawn in `#3A2A1C` ink on `#F2E4CB` paper, with painted-fill shapes in `#A88B6A` and `#6B4A30`. There is no raster photography anywhere. There are no photographic textures. The only "texture" is a subtle hand-laid *washi-paper* SVG noise layer (radius 0.6px, opacity 8%) applied as a multiply-blend on the body background. **The vector vocabulary — twenty-two hand-drawn motifs, each appearing exactly where the scene calls for it:** *Shop architecture:* the cedar-shingled roof line, the noren curtain (four panels), the wooden signpost, the lamp on the chabudai, three woven *kago* baskets, the bound ledger-spine (ten variants), the storehouse *kura* with its single open window, the small wayside shrine. *Nature elements (motif: nature, claimed at 18% but rendered here as agrarian-pastoral, not generic-tropical):* a single cedar tree at the right edge of the painting, drifting rain (forty individual line-segments, each with its own keyframe phase), a moss-covered stone, a *suikinkutsu* water-basin, three pine silhouettes on the far horizon, a dragonfly (the scroll-progress indicator), a single fallen *momiji* leaf at the kura's threshold, a fox-statue at the inner shrine. *The cyberpunk anachronisms (six total, hidden in plain sight):* the maneki-neko's barcode tattoo, the eaves-mounted relay-station antenna, the moss-covered well-sensor, the sparrow-sized drone in the eaves, the server rack visible through the kura window, the small servo on the shrine bell. **Each anachronism is drawn in the exact same ink-line weight as the natural elements** — no chrome, no neon glow, no holographic gradient. The anachronisms are integrated into the painting rather than overlaid on it. The only thing that ever betrays them is the phosphor-green LED, which is rendered as a single 2px filled circle at 60% opacity. A casual visitor may not notice the cyberpunk layer at all on a first scroll. That is the design. **The rain.** Rain is the site's leitmotif and is rendered as a continuous SVG layer of forty diagonal line-segments (15° from vertical), each a `` of length 16–24px and stroke `#3A2A1C` at opacity 0.35. Each segment has a CSS `@keyframes` falling-animation with a randomized 1.4–2.6s duration and a randomized 0–1.6s delay, so the rain *never* falls in lockstep. The rain layer is set behind the painted scenes but in front of the parchment background, so it falls *across* the painting. Crucially, **the rain is also the site's only ambient motion**. There is no "subtle floating particle." There is no "shimmer." There is rain, and there is the dragonfly, and there is the suikinkutsu plink (if accepted), and there is nothing else moving on the screen unless the visitor scrolls. **The seven *kasumi* cloud-bands** (the soft horizontal fog washes that hide scene-joins) are drawn as wide, thin SVG `` elements with a 6-stop horizontal linear-gradient from transparent → `#F2E4CB` at 80% → transparent, with a Gaussian blur filter (stdDeviation 14). They drift slightly in the vertical-parallax layer. ## Prompts for Implementation Build amamiya-honpo.net as **a single static page, horizontally scrolled, painted as one continuous emaki**. One HTML file. One CSS file. One small JS module (~6KB minified). No build step. No SPA. No client-side router. The Google Fonts link is the only external dependency. The full painted page (excluding fonts) should fit comfortably under 90KB. **Storytelling structure (right-to-left horizontal scroll, 6 viewport widths total):** The page begins as a closed scroll — the visitor sees only the first viewport-width's worth of painting, with the rest extending off the right edge. (Yes, the right edge — the page is RTL in scroll direction. This is the entire point.) The body has `direction: ltr` for text, but the main scroll container uses `transform: translateX()` controlled by `wheel` and `touchstart/touchmove` events to convert vertical input gestures into horizontal motion. The native scrollbar is hidden. A custom progress indicator is the dragonfly in the lower-right. **Scroll mechanics:** - The seven scenes are laid out in a single 600vw-wide flex container. - A `IntersectionObserver` watches each scene; when a scene enters the viewport, a `data-active="true"` attribute fires a small **scroll-triggered** entrance — *but only once, and only one element per scene*. (E.g.: when scene 3 becomes active, the lamp's flame begins flickering. When scene 5 becomes active, the suikinkutsu's audio cue is offered as a small dismissible toast at the bottom-center.) Scroll-triggered patterns are at 8% in the frequency analysis; we use them with restraint — never as "fly-in cards," only as *the scene quietly coming alive*. - A small parallax effect on the rain-layer (rain falls 1.15× the scroll speed) and on the far-horizon pine silhouette (0.4× the scroll speed) creates depth. - **There is no `position: sticky`.** There are no pinned headers. The painting is the only layer. - **There is no carousel, no autoplay, no auto-scroll.** The visitor is in control of pace; if they stop scrolling, the painting stops. The dragonfly stops on its ink line. **The opening three seconds:** - 0.0s: the closed scroll appears as a single sepia tile at the right viewport edge, with the kanji 雨宮本舗 brushed in vertically, and a single ink dot pulsing at its base. - 0.6s: the dot resolves into the dragonfly (the scroll-progress indicator). - 1.2s: a faint horizontal ink-line draws itself across the lower viewport, right-to-left, indicating the path the dragonfly will travel. - 2.4s: the rain begins falling — a single line-segment first, then four, then forty, staggered into life by `setTimeout` chains. - 3.0s: the cursor (if mouse) becomes a small SVG *paper umbrella*, opening from closed to open over 0.3s. The umbrella cursor persists for the entire session. **The painting itself: rendering strategy.** Use **inline SVG** for every visual element. Do not use raster images. Each scene is a single `` element, viewBox sized to its scene-width, with grouped `` layers for: background-wash, mid-painting, ink-lineart, lettering, anachronism-layer. The total inline-SVG payload across all seven scenes is ~55KB uncompressed. Compress the CSS and JS aggressively but leave the SVG **uncompressed and human-readable** in the source — the source itself is part of the design's pastoral honesty. Anyone who right-clicks → "View Source" should find the painting legible as XML, with comments in English describing each painted element. **Audio.** The suikinkutsu plink is the only audio. It is a hand-recorded water-drop sample, ~340ms long, looped at a 14-second interval, played through a soft low-pass filter and a -18dB gain. It is **off by default**. A small ink-rendered icon appears at the bottom of scene 5 (the garden); clicking it toggles the audio on. The icon is the kanji 音 (*oto*, "sound"), drawn in brushwork. There is no other audio. No background music. No voice-over. **Cursor.** The default cursor (mouse only — touch devices skip this) is a hand-drawn paper umbrella, rendered as a tiny inline-SVG, attached via `cursor: url('data:image/svg+xml...')`. The umbrella has two states: closed (default, while the visitor is moving) and open (when the visitor stops moving for >800ms). The state transition is a CSS `transform: scale(...)` animation. The umbrella is the only "interactive" cursor flourish on the site. **Hover behavior.** On the ledger wall (scene 4), hovering over a ledger spine *gently* pulls the ledger forward (translateZ via CSS perspective, ~30px of forward motion) and opens its first page — a brushed entry in Klee One. There is no flip animation. There is no card-flip. The ledger simply lifts and parts. On exit, it returns. **No element on the page has a click-to-do-something behavior** — there are no CTAs, no buttons, no forms, no email signups, no "subscribe" prompts. The site is the shop being open. That is the only thing it does. **Anti-patterns, explicit list (DO NOT BUILD):** - No CTA-heavy hero. No "Get Started" button. No "Sign up free" banner. - No pricing table. No tiered subscription block. No comparison grid. - No stat-grid ("400+ years of service / 12 prefectures / 0 complaints"). The shop does not boast. - No testimonial carousel. No "what our customers say" row. - No newsletter signup. No popup. No modal. - No cookie banner unless legally required, and if required it appears as a single line of brushwork at the bottom of scene 7 only. - No social-share buttons. No "share on twitter" widget. - No glassmorphism. No frosted blur. No gradient mesh. The page is matte sepia paper end to end. - No dark mode toggle. The page is what it is — sepia twilight is its only mode. **The colophon (scene 7) contains:** - A brushed haiku in Klee One, vertical-rl: 雨宮の／傘借りるなら／梅雨明けに ("If you must borrow / an umbrella from this shrine — / wait until the rains end"). - The mailing address of the shop: a single line in slab-serif, in a fictional but plausible Japanese rural prefecture format. (e.g., 〒999-0042 山形県西置賜郡白鷹町雨宮 1-1) - The *Reiwa-Plus* date of the page's last update — written as the Japanese era + year, not a Gregorian date. - The vermillion 留 *hanko* stamp. - Nothing else. No "© 2089". No "All rights reserved". The shop's name on the signpost is the copyright. **A quiet implementation note.** Every time the visitor reaches the colophon (the dragonfly arrives at the leftmost edge), the dragonfly *does not stop*. It continues past the edge of the screen, leaves the page entirely, and is replaced after 4 seconds by a faint line of brushed text reading: *また、いつでも* ("come back anytime"). This is the entire farewell. ## Uniqueness Notes This design's differentiators, each a deliberate departure from the patterns documented in the frequency analysis: 1. **Cyberpunk as agrarian, not urban.** Cyberpunk sits at 14% in the aesthetic frequency analysis, and within those sites the form is overwhelmingly neon-Tokyo-vertical-density. amamiya-honpo refuses every signifier of urban cyberpunk — no neon, no Hong Kong skyline, no chrome, no holographic billboards, no rain-on-glass — and rebuilds the genre as **rural cyberpunk**: a 280-year-old rain-shrine general store that has quietly absorbed three centuries of technology into its eaves without ever raising its voice. As far as the corpus shows, no other CMassC site uses cyberpunk in a pastoral register. 2. **Sepia-nostalgic palette claimed.** The sepia-nostalgic palette is at 2% in the frequency analysis — effectively unoccupied. amamiya-honpo commits to it fully, with a discipline that allows only one cyberpunk accent color (`#7DA88B` phosphor service-green) and two ceremonial colors (vermillion hanko, indigo noren). The palette is calibrated to the warmth of Kodak Plus-X film — a chromatic position no other site in the archive currently holds. 3. **Right-to-left horizontal scroll as an emaki.** Horizontal-scroll is at 6% in the layout frequency analysis. Within that 6%, every implementation in the corpus scrolls left-to-right and is a portfolio gallery or a product carousel. amamiya-honpo claims horizontal-scroll for **right-to-left narrative landscape painting** — the form of the classical Japanese *emakimono*. The reading direction is reversed from web norm. The form is a continuous painting, not a sequence of cards. This dual departure (RTL + narrative) is unique in the corpus. 4. **Slab-serif paired with a Japanese pen-script and used pastorally.** Slab-serif is at 6% in typography; within that 6%, slab-serifs are typically deployed for editorial or news contexts. amamiya-honpo pairs slab-serif (Zilla Slab) with a *vertical Japanese pen-script* (Klee One) and assigns each a strict semantic role: slab for shop's exterior voice, pen-script for the human Japanese voice, monospace only for the cyberpunk anachronisms. This three-voice typography rule, with vertical-rl Japanese as a primary register, is not found elsewhere in the archive. 5. **Vector-art as continuous painting, not icon-grid.** Vector-art is at 6% in the imagery frequency analysis, and the existing usage is icon-heavy and modular. amamiya-honpo treats vector-art as a *single continuous painted scene* spanning 600vw — the entire site is one drawn artifact, not a grid of glyphs. The page's source XML is, itself, a painting. This is a departure from how vector-art is typically deployed. 6. **Scroll-triggered animation used with restraint.** Scroll-triggered patterns sit at 8% in the frequency analysis, and the existing usage is "elements fly in" — cards, headers, badges, stats. amamiya-honpo uses scroll-triggered for *one ambient gesture per scene* (the lamp flickers, the suikinkutsu offers its audio, the dragonfly progresses) — never to introduce interface elements. The site has no interface elements to introduce. 7. **Avoidance of overused patterns.** This design explicitly avoids the most-overused patterns in the archive: hand-drawn aesthetic (92%), photography imagery (96%), gradient palette (92%), warm palette (90%), parallax pattern (92%), full-bleed layout (84%), centered layout (76%), and mono typography (94%). Of those, mono is the most flagrant — it is at 94%, and amamiya-honpo uses mono only for six tiny readouts representing six anachronisms, never for body or heading copy. Pastoral-romantic tone (16%) and the nature motif (18%) are kept but explicitly recontextualized: pastoral-romantic here is *rural Japan*, not *European cottagecore*, and nature is *cedar-and-cicada-and-rain*, not *floral-tropical*. Chosen seed — **aesthetic: cyberpunk, layout: horizontal-scroll, typography: slab-serif, palette: sepia-nostalgic, patterns: scroll-triggered, imagery: vector-art, motifs: nature, tone: pastoral-romantic** — fully committed, with the additional editorial decision to render cyberpunk in an agrarian register and to read the horizontal scroll right-to-left as an emaki.