# Design Language for diplomatic.wiki ## Aesthetics and Tone diplomatic.wiki embraces a zen aesthetic -- the Japanese philosophy of tranquility, presence, and the beauty of emptiness applied to a diplomatic knowledge repository. A wiki is a collaborative knowledge base; "diplomatic" demands formality and tact. The zen aesthetic brings both together through restraint, balance, and mindful composition. Imagine a Japanese garden attached to an embassy: raked sand patterns, carefully placed stones, and a single cherry blossom tree beside a calm pond that reflects the building's architecture. The visual language draws from Ryoan-ji temple's rock garden, Muji's product philosophy, and the horizontal scroll aesthetics of Japanese emaki picture scrolls. The palette is pastel -- soft, diffused colors that suggest watercolor washes on handmade paper. Mixed-media imagery (combining line drawing, watercolor wash, and text) creates visual variety within the restrained palette. The tone is authoritative -- the quiet authority of someone who knows deeply and speaks simply. ## Layout Motifs and Structure The layout uses a **horizontal-scroll** composition -- content extends horizontally like an unrolling scroll, evoking the Japanese emaki tradition of horizontal narrative scrolls. **Primary structure:** - **Garden gate (100vw x 100vh, first panel):** The starting panel shows the title "diplomatic.wiki" in humanist type on a pastel background. A simple SVG torii gate outline sits below the title. Faint horizontal lines suggest the rake marks in a zen garden's sand. - **Knowledge scroll (8-10 panels, each 100vw x 100vh):** Each panel is a wiki "entry" about a diplomatic concept. Panels alternate between text-heavy and visual-heavy compositions. Visual panels feature mixed-media elements: line drawings with watercolor-wash CSS gradients behind them. Text panels use generous margins and contemplative spacing. - **Bubble garden (100vw x 100vh):** A playful panel where small bubbles (CSS circles, 8-20px, pastel colors) float upward in gentle animations. Each bubble contains a single word related to diplomacy. This is a moment of lightness in the scholarly scroll. - **Scroll end (100vw x 100vh):** A closing panel with minimal content and a spring-animated "return to beginning" element that bounces gently at the right edge. **Spacing philosophy:** Within panels, maximum restraint. Text occupies no more than 40% of the panel area. The horizontal scrolling is implemented with CSS scroll-snap-type: x mandatory on a flex container. ## Typography and Palette **Fonts:** - **Headlines/Display:** "Noto Sans JP" (Google Fonts) -- a humanist sans-serif supporting Japanese and Latin, appropriate for the zen aesthetic. Weight 700. Size clamp(28px, 4vw, 52px). Letter-spacing: 0.01em. - **Body text:** "Source Serif 4" (Google Fonts) -- a scholarly serif for wiki-style content. Weight 400. Size clamp(15px, 1.05vw, 17px). Line-height: 1.85. - **Annotations:** "Klee One" (Google Fonts) -- a handwritten Japanese-style font for annotations and labels. Weight 400, size 14px. **Palette:** - **Washi White** `#FAF8F4` -- primary background, paper-like - **Ink Sumi** `#2A2A3A` -- primary text - **Zen Stone** `#A0A8B0` -- muted accent for borders and lines - **Sakura Pink** `#E8C0C8` -- pastel accent for highlights and bubbles - **Bamboo Green** `#A0C8A0` -- pastel accent for nature elements - **Sky Pastel** `#C0D8E8` -- pastel accent for watercolor washes ## Imagery and Motifs **Core visual motifs:** - **Zen garden rake lines:** Subtle horizontal lines (1px, Zen Stone at 20% opacity) across panel backgrounds, spaced 32px apart, suggesting raked sand patterns. - **Mixed-media compositions:** Visual panels combine SVG line drawings (thin, 1.5px strokes in Ink Sumi) with watercolor-wash backgrounds (CSS radial-gradients in pastel colors at 10-15% opacity). The combination creates a handmade, artistic quality. - **Bubble-playful elements:** CSS circles (8-20px) in pastel colors with subtle upward float animations (translateY from 0 to -40px, 4-8s cycles). Each bubble is semi-transparent (opacity 0.3-0.6). - **Spring-physics scroll indicators:** A small arrow or dot at the right edge of each panel uses a spring animation (bouncing left-right, cubic-bezier with overshoot) to indicate there is more content to scroll to. - **Horizontal scroll navigation:** A thin progress bar at the bottom of the viewport (2px, Zen Stone) fills with Sakura Pink as the user scrolls horizontally, indicating position within the scroll. ## Prompts for Implementation **Full-screen narrative experience:** The site should feel like unrolling a diplomatic knowledge scroll in a zen garden. Each panel is a contemplative stop. The horizontal movement is slow and deliberate. The bubble garden provides playful relief. **Opening animation sequence:** - Frame 0-300ms: Washi White background. - Frame 300-800ms: Zen garden rake lines fade in across the first panel. - Frame 800-1400ms: The torii gate SVG draws itself (stroke-dashoffset). - Frame 1400-2000ms: "diplomatic.wiki" fades in above the gate. - Frame 2000-2600ms: The spring-animated scroll indicator appears at right edge, bouncing gently. **Scroll behavior:** Horizontal scroll-snap ensures clean panel-to-panel transitions. The progress bar at bottom fills proportionally. Visual panels' watercolor washes intensify slightly as the panel centers in the viewport (opacity 10% to 15%). Bubble garden bubbles begin floating when their panel is visible. **Interaction details:** - Bubbles pop on click (scale to 1.5 then opacity to 0, 200ms). - Panels respond to hover on mixed-media images with a subtle warm tint. - The scroll progress bar glows Sakura Pink on hover. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, cookie banners, testimonial carousels. ## Uniqueness Notes **Differentiators from other designs:** 1. **Horizontal scroll as emaki scroll reference:** Using horizontal scrolling to reference the Japanese emaki picture-scroll tradition creates a culturally specific navigation metaphor unique to this design. 2. **Zen garden rake-line background texture:** The subtle horizontal lines suggesting raked sand patterns create an atmospheric backdrop that is both decorative and culturally resonant with the zen aesthetic. 3. **Mixed-media wiki entries:** Combining line drawings with watercolor-wash CSS gradients within wiki-style content panels creates a visual language where scholarship and art are inseparable. 4. **Bubble garden as contemplative play:** The panel of floating, clickable word-bubbles provides a moment of interactive playfulness within the otherwise contemplative scroll, balancing seriousness with delight. **Chosen seed/style:** aesthetic: zen, layout: horizontal-scroll, typography: humanist, palette: pastel, patterns: spring, imagery: mixed-media, motifs: bubble-playful, tone: authoritative **Avoided patterns (from frequency analysis):** Avoided overused parallax (95%), scroll-triggered (77%), cursor-follow (65%), stagger (41%) patterns. Avoided centered (94%) and card-grid (85%) layouts. Avoided photography (82%) imagery. Avoided gradient (92%) and warm (87%) palettes. Avoided mono (92%) typography. Avoided mysterious-moody (74%) tone. Used horizontal-scroll (5%) layout, pastel (4%) palette, and bubble-playful (2%) motifs -- all underused.