# Design Language for xanadu.wiki ## Aesthetics and Tone xanadu.wiki is a muji-inspired encyclopedic resource where the mythical Xanadu is documented with the quiet precision and functional beauty of Japanese no-brand design. The visual identity strips away all ornamentation to reveal the essential structure of knowledge -- a full-bleed layout with generous negative space, terracotta-warm tones evoking clay tablets and ancient records, and display-bold typography that makes each heading feel like a monument. The tone is edgy and rebellious in its extreme restraint -- in a world of flashy wiki designs, this one whispers. Inspiration from Muji product design (removing excess, revealing essence), Japanese washi paper textures, terracotta warriors (monumental yet uniform), and the bold display type of Swiss railway station signage. ## Layout Motifs and Structure A **full-bleed** layout where content extends edge-to-edge with no visible container boundaries, creating an unframed, expansive reading experience. **Primary structure:** - **Monument entrance (100vh):** Full-bleed terracotta-warm background (#e8d8c0) extending to all viewport edges. The title "XANADU" in massive display-bold type (20vw size) positioned at the bottom third, partially bleeding off the left edge. Below: ".WIKI" in smaller but still commanding type. No decorative elements -- just typography, space, and warm color. - **Encyclopedia sections:** Full-bleed alternating sections -- warm (terracotta) and cool (off-white #f5f2ec). Content within each section uses a narrow column (580px max-width) left-aligned at 15% from the left edge, creating a consistent left margin while the background extends infinitely. Each section begins with a large bold heading. - **Botanical illustration breaks:** Between major sections, full-bleed bands featuring delicate botanical line illustrations (single-weight SVG drawings of plants referenced in Coleridge's poem) in muted terracotta tones. - **Tech motifs in margin:** Small, subtle tech-inspired decorative elements (tiny circuit-like patterns, dot-dash sequences) in the right margin, barely visible at 0.1 opacity -- the ghost of technology haunting the organic surface. **Spatial relationships:** Full-bleed: no max-width on section containers. Content column: 580px, positioned with padding-left: 15vw. Extreme section padding: 120px top/bottom. Line-height: 1.9 for maximum readability. ## Typography and Palette **Fonts:** - **Display/Headlines:** "DM Serif Display" (Google Fonts) -- a high-contrast display serif with sharp, authoritative strokes, used at clamp(48px, 10vw, 200px) for the hero and clamp(32px, 4vw, 56px) for section headings. Weight 400 (the only weight, inherently bold in visual impact). The bold display presence gives each heading monumental presence. - **Body text:** "Karla" (Google Fonts) -- a grotesque sans-serif with warm, humanist qualities at 17px/1.9 line-height. Weight 400 for body, 700 for emphasis. The gentle sans-serif contrasts with the dramatic display serif. - **Metadata:** "IBM Plex Mono" (Google Fonts) -- monospace at 12px for dates, references, and editorial metadata. Weight 400. text-transform: uppercase, letter-spacing: 0.15em. **Color Palette:** - **Terracotta warm:** #e8d8c0 (primary warm background) - **Terracotta deep:** #c8a880 (deeper warm for accents, borders) - **Off-white cool:** #f5f2ec (alternating cool background) - **Text dark:** #2a2018 (warm near-black for body text) - **Text muted:** #7a6a50 (muted brown for metadata) - **Botanical green:** #6a7a58 (muted green for illustrations) - **Tech ghost:** #b8a890 (barely-there tech motifs) ## Imagery and Motifs **Core visual motifs:** - **Botanical illustration line drawings:** Delicate single-weight (1px) SVG illustrations of plants -- willow trees, roses, incense cedar -- referenced in Xanadu poetry and history. Drawn in muted green (#6a7a58) or terracotta (#c8a880). These serve as section dividers and decorative breathing spaces. - **Tech ghost patterns:** Nearly invisible (0.08-0.12 opacity) circuit-board-like patterns and dot-matrix sequences in the right margin, representing the technological dimension of Ted Nelson's Project Xanadu. The patterns are so subtle they are only noticed on close inspection. - **Glitch micro-moments:** Every 20-30 seconds, the display headline text briefly glitches (horizontal offset of 2px with color split for 80ms, then resolves). This rare disruption in the otherwise serene design represents the tension between the mythical ideal (Xanadu) and digital reality. - **Full-bleed color transitions:** Background color shifts between sections are not instantaneous but use a CSS gradient transition zone (40px) where terracotta fades into off-white, creating soft, natural color shifts. ## Prompts for Implementation **Muji encyclopedia experience:** The site should feel like holding a beautifully minimal book -- no unnecessary decoration, no flashy effects, just excellent typography on warm surfaces. The restraint IS the design. Every pixel of whitespace is earned. **Full-bleed section implementation:** - Sections: width: 100%; padding: 120px 0; margin: 0; - Alternating colors: section:nth-child(odd) { background: #e8d8c0; } section:nth-child(even) { background: #f5f2ec; } - Content within: padding-left: 15vw; max-width: calc(580px + 15vw); **Monumental hero typography:** - h1 { font-family: 'DM Serif Display'; font-size: 20vw; line-height: 0.85; margin-left: -2vw; } (negative margin bleeds text off-edge) - Overflow: hidden on parent to control bleed amount. **Botanical SVG dividers:** - Full-width SVG elements (viewBox spanning full width, height: 80px). - Single-path plant illustrations centered, drawn in stroke-only with stroke-width: 1px. **Glitch micro-moment:** - setInterval with random delay (20000-30000ms). - Apply CSS class for 80ms: text-shadow: 2px 0 #c8a880, -2px 0 #6a7a58; transform: translateX(2px); - Remove class after timeout. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, complex navigation, sidebar panels. Maintain extreme simplicity. ## Uniqueness Notes **Differentiators from other designs:** 1. **Typography bleeding off viewport edge:** The hero text at 20vw deliberately extends beyond the left edge of the screen, creating a monumental, architectural scale unique among all designs. 2. **Ghost-opacity tech patterns in margins:** Nearly invisible circuit-board motifs at 0.08-0.12 opacity create a subliminal layer of meaning -- technology haunting an analog surface -- that rewards close attention. 3. **Botanical illustrations as Xanadu-specific content references:** Using plant species specifically mentioned in Coleridge's "Kubla Khan" poem as section dividers connects decoration directly to subject matter in a way no other design achieves. **Chosen seed/style:** aesthetic: muji, layout: full-bleed, typography: display-bold, palette: terracotta-warm, patterns: glitch, imagery: botanical-illustration, motifs: tech, tone: edgy-rebellious **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94% -- terracotta is specific), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).