# Design Language for xbom.wiki ## Aesthetics and Tone xbom.wiki is a muji-influenced immersive-scroll encyclopedia where information unfolds through continuous vertical descent. The "xbom" name suggests explosive knowledge (x-bomb of information), but the muji aesthetic contains this explosive potential within serene, functional design. Art-deco display typography adds glamour to the otherwise restrained surfaces, while burnt-orange accents punctuate the warm minimalism like sparks from a controlled detonation. The tone is whimsical and creative -- a wiki that makes discovering information feel like unwrapping a beautifully designed gift. Think of a Japanese department store's information desk redesigned by an Art Deco architect. Inspiration from Muji stationery design, Art Deco cinema facades, Japanese ema (votive prayer tablets), and the warm glow of burnt-orange sunsets. ## Layout Motifs and Structure An **immersive-scroll** layout where the entire site is experienced as one continuous vertical journey with no distinct page breaks -- information flows like a stream. **Primary structure:** - **Descent opening (100vh):** A warm cream background (#f0e8d8) with "XBOM" in art-deco display type at 25vw, positioned center. The letters have thin decorative lines radiating outward (Art Deco sunburst motif). Below: ".WIKI" in smaller type. As the user begins scrolling, the title scales down smoothly and docks into a thin top bar. - **Continuous stream:** Content flows in a single unbroken column (660px max-width, centered) with no visible section breaks. Topic transitions are marked only by larger type headings and subtle color shifts in the background (cream to warm white and back). Custom illustrations appear inline, breaking the text flow with visual pauses. - **Sci-fi HUD margin elements:** Small circular instruments (thin-stroke circles with tick marks) float in the margins at fixed intervals, serving as scroll-position indicators. Each instrument has a small rotating needle that tracks scroll progress. - **Scroll-triggered content reveals:** Content blocks fade in and slightly shift upward as they enter the viewport, creating a continuous sense of discovery. **Spatial relationships:** Single continuous column, 660px max-width, centered. No section padding -- content separates with heading size and margin-bottom: 64px. Inline illustrations span full column width. Margin elements: position: fixed at 90% right. ## Typography and Palette **Fonts:** - **Display/Titles:** "Josefin Sans" (Google Fonts) -- a geometric sans-serif with Art Deco proportions (high x-height, elegant thin strokes), used at clamp(36px, 6vw, 80px). Weight 700. The geometric elegance evokes 1920s poster design. - **Body text:** "Noto Serif" (Google Fonts) -- a comprehensive serif family at 17px/1.85 line-height. Weight 400 for body, 700 for emphasis. The warm serif supports extended reading in the continuous-scroll format. - **HUD/Margin labels:** "Courier Prime" (Google Fonts) -- monospace at 10px for margin instrument labels and metadata. Weight 400. text-transform: uppercase. **Color Palette:** - **Cream base:** #f0e8d8 (warm muji-inspired cream) - **White warm:** #faf6f0 (slightly cooler for alternating backgrounds) - **Burnt orange:** #c87030 (primary accent -- headings, links, highlights) - **Burnt sienna:** #a85828 (deeper orange for hover states) - **Text primary:** #2a2218 (warm dark brown) - **Text secondary:** #7a6a50 (muted brown for metadata) - **HUD stroke:** #b8a888 (warm gray for instrument strokes) - **Deco line:** #d4b888 (golden for Art Deco decorative lines) ## Imagery and Motifs **Core visual motifs:** - **Custom illustrations:** Inline illustrations at key content moments -- simple, warm-toned drawings (single color, burnt-orange stroke on cream) depicting concepts covered in the wiki. Each illustration is 200-300px wide, centered in the text column, with 32px margin above and below. - **Sci-fi HUD scroll instruments:** Fixed-position circular SVGs (48px diameter) in the right margin. Each has an outer circle, 12 tick marks, and a needle (line element) that rotates based on scroll percentage. Multiple instruments track different sections of the page. - **Art Deco sunburst lines:** Thin decorative lines (1px, golden #d4b888) radiating from heading text, creating a sunburst effect. Implemented as pseudo-elements with repeating-linear-gradient at various angles. - **Scroll-triggered fade-in:** Every content block starts with opacity: 0 and transform: translateY(20px). Intersection Observer triggers smooth transition to opacity: 1 and translateY(0) over 500ms. ## Prompts for Implementation **Continuous knowledge stream:** The site must feel like one seamless river of information. No pagination, no section boundaries, just a smooth descent through knowledge. The immersive-scroll format means scroll performance is critical -- use will-change: transform sparingly, prefer CSS transitions over JavaScript animation. **Title dock animation:** - Hero title: position: sticky, top: 0. - Use Intersection Observer on a sentinel element below the hero. - When sentinel exits viewport: apply CSS class that scales title down (font-size transition from 25vw to 18px) and shifts to a thin top bar (height: 48px, background: #f0e8d8, z-index: 100). **HUD instrument scroll tracking:** - For each instrument, define a scroll range (e.g., 0-25%, 25-50%, etc.). - On scroll event (throttled): calculate rotation = (scrollPercentage - rangeStart) / rangeSize * 360. - Apply via CSS transform: rotate(${rotation}deg) on the needle element. **Continuous column styling:** - body { background: #f0e8d8; } - .content { max-width: 660px; margin: 0 auto; padding: 0 24px; } - h2 { font-size: clamp(36px, 6vw, 80px); margin-top: 64px; color: #c87030; } - Background color subtle shifts via CSS gradient on body: linear-gradient(180deg, #f0e8d8 0%, #faf6f0 30%, #f0e8d8 60%, #faf6f0 90%). **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, pagination, section breaks. The continuity must not be interrupted. ## Uniqueness Notes **Differentiators from other designs:** 1. **Art Deco display type in a muji-minimal context:** The glamour of 1920s geometric type (Josefin Sans) within an otherwise restrained, no-brand-inspired layout creates a unique stylistic tension not found in other designs. 2. **HUD scroll instruments as progress indicators:** Using rotating-needle circular instruments in the margin to track scroll position combines sci-fi aesthetics with functional navigation in a uniquely analog-digital hybrid. 3. **Title docking from monument to toolbar:** The hero title smoothly transitioning from 25vw display scale to an 18px toolbar creates a dramatic scale transformation that serves both aesthetic and functional purposes. **Chosen seed/style:** aesthetic: muji, layout: immersive-scroll, typography: art-deco-display, palette: burnt-orange, patterns: scroll-triggered, imagery: custom-illustration, motifs: sci-fi-hud, tone: whimsical-creative **Avoided overused patterns:** photography imagery (90%), centered layout (98% -- content is centered but the immersive-scroll breaks the static centered feel), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).