# Design Language for heisei.boo ## Aesthetics and Tone A haunted nostalgia portal for the Heisei era (1989-2019) -- the .boo domain transforms this Japanese imperial era into a ghost story of recent history, where memories of Y2K Japan, bubble economy collapse, and the rise of digital culture flicker like spirits in a CRT monitor. The aesthetic is glitch-nostalgia: VHS tracking errors, CRT scan lines, and color-shift distortions applied to clean Japanese typography create an atmosphere of beautiful technological decay. The palette channels the blue-white glow of late-night television and the amber warmth of Tokyo streetlights. The tone is haunted-nostalgic -- wistful, slightly eerie, treating the Heisei era as a ghost that still flickers in our screens. ## Layout Motifs and Structure The layout uses a **VHS-stack** architecture -- content sections are stacked vertically with glitch-transitions between them, as if the page is a VHS tape being scrubbed through. **Stack System:** - Full-width sections with max-width 900px centered content - Section transitions use a "glitch bar" -- a 4px horizontal band of random-colored noise (CSS gradient with many color stops) that flickers briefly - Content within sections uses a slight horizontal offset (random 2-8px left shift) on alternate paragraphs, suggesting VHS tracking errors - Overall slight blue-tint filter (using a semi-transparent overlay) on the entire page **Section Flow:** 1. **Static Screen (Hero):** A dark screen (#0a0a14) with "平成" (Heisei) in large serif type, flickering with a CSS opacity animation (0.97 to 1.0, rapid). Below: "heisei.boo" with a subtle horizontal color-shift (text-shadow with slightly offset cyan and magenta copies). 2. **The Decades:** Three content sections covering early (1989-1999), middle (2000-2009), and late (2010-2019) Heisei, each with distinct visual treatments reflecting the technology of each period. 3. **Ghost Channels:** Short fragments of Heisei culture -- song lyrics, product names, events -- displayed as quick-scrolling channel-surf snippets, evoking late-night TV surfing. 4. **End of Transmission:** The closing section mimics TV sign-off: a shrinking white rectangle that collapses to a single bright dot, then darkness. "平成 1989-2019" in small type below. ## Typography and Palette **Typography:** - **Japanese Display:** "Noto Serif JP" (Google Fonts) -- traditional Japanese serif for era name and kanji display. Used at 4rem-8rem, weight 700. - **Body:** "Noto Sans JP" (Google Fonts) -- clean Japanese sans for readable content. Used at 0.95rem, weight 400, line-height 1.7. - **English/System:** "VT323" (Google Fonts) -- a pixel-perfect monospace that channels CRT displays. Used at 0.9rem-1.5rem for dates, labels, and English text. - **Timestamps:** "VT323" at 0.75rem for era dates and section markers. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | CRT Dark | Blue-black | #0a0a14 | Primary background | | VHS Blue | Cool blue | #1a2a4a | Section backgrounds, depth | | Phosphor | CRT white | #d4d4e8 | Primary text | | Static | Medium gray | #6a6a80 | Secondary text, metadata | | Glitch Cyan | Offset cyan | #00cccc | Glitch text-shadow (left offset) | | Glitch Magenta | Offset magenta | #cc00cc | Glitch text-shadow (right offset) | | Amber | Tokyo amber | #e8a020 | Warm accent, date highlights | | Noise | Random noise | multiple | Glitch transition bars | ## Imagery and Motifs **CRT Scan Lines:** A repeating-linear-gradient overlay covers the entire page: alternating 1px transparent and 1px rgba(0,0,0,0.08) bands, creating visible scan lines as on a CRT monitor. **Chromatic Aberration Text:** Display text uses triple text-shadow with slight horizontal offsets: 1px 0 #00cccc (cyan left), -1px 0 #cc00cc (magenta right), creating the RGB separation effect of misaligned CRT guns. **Glitch Transition Bars:** Between sections, a 4px-tall band uses a CSS linear-gradient with 20+ random color stops in neon hues, flickering with a rapid opacity animation (100ms cycle) for 500ms on scroll-into-view. **VHS Tracking Offset:** Alternate content blocks have a slight translateX(-4px) offset and a 1px horizontal line artifact (::after pseudo-element, 100% width, 1px height, random color), mimicking VHS tracking errors. **TV Sign-Off Animation:** The closing section contains a white rectangle that animates from full viewport height to 2px height, then to a 4px bright circle, then fades to nothing -- a pure CSS recreation of old TV sign-off. ## Prompts for Implementation Build the page as a haunted television playing back the Heisei era. The CRT scan-line overlay is always present, creating the foundational screen texture. Display text should always carry the chromatic aberration text-shadow. The hero "平成" flickers subtly -- never fully off, just a slight opacity waver that creates unease. Section transitions use the glitch bars: when scrolling past a section boundary, a thin neon-noise band flashes briefly. Content about different decades can reflect technological shifts: the 1989-1999 section might have amber tones (analog warmth), 2000-2009 shifts to blue (digital cold), 2010-2019 is clean with minimal glitch (the smartphone era). The TV sign-off closing is the emotional climax -- the era literally switching off. Everything should feel just slightly broken, like watching a cherished VHS tape one too many times. AVOID: clean modernism, bright backgrounds, cheerful palettes, stock imagery, corporate layouts, smooth animations, marketing CTAs. ## Uniqueness Notes 1. **VHS-glitch aesthetic for historical content:** Applying analog video distortion to Japanese era history creates a unique "media archaeology" experience. 2. **CRT scan lines + chromatic aberration as design system:** These effects applied consistently across all text and surfaces create a total-immersion screen experience. 3. **TV sign-off as page closing:** Recreating the old broadcast sign-off animation as a closing section is a distinctive emotional narrative device. 4. **Haunted-nostalgic tone:** Treating recent history as a ghost story through visual decay is an unusual and evocative communication approach. Document chosen seed/style: aesthetic: glitch-nostalgia, layout: vhs-stack, typography: crt-pixel, palette: phosphor-dark, patterns: chromatic-aberration, imagery: scan-line, motifs: tv-signoff, tone: haunted-nostalgic Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)