# Design Language for heisei.boo ## Aesthetics and Tone heisei.boo is **a quiet walking-tour through the Heisei era (1989–2019) of Japan, told in faded photographs and a friendly companion's voice** — a calm, smiling guide who points at a vending machine, a JR platform sign, a flip-phone strap, a karaoke booth, a Tamagotchi clipped to a school bag, and says *"look — this is what thirty years felt like, before it folded shut."* The aesthetic is **deliberate minimalism layered over genuine vintage-photography nostalgia**: huge restful margins, almost no chrome, a single hairline rule here and there — and then, dropped into that hush, a real-feeling Heisei-era photograph with its 1990s film grain, its slightly green-yellow cast, its rounded-corner photo-lab border and the little orange date-stamp in the bottom-right corner (`'97 8 14`, `'04 3 22`). The mood is **fond, unhurried, gently melancholic but never bleak** — the tone of someone showing you their old photo album and laughing at the haircuts. Nothing shouts. Things *pulse* softly, the way a cathode tube warms up, the way a pager once buzzed twice and went still. The friendliness is structural, not decorative: section headers are written as half-sentences a friend would actually say (*"Remember when the trains still had ashtrays?"*, *"Everyone had this exact alarm clock."*), and the guide occasionally addresses you directly in a smaller, lighter weight, as if leaning over your shoulder. The overall feeling sits between a **museum wall-label**, a **disposable-camera envelope from a Family Mart photo counter**, and a **late-night NHK retrospective documentary** — minimal in layout, warm in heart, urban in subject. ## Layout Motifs and Structure The site is a **broken-grid scrapbook**: a base 12-column grid that is *visibly, intentionally violated*. Photographs and text blocks are pinned to the grid and then nudged 1–3 columns off-axis, rotated by tiny amounts (−2.4°, +1.1°, −0.8°), and allowed to overlap at the edges by 12–40px — the way actual photo prints overlap when you spread them on a table. There is **no card-grid, no centered hero stack, no symmetrical columns**. Every screenful is an asymmetric tableau where one element clearly dominates and the rest orbit it. **Structure (top to bottom, a single long vertical scroll — no horizontal tricks):** 1. **The Opening Plate** — near-empty viewport: huge expressive-variable wordmark `平成` / `heisei` set very large in the upper-left third, the rest of the screen white space, and a single small Heisei-era photograph (a Shibuya crossing at dusk, 1995-ish) tacked into the lower-right, rotated −2.4°, with its orange date-stamp. One line of friendly copy beneath the wordmark: *"thirty-one years, two months, and a handful of photographs."* 2. **The Timeline Spine** — a thin vertical hairline running down the left gutter for the rest of the page, marked with year ticks (`1989` … `2019`) that the page scrolls past; the active year *pulses* gently as you reach its section. This is the only persistent UI. 3. **Era Vignettes (5–7 of them)** — each is a broken-grid spread: a dominant photograph (vending machine row at night; a station departure board in split-flap; a Heisei-era apartment kitchen; a sea of black school uniforms; a Sega arcade glow; a folding phone open on a café table; a sakura tunnel over a suburban canal), one off-grid caption block in the friendly voice, and 1–2 small supporting photo-fragments overlapping a corner. Captions never sit *under* their photo — they're always pinned to a different column, connected by a thin elbow-line. 4. **The Margin Notes** — between vignettes, the guide drops in a single light-weight sentence floating in the white space, far from any photo: *"You can still buy that ramen, by the way."* 5. **The Folding-Shut** — final screen: the `平成` wordmark again, now small and lower-right; most of the viewport empty; one last photo (an empty platform, lights off) in the upper-left; the line *"and then, May 1st, 2019 — the page turned."* The timeline spine ends in a single filled tick. Mobile: the broken grid *collapses honestly* — rotations reduce to ±1°, overlaps shrink to 6–10px, the timeline spine moves to a slim left rail, and elbow-lines straighten into short verticals. Never becomes a plain stacked column; the off-axis nudges survive. ## Typography and Palette **Type system (Google Fonts only — all of these exist on Google Fonts):** - **`Recursive`** (variable: weight 300–900, slant 0 to −15, "Casual" axis 0→1, mono axis on/off) — the **primary expressive-variable display face**, used for the `heisei` wordmark and every section header. This is where the "expressive-variable" identity lives: the wordmark animates its weight and slant on load (from `wght 320, slnt 0` to `wght 760, slnt −9`), and headers shift slightly between Linear and Casual along the year axis — earlier-Heisei sections sit more Linear/upright, later sections drift toward Casual/slanted, so the *type itself ages* across the scroll. Set headers at clamp(2.2rem, 6vw, 5.5rem), tight tracking `-0.02em`. - **`Zen Kaku Gothic New`** (weights 400, 500, 700) — for all **Japanese text** including the `平成` glyphs, year labels, and bilingual captions. A clean, humane Japanese gothic that pairs with minimalism without feeling corporate. - **`Spline Sans`** (weights 300, 400, 600) — **body and caption copy**, the friendly guide's voice. Body at 1.0625rem / 1.7 leading, the lighter 300 weight reserved for the guide's direct asides. - **`Spline Sans Mono`** (weight 400) — only for the **photo date-stamps** (`'97 8 14`) and year ticks on the timeline spine, rendered in the warm orange to mimic a film camera's LED imprint. **Palette — triadic, anchored on a soft archival paper:** - `#F3EFE6` — **Heisei Paper**: the dominant background, a warm off-white like a 1990s photo-lab envelope. ~70% of every screen. - `#1F2730` — **Sumi Ink Navy**: near-black with a blue undertone, used for all body text, the wordmark, and the timeline hairline. - `#2E6F8E` — **Platform Blue** (triad point 1): a desaturated JR-signage teal-blue; used for the active year tick, elbow-lines, and link underlines. - `#C24E3A` — **Date-Stamp Vermilion** (triad point 2): the burnt orange-red of a film camera's date imprint and old `非常口` exit signs; used *only* for date-stamps, the pulsing accent, and a single underline on each header. - `#D9A441` — **Showa-Gold Fade** (triad point 3): a muted amber, the color of aged photo highlights and incandescent vending-machine light; used for soft glows behind photos and the filled timeline ticks. - `#8C8678` — **Negative-Space Grey**: warm grey for the guide's light-weight asides and secondary captions, so they recede into the paper. - Photographs themselves carry a unifying grade: slight `+sepia/8% + green-yellow cast`, lifted blacks, a fine grain overlay, and a 6px `#FBF8F1` photo-lab border with 3px rounded corners and a faint drop shadow at 18°. ## Imagery and Motifs **Imagery is vintage-photography, full stop** — every visual is a (convincingly aged, 1990s–2000s-styled) photograph of Heisei-era urban Japan. No illustration, no 3D, no icon sets, no gradient meshes. The recurring **subject motif is the city — `city-urban`**: train platforms and split-flap departure boards, neon-and-vending-machine streetscapes at dusk, pachinko and arcade frontages, convenience-store interiors, danchi apartment blocks, crosswalk crowds, telephone-pole tangles, capsule-toy machine rows, a karaoke building's stacked signage. **Decorative motifs (kept minimal):** - **The photo-lab border** — every image wears the same 6px cream border + orange date-stamp; this is the one consistent "frame." - **The elbow-line** — a thin 1px `#2E6F8E` line that bends once at 90° to connect an off-grid caption to its photograph; the only "connective tissue" on the page. - **The timeline spine** — a single 1px vertical hairline down the left gutter with mono-type year ticks; the active tick is a 5px `#C24E3A` square that *pulses*. - **The crop-mark corner** — tiny printer's crop marks (`⌐ ¬`) in the extreme corners of two or three photos, a nod to photo-lab proofs. - **No other ornament.** White space *is* the decoration. **Pulse-attention as the signature motion:** the era's quiet electronics — pager LEDs, CRT power lights, vending-machine glows, the `予約` light on a VHS deck — all breathed slowly. So the site's one repeated animation is a **2.4s ease-in-out opacity+scale pulse (0.92→1.0→0.92, opacity 0.6→1→0.6)** applied sparingly: the active year tick, a small `●` beside the currently-visible vignette header, and the orange date-stamp on the photo nearest the viewport center. At most one or two pulses visible at once. Nothing else blinks. ## Prompts for Implementation Build heisei.boo as **one HTML document, one CSS file, one ES module** — no framework, no build step, no canvas/WebGL. The page is a **vertical scrolling photo-essay** about the Heisei era of urban Japan, narrated by a friendly guide. The user simply scrolls top to bottom; the experience is reading + looking, not clicking. **There is NO call-to-action, NO pricing block, NO stat-grid, NO testimonial carousel, NO contact form, NO email capture, NO newsletter signup, NO logo wall, NO feature-comparison table, NO FAQ accordion, NO cookie banner, NO chatbot, NO "get started" button, NO social-proof counters.** This is an editorial artifact — a museum wall and a photo album — not a product page. If a section feels like it wants a button, replace the button with a sentence in the guide's voice. **Layout & grid:** - Implement an explicit `display: grid` with `grid-template-columns: repeat(12, 1fr)` and a comfortable gutter; pin photos and text blocks to named column spans, then apply per-element `transform: rotate(...) translate(...)` to break the grid (rotations between −2.4° and +1.4°, translates ±8–40px). Use `z-index` so photos overlap caption blocks at their edges. - The left timeline spine is `position: fixed` (or sticky within a long wrapper): a 1px vertical line + absolutely-positioned year-tick labels in `Spline Sans Mono`. As each vignette enters the viewport, mark the corresponding tick `.active` (the pulse class). - Generous `min-height: 100vh` (or close) per vignette so each gets its own "screenful," with intentional emptiness — never fill the viewport edge to edge with content; ~60–70% should be Heisei Paper. - Captions connect to photos via an absolutely-positioned 1px `#2E6F8E` "elbow-line" (a div with a corner, or a tiny inline SVG ``). **Typography behavior (the expressive-variable hook):** - Load `Recursive` as a variable font. On page load, animate the `heisei` wordmark's `font-variation-settings` from `'wght' 320, 'slnt' 0, 'CASL' 0` to `'wght' 760, 'slnt' -9, 'CASL' 0.18` over ~1.1s `cubic-bezier(.2,.7,.2,1)`. - Tie section-header variation settings to scroll position so headers "age": early-Heisei headers near `'CASL' 0, 'slnt' 0`; by the 2010s sections, `'CASL' 0.4, 'slnt' -6`. Recompute on scroll with a throttled handler, or use `animation-timeline: scroll()` where supported with a static fallback. - `prefers-reduced-motion`: skip the wordmark animation (render it at the final settings), freeze all pulses to their mid-state, keep header aging as discrete per-section values rather than continuous. **Photography treatment:** - Wrap every `` in a `
` that applies: 6px solid `#FBF8F1` border, 3px border-radius, `box-shadow: 0 6px 20px rgba(31,39,48,.18)` rotated visually via transform, a `filter: sepia(.08) saturate(.92) contrast(.96) brightness(1.03)`, and a pseudo-element grain overlay (a tiled translucent noise PNG or a CSS `repeating` speckle at ~3% opacity, `mix-blend-mode: multiply`). - Add the date-stamp as an absolutely-positioned `` in the bottom-right of the figure, `Spline Sans Mono`, color `#C24E3A`, text like `'97 8 14`, with a faint text-shadow to mimic LED bloom. The date-stamp of the photo nearest viewport-center gets the `.pulse` class. - Use real placeholder imagery of Japanese urban scenes (train platforms, vending machines, neon streets, danchi blocks, arcades, crosswalks) — sourced as standard `` tags; the CSS grade does the "Heisei" work. **Motion (keep it whisper-quiet):** - One keyframe set: `@keyframes pulse { 0%,100% { opacity:.6; transform:scale(.92) } 50% { opacity:1; transform:scale(1) } }`, 2.4s `ease-in-out infinite`. Apply only to: active timeline tick, the `●` beside the in-view header, the centered photo's date-stamp. - Vignettes fade-and-settle in on scroll: from `opacity:0; translateY(18px)` plus their resting rotation, to resting state, over ~0.7s, staggered ~80ms between the photo and its caption. Use `IntersectionObserver`. - Smooth-scroll the page; no scroll-jacking, no parallax layers, no cursor-followers, no tilt-3D. The guide's "voice" asides fade in slightly later than surrounding content (a beat of silence, then the friend speaks). **Voice & copy:** - Section headers are friendly half-sentences (*"Everyone had this exact alarm clock."*, *"The trains still had ashtrays."*). Captions are 1–3 sentences, warm and specific. The guide's direct asides are short, lowercase, light-weight, floating in white space (*"you can still buy that ramen, by the way."*). The opening and closing lines bookend the era (`1989 → 2019`). ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Minimalism *plus* vintage-photography as a single intent, not a compromise.** `minimalist` appears in only ~4% of corpus designs and `vintage-photography` in ~3%; almost nothing combines a near-empty Swiss-quiet layout with genuinely film-graded photographs and orange date-stamps. heisei.boo's whole gambit is that the restraint *makes* the photographs land — the white space is the photo album's blank page. 2. **The type literally ages as you scroll.** Using `Recursive`'s variable axes (weight, slant, Casual) tied to scroll position so early-Heisei headers are upright/linear and late-Heisei headers drift casual/slanted — this is `expressive-variable` (≈3% of corpus) used as *narrative chronology*, not just a flashy load animation. 3. **Broken-grid as a literal photo-album metaphor.** `broken-grid` is ≈5% of corpus and usually reads as edgy/brutalist. Here the off-axis rotations and edge overlaps mean exactly one thing — photo prints spread on a table — and they're connected by thin elbow-lines like a scrapbook, with captions deliberately *not* under their images. 4. **Pulse-attention as period-accurate ambience.** `pulse-attention` is ≈3% of corpus; instead of "look at this button!" it's the slow breath of Heisei-era electronics (pager LEDs, CRT power lights, vending-machine glow) — at most two soft pulses on screen, never a blink, never a CTA. 5. **`city-urban` motif (≈3% of corpus) carried entirely through real-feeling photography**, not iconography or 3D — train platforms, split-flap boards, neon-and-vending streetscapes, danchi blocks, arcades — unified by one consistent photo-lab frame. 6. **No conversion furniture at all.** No CTAs, pricing, stat-grids, testimonials, forms, logo walls, or accordions — it's an editorial photo-essay with a friendly narrator, deliberately avoiding the corpus-default `card-grid` (≈86%), `centered` (≈83%), and `full-bleed` (≈94%) layouts. **Chosen seed/style:** *aesthetic: minimalist, layout: broken-grid, typography: expressive-variable, palette: triadic, patterns: pulse-attention, imagery: vintage-photography, motifs: city-urban, tone: friendly* **Avoided patterns from frequency analysis:** steered clear of `hand-drawn` (96%), `glassmorphism` (66%), `card-grid` (86%), `centered` (83%), `full-bleed` (94%), `gradient` palette (97%), `warm`-only palette (97% — used a true triadic instead), `parallax` (96%), `cursor-follow` (87%), `spring`/`magnetic`/`stagger`-heavy motion, `mono` typography as primary (95%), and the `photography` generic tag (99%) in favor of the specific `vintage-photography` treatment.