# Design Language for daitoua.quest ## Aesthetics and Tone A blobitecture museum of historical inquiry -- daitoua.quest renders as an organic, blob-shaped digital exhibition space where soft amorphous forms contain serious historical education about the 大東亜 (Greater East Asia) period (1900-1945). The blobitecture aesthetic transforms rectangular web conventions into flowing, amoeba-like containers: content lives inside organic shapes with smooth, undulating borders that suggest the complexity and non-linearity of historical narratives. Nothing in history is rectangular; neither is this interface. The jewel-tone palette brings depth and richness: emerald, sapphire, amethyst, and ruby create a museum-quality color environment where each hue illuminates a different facet of historical understanding. The gemstone colors avoid both the cold neutrality of academic grey and the manipulative warmth of propaganda design -- instead offering beauty as a framework for engaging with difficult history. The tone is museum-guide-curious: the voice of an engaged educator who asks questions as often as providing answers. "What happened?" is always followed by "Why does it matter now?" The quest framing makes learning an active journey rather than passive reception. Visual references: the organic architecture of the Heydar Aliyev Center by Zaha Hadid translated to CSS; a museum of contemporary art where the walls themselves bend; jewel-toned stained glass in a non-linear narrative sequence; soap bubbles reflecting historical photographs. ## Layout Motifs and Structure The layout uses a **hexagon** grid architecture -- content is organized within hexagonal tiles that, combined with the blobitecture blob shapes, create an organic tessellation suggesting crystalline geological formations. **Hexagon System:** - Content hexagons created via CSS clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%) - Hexagons are arranged in a honeycomb grid: 280px width, 12px gaps - Each hexagon has a jewel-tone background and contains a topic/question/concept - Surrounding the hexagon grid, larger blob shapes (border-radius: 40% 60% 70% 30% / 30% 40% 70% 60%) serve as section containers, creating the blobitecture envelope **Section Flow:** 1. **The Atrium:** A large blob container (80vw, 80vh) centered on the viewport with organic border-radius. Inside: the domain title in playful type, a brief mission statement, and small decorative hexagons floating at the blob's edges. 2. **The Exhibition Halls:** Multiple blob-shaped sections, each containing a hexagon cluster about a historical theme (Political, Cultural, Military, Economic dimensions). Blobs overlap slightly at their edges, creating visual continuity. 3. **The Question Wall:** A dense hexagon grid filling the viewport, each hexagon containing a single question about the historical period. Colors cycle through the jewel palette. This is the "quest" made visual. 4. **The Reflection Pool:** A calmer closing section -- a single wide blob with generous padding, containing reflective/contextual content about why this history matters today. Minimal hexagons; primarily text. **Navigation:** - A floating blob-shaped navigation button (fixed position, bottom-right) that expands into a menu of section links when clicked - Menu items are small hexagons with section labels inside ## Typography and Palette **Typography:** - **Headlines/Display:** "Fredoka" (Google Fonts) -- a rounded, playful display font with friendly proportions that make historical topics approachable without trivializing them. Used at 2rem-4.5rem, weight 600, letter-spacing: 0.01em, line-height 1.2. The rounded forms echo the blobitecture curves while the weight provides sufficient authority for educational content. - **Body:** "Quicksand" (Google Fonts) -- a rounded geometric sans-serif that complements Fredoka's playfulness while providing comfortable reading. Used at 1rem, weight 400, line-height 1.7. - **Data/References:** "Source Code Pro" (Google Fonts) -- for dates, reference numbers, and sourced quotations. Used at 0.85rem, weight 400. **Palette (Jewel-Tone):** | Role | Color | Hex | Usage | |------|-------|-----|-------| | Deep Emerald | Primary dark | #0a4a3a | Primary section backgrounds | | Sapphire | Secondary dark | #1a3a6a | Alternate section backgrounds | | Amethyst | Tertiary dark | #4a2a6a | Highlight sections | | Ruby | Warm accent | #8a2a3a | Emphasis, questions, special markers | | Bright Emerald | Primary accent | #20c8a0 | Links, active hexagons, highlights | | Bright Sapphire | Secondary accent | #4a8af0 | Secondary interactive elements | | Bright Amethyst | Tertiary accent | #a060e0 | Tertiary accents | | Pearl White | Light surface | #f4f0f8 | Text on dark, card interiors | | Onyx | Deep dark | #121018 | Deepest background sections | | Muted Jade | Mid-tone | #3a7868 | Borders, secondary text | The jewel tones create a museum-quality richness: each section can use a different gemstone as its base while maintaining harmony through shared saturation and depth levels. The palette progresses from cool (emerald/sapphire) to warm (amethyst/ruby) as the user moves through the exhibition. ## Imagery and Motifs **Blob Containers:** Section containers use extreme border-radius values to create organic shapes: border-radius: 40% 60% 70% 30% / 30% 40% 70% 60%. Each blob shape is unique (different border-radius values). Background colors from the jewel palette. The blobs overlap their neighbors by 20-40px using negative margins, creating a flowing, connected layout. **Jewel-Tone Hexagons:** Content hexagons use clip-path for shape and jewel-tone backgrounds. Each hexagon in a cluster uses a slightly different shade within the same hue family. On hover, hexagons brighten (lightness +10%) and gain a subtle inner glow (box-shadow: inset 0 0 20px rgba(255,255,255,0.1)). **Floating Decorative Elements:** Small hexagons (32-48px) and circles float near blob edges, positioned with CSS animation (gentle drift: translateX and translateY oscillating 4-8px over 8-12s). These create the effect of particles or bubbles in a geological formation. **Organic Connection Lines:** Between Exhibition Hall blobs, thin SVG paths (2px, Muted Jade) curve organically to connect related sections, drawn with cubic bezier curves. These paths animate on scroll (stroke-dashoffset, 2s) suggesting growth or flow between topics. **Question Hexagon Grid:** The Question Wall is the most visually dense section: hexagons packed edge-to-edge in a full-width honeycomb, each containing a single question in Pearl White text. Colors cycle through the jewel palette in a pattern (emerald, sapphire, amethyst, ruby, repeat), creating a stained-glass mosaic effect. ## Prompts for Implementation Build this site as a museum the user walks through. The Atrium blob loads with a scale-in animation (scale 0.8 to 1.0 over 1.5s, ease-out) with the content fading in 500ms after the blob has formed. Scrolling reveals Exhibition Hall blobs growing into the viewport -- each blob scales from 0.9 to 1.0 as it enters, with content appearing after the container. The hexagon clusters within each blob load sequentially, radiating from center (100ms stagger between hexagons). The Question Wall is the climax: all hexagons appear simultaneously with a brief shimmer (a wave of brightness traveling across the grid, 1.5s), then settle into their jewel tones. Floating decorative elements drift constantly, creating gentle ambient motion. The Reflection Pool at the end loads slowly (2s fade) and has the most negative space, encouraging contemplation. The blob-navigation button pulses gently (scale 1.0 to 1.05, 3s cycle). All historical content must be presented with educational context and without glorification. Disclaimers and sourcing must be visually prominent. Avoid intimidating, militaristic, or propagandistic visual elements. The blobitecture and jewel tones create a safe, museum-quality space for engaging with difficult history. No aggressive CTAs, pricing, or commercial elements. ## Uniqueness Notes 1. **Blobitecture-hexagon fusion for historical education:** No other design combines organic blob containers with hexagonal content tiles for educational/historical content, creating a museum-as-geology experience. 2. **Jewel-tone palette for sensitive historical content:** Using gemstone colors creates richness without the emotional manipulation of warm/cold extremes, a unique approach to difficult subject matter. 3. **Question-hexagon mosaic as stained glass:** The dense question grid with cycling jewel colors creates a stained-glass effect that transforms inquiry into visual art. 4. **Organic blob navigation:** The floating, expandable blob-button with hexagonal menu items creates a navigation pattern unique in the collection. Document chosen seed/style: aesthetic: blobitecture, layout: hexagon, typography: playful, palette: jewel-tone, patterns: blob-shape, imagery: organic-float, motifs: question-mosaic, tone: museum-guide-curious Avoided overused patterns: corporate aesthetic (76%), asymmetric layout (96%), mono typography (98%), warm palette (100%), parallax patterns (98%), tech motifs (97%), friendly tone (77%), minimal imagery (96%)