# Design Language for showa.boo ## Aesthetics and Tone showa.boo channels a dark-mode aesthetic — the deep, immersive visual language of dark interfaces applied to a Showa-era (昭和) nostalgia and cultural documentation platform. The site remembers — phosphorescent CRT glows, the warm amber of aged signage, and the retro-futuristic optimism of Japan's Showa period (1926-1989) rendered through the lens of modern dark-mode design. Inspiration draws from the neon-lit streets of 1970s Shinjuku photography, the vector-graphic title cards of Showa-era anime, the geometric precision of mid-century Japanese corporate identity, and the atmospheric darkness of Ozu's later films. The tone is grounded-earthy — practical, down-to-earth language that treats Showa nostalgia with honest respect rather than romanticized fantasy. ## Layout Motifs and Structure The layout uses a **hud-overlay** architecture — content organized with persistent overlay elements creating the CRT-monitor quality of Showa-era media viewed through a vintage display system. **HUD Overlay Architecture:** - Persistent corner frame elements suggesting CRT monitor bezels - Main content: max-width: 820px centered within HUD frame - HUD status indicators at viewport edges showing era-date context - Feature sections: full-viewport within HUD boundaries - Container: full-viewport HUD frame with 820px inner content - The HUD creates the television quality of Showa-era content viewed through a period-appropriate CRT display **Section Sequence:** 1. **Broadcast:** Hero with futura-geometric title on duotone dark-mode gradient, vector-art Showa-style geometric graphics, retro-patterns period-appropriate decorative motifs 2. **Program:** Cultural documentation in HUD-framed sections — parallax interactive depth-scroll with vector-art clean geometric illustrations 3. **Feature:** Highlighted Showa content in full-viewport with retro-patterns immersive period decoration and vector-art detailed graphics 4. **Archive:** Historical records in compact HUD sections with retro-patterns simplified motifs 5. **Sign-Off:** Footer as broadcast end — grounded-earthy farewell with retro-patterns settled motifs and practical closing ## Typography and Palette **Typography:** - **Headlines:** "Josefin Sans" (Google Fonts) — futura-geometric sans at 2.2rem-3rem, weight 700. Its geometric letterforms create the mid-century-modern quality of Showa-era corporate identity and advertising typography. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Data:** "JetBrains Mono" (Google Fonts) — monospace at 0.85rem for dates, historical references, and era annotations. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **CRT Black:** #0a0a0e — deep CRT black for backgrounds - **Duotone Surface:** #141418 — dark duotone for panels - **Showa Amber:** #d8a840 — warm amber for primary accent (neon signage) - **CRT Green:** #40c870 — phosphor green for secondary accent (screen glow) - **Static White:** #d0d0d8 — cool static for text - **Shadow CRT:** #282830 — CRT shadow for secondary text - **Border Amber:** rgba(216,168,64,0.08) — amber tint border ## Imagery and Motifs **Vector-Art Showa Graphics:** Showa-era content illustrated with clean vector graphics — geometric shapes (circles, rectangles, triangles) composed into stylized illustrations using flat fills in Showa Amber and CRT Green. No gradients within shapes. Bold 2px outlines. The vector creates the mid-century-anime quality of Showa-era graphic design. **Parallax CRT Depth:** Content layers move at different scroll speeds — background elements at 0.4x, midground at 0.7x, foreground at 1.0x creating the depth quality of looking through a CRT screen into layered Showa-era scenes. **Retro-Patterns Period Decoration:** Showa-era-inspired geometric patterns — small circles in grid (4px at 16px intervals), diagonal stripe patterns (45deg, 1px every 8px), and wave patterns (repeating sine-wave SVG) all in Showa Amber at 0.03-0.05 opacity. The patterns create the textile quality of Showa-era interior design and fashion motifs. **Duotone Dark-Mode Atmosphere:** Two-tone dark palette — CRT Black and Duotone Surface with warm amber accent light. radial-gradient(at 50% 40%, rgba(216,168,64,0.02), transparent 35%). The duotone creates the warm-monitor quality of content viewed on a vintage CRT display. **CRT Scan Lines:** Full-page horizontal scan lines — repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(208,208,216,0.015) 2px, rgba(208,208,216,0.015) 3px). The scan lines create the authentic CRT quality of analog display technology. ## Prompts for Implementation Build the page as a dark-mode Showa-era broadcast. HUD frame: .showa-hud { position: fixed; inset: 8px; border: 1px solid rgba(216,168,64,0.04); border-radius: 8px; pointer-events: none; z-index: 100; } .showa-content { max-width: 820px; margin: 0 auto; padding: 80px 24px; } Parallax: .crt-layer { position: relative; } .crt-bg { transform: translateY(calc(var(--scroll) * 0.4)); } .crt-mid { transform: translateY(calc(var(--scroll) * 0.7)); } Scan lines: .scanlines::after { content: ''; position: fixed; inset: 0; background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(208,208,216,0.015) 2px, rgba(208,208,216,0.015) 3px); pointer-events: none; z-index: 999; } Showa panel: .era-card { background: #141418; border: 1px solid rgba(216,168,64,0.08); border-radius: 4px; padding: 24px; } AVOID: Generic nostalgia platforms, corporate cultural archives, and minimal history sites. Let dark-mode CRT atmosphere and grounded-earthy practicality create a Showa documentation platform where 昭和 culture is viewed through the warm phosphorescent glow of period-appropriate display technology. ## Uniqueness Notes 1. **Dark-mode for Showa nostalgia:** CRT-inspired dark interfaces make cultural documentation feel like viewing Showa content through period-appropriate technology. 2. **HUD-overlay as CRT monitor:** Persistent frame elements create the authentic quality of content viewed on a vintage television display. 3. **Futura-geometric as mid-century type:** Geometric sans creates the corporate-identity quality of Showa-era Japanese graphic design. 4. **Amber and green as CRT phosphors:** Period-accurate color accents create the authentic glow quality of 1970s-80s display technology. 5. **Retro-patterns as Showa textiles:** Period-inspired geometric patterns create the interior-design quality of Showa-era cultural spaces. **Seed/Style:** aesthetic: dark-mode, layout: hud-overlay, typography: futura-geometric, palette: duotone, patterns: parallax, imagery: vector-art, motifs: retro-patterns, tone: grounded-earthy **Avoided Overused Patterns:** corporate aesthetic (89%), parallax patterns (93%), asymmetric layout (91%), mono typography (94%), warm palette (95%), friendly tone (89%), minimal imagery (92%). This design uses dark-mode aesthetic, hud-overlay layout, duotone palette, vector-art imagery, and grounded-earthy tone.