# Design Language for showa.day ## Aesthetics and Tone Dark-academia aesthetic recontextualized through Showa-era (1926-1989) Japanese coastal modernism - imagine the libraries and observatories of mid-century Japan: Tange Kenzo's library interiors, Yasujiro Ozu's cinematography (the deep blues of "Tokyo Twilight"), the geometric coastal posters of Saburo Yasuda. The tone is dreamy-ethereal: this is a dashboard for tracking your reading days, your study hours, your tide-and-moon observations - but treated with the wistful quality of an old Japanese seaside hotel's logbook. Coastal-blend palette (Ozu's blue-grays, sun-bleached cream, twilight teal) bathes the entire design in a soft-light atmosphere. Art-deco-display typography anchors the design to the Showa-era's design vocabulary - the geometric, stepped, ziggurat letterforms of pre-war Japan. Geometric-shapes motifs (circles, triangles, stepped pyramids) frame the data with restraint. ## Layout Motifs and Structure Dashboard layout - but radically reinterpreted as a Showa-era ship's log-book rather than a modern analytics dashboard. The page is divided into 4-5 horizontal "decks" stacked vertically, each deck containing a different category of dashboard data (reading hours, study hours, lunar phase, tide chart, weather). Each deck is a horizontal strip 30vh tall containing: a small art-deco display label on the left, a primary data visualization in the center (rendered as art-deco infographic with stepped pyramid bars or circular dial), and contextual nature-elements (a tiny illustrated moon, a wave, a leaf) on the right. Between decks: 8vh of empty coastal-blue space with a single hairline rule and a geometric-shape ornament centered. The deck composition is intentional - it reads as a ship's log organized by category, not a modern grid of widgets. ## Typography and Palette Display headlines: Limelight (Google Fonts) - the art-deco-display spec, a stepped-ziggurat letterform face that captures Showa-era Japanese-modern typography. Used for major deck labels at clamp(36px, 5vw, 72px) with 0 tracking. Body data labels: Poiret One (Google Fonts) at 16-22px - another art-deco geometric face with thin elegant proportions. Data values and metadata in Cormorant Garamond (Google Fonts) at 18px italic - the serif provides editorial warmth against the geometric art-deco. Mono for timestamps and numerical readouts in IBM Plex Mono at 13px. Four-face mix is intentional for the dashboard's deck-by-deck variety. Palette (coastal-blend): - #E8E4D9 sun-bleached-cream (primary background, weathered wood deck) - #5E7A8C twilight-teal (secondary surface, deck dividers) - #2A3D4F deep-coastal (primary text, near-black with cool blue warmth) - #C4956B sand-amber (accent, drop caps, primary data highlights) - #8FA8B5 sea-foam-blue (secondary accent, secondary data series) - #B8A28C driftwood-tan (highlight surface, hover states) - #6B5C4F shadowed-cedar (secondary text, captions, fine print) ## Imagery and Motifs Nature-elements imagery: every dashboard visualization is decorated with small line-illustration nature elements drawn in the Showa-era poster style - flat shapes, simplified silhouettes, no perspective. Lunar phases as 6 art-deco circle illustrations, tide-charts as wave-curve illustrations, weather as stylized cloud-and-sun glyphs, reading hours as illustrated book stacks. Each illustration is in coastal-blend palette colors with flat 2-color fills. Geometric-shapes motifs anchor the design vocabulary: stepped-pyramid bars in data visualizations, circle-and-triangle ornaments at deck dividers, hexagon containers for metric labels. Art-deco corner ornaments frame each deck. Subtle wave-pattern background textures appear at 5% opacity in deck backgrounds. ## Prompts for Implementation Build the site as a Showa-era ship's logbook displaying daily data - each deck a different category of observation. Hero: full viewport. The page opens with the title "showa.day" in Limelight at 96px centered on sun-bleached-cream background, with a subtitle "a coastal logbook for the modern day" in Poiret One at 18px italic. Below the title, the first deck (today's primary metric) is revealed via elastic pattern (6% corpus): the deck's container slides up from below with elastic spring physics - tension 200, damping 14 - settling into place with a 2-bounce decay. Use elastic pattern throughout: every data visualization bar/dial appears with elastic-eased fill, every nature-element illustration appears with elastic scale-in. Each subsequent deck reveals on scroll-into-viewport with elastic timing. NO conventional CTAs, NO subscription forms, NO "upgrade to premium" - this is a personal logbook, not a SaaS product. Lunar phase deck rotates through the 6 phase illustrations in sync with the actual date. Cursor is a small art-deco compass-needle (10px) in sand-amber that gently rotates toward the cursor's previous position - 200ms lag. Numerical values count up via counter-animate when revealed (e.g., 0 -> 24 over 1200ms). ## Uniqueness Notes - Dark-academia paired with Showa-era Japanese-modernist visual vocabulary - the cultural-aesthetic fusion is absent from the corpus. - Art-deco-display typography (4% corpus) used as the dashboard's structural identity rather than just a hero accent - the stepped-ziggurat forms are present throughout. - Coastal-blend palette (3% corpus) deployed as the entire dashboard's environment - the sun-bleached weathered-wood atmosphere is committed. - Chosen seed: aesthetic: dark-academia, layout: dashboard, typography: art-deco-display, palette: coastal-blend, patterns: elastic, imagery: nature-elements, motifs: geometric-shapes, tone: dreamy-ethereal - Avoided patterns from frequency analysis: parallax (94%), card-grid in modern widget sense (90%) - decks are horizontal strips not tiles, photography (90%) - all illustration, warm palette in gradient sense (93%) - coastal-blend structured, mono typography (81%) - only for numerical readouts, mysterious-moody tone (70%) - dreamy-ethereal instead.