# Design Language for reiwa.boo ## Aesthetics and Tone reiwa.boo channels a flat-design aesthetic — the clean, shadow-free simplicity of flat UI applied to a Reiwa era playful cultural platform. The site flattens — bold solid colors, crisp geometric shapes, and the confident clarity of design that trusts its content to communicate without dimensional trickery. Inspiration draws from the flat illustration style of Owen Davey, the Material Design principles of Google's early flat era, the geometric simplicity of Lotta Nieminen, and the bold flat graphics of Hey Studio. The tone is approachable-casual — friendly, relaxed language that makes Reiwa cultural content feel like chatting with a knowledgeable friend. ## Layout Motifs and Structure The layout uses a **parallax-sections** architecture — content arranged in stacked full-viewport sections with subtle depth movement that adds dimensionality to the flat visual style. **Parallax Sections Architecture:** - Full-viewport sections stacked vertically - Content with subtle parallax depth offset - Flat-colored section backgrounds in rotation - Feature sections: zero-parallax anchor points - Container: 100vw sections with max-width: 840px inner content - The parallax adds gentle depth to flat-design surfaces **Section Sequence:** 1. **Boo:** Hero with sans-grotesk title on sunset-warm flat gradient, noise-texture subtle surface grain, city-urban architectural flat illustrations 2. **Culture:** Reiwa topics in parallax sections — scroll-triggered interactive reveal animations with noise-texture gritty flat surfaces 3. **Feature:** Highlighted topic in zero-parallax anchor with city-urban detailed flat illustration and noise-texture premium texture 4. **Snapshots:** Quick cultural notes in compact sections 5. **Later:** Footer as casual farewell — approachable-casual closing with city-urban settled skyline and friendly sign-off ## Typography and Palette **Typography:** - **Headlines:** "Space Grotesk" (Google Fonts) — grotesk sans at 2.2rem-3rem, weight 700. Its geometric character creates the bold, confident quality of flat-design headlines with personality. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.7. - **Accent:** "Space Grotesk" at 1rem, weight 500 for cultural labels and section markers. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Sunset Peach:** #f8e8d0 — warm sunset peach for backgrounds - **Sunset Sand:** #ecdcc0 — warm sand for panels - **Sunset Coral:** #e07848 — bold coral for primary accent - **Sunset Teal:** #388890 — cool teal for secondary accent - **Sunset Plum:** #884868 — warm plum for tertiary accent - **Text Dark:** #201810 — warm dark for body text - **Shadow Sunset:** #a89070 — warm shadow for secondary text - **Border Sunset:** rgba(224,120,72,0.1) — coral tint border ## Imagery and Motifs **Noise-Texture Surface Grain:** Flat panels feature subtle noise grain — SVG feTurbulence (baseFrequency: 0.45, numOctaves: 2) at 0.03 opacity preventing flat surfaces from feeling sterile. The grain adds tactile quality to flat-design simplicity. **Scroll-Triggered Section Reveals:** Content sections animate on scroll — opacity 0 to 1 with translateY(20px) to translateY(0) over 400ms ease-out triggered by intersection observer. The reveals add motion to flat-design's static visual language. **City-Urban Flat Architecture:** Reiwa urban life illustrated through flat geometric city elements — simplified building silhouettes, train forms, bridge shapes (30-60px) in bold solid Sunset Coral, Teal, and Plum with no gradients, no shadows. The flat city creates the modern-Japan quality of Reiwa urban life in graphic-poster style. **Sunset-Warm Flat Sections:** Section backgrounds use bold flat color blocks — alternating between Sunset Peach, Sunset Sand, and white. No gradients within sections. The flat color creates the paper-cutout quality of layered colored surfaces. **Geometric Accent Shapes:** Bold geometric shapes — circles (20px), rectangles (30x8px), triangles (16px) in solid accent colors at full opacity used as section markers and decorative elements. The shapes create the graphic-poster quality of flat design's confident geometry. ## Prompts for Implementation Build the page as a flat-design Reiwa cultural magazine. Parallax: .reiwa-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; } .reiwa-inner { max-width: 840px; margin: 0 auto; padding: 60px 24px; } Scroll-triggered: .flat-reveal { opacity: 0; transform: translateY(20px); transition: all 400ms ease-out; } .flat-reveal.visible { opacity: 1; transform: translateY(0); } Noise texture: .flat-grain::after { content: ''; position: absolute; inset: 0; opacity: 0.03; background: url("data:image/svg+xml,...feTurbulence baseFrequency='0.45'..."); pointer-events: none; } Flat city: .city-flat svg { fill: var(--city-color, #e07848); stroke: none; } Geometric accent: .geo-circle { width: 20px; height: 20px; border-radius: 50%; background: var(--geo-color, #e07848); } .geo-rect { width: 30px; height: 8px; background: var(--geo-color, #388890); } .geo-tri { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 16px solid var(--geo-color, #884868); } AVOID: Standard cultural platforms, corporate era documentation sites, and minimal historical archives. Let flat-design clarity and approachable-casual friendliness create a Reiwa cultural platform where Japan's current era is explored with bold graphic simplicity and relaxed warmth. ## Uniqueness Notes 1. **Flat-design for Reiwa culture:** Shadow-free simplicity makes cultural content feel clear and confidently modern. 2. **Parallax on flat surfaces:** Subtle depth adds dimensionality without compromising flat-design's honest simplicity. 3. **City-urban as Reiwa identity:** Flat geometric cityscapes capture the modern urban quality of Japan's current era. 4. **Noise-texture on flat panels:** Subtle grain prevents sterility while maintaining flat-design's clean visual language. 5. **Sunset-warm as cultural warmth:** Bold warm tones create the inviting quality of cultural content shared among friends. **Seed/Style:** aesthetic: flat-design, layout: parallax-sections, typography: sans-grotesk, palette: sunset-warm, patterns: scroll-triggered, imagery: noise-texture, motifs: city-urban, tone: approachable-casual **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 flat-design aesthetic, parallax-sections layout, sunset-warm palette, noise-texture imagery, and approachable-casual tone.