# Design Language for heisei.day ## Aesthetics and Tone A dignified chronicle of the Heisei era (平成, 1989-2019) -- where heisei.boo haunts, heisei.day commemorates. The design creates a formal yet warm memorial to Japan's 30-year period of transformation: economic bubble burst, technological revolution, cultural globalization, and natural disaster resilience. The aesthetic is memorial-modern: clean lines, abundant whitespace, and a restrained color palette of indigo and silver channel the quiet dignity of Japanese ceremonial design. A horizontal timeline is the organizing principle, stretching the 30 years across the viewport like a scroll being unrolled. The tone is respectful-documentary -- measured, historically grounded, and appreciative of the era's complexity. ## Layout Motifs and Structure The layout uses a **horizontal-scroll timeline** architecture -- the primary content scrolls horizontally rather than vertically, creating a literal left-to-right progression through time. **Timeline System:** - The page container uses overflow-x: auto (or CSS scroll-snap on horizontal axis) - Content panels are 100vw wide each, arranged side by side, totaling 6-8 panels - A persistent horizontal timeline bar (2px, #3a4a7a) runs along the bottom third of the viewport, with year markers (1989, 1995, 2000, 2005, 2010, 2015, 2019) - Navigation hint arrows (< >) appear at viewport edges **Section Flow (horizontal panels):** 1. **Opening Panel:** "平成" in large serif with reading "Heisei" below. The era dates (1989.01.08 - 2019.04.30) in monospace. Soft gray background (#f5f5f8). 2. **Early Heisei (1989-1999):** Bubble burst, Great Hanshin Earthquake, rise of the internet. Key events as brief text blocks above the timeline. 3. **Middle Heisei (2000-2009):** Digital transformation, Koizumi era, global financial crisis. The visual tone brightens slightly. 4. **Late Heisei (2010-2019):** 3/11 earthquake, Tokyo Olympics bid, cultural renaissance. Content becomes more reflective. 5. **Transition Panel:** "令和" (Reiwa) -- the next era -- appears at the end of the timeline, looking forward. 6. **Closing Panel:** Credits, sources, and the domain name. A single chrysanthemum outline (CSS-drawn circle with petal clip-paths) as a subtle imperial motif. ## Typography and Palette **Typography:** - **Japanese Display:** "Noto Serif JP" (Google Fonts) -- formal Japanese serif with classical dignity. Used at 3rem-7rem, weight 700, for era names and section titles. - **Body:** "Noto Sans JP" (Google Fonts) -- clean and readable for Japanese and English body text. Used at 0.95rem, weight 400, line-height 1.75. - **Dates/Labels:** "IBM Plex Mono" (Google Fonts) -- precise monospace for dates and timeline labels. Used at 0.75rem, weight 400. **Palette:** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Paper White | Warm white | #f5f5f8 | Primary background | | Indigo | Japanese indigo | #3a4a7a | Primary accent, timeline, links | | Indigo Light | Soft indigo | #e8ecf4 | Section tint backgrounds | | Silver | Ceremonial silver | #a0a8b8 | Secondary accent, metadata | | Text Dark | Near-black | #1a1a2a | Headlines, primary text | | Text Mid | Medium gray | #5a5a6a | Body text | | Text Light | Soft gray | #8a8a9a | Captions, timestamps | | Gold | Subtle gold | #c8b060 | Sparingly: imperial references | ## Imagery and Motifs **Horizontal Timeline Bar:** A persistent 2px line in indigo (#3a4a7a) runs horizontally across the lower third of the viewport. Year markers are small vertical ticks (12px height) with date labels below. A small circle marker (6px, filled indigo) indicates the current panel's position on the timeline. **Era Kanji as Watermarks:** "平成" appears as a background watermark at 20vw size, 3% opacity, in each panel -- always present but never intrusive, like a stamp on every page of the era. **Chrysanthemum Motif:** A stylized chrysanthemum (the Imperial seal) drawn with CSS: a circle border with 16 petal shapes created by ::before and ::after elements using clip-path. Appears once in the closing panel in gold (#c8b060) at 15% opacity. **Minimal Transitions:** Panels transition with a simple horizontal slide. No fade effects, no zoom -- the movement itself is the only animation, matching the steady progression of time. **Indigo Accent Lines:** Thin horizontal rules (1px, #3a4a7a) separate content blocks within panels, creating a quiet structural rhythm. ## Prompts for Implementation Build the page as a formal historical scroll. The horizontal scrolling is the defining interaction -- implement with either CSS scroll-snap-type: x mandatory or a wrapper with overflow-x: auto. Each panel should feel like a page in an exhibition catalog: well-composed, with clear visual hierarchy and ample whitespace. The timeline bar is always visible, providing orientation. Japanese text (era names, cultural terms) should be displayed in Noto Serif JP with appropriate weight and size. The indigo-and-silver palette maintains ceremonial dignity without being somber. The experience should feel like walking through a museum exhibition -- measured pace, clear information, and respectful treatment of historical content. AVOID: playful elements, glitch effects, dark themes, busy layouts, marketing language, flashy animations, neon colors. ## Uniqueness Notes 1. **Horizontal-scroll timeline for historical content:** Physical left-to-right scrolling as a temporal metaphor creates a unique reading experience. 2. **Memorial-modern aesthetic for Japanese era history:** Clean ceremonial design applied to web content creates a dignified digital exhibition. 3. **Era kanji watermark on every panel:** The persistent background "平成" creates visual continuity across the horizontal journey. 4. **Chrysanthemum CSS motif:** A purely CSS-drawn Imperial seal adds cultural authenticity as a closing mark. Document chosen seed/style: aesthetic: memorial-modern, layout: horizontal-timeline, typography: japanese-serif, palette: indigo-silver, patterns: scroll-snap, imagery: kanji-watermark, motifs: chrysanthemum, tone: respectful-documentary 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%)