# Design Language for showa.boo ## Aesthetics and Tone showa.boo is a haunted Shōwa-era photo album — a thick, foxed, cloth-bound scrapbook from somewhere between 1958 and 1986, found in the back room of a closed-down 喫茶店 (kissaten) in a town that has since been swallowed by a bypass. The "boo" is literal: a small, polite ghost — *obake-chan* — lives between the pages and turns them for you, narrating the photographs of people it half-remembers. The mood is **nostalgic-retro fused with mysterious-moody**: warm tungsten light dimmed by decades, the sweet acetone smell of old film, the static hiss of a National-brand transistor radio, and underneath all of it a faint, unhurried sadness — *natsukashii* with a chill in the spine. Nothing jump-scares. The haunting is gentle, like dust motes in a sunbeam that move when no one is breathing. The reference vocabulary is **skeuomorphic** album-craft, **sepia-toned history**, and 昭和 物 (Shōwa-mono): rotary dials, mosaic-tile counters, melamine coffee cups, manila envelopes, mimeograph purple, the orange-and-cream of a Showa Showa-period vacuum flask. This is explicitly NOT the corpus default — no hand-drawn doodles, no frosted glass panels, no clean mono terminal grids. It is *physical* and *aged* and *quiet*. ## Layout Motifs and Structure The site is an **album you leaf through**, not a page you scroll. Primary layout is a **magazine-spread** centered in the viewport: a two-page open-book at 100vh, leather-grained gutter down the middle, slight barrel-curve shadow at the binding via `radial-gradient`, deckled (torn) outer edges. Within each spread, photographs are **collage** — `position: absolute` snapshots rotated `-7deg`/`+4deg`/`-2deg`, each held down by translucent photo-corner tabs (`clip-path` triangles) or a strip of yellowed Sellotape (a thin warm `linear-gradient` rectangle at 35% opacity with a faint specular sheen). Captions are handwritten in fountain-pen blue on the album's black paper, often crossing slightly under the photo edge. Navigation is **page-turn**: a horizontal scroll-snap (`scroll-snap-type: x mandatory; scroll-snap-stop: always`) with a corner-lift hover on the lower-right of each spread (the page peels up, revealing the ghost's pale fingertips). One special structural device: **the loose insert** — every third spread has a real overlapping artifact (a postcard, a movie ticket stub from a 名画座, a pressed momiji leaf, a developed-photo envelope with the negatives still inside) that sits *above* the spine shadow and can be dragged a few pixels with `:active`. The footer of the whole album is the **back cover**: dark cloth board, an embossed publisher's colophon, and a single library due-date card whose last stamp is smudged. Avoid bento-box, dashboard, card-grid — this is bound paper, not a CMS. ## Typography and Palette **Typography** pairs an elegant Shōwa-print serif with a humanist sans for "modern" annotations and a real handwritten face for the ghost's marginalia — all Google-Fonts-real: - **Album titles & chapter plates:** *Shippori Mincho B1* (weights 500, 700) — a Japanese Mincho with strong, slightly old-fashioned serifs; used for cover lines at `clamp(40px, 7vw, 132px)`, tight tracking `-0.01em`. For the rare Latin display word, fall back to *Zilla Slab* (700) so the slab weight matches the Mincho's heaviness. - **Captions, body, the ghost speaking:** *Zen Maru Gothic* (300, 400) — softly rounded Japanese gothic, the texture of a 1970s product label and PTA newsletter; for Latin running text use *Newsreader* (italic 400, roman 400, opsz on) at 17–19px, leading 1.7. - **The ghost's handwriting / annotations:** *Yomogi* (400) — a wobbly, friendly Japanese handwriting font; rendered in fountain-pen ink, occasionally `rotate(-1.5deg)` and overlapping photo edges. - **Stamps, due-date card, mimeograph headers:** *Special Elite* (400) — worn typewriter, used sparingly for "filed", dates, and the library card; ink density varies via `text-shadow` doubling at low opacity. **Palette — sepia-toned history with a haunted cool undertone:** - `#F2E6CE` — album paper, aged ivory (page base) - `#1C1611` — album board / black photo-mount paper (deep warm black) - `#8C5A2E` — foxed sepia / leather binding (photo duotone shadow) - `#C99A52` — brass photo-corners, embossed colophon, warm highlight - `#3A4B6E` — fountain-pen ink blue (captions, the ghost's speech) - `#7D8B9A` — *obake-chan* — the cold pale grey-blue of the ghost itself (glow, fingertips, mist) - `#A03E2F` — hinomaru red / Showa product accent (used for one element per spread only: a circle stamp, a flask stripe, a torii in a snapshot) - `#EFE3C2` / `#E6D4AC` — paper highlight / paper midtone for subtle page texture banding Photographs are duotoned `#1C1611` → `#8C5A2E` with a faint `#7D8B9A` haze layered at the edges where the ghost has touched them. ## Imagery and Motifs Imagery is **paper-aged + vintage-photography + collage**, never a flat clean illustration. Every "image" is built from at least three stacked layers: 1. **Photo base:** a black-and-warm Shōwa snapshot — a family on a engawa, a 団地 balcony with futons airing, schoolkids at a sports day with the hinomaru bento, neon of a shōtengai arcade in the rain, a kissaten counter with a siphon coffee maker. Square format, rounded-ish corners, white photo-border, the date printed in tiny orange digits in the corner. 2. **Aging layer:** `mix-blend-mode: multiply` foxing stains (irregular SVG blobs in `#8C5A2E`), a faint diagonal crease, a thumbprint in the lower corner, light leak bloom in `#C99A52`. 3. **Ghost layer:** a soft `#7D8B9A` luminous smudge — sometimes a half-formed face, sometimes just two faint hand-shapes lifting the photo's corner — animated to *breathe* on a 6s ease-in-out loop, only ~12% opacity so you doubt you saw it. Recurring motifs: **brass photo-corners** (small triangles in every collage); **washi tape** strips; **the due-date card** (a real `` of faded purple stamps in the footer); **dust motes** (tiny `#EFE3C2` particles drifting on parallax, denser near light); **the rotary phone dial** as the scroll/page-turn progress indicator (the dial returns with a spring as you advance a spread); **mimeograph purple** smudges behind chapter titles; **a single momiji leaf** pressed flat, slightly translucent, that reappears as a bookmark across spreads. Decorative borders on chapter plates are a **restrained Shōwa book-frame** — double hairline rule with a small corner flourish, far from the corpus's rare victorian-ornate maximalism but unmistakably *printed-in-1971*. ## Prompts for Implementation Build it as a **physical haunted album**, not a website with album styling. - Implement spreads as `
` flex children in `overflow-x: scroll; scroll-snap-type: x mandatory; scroll-snap-stop: always`; each is `flex: 0 0 100vw; height: 100vh`. Lock vertical scroll inside a spread. The page-turn is a horizontal swipe or a click on the lower-right corner-peel. Optional, off by default: a 70ms paper-rustle WAV on turn. - The **binding gutter** is a centered vertical band: `radial-gradient(ellipse at center, rgba(0,0,0,.28), transparent 60%)` plus a 1px `#8C5A2E` hairline; outer page edges use `clip-path: polygon(...)` with ~12 jittered points for a deckled torn look, plus a `filter: drop-shadow` for lift. - Photos: absolutely positioned, `transform: rotate(var(--tilt))`, duotone via CSS `filter` + a `::after` overlay for grain (`background: repeating-conic-gradient` noise at 6% opacity, `mix-blend-mode: overlay`). On hover: photo lifts 4px with a soft drop-shadow and the ghost layer's opacity eases from 0.12 to 0.22 — the haunting *notices you*. - **The ghost (obake-chan)** is the storyteller. It is a `cursor-follow` element — a small `#7D8B9A` blurred blob with two faint dot-eyes — that drifts toward the pointer with heavy **spring** easing and a long lag, occasionally pausing to "look at" a photograph (it parks near a photo and a fountain-pen caption types out in *Yomogi* via a slow **typewriter-effect**, 38ms/char, with the cursor a tiny inkblot). When idle 8s, it yawns (scale pulse) and a few extra dust motes appear. Respect `prefers-reduced-motion`: the ghost then simply fades between fixed positions, no follow, no typing. - Page-load is a **skeleton-loading state played as craft**, not a spinner: the spread assembles — blank album paper first, then photo-borders fade in, then photos drop into their corners with a small **bounce-enter** and a click of brass, then captions write themselves. Treat the load like opening the book. - Scroll/turn progress is the **rotary dial**: an SVG dial in the corner; advancing a spread sweeps the finger-stop around and lets it spring back with `cubic-bezier(.34,1.56,.64,1)`. Chapter changes flip a small **mimeograph** title plate with a `path-draw-svg` underline in `#3A4B6E`. - Use generous **parallax** depth: ghost layer fastest, photos mid, paper texture slowest; dust motes on their own slow drift. Light leaks (`#C99A52` radial blooms) drift independently near the gutter. - Each spread is a chapter of a story (a year, a season, a person, a place) — write it as narrative prose in the captions, never as marketing copy. - AVOID: CTA buttons, pricing tables, stat counters, hero-with-signup, feature card-grids. There is nothing to buy here — only pages to turn and a ghost who is glad you came. ## Uniqueness Notes Differentiators from the corpus (564 designs analyzed): 1. **A literal cursor-follow ghost as the site's narrator.** `cursor-follow` is in 89% of the corpus as a decorative blob; here it is a *named character* (obake-chan) with eyes, moods, a yawn, and a typewriter voice that reads the photographs aloud — interaction as haunting, not garnish. 2. **Skeuomorphic bound photo-album over a glass/mono UI.** `magazine-spread` is only 6% of the corpus and `skeuomorphic` only 4%; their fusion as a foxed, deckled-edge, brass-photo-corner Shōwa scrapbook with a draggable loose-insert artifact every third spread is not present elsewhere. We explicitly refuse `card-grid` (92%), `glassmorphism` (83%), `dashboard` (35%). 3. **Skeleton-loading reframed as "opening the book."** Instead of hiding the load, the spread visibly assembles — paper, photo-borders, photos bouncing into brass corners, captions writing themselves. `skeleton-loading` appears in only 2% of the corpus and never as a featured aesthetic moment. 4. **Japanese-print typography stack (Shippori Mincho B1 / Zen Maru Gothic / Yomogi) instead of the corpus's `mono` default (94%) and `hand-drawn` doodle aesthetic (94%).** The handwriting is a real Japanese handwriting font used as a ghost's marginalia, not generic scribbles. 5. **Sepia-haunted palette with a single cold ghost colour.** Most warm-gradient corpus sites stay cozy; here `#7D8B9A` obake-grey is deliberately *wrong* against the sepia — a chromatic chill — and the hinomaru red `#A03E2F` is rationed to exactly one element per spread. 6. **Rotary-dial scroll progress and mimeograph chapter plates** — Shōwa-mono interface chrome with spring-return physics, far from the sci-fi-hud or minimal-navigation conventions of the corpus. Chosen seed/style: **sepia toned history** (with skeuomorphic album craft and a nostalgic-retro / mysterious-moody tone). Avoided patterns from frequency analysis: hand-drawn (94%), glassmorphism (83%), photography-as-flat-hero (98% — used here only inside aged collage), card-grid (92%), mono-dominant typography (94%), dashboard (35%).