# Design Language for xanadu.quest ## Aesthetics and Tone xanadu.quest should feel like discovering a sleeping palace inside a terminal window: command-line ritual, Art Deco ceremony, and desert-dream mirage braided into one full-screen pilgrimage. The mood is dreamy-ethereal rather than hacker-dark — the terminal is not a black box of severity, but an oracle carved from warm onyx, amber dust, and moonlit clay. Imagine Samuel Taylor Coleridge's Xanadu rendered as a lost mainframe temple: cursor blinks become fireflies, command prompts become engraved lintels, and every line of text feels like it was typed by a machine that remembers gardens, rivers, and impossible domes. The tone should be hushed, magnetic, and ceremonial. Avoid the common corporate/product framing entirely. The site is an invitation into an unreal quest-space: less “sign up now,” more “type the first word and the palace rearranges.” Let the domain name be interpreted literally as a quest into an enchanted system, where organic-flow layouts curve like an underground river and terminal fragments float like inscriptions detached from their stone. ## Layout Motifs and Structure Use an organic-flow composition that refuses the overused centered card-grid pattern. The page should unfold as a continuous full-viewport narrative with five dream chambers, each one shaped by a different flowing path rather than identical sections. A thin, wandering “command river” should snake from top-left to bottom-right, sometimes as a glowing prompt line, sometimes as a dotted pilgrimage trail, sometimes as a Deco border that melts into contour lines. Content clusters should attach to this river like islands: offset panels, curved text fragments, and floating terminal tablets that drift into proximity as the user scrolls. Structure the experience as a single immersive scroll: 1. **The Invocation Gate:** a full-screen opening with `xanadu.quest` set huge and architectural, a blinking amber cursor embedded in the title, and a low gradient-mesh sunrise behind it. 2. **The River Command:** an S-shaped section where terminal commands appear as wayfinding glyphs along a warm earthen stream. 3. **The Pleasure-Dome Console:** layered Art Deco arches and stepped frames orbit a central terminal pane, but the pane is translucent and dreamlike, not utilitarian. 4. **The Floating Orchard:** small text fragments, sigils, coordinates, and command chips hover at varied depths as if suspended in golden fog. 5. **The Return Prompt:** the final viewport collapses the palace into one quiet prompt line, suggesting the quest continues beyond the screen. Spatial relationships should feel gravitational, not gridded: elements are pulled toward the cursor, the river, and invisible magnetic wells. Use diagonal offsets, curved rails, nested arches, and generous negative space. No pricing blocks, no statistic grids, no testimonial rows, no conventional CTA band. ## Typography and Palette **Typography:** - **Display / Palace Titles:** "Cinzel Decorative" (Google Fonts, 400/700/900) for large Art Deco-inflected headings. Use uppercase sparingly, with generous letter-spacing (`0.06em` to `0.14em`) so the words feel engraved into bronze doors. - **Terminal / System Voice:** "IBM Plex Mono" (Google Fonts, 400/500/600) for prompts, coordinates, command fragments, cursor labels, and small interface annotations. Let it remain crisp but tint it with amber and clay rather than green-on-black cliché. - **Narrative Body:** "Cormorant Garamond" (Google Fonts, 400/500/600 italic) for poetic supporting copy, chamber descriptions, and dreamlike fragments. Its literary texture reinforces the Coleridge/Xanadu reference while contrasting the terminal voice. **Palette:** - **Obsidian Terminal:** `#15110D` — primary deep background, warmer than pure black. - **Baked Umber:** `#7A3F22` — earthen structural frames and shadowed Deco steps. - **Saffron Cursor:** `#F2B84B` — cursor glow, magnetic highlights, command river. - **Desert Rose:** `#C8795A` — gradient warmth, hover halos, floating petal-glyphs. - **Parchment Mist:** `#F5E3C8` — high-contrast text and luminous dome edges. - **Jade Oasis:** `#5E8C6A` — rare accent for hidden coordinates and “river” moments. - **Violet Dusk:** `#3D2B4F` — mesh-depth shadow and ethereal twilight pockets. Build gradients as warm-earthy mirages: `radial-gradient(circle at 30% 20%, #F2B84B55, transparent 32%)`, `radial-gradient(circle at 70% 65%, #C8795A44, transparent 36%)`, and `linear-gradient(135deg, #15110D 0%, #3D2B4F 48%, #7A3F22 100%)`. Keep the overall palette nocturnal and glowing, with amber acting like a living cursor-fire. ## Imagery and Motifs Imagery should be constructed primarily from CSS and inline SVG: no stock photography. The signature visual is a slow-moving gradient mesh that behaves like heat shimmer over dark clay. Layer it behind all chambers with oversized blurred radial fields, subtle noise, and occasional constellation-like terminal dots. Core motifs: - **Floating Terminal Relics:** command snippets such as `> enter_dome`, `cd /river/alph`, `quest --dream`, and `await mirage` suspended in small translucent plaques. These should drift at different speeds and rotate by one or two degrees, like UI fragments caught in incense smoke. - **Art Deco Command Arches:** stepped semicircles, fan shapes, sunburst lines, and thin gold borders that frame terminal content without becoming rigid cards. Let these arches bend and dissolve into the organic river path. - **Magnetic Cursor Fireflies:** tiny amber dots that subtly lean toward the pointer or active chamber. They should never feel like a generic particle background; each dot is a wandering cursor seeking an input line. - **Map-River Contours:** contour-line curves, dotted pilgrimage paths, and flowing SVG strokes that suggest both landscape and command history. - **Dream Coordinates:** small labels like `LAT: KUBLA`, `DEPTH: ALPH`, `MODE: REVERIE`, `SIGNAL: HONEYDEW` placed as ornamental annotations rather than factual UI. The motifs must remain light and spacious despite their richness. Use floating elements to imply depth, but avoid common glassmorphic card stacks or dashboard panels. ## Prompts for Implementation Build as a single immersive `index.html` with embedded CSS and JS. Load Google Fonts for Cinzel Decorative, IBM Plex Mono, and Cormorant Garamond. The implementation should prioritize a full-screen narrative experience over conventional landing-page conversion logic. Use CSS custom properties for the palette and create a fixed, animated gradient-mesh background with multiple blurred radial layers. Add a wandering SVG path that spans the whole scroll document; animate its stroke-dashoffset so the command river feels drawn by the user's descent. Sections should be `min-height: 100vh`, but their internal content should be asymmetric and organically positioned with viewport units, CSS transforms, and curved decorative rails. JavaScript should support subtle magnetic interactions: floating command plaques, cursor fireflies, and small glyphs should translate a few pixels toward the pointer, with stronger pull near the central prompt line. Use requestAnimationFrame smoothing rather than abrupt hover effects. A blinking cursor should appear in several places, but avoid a basic typewriter gimmick; the cursor is a guiding ember, not a novelty animation. Storytelling copy should unfold as a quest through dream chambers. Each section can reveal one short poetic line and one terminal-like command response. Keep text sparse, atmospheric, and cinematic. Avoid CTA-heavy layouts, pricing blocks, stat-grids, feature-card grids, testimonial rows, nav bars, and footer clutter. If a final interaction is needed, make it a quiet terminal prompt such as `begin again_` or `press any dream`, not a sales button. ## Uniqueness Notes 1. **Terminal without cyberpunk severity:** The planned terminal aesthetic is treated as an enchanted command shrine with warm-earthy mirage colors, not the common black/green hacker console. 2. **Organic-flow palace map:** The layout is driven by a wandering command river and magnetic islands, explicitly avoiding the batch's overused centered card-grid and predictable stacked sections. 3. **Art Deco typography inside a dream console:** Cinzel Decorative and stepped arch motifs bring ceremonial Art Deco grandeur to a command-line experience, differentiating it from mono-heavy developer designs. 4. **Gradient-mesh as heat shimmer:** The underused gradient-mesh imagery becomes a narrative atmosphere — desert fog, palace glow, and terminal aura — rather than a generic SaaS background. 5. **Magnetic floating-elements as story objects:** Motion is reserved for cursor-fireflies, command relics, and dream coordinates that appear pulled by invisible quest logic, not generic parallax/stagger reveal patterns. Chosen seed/style: aesthetic: terminal, layout: organic-flow, typography: art-deco-display, palette: warm-earthy, patterns: magnetic, imagery: gradient-mesh, motifs: floating-elements, tone: dreamy-ethereal. Avoided frequency-heavy patterns: corporate tone, photography/minimal imagery, centered card-grid layouts, mono-only typography, generic warm gradients, parallax-first scrolling, staggered card reveals, pricing blocks, stat grids, and CTA-heavy landing-page structures.