# Design Language for kaigenrei.com ## Aesthetics and Tone kaigenrei.com (戒厳令 — Japanese for "martial law/state of emergency") adopts a flat-design aesthetic with a Japanese minimalist edge — clean surfaces, restrained color, and purposeful emptiness that mirrors the tense stillness of an emergency declaration. The site presents martial law concepts through the lens of historical education and civic awareness, using visual restraint to communicate the gravity of emergency governance. Inspiration draws from Japanese government notice design, the clean authority of NHK broadcast graphics, and the stark simplicity of emergency signage systems. The tone is nostalgic-retro — looking back at historical instances of martial law with the warm distance of historical documentation rather than the heat of current events. The bento-box layout creates organized compartments of information, suggesting the systematic nature of emergency governance. ## Layout Motifs and Structure The layout employs a **bento-box** architecture — rectangular compartments of varying sizes organized in a tight grid, creating a structured, authoritative information display system. **Bento-Box Architecture:** - Grid: 1200px max-width, CSS Grid with defined template areas - Compartments: 4-column base grid with items spanning 1-4 columns and 1-2 rows - Gap: 6px — minimal gap suggesting controlled, compressed information - Each compartment has a distinct background from the palette, creating a color-coded information hierarchy **Compartment Layout:** 1. **Alert Header:** Full-width (4-col span) compartment with emergency-style typography 2. **Historical Timeline:** 2-col x 2-row large compartment with chronological entries 3. **Key Concepts:** Four 1x1 compartments with individual martial law elements 4. **Analysis:** 3-col span compartment for extended narrative content 5. **References:** 1-col sidebar compartment with source links 6. **Footer:** Full-width strip with publication-style information ## Typography and Palette **Typography:** - **Headlines:** "Noto Sans JP" (Google Fonts) — clean Japanese sans-serif at 2rem-3.5rem, weight 700. The neutrality of Noto carries governmental authority without ornament. - **Body Text:** "Noto Sans JP" at 0.95rem, weight 400, line height 1.75. Single-family discipline reinforces the flat-design purity. - **Latin/English:** "DM Sans" (Google Fonts) — geometric sans matching Noto's clean lines at equivalent sizes. - **Labels/Data:** "DM Sans" at 0.75rem, weight 500, uppercase with 0.08em letter-spacing for compartment headers and metadata. **Color Palette:** - **Forest Deep:** #1a3a2a — dark green for primary dark compartments, evoking military association - **Decree White:** #f5f5f0 — clean off-white for text backgrounds and light compartments - **Authority Red:** #c4432b — strong red for alert elements and emergency indicators - **Sage Green:** #6a8a6a — muted green for secondary compartments and calming elements - **Paper Cream:** #ede8dc — warm cream for narrative content areas - **Steel Gray:** #5a5a5a — neutral gray for borders and secondary text - **Ink Black:** #1a1a1a — true dark for maximum contrast text - **Gold Seal:** #b89a4a — warm gold for official-document styling elements ## Imagery and Motifs **Watercolor Background Washes:** Despite the flat-design structure, compartment backgrounds feature very subtle watercolor wash effects (CSS radial-gradient layers in palette colors at 0.03-0.06 opacity), suggesting historical document aging and hand-applied coloring. **Layered Depth in Compartments:** Key compartments have stacked-paper effects — multiple box-shadows creating a 3-4 layer paper stack beneath each box (offset 2px, 4px, 6px in progressively lighter grays). **Japanese Seal Stamp Motif:** A CSS-created hanko (印鑑) stamp appears as a decorative element — a red square with rounded inner corners containing a stylized character, placed at strategic locations (hero, section transitions, footer). **Blur-Focus Transitions:** Compartments enter with a brief blur-to-sharp transition (filter: blur(3px) to blur(0px)) on scroll, suggesting documents being brought into focus for reading. **Geometric Grid Underlays:** Faint grid lines (1px, #5a5a5a at 0.06 opacity) underlay content areas, referencing graph paper and official document templates. ## Prompts for Implementation Build the page as an emergency governance information system. The CSS Grid uses explicit grid-template-areas for precise compartment placement. Compartments use flat backgrounds from the palette with no gradients — purity of flat design. The alert header: Authority Red background, large white text, with a CSS-created emergency stripe pattern (8px repeating diagonal lines in red and white) as a top border. The hanko stamp: a 48px square div with background: #c4432b, border-radius: 4px, containing a centered character in white, with box-shadow: inset 0 0 0 3px #c4432b, 0 0 0 2px #f5f5f0 creating the stamp border effect. Rotate 5-10deg for authentic hand-stamped appearance. Stacked paper shadows: box-shadow: 2px 2px 0 #e0dcd4, 4px 4px 0 #d4d0c8, 6px 6px 0 #c8c4bc creating three visible paper layers beneath the compartment. Timeline entries within the large compartment use a vertical line (2px, Gold Seal) with dot markers (8px circles) and content blocks alternating left and right. AVOID: CTA-heavy layouts, pricing blocks, stat-grids. Let the bento-box organization and flat-design authority create a serious, educational document-viewing experience. ## Uniqueness Notes 1. **Flat-design bento-box for martial law education:** The compartmentalized information architecture mirrors the systematic nature of emergency governance documentation. 2. **Japanese seal stamp as CSS art:** The hanko motif created purely in CSS adds cultural authenticity and serves as a visual authority marker. 3. **Watercolor washes within flat-design compartments:** The subtle organic texture within strict flat-design containers creates a tension between rigidity and humanity. 4. **Emergency stripe patterns as borders:** Using diagonal red-white stripes (common in Japanese emergency signage) as decorative borders adds functional visual language. 5. **Historical document stacked-paper effect:** Multiple box-shadows creating paper-stack depth suggests archival research and historical documentation. **Seed/Style:** aesthetic: flat-design, layout: bento-box, typography: grotesque-neo, palette: forest-green, patterns: blur-focus, imagery: watercolor, motifs: layered-depth, tone: nostalgic-retro **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses flat-design aesthetic, bento-box layout, forest-green palette, watercolor imagery, and nostalgic-retro tone.