# Design Language for amamiya-hompo.net ## Aesthetics and Tone amamiya-hompo.net — 雨宮本舗, "the rain-shrine main shop" — is a vaporwave Tokyo at 3:14 AM, set inside the spread of an imagined Japanese fashion-and-music monthly that quietly went out of print in 1996 but kept publishing in our dreams. It is the long centerfold of *POPEYE × Studio Voice × i-D Japan* if that magazine had been printed on damp Shinjuku air instead of paper — gutters smelling of vinyl record sleeves, pages warped by rain, ad-spreads that are also love letters, photo essays that confess. The visual register is **vaporwave** but the *mature, melancholic* strain — not the meme-purple-statue cliché. Closer to Hiroshi Nagai's pool-side acrylics seen through a CRT that is just starting to fail; closer to the Roland Juno-60 chord that opens a 1986 city-pop ballad and then keeps holding, holding, never resolving. The tone is **conversational** in the way a long-time customer talks to the shopkeeper at two in the morning under a still-buzzing fluorescent sign — small confessions, weather chat, "you came back again," the half-bow, the receipt slipped into the bag. Sentences in the body copy lean toward a soft, second-person address ("you noticed the sign was crooked tonight"), shopkeeper notes are handwritten in the margin, and every section is allowed to trail off — a thought finished by the reader rather than the page. We are not selling. We are keeping the shutter half-open for whoever walks down the wet street. The mood is **rainy neon nostalgia**: the feeling of standing under an eave on a cobblestone alley in Kagurazaka while the kanji of a sake-shop sign drips magenta into a puddle. Loneliness, but kind. Pop, but hand-folded. Future, but the future as it was imagined the year you were eight. Every page should feel like flipping through a magazine the rain has gotten to — the colors a little more saturated for being soft, the gutters a little wider for being unsure. ## Layout Motifs and Structure The site is built as a **magazine-spread**: each route is rendered as a two-page layout filling the viewport at 100vh, with a visible center gutter — a 2-column CSS grid with a hand-tuned `gap: clamp(28px, 4vw, 72px)` and a faint vertical hairline (`#A06A8E` at 12% opacity) running the full height to suggest a binding. Pages do not scroll vertically inside the spread; instead the user *turns the page* with a horizontal scroll-snap (`scroll-snap-type: x mandatory; scroll-snap-stop: always`) that advances spread-by-spread. On narrow viewports the gutter rotates to a horizontal seam and turns become vertical — same gesture, rotated 90 degrees. The grid inside each spread is the editorial **8-column-per-page baseline grid** that classic Japanese monthlies used: 8 columns left page, 8 columns right page, baseline of 1.5rem. Headlines are allowed to break the gutter — to *bleed* across the binding — and oversized pull quotes are pinned to the gutter itself, rotated -90deg, set in tiny tracked-out kana so the binding doubles as a column rule. This is the **magazine-spread** layout in its most literal sense: the gutter is sacred, but it is also where the most personal text lives. Hero spreads use **asymmetric image-text counterweight**: a full-bleed neon-rain photograph occupies the entire left page, while the right page floats a short editorial — an "Amamiya Letter" of 60–120 characters — in the upper-right ninth, leaving the rest of the right page intentionally empty save for a hand-drawn page number, a date stamp in Showa-style 元号 ("R.08.05.09"), and a tiny weather glyph. Negative space is the design. The empty 7/9ths of that right page is the rain. Section transitions take the form of **chapter-divider spreads** — one full spread that is nothing but a single neon-pink Japanese kanji (本, 雨, 宮) at 38vw, a corner folio, and a one-line shopkeeper note. They function as visual breath, the way a magazine puts a full-bleed photograph between features. We do not return to a homepage; we return to the inside front cover. A persistent **paper-curl** motif lives in the lower-outer corner of every spread: an SVG corner that lifts on hover (`transform: rotate(-3deg) translate(-4px, -4px)`) revealing the next spread's color underneath. It is the only "next-page" affordance — no arrows, no buttons. ## Typography and Palette **Typography** is **elegant-serif** anchored, set in conversation with one humanist Japanese sans and one mono accent. Names are Google-Fonts-real: - **Display & Editorial Headlines:** *Cormorant Garamond* (weights 300, 500, italic 500). Used at clamp(56px, 9vw, 168px) for cover lines and pulled-out quotes. Letter-spacing tight (-0.02em), leading 0.92, italic preferred for verbs. - **Sub-display & Section Heads:** *Fraunces* (variable, opsz 144, soft-12). Used for the running magazine title bar and folios. The opsz axis is animated on hover from 14 to 144 over 600ms — a typographic *focusing* gesture that is the page itself blinking. - **Body Editorial:** *EB Garamond* (regular 400, italic 400, semibold 600). 17px / 1.6, max-measure 62 characters per column. The "Amamiya Letters" use this face exclusively. - **Japanese & CJK Companion:** *Shippori Mincho B1* (weights 400 and 700) for Japanese kanji/kana running heads, kicker labels, and 縦書き (vertical-writing) gutter quotes via `writing-mode: vertical-rl`. - **Caption / Mono Accent:** *JetBrains Mono* (weight 400) at 11px, tracked +0.18em, used only for date stamps, page folios, weather codes ("天候: 弱雨 / 18.4°C / 03:14"), and item SKUs. **Palette** is a strict **analogous** sweep across the magenta–violet–indigo arc — the wet-neon-at-night spectrum — with a single warm cream as paper. No greens. No oranges. Cohesion is the point. - `#FFE7F1` — *Sakuramochi Cream* — the paper of the magazine; the page ground. - `#F4A6C6` — *Plum-Blossom Sign* — light analogous accent; used for hairlines, folios, and the inner glow of neon ideographs. - `#E6588F` — *Shinjuku Magenta* — the dominant brand neon; reserved for headline bleeds, kanji chapter dividers, and the paper-curl reveal. - `#9C3F7B` — *Wet-Asphalt Plum* — mid-tone for body emphasis, italic underlines, and shopkeeper-note ink. - `#5C2A6B` — *Rainy Aubergine* — section headers and the running title bar background. - `#2E1E4A` — *3AM Indigo* — primary text on cream; full-bleed background for night-spread backgrounds. - `#15102E` — *Closed-Shutter Ink* — used sparingly for the chapter-divider full-bleed spreads, behind a single glowing kanji. - `#FFFFFF` at 6% — used as a soft halftone-noise overlay on every photograph (`mix-blend-mode: overlay`). The whole palette stays inside hue 290°–340° on the HSL wheel — that is the analogous discipline. The cream is the only "exit" from the arc, and it is used as page, not ink. ## Imagery and Motifs Imagery is **mixed-media**: photograph + scanned-paper + hand-drawing + 80s-Mac-pixel — never a single source. Every hero image is built from at least three layers: 1. **Photographic base layer:** a desaturated nighttime Tokyo street (Kagurazaka alleys, Shimokitazawa shutter rows, a Showa-era 商店街 arcade with rain on the asphalt). Treated with a duotone of `#2E1E4A` → `#E6588F` and a heavy `grain-overlay` (60% noise, blend `soft-light`). 2. **Scanned-paper layer:** a torn slip of pink memo paper or a folded receipt rotated 4–7°, with a real shopkeeper's pen-stroke crossing into the photograph. 3. **Vector neon layer:** SVG kanji or katakana drawn in a single stroke, given a neon-glow filter (a multi-layer `feGaussianBlur` stack at radii 2/8/24 in `#E6588F`). The neon is *always* slightly miscolored against the photograph — the way real signage bleeds onto a wet street. 4. **Optional pixel-collage layer:** an 8-bit umbrella, a vending machine, a cassette tape, or a fish-shaped soy-sauce bottle, rendered at exactly 32×32 and scaled with `image-rendering: pixelated`. **Motif vocabulary** is deeply **city-urban**, but the specific city is *Tokyo at night, in light rain, after the last train*. Recurring elements: - **Vending-machine glow.** A single column of vending machines rendered as a vertical neon strip in the spread margin; their light is the only light source on the spread. - **Wet-pavement reflections.** Headline kanji are mirrored beneath themselves at 22% opacity, blurred 6px, with horizontal smear — the type itself reflected in a puddle. - **Hand-drawn sign-shop kanji.** Each section is opened with a brush-drawn 漢字 (本 honpo, 雨 ame, 宮 miya, 夜 yoru) given a magenta neon outline and a black-ink fill. - **Receipt strips.** Long thin vertical SVG receipts running down the gutter, listing in JetBrains Mono the section's metadata: time, weather, page number, kanji count. - **Power-line silhouettes.** A black SVG of crossed Tokyo overhead wires sits behind the upper 18% of every cover spread, anchoring the urban geography without ever being foregrounded. - **Half-shutter (シャッター) frames.** Photo-frames are sometimes drawn as a half-rolled steel shutter with corrugated horizontal lines — opening upward as the user scroll-snaps the page. No stock photography. No human faces. The city is the protagonist; the shopkeeper is voiceover. ## Prompts for Implementation **Build it as a true magazine, not a website-with-magazine-styling.** - Implement spreads as `
` flex children inside a horizontal scroll container with `overflow-x: scroll; scroll-snap-type: x mandatory; scroll-snap-stop: always`. Each spread is `width: 100vw; height: 100vh; flex: 0 0 100vw`. Lock vertical scroll inside spreads. The page-turn is a horizontal swipe that audibly clicks (a soft paper-rustle, 64ms WAV, optional, off by default). - Use **CSS `paint()` Houdini** if available to draw the per-spread halftone noise; fall back to a tiled SVG noise filter (`feTurbulence baseFrequency=0.9`). - Ship a tiny custom cursor: an SVG of a *fountain pen nib* with a magenta ink drop trailing on movement, rendered in the cursor layer at 18×18. - **Skeleton-loading is the headline animation, not a hidden state.** While each spread mounts, render the entire layout as luminous magenta wireframes — column rules, baseline grid, headline bounding boxes — in `#E6588F` at 30% opacity on `#15102E`, with a slow left-to-right shimmer (`linear-gradient(110deg, transparent 0%, rgba(244,166,198,0.18) 50%, transparent 100%)` translating across at 1.4s ease-in-out infinite). Only after the imagery layer resolves do the photographs and serif headlines fade in over 900ms. The skeleton is a *beautiful* state, not a placeholder. On slow connections it remains visible long enough to be enjoyable. We prefer the skeleton. - **Storytelling is the structure.** The site has chapters: 表紙 (Cover), 街角 (Streetcorner), 本舗便り (Letters from the Shop), 雨宿り (Taking Shelter), 奥付 (Colophon). Each chapter is 3–5 spreads. The reader does not navigate — they *progress*. There is one back button: a folded paper corner at the top-left. - **No CTAs. No "Buy Now." No pricing tiles. No stat grids.** The only interactive primitives are: turn the page, lift the corner, hover a kanji to hear it spoken once at -18dB (audio attribute, click-to-enable on first spread), and pull a receipt strip in the gutter to expand a footnote. - **Animation language:** every motion is paper-physical or rain-physical. `cubic-bezier(0.22, 1.0, 0.36, 1.0)` for page turns. Tiny ink-bleed transitions on hover for headlines (a 320ms `filter: blur(0px → 0.4px → 0px)` shimmer). Neon kanji "flicker on" with a four-step keyframe (off-25%-off-100%) over 700ms on first spread mount. The cursor's ink drop trails using `requestAnimationFrame` lerp with damping 0.18. - **Responsive:** below 720px, the spread becomes a vertical foldout — gutter rotates, scroll-snap rotates with it. The 8+8 column grid collapses to 6 columns single-page. The italic display sizes scale with `clamp()`. Vertical-writing kana (`writing-mode: vertical-rl`) is preserved on mobile because it *fits better* there. - **Sound (opt-in):** ambient rain at -32dB, a single distant Yamanote-line bell once per session at the colophon spread. Off by default; enabled by an analog rocker-switch SVG in the colophon, not a modal. - **Copy voice:** second person, soft, lowercase Japanese-English bilingual mixing where appropriate ("ようこそ — you came back. it is raining again."). The shopkeeper has a name, *Amamiya-san*, who signs the colophon. Body copy is allowed to break midsentence and resume on the next spread — readers find this charming. **Bias toward immersion over information.** If a section can be replaced by a photograph and a single sentence, replace it. The website is a memory of a magazine; the magazine is a memory of a shop; the shop is a memory of a city block where it is always lightly raining. ## Uniqueness Notes This design is differentiated from the corpus on at least seven axes: 1. **True spread-based horizontal scroll-snap layout.** `magazine-spread` appears in only 2% of the corpus and `horizontal-scroll` in 6%; their combination — implemented as a literal binding-gutter two-page spread with corner-lift page turns — is unique here. Most sites are vertical-immersive-scroll; we refuse vertical scroll inside a spread on purpose. 2. **Skeleton-loading as a featured aesthetic state, not a transient placeholder.** `skeleton-loading` is in only 4% of the corpus, and in every case it is treated as a hidden loading hack. Here it is the *opening shot*: a luminous magenta wireframe magazine that the reader is meant to enjoy and even linger inside before the imagery resolves. On slow connections it is the design. 3. **Strict analogous palette (hue 290°–340° only) with cream-as-paper.** Only 4% of the corpus uses analogous; the discipline of staying inside a 50-degree hue arc — and using the warm cream exclusively as ground, never as ink — is not present elsewhere. There are no greens or yellows on this site, ever. 4. **Mature, melancholic vaporwave — not the purple-statue meme.** `vaporwave` exists at 12% of the corpus but always in its meme-iconography form (Greek busts, palms, marble). This is *city-pop vaporwave* — Hiroshi Nagai by way of damp Kagurazaka, Roland Juno chords, late-Showa magazines. The aesthetic register is melancholy-pop, not internet-irony. 5. **City-urban motif as a *specific* city at a *specific* hour.** `city-urban` is at 0% of the corpus. This implementation locates it precisely: Tokyo, after the last train, light rain, vending-machine glow, hand-painted shotengai signage. The city is a character, not wallpaper. 6. **Magazine-as-architecture, not as decoration.** Other "editorial" designs (32% of the corpus) borrow editorial *grids*. This one borrows the entire physical object: gutter, folio, masthead, chapter-divider spreads, colophon, paper-curl page turn, receipt-strip footnotes. The CSS column rule is a magazine binding. 7. **Conversational tone in second-person Japanese-English bilingual register.** `conversational` tone is at 2% of the corpus. The voice here is the shopkeeper at 3 AM — soft, addressed to "you," allowed to trail off, written in a JP/EN mix that mirrors how a Tokyo shopkeeper actually speaks to a regular customer. **Chosen seed (from assignment):** aesthetic: vaporwave, layout: magazine-spread, typography: elegant-serif, palette: analogous, patterns: skeleton-loading, imagery: mixed-media, motifs: city-urban, tone: conversational. **Avoided patterns (per frequency analysis):** - *Avoided* hand-drawn aesthetic (92% of corpus) — we use mixed-media instead, with photography + scanned-paper + vector neon + pixel collage layered. - *Avoided* photography-only imagery (96%) and full-bleed-only layouts (84%) — every hero is a true mixed-media composite, every layout has a literal binding. - *Avoided* mono-typography dominance (94%) — mono is here only as a tiny caption accent for receipts and weather codes; the body and display are unapologetically elegant-serif (which sits at only 2%). - *Avoided* parallax (92%), spring (62%), and cursor-follow (54%) — our motion language is paper-turn and rain-physical, not the standard scroll-parallax stack. The featured pattern is skeleton-loading, used as art. - *Avoided* warm/gradient palettes (90%/92%) — we are strictly analogous in the magenta-violet-indigo arc with one cream paper ground, no warm earth, no orange, no green. - *Avoided* generic "vintage" / "tech" motif vocabulary — "city-urban" is anchored to a single city, hour, and weather state.