# Design Language for daitoua.com ## Aesthetics and Tone A corporate-institutional archive interface for documenting the 大東亜 (Greater East Asia) historical period (1900-1945) -- daitoua.com renders as a research dashboard that treats history with the systematic rigor of a corporate intelligence platform. The corporate aesthetic is applied deliberately to historical education: clean data organization, structured navigation, and professional restraint replace the emotional manipulation common in historical sites. The design says: these events are too important for sensationalism; they deserve systematic, unflinching documentation. The retro-futuristic palette grounds the corporate interface in the period's own visual language: muted amber, olive drab, aged ivory, and telegraph-line grey reference the analog communication technology and print materials of the early-to-mid 20th century, filtered through a modern data-visualization sensibility. Every color choice evokes archival paper, military maps, and telegraphic transmissions. The tone is archival-analytical: the site presents historical facts and educational content with the measured precision of an institutional researcher. No glorification, no condemnation in the interface itself -- the design provides structure for understanding while trusting the reader to form their own judgments. Language is precise, sourced, and contextual. Visual references: the interface of a Bloomberg Terminal redesigned for historical research; the filing systems of the National Archives; a topographic military map viewed through museum glass; the microfilm reader rooms of university libraries. ## Layout Motifs and Structure The layout uses a **dashboard** architecture -- multiple data panels arranged on screen simultaneously, allowing the user to see different facets of historical information at once. **Dashboard System:** - A persistent left sidebar (260px) containing navigation and context filters - Main content area divided into a 2x2 or 3x1 panel grid using CSS Grid - Each panel is a bordered container (1px solid, muted olive) with a header bar (24px, darker background) showing the panel title - Panels can be conceptually "focused" -- clicking a panel's expand button would transition to a full-width view of that content **Section Flow:** 1. **The Terminal:** A top bar (48px) spanning full width with the domain name, a period selector (decade buttons: 1900s, 1910s, 1920s, 1930s, 1940s), and institutional metadata. Below it, the dashboard panels load. 2. **The Map Panel:** Upper-left panel showing a simplified CSS/SVG map outline with regional markers, labeled with key locations. 3. **The Timeline Panel:** Upper-right panel showing a horizontal timeline with event nodes. Scrollable within the panel. 4. **The Archive Panel:** Lower-left panel showing categorized document links/summaries in a list format. 5. **The Context Panel:** Lower-right panel showing interpretive/educational content -- the "analysis" view. 6. **The Citations:** A footer section with source references, methodology notes, and educational disclaimers. **Navigation:** - Left sidebar contains: site title, period filters, category filters (Political, Military, Cultural, Economic), and a search-style input field - All navigation items use condensed typography for information density ## Typography and Palette **Typography:** - **Headlines/Panel Headers:** "Barlow Condensed" (Google Fonts) -- a condensed grotesque that maximizes information density while maintaining clean readability, essential for dashboard design where space is at a premium. Used at 1.2rem-2.5rem, weight 600, letter-spacing: 0.02em, line-height 1.2. All-caps for panel headers at 0.75rem. - **Body/Data:** "Barlow" (Google Fonts) -- the proportional sibling, providing comfortable reading for longer analytical text within panels. Used at 0.9rem, weight 400, line-height 1.6. - **Code/Dates/References:** "Fira Code" (Google Fonts) -- for dates, reference numbers, coordinates, and source citations. Used at 0.8rem, weight 400. **Palette (Retro-Futuristic Archival):** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Archive Dark | Deep olive-black | #1a1c14 | Primary background, sidebar | | Panel Dark | Olive grey | #252820 | Panel backgrounds | | Panel Header | Darker olive | #1e2018 | Panel header bars | | Archive Amber | Primary accent | #c8a050 | Headlines, active items, highlights | | Muted Gold | Secondary accent | #a08838 | Secondary highlights, hover states | | Aged Ivory | Light text | #e8e0d0 | Primary text on dark | | Telegraph Grey | Muted text | #8a8878 | Secondary text, labels, borders | | Map Green | Topology accent | #4a6848 | Map elements, category: military | | Signal Red | Alert/emphasis | #b84030 | Critical events, emphasis (used sparingly) | | Paper White | Light surface | #f0ece0 | Card interiors in light mode panels | The palette evokes the material world of early 20th century documentation: amber for telegraphic warmth, olive for military maps, ivory for aged paper, and grey for institutional infrastructure. ## Imagery and Motifs **Dashboard Panel Borders:** Each panel has a 1px solid border in Telegraph Grey (#8a8878), with a panel header bar (24px height, Panel Header background) containing the panel title in Barlow Condensed, all-caps, letter-spaced. The header has a bottom border (1px solid #8a8878) separating it from content. Clean, institutional, functional. **Topographic Map Styling:** The Map Panel contains a simplified SVG outline of the relevant region with: stroke: #4a6848 (Map Green), stroke-width: 1px, fill: none. Location markers are small circles (8px) with 2px borders in Archive Amber. On hover, markers expand slightly and show a tooltip with location name and date range. **Timeline Nodes:** The Timeline Panel uses a horizontal line (2px, Telegraph Grey) with circular nodes (12px, Archive Amber fill, 2px dark border) at event positions. Each node connects to a brief text label below the line. Nodes cluster in decades, creating visual density patterns that reveal historical intensity. **Sidebar Category Icons:** Navigation categories in the sidebar use small geometric indicators: a square for Political, a triangle for Military, a circle for Cultural, a diamond for Economic -- simple shapes in muted accent colors, functioning as a legend for the dashboard. **Citation Formatting:** The Citations section uses a distinctive style: hanging indents (padding-left: 2em, text-indent: -2em), Fira Code for reference numbers, and a subtle left border (2px solid #a08838) on each citation block. ## Prompts for Implementation Build this site as a research terminal the user activates. The Terminal header bar loads first, with the period selector buttons appearing left to right (staggered 80ms). Then the four dashboard panels draw their borders simultaneously (border-width from 0 to 1px, 400ms). Panel content fades in from top to bottom within each panel (300ms per panel, staggered). The sidebar navigation loads with items appearing sequentially (60ms stagger). All panel content is scrollable within its container -- the dashboard frame stays fixed while individual panels scroll independently. Hovering map markers triggers tooltip reveals. Timeline nodes glow with Archive Amber when hovered. The overall experience should feel like accessing a classified but now-declassified research system: institutional, thorough, and designed for serious study. Educational disclaimers should be visible and prominent. Avoid all emotional manipulation: no dramatic imagery, no horror-emphasizing content, no nationalistic framing in either direction. The design is a neutral vessel for historical facts. No decorative elements, animations beyond functional ones, or any content that could be construed as glorifying the historical period. ## Uniqueness Notes 1. **Corporate dashboard for historical education:** No other design applies multi-panel dashboard architecture to historical/educational content, creating a research-station experience unique in the collection. 2. **Retro-futuristic archival palette:** The specific amber-olive-ivory palette evokes early 20th century material culture while remaining functional for modern data display. 3. **Simultaneous multi-panel information display:** The 2x2 panel grid with independent scrolling within each panel creates a genuine multi-stream research experience. 4. **Neutral institutional tone for sensitive history:** The deliberate use of corporate restraint for WWII-era East Asian history demonstrates design as ethical framework. Document chosen seed/style: aesthetic: corporate, layout: dashboard, typography: condensed, palette: retro-futuristic, patterns: panel-border, imagery: topographic-svg, motifs: timeline-nodes, tone: archival-analytical Avoided overused patterns: corporate aesthetic (used intentionally for institutional rigor), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)