# Design Language for heisei.day ## Aesthetics and Tone heisei.day captures the hypnotic, saturated visual overload of late-1990s/2000s Tokyo -- the era when Shibuya's crossing was a canyon of competing cathode-ray billboards, when Akihabara storefronts flickered with stacked CRT monitors displaying anime intros at 29.97fps, and when Japanese graphic design embraced maximalist digital chaos as a deliberate aesthetic choice. The Heisei era (1989-2019) was the period when Japan's visual culture collided most violently with digital technology, and this site channels that collision. The glitch aesthetic here is not the sterile, Western "corrupted file" trope. It is specifically **Heisei-era signal decay** -- the horizontal tearing of a VHS tape being paused mid-frame, the RGB channel separation of a composite video cable pulled half-loose, the blocky compression artifacts of early MPEG-1 video streaming over ISDN. Every glitch has the warm, analog quality of degraded magnetic media rather than cold digital corruption. Colors bleed sideways. Scanlines pulse. Text shimmers as if rendered on a plasma display viewed through security camera footage. The mood is energetic but not aggressive -- it is the buzzing, electric euphoria of wandering through Kabukicho at midnight, where every surface emits light and every sign competes for attention, yet the overall effect is mesmerizing rather than hostile. There is a nostalgic undercurrent: this is a love letter to a specific moment in visual culture that has passed, rendered with the reverence of someone who remembers the weight of a PocketStation in their school bag. ## Layout Motifs and Structure The layout uses a **magazine-spread** composition inspired by the editorial design of Heisei-era Japanese magazines like WIRED Japan (1990s), Brutus, and Studio Voice. Content is organized across a 12-column grid that deliberately breaks its own rules -- elements overlap columns, bleed past margins, and stack at angles that suggest pages torn from different publications and collaged onto a single surface. **Primary Grid Structure:** - 12-column base grid with 16px gutters on a 1440px canvas - Column lines are faintly visible as 1px lines in #1a0033 at 15% opacity, creating a subtle graph-paper underlay - Content blocks span irregular column ranges: hero text might span columns 2-8, while a sidebar image occupies columns 9-12 and bleeds off the right edge - Vertical rhythm follows a 24px baseline, but display elements deliberately break this rhythm by 3-7px to create visual tension **Spread Architecture:** - Each "section" of the page is treated as a magazine spread -- a two-page layout where the left and right halves contain complementary but visually distinct content - The left half of each spread tends toward typographic density (headlines, body text, captions overlapping), while the right half is image-dominant with text overlays - Between spreads, a full-width "gutter zone" of 120px-200px height acts as a breathing space, filled with a repeating scanline pattern (#0a0020 and #0f0030 alternating 2px stripes) - Horizontal rules between sections are rendered as glitched lines: a 2px solid line in #ff003c that has CSS `clip-path` applied to create irregular, jagged breaks **Navigation:** - No traditional navbar. Instead, a persistent vertical strip on the far left edge (48px wide) contains section indicators -- small rectangular blocks (8px x 24px) that glow in the accent color when their corresponding spread is in view - Clicking/tapping an indicator scrolls to that spread with a horizontal-shift transition (content slides left as new content enters from the right, mimicking a page turn) - A small Japanese-style date stamp in the top-right corner displays the current Heisei-equivalent year in kanji-style numerals using a custom counter ## Typography and Palette **Typography:** - **Display / Headlines:** "Dela Gothic One" (Google Fonts) -- a heavy, ultra-black Japanese-compatible display typeface with extreme weight and slightly condensed proportions that evoke the bold, attention-grabbing headlines of Heisei-era advertising. Used at 4rem-9rem for primary headlines, 2.5rem-3.5rem for spread titles. The massive weight creates imposing typographic blocks that function as visual architecture. Letter-spacing: -0.04em at display sizes. Line-height: 0.92 (intentionally tight, allowing ascenders and descenders to collide between lines for visual density). Color: primary text in #ffffff with a subtle text-shadow using the accent neon colors offset by 2px to simulate RGB channel misalignment. - **Subheadings / Accent Text:** "Zen Kaku Gothic New" (Google Fonts) -- a clean Japanese gothic typeface that bridges the gap between display and body text. Used at 1.25rem-2rem for subheadings, pull quotes, and navigational labels. Weight: 700. Letter-spacing: +0.06em (slightly tracked out for legibility against busy backgrounds). Text-transform: uppercase for Latin characters. When used for Japanese text fragments (decorative era labels, date stamps), it renders at 1rem with normal letter-spacing. - **Body / Reading Text:** "Inter" (Google Fonts) -- the Swiss-knife body typeface, chosen here for its exceptional legibility at small sizes against dark, noisy backgrounds. Used at 0.9375rem (15px) to 1.0625rem (17px). Weight: 400 for body, 600 for emphasis. Line-height: 1.7 (generous leading to compensate for the visual noise of the glitch aesthetic surrounding it). Color: #c8c0e0 (a cool lavender-gray that reads as white-ish against the deep purple-black backgrounds without the harshness of pure white). - **Code / Technical / Timestamps:** "Share Tech Mono" (Google Fonts) -- a monospace typeface with a distinctly technological character, slightly rounded terminals that recall LED segment displays. Used for timestamps, technical annotations, version numbers, and any "system UI" elements. Size: 0.75rem-0.875rem. Weight: 400. Letter-spacing: +0.02em. Color: #39ff14 (matrix green) for decorative system text, #c8c0e0 for readable technical content. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Void | Near-black purple | #08001a | Primary background, the deepest layer | | Midnight Static | Dark indigo | #0f0030 | Secondary background, card surfaces, scanline dark | | Cathode Pink | Hot magenta-pink | #ff003c | Primary accent, glitch highlights, horizontal rules, link hover states | | Plasma Cyan | Electric cyan | #00f0ff | Secondary accent, interactive elements, focus rings, secondary glitch channel | | Phosphor Green | Bright matrix green | #39ff14 | Tertiary accent, system text, timestamps, scanline glow | | Signal White | Cool lavender-white | #c8c0e0 | Body text, readable content | | Interference Gold | Warm amber | #ffb800 | Sparse highlight, used for emphasis on dates/era markers, kanji decorations | | Subliminal Red | Deep crimson | #6b0020 | Subtle background accent, used in gradients behind spreads for warmth | The palette is neon-electric with a deliberate bias toward cool-dark backgrounds and warm-hot accents. The combination of #ff003c, #00f0ff, and #39ff14 against #08001a recreates the specific color temperature of CRT phosphors in a dark room -- colors that glow rather than merely display. **Gradient Systems:** - Hero backgrounds use a radial gradient from #0f0030 center to #08001a edges, with a second overlay gradient of #ff003c at 5% opacity creating a barely-perceptible warmth - Section transitions use a horizontal gradient from #08001a to #0f0030 to #08001a (creating depth between spreads) - Accent elements use a linear gradient from #ff003c to #00f0ff at 45-degree angles for glitch-highlight bars ## Imagery and Motifs **Glitch Overlay System:** The primary visual texture is a multi-layered glitch effect applied to the entire viewport as a persistent atmospheric element. This is constructed from three overlapping pseudo-elements on the ``: 1. **Scanline Layer:** Repeating 2px horizontal stripes (`repeating-linear-gradient`) alternating between transparent and rgba(0,0,0,0.15). This creates the CRT scanline effect visible across all content. The layer has `pointer-events: none` and sits above content at `z-index: 9998`. 2. **RGB Shift Layer:** A duplicated, offset version of key visual elements (hero text, images) displaced 2-4px horizontally in separate red and cyan channels. Achieved via `mix-blend-mode: screen` on absolutely-positioned duplicates with CSS filters: one clone with `hue-rotate(180deg)` offset left, another with `hue-rotate(90deg)` offset right. These clones pulse in opacity (0.3-0.7) on a 4-second CSS animation cycle. 3. **Static Noise Layer:** A CSS-generated noise texture using a tiny (100x100) inline SVG `` filter with `baseFrequency="0.9"` and `numOctaves="4"`, applied as a full-viewport overlay at 8% opacity. The noise animates by shifting `transform: translate()` values randomly every 100ms via a CSS keyframe with 20 steps, creating the shimmer of analog static. **Mixed-Media Visual Elements:** - **Corrupted Photography:** Images are presented as if they have been run through a damaged video codec. Each image has a CSS treatment: `filter: contrast(1.2) saturate(1.4)` combined with a `clip-path: polygon()` that cuts irregular, glitch-shaped chunks from the edges. Some images have horizontal bands displaced 4-8px using multiple `background-position` values on the same image, creating the look of a framebuffer tear. - **Kanji Watermarks:** Large-scale kanji characters (related to time/era concepts: 平成, 時代, 記憶, 電波) rendered at 20vw-40vw in "Dela Gothic One" at 3-5% opacity, positioned as background watermarks behind content blocks. These watermarks slowly drift upward at 0.5px/second using CSS animation, creating a subliminal sense of passing time. - **Data Corruption Typography:** Decorative text blocks where individual characters have been replaced with Unicode block elements (░ ▒ ▓ █) and box-drawing characters (┌ ┐ └ ┘ │ ─), creating the appearance of partially decoded text. These appear in margins and gutters as atmospheric decoration, never as primary content. - **VHS Timestamp Motif:** A persistent element in the bottom-right corner of the viewport styled as a VHS recording timestamp: white "Share Tech Mono" text on a semi-transparent black rectangle, displaying "REC" with a pulsing red dot and a running timecode that counts up in real-time (HH:MM:SS:FF format). This is a purely decorative storytelling element that reinforces the analog-media theme. **Abstract-Tech Motifs:** - Thin circuit-trace lines (#39ff14 at 20% opacity, 1px width) that extend from content blocks outward toward the viewport edges, creating a subtle wiring diagram underlay. These traces follow right-angle paths with rounded corners (2px radius) and occasionally terminate in small circles (4px diameter) suggesting connection points. - Periodic "interference bars" -- full-width horizontal bands (3-8px tall) of #ff003c or #00f0ff at 40-70% opacity that appear at irregular intervals during scroll, persisting for 150ms before fading. These fire on scroll events at random thresholds, making each scroll-through slightly different. ## Prompts for Implementation **Full-Screen Narrative Experience:** The site should be implemented as an immersive scroll-through experience that tells the story of the Heisei era through visual design rather than explicit content. The user journey follows this arc: 1. **The Signal (Opening):** The viewport begins as pure black (#08001a). After 500ms, scanlines fade in across the entire screen (opacity 0 to 0.15 over 1 second). Then the RGB noise layer activates. After the static has been visible for 1.5 seconds, the hero text "HEISEI" renders character-by-character using a glitch-typewriter effect: each character appears with a horizontal displacement of 20px and RGB split, then snaps into position over 200ms. The subtitle text (a date range or tagline) types in below using "Share Tech Mono" at a steady 40ms per character. The VHS timestamp begins counting in the corner. 2. **The Broadcast (First Spread):** As the user scrolls past the hero, content slides in from the right as if turning a magazine page. The first spread introduces the visual language with large display typography on the left and a corrupted photograph on the right. The photograph loads with a deliberate decode effect -- appearing first as colored blocks (like a JPEG loading on a 56k modem), then resolving to full clarity over 800ms as it enters the viewport. Text elements stagger in from below with 80ms delays between each line. 3. **The Archive (Middle Spreads):** Subsequent spreads alternate visual density. Some are text-heavy (full-width columns of body text with pull quotes breaking the grid), others are image-dominant (full-bleed glitched photographs with only a small caption overlay). Between each spread, the scanline intensity increases briefly (opacity pulses to 0.3) and a single interference bar flashes across the screen, creating the feeling of channel-surfing between broadcasts. 4. **The Fade (Closing):** The final section gradually reduces color saturation. Neon accents dim. The scanline overlay intensifies. Text becomes sparse. The VHS timestamp slows its counting. The last element on the page is a single kanji watermark (平成) that fades from 3% opacity to 0% over the final 200px of scroll, leaving the user in near-total darkness -- the broadcast has ended. **Animation and Interaction Specifications:** - All scroll-triggered animations use `IntersectionObserver` with `threshold: [0, 0.25, 0.5, 0.75, 1]` for granular control. No scroll-jacking or forced scroll behavior. - Glitch effects on text hover: when the user hovers over a heading, the text undergoes a 300ms glitch burst -- rapid toggling between 3 slightly different `clip-path` rectangles applied to pseudo-element copies, with RGB channel offsets increasing to 6px then snapping back. The effect is intense but brief. - Page transition between spreads uses `scroll-snap-type: y mandatory` on the main container, with each spread being `scroll-snap-align: start` and `min-height: 100vh`. This creates the magazine-page-turn cadence. - Background audio is NOT used (respect the visitor), but the visual rhythm is designed to suggest sound -- interference bars flash on implied "beats," the VHS timestamp pulses on implied "clicks." - All animations respect `prefers-reduced-motion: reduce` by disabling the glitch overlays, scanlines, and interference bars, falling back to a clean dark-background layout with static neon accents. **Technical Storytelling:** - The color temperature of the page shifts subtly as the user scrolls: early sections have more #ff003c (warm cathode) influence, middle sections shift toward #00f0ff (cool digital), and the final section desaturates toward monochrome. This is achieved by applying a CSS custom property `--hue-shift` that is updated via JS on scroll, controlling a `filter: hue-rotate()` on the background gradient layer. - Element z-index layering creates genuine depth: background gradient (z-0), kanji watermarks (z-1), circuit traces (z-2), content (z-10), scanlines (z-9998), noise (z-9999). The content lives sandwiched between atmospheric layers, reinforcing the feeling of viewing the site through a damaged screen. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, feature comparison tables, cookie banners as design elements, stock photography, clean/corporate grid systems, hero sections with centered H1 + subtitle + button patterns. ## Uniqueness Notes **Differentiators from other designs:** 1. **Heisei-Era Specificity Over Generic Glitch:** While "glitch" as an aesthetic exists in the portfolio at 12%, no other design grounds its glitch treatment in a specific cultural-historical period. This design's glitch effects are explicitly modeled on VHS/composite video/CRT degradation patterns from 1989-2019 Japan, not the generic "databending" or "corrupted JPG" approach. The visual language references specific media artifacts (NTSC color bleeding, Hi8 camcorder timestamps, MPEG-1 macroblocking) rather than abstract digital corruption. 2. **Magazine-Spread Scroll Architecture:** At only 8% frequency in the portfolio, magazine-spread layouts are rare. This implementation goes further by treating each viewport-height section as a literal two-page spread with distinct left/right content zones, connected by full-width gutter zones with scanline patterns. The spread metaphor is structural, not decorative -- content is authored and arranged as editorial layouts, not as scrolling web sections dressed up with columns. 3. **Atmospheric Depth Layering Without Parallax:** Rather than using the overused parallax pattern (81% frequency), this design creates visual depth through stacked semi-transparent overlay layers (scanlines, noise, kanji watermarks, circuit traces) that exist between the user and the content. The depth is optical rather than spatial -- content does not move at different scroll rates, but the overlay layers create the perception of viewing through multiple screens stacked in physical space, like looking through a shop window at a TV playing behind another pane of glass. 4. **Neon-Electric Palette at Scale (1% Frequency):** The neon-electric palette category sits at just 1% in the current portfolio, making this one of the rarest color approaches. The specific combination of #ff003c / #00f0ff / #39ff14 against deep purple-black backgrounds has zero overlap with existing designs, and the deliberate CRT-phosphor color temperature (colors that glow rather than simply display) is unique. 5. **Temporal Narrative Arc Through Color Temperature:** No other design in the portfolio uses a scroll-position-driven hue shift to create a temporal narrative. The warm-to-cool-to-monochrome color journey maps to a storytelling arc (broadcast begins, signal peaks, broadcast ends) that gives the scrolling experience a dramatic structure absent from static-palette designs. **Chosen Seed/Style:** aesthetic: glitch, layout: magazine-spread, typography: display-bold, palette: neon-electric, patterns: glitch, imagery: mixed-media, motifs: abstract-tech, tone: energetic **Avoided Overused Patterns:** centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered as primary pattern (96%), parallax (81%), friendly tone (97%), playful aesthetic (97%), minimal imagery (95%). This design deliberately diverges from every top-frequency pattern in the portfolio by using magazine-spread composition, display-bold typography, neon-electric palette, glitch-specific animation patterns, energetic tone, and mixed-media imagery.