# Design Language for reiwa.bar ## Aesthetics and Tone reiwa.bar channels a hand-drawn aesthetic — the authentic, personal quality of illustrated content applied to a Reiwa era (令和) cultural platform. The site illustrates — every element carrying the warmth of brush on paper, the spontaneous quality of live-sketched observations, and the intimate cultural documentation of Japan's current era through hand-crafted visual storytelling. Inspiration draws from the illustrated diaries of Maira Kalman, the brush calligraphy of modern Japanese lettering artists, the editorial illustrations of Noritake, and the hand-drawn maps of illustrated cultural guides. The tone is professional — clean, competent language that grounds hand-drawn warmth with reliable cultural expertise. ## Layout Motifs and Structure The layout uses a **hero-dominant** architecture — content anchored by large, immersive hero sections that establish each Reiwa cultural topic with contemplative visual weight. **Hero Dominant Architecture:** - Hero sections: 70-85vh with immersive cultural illustrations - Supporting content: max-width: 780px flowing beneath heroes - Mini-heroes at 40vh for secondary topics - Each hero a contemplative cultural moment - Container: full-width heroes, 780px body content - The heroes create meditative pauses between cultural exploration **Section Sequence:** 1. **Era:** Hero with art-deco-display title on jewel-tones hand-drawn gradient, neon-glow subtle accent illumination, marble-classical cultural reference markers 2. **Stories:** Cultural features in hero-to-content flow — lottie-animation interactive illustrated animations with neon-glow focused lighting 3. **Epoch:** Featured cultural moment in full hero with marble-classical ornamental framing and neon-glow dramatic accent 4. **Notes:** Cultural observations in focused content with marble-classical reference markers 5. **Harmony:** Footer as era closing — professional farewell with marble-classical settled references and competent sign-off ## Typography and Palette **Typography:** - **Headlines:** "Poiret One" (Google Fonts) — art deco display at 2.5rem-3.5rem, weight 400. Its elegant geometric forms create the era-defining quality of typography that captures the refined spirit of Reiwa. - **Body Text:** "Noto Sans JP" (Google Fonts) — clean sans at 0.9rem, weight 400, line height 1.8. - **Accent:** "Poiret One" at 1.1rem for cultural category labels and era markers. - **Labels:** "Noto Sans JP" at 0.65rem, weight 500, uppercase, letter-spacing 0.06em. **Color Palette:** - **Jewel Indigo:** #101028 — deep jewel indigo for backgrounds - **Jewel Surface:** #181838 — rich jewel for panels - **Jewel Amber:** #d8a838 — warm jewel amber for primary accent - **Jewel Jade:** #38a878 — rich jade for secondary accent - **Jewel Rose:** #c86878 — warm rose for tertiary accent - **Moon Light:** #d4d0dc — soft moonlight for text - **Shadow Jewel:** #303050 — jewel shadow for secondary text - **Border Jewel:** rgba(216,168,56,0.08) — amber tint border ## Imagery and Motifs **Neon-Glow Cultural Illumination:** Hero sections feature soft accent glow — radial-gradient(at 50% 40%, rgba(216,168,56,0.06), transparent 35%) creating the lantern-lit quality of traditional Japanese evening cultural events illuminated by modern light. **Lottie-Animation Illustrated Movement:** Cultural illustrations feature subtle CSS animation — gentle drift (translateY 0 to -4px over 3s ease-in-out), soft opacity pulse (0.9 to 1.0 over 4s). The animation gives illustrated elements the living quality of hand-drawn scenes that continue to breathe. **Marble-Classical Cultural References:** Small classical decorative elements — SVG torii gate fragments, chrysanthemum petals, cloud scrolls (12-20px) in Jewel Amber and Jewel Jade at 0.08-0.12 opacity. The classical elements create the cultural continuity quality of Reiwa connected to Japanese artistic heritage. **Jewel-Tones Reiwa Atmosphere:** Background uses deep jewel tones with warm cultural accents — radial-gradient(at 40% 30%, rgba(216,168,56,0.02), transparent 35%), radial-gradient(at 60% 70%, rgba(56,168,120,0.015), transparent 30%). The jewel depth creates the precious quality of an era documented with reverence. **Brush-Stroke Borders:** Panel borders styled as brush strokes — border-width varying (1px 2px 1px 2px), border-color with slight opacity variation per side. The brush quality creates the hand-drawn authenticity of illustrated cultural documentation. ## Prompts for Implementation Build the page as a hand-drawn Reiwa cultural gallery. Hero: .reiwa-hero { min-height: 75vh; display: flex; align-items: center; justify-content: center; position: relative; } .reiwa-content { max-width: 780px; margin: 0 auto; padding: 60px 24px; } Lottie-animation: .illustrated-element { animation: illustrateBreathe 4s ease-in-out infinite; } @keyframes illustrateBreathe { 0%, 100% { transform: translateY(0); opacity: 0.9; } 50% { transform: translateY(-4px); opacity: 1.0; } } Neon glow: .cultural-glow { background: radial-gradient(at 50% 40%, rgba(216,168,56,0.06), transparent 35%); } Classical markers: .cultural-marker svg { stroke: var(--marker-color, rgba(216,168,56,0.1)); stroke-width: 1; fill: none; } Brush border: .brush-panel { border-style: solid; border-width: 1px 2px 1px 2px; border-color: rgba(216,168,56,0.08) rgba(216,168,56,0.06) rgba(216,168,56,0.1) rgba(216,168,56,0.07); border-radius: 4px; padding: 24px; background: #181838; } AVOID: Standard cultural platforms, corporate era documentation, and minimal historical archives. Let hand-drawn authenticity and professional expertise create a Reiwa cultural platform where Japan's current era is documented with the illustrated warmth and competent authority of a master cultural observer. ## Uniqueness Notes 1. **Hand-drawn for Reiwa era:** Illustrated warmth makes cultural documentation feel personally observed rather than institutionally recorded. 2. **Hero-dominant as contemplative pauses:** Large hero sections create meditative moments between cultural explorations. 3. **Jewel-tones as precious era:** Rich, deep colors create the reverent quality of an era documented with care. 4. **Lottie-animation as living illustrations:** Subtle movement gives hand-drawn elements the breathing quality of observed cultural moments. 5. **Art-deco display as era typography:** Elegant geometric forms capture the refined, modern spirit of the Reiwa period. **Seed/Style:** aesthetic: hand-drawn, layout: hero-dominant, typography: art-deco-display, palette: jewel-tones, patterns: lottie-animation, imagery: neon-glow, motifs: marble-classical, tone: professional **Avoided Overused Patterns:** corporate aesthetic (87%), parallax patterns (92%), asymmetric layout (90%), mono typography (93%), warm palette (94%), friendly tone (88%), minimal imagery (92%). This design uses hand-drawn aesthetic, hero-dominant layout, jewel-tones palette, neon-glow imagery, and professional tone.