# Design Language for xanadu.quest ## Aesthetics and Tone xanadu.quest is a **surreal dreamscape promo** — a single-screen reverie built around the double ghost of the name: Coleridge's opium-vision pleasure-dome ("In Xanadu did Kubla Khan / A stately pleasure-dome decree") and Ted Nelson's never-finished hypertext utopia. The site does not advertise a product; it advertises a *place that cannot be visited* — a dome that keeps re-decreeing itself, a river ("Alph, the sacred river") that runs through caverns measureless to man, an "ancestral voice" that you only half-hear. The tone is **dreamy-ethereal with an undertow of mysterious-moody**: warm, but warm the way a candle is warm inside a marble hall — flattering and a little unreal. Nothing on the page is quite still; nothing is quite literal. Inspiration: Max Ernst's frottage skies, Leonora Carrington's dream-rooms, Remedios Varo's mechanical gardens, the soft-focus matte paintings of 1970s fantasy paperbacks, the bloom of an over-exposed Polaroid, and the typographic calm of a real engraved frontispiece from a 19th-century edition of the poem. The visitor should feel they have wandered into someone else's dream and been politely handed a program. There is no urgency. The dome is patient; it has been decreeing itself for two hundred years. ## Layout Motifs and Structure The site is **one full-bleed, full-viewport stage** that does not scroll in the ordinary sense — instead it **drifts**. A single `100vh × 100vw` "dream-field" holds everything; the visitor moves through *four dream-stations* by clicking a faint river-glyph or pressing arrow keys, and each transition is a slow cross-dissolve + parallax push rather than a scroll. This is a **layered-depth** composition: seven z-planes stacked like theatrical scrim — (1) deep gradient sky, (2) far horizon of inverted domes, (3) the sacred river as a horizontal ribbon of moving light, (4) the pleasure-dome itself (a translucent half-sphere, off-center, breathing), (5) floating fragments of the poem set as engraved type, (6) a foreground of soft-blurred botanical silhouettes ("gardens bright with sinuous rills"), (7) a grain/bloom overlay. Navigation is **minimal-navigation**: no header bar, no logo lockup, no footer, no menu. The only persistent UI is a thin meandering SVG line at the bottom — the river Alph — with four small luminous nodes along it; each node is a dream-station. The composition is deliberately **asymmetric**: the dome sits at roughly 62% width / 44% height (never centered), poem-fragments orbit it on an invisible elliptical path, and large areas of sky are left empty so the eye can wander. The four dream-stations: **I — The Decree** (the dome appears), **II — The Sacred River** (the river floods the frame), **III — The Caverns Measureless** (everything inverts into a cool subterranean negative), **IV — The Ancestral Voice** (the dome dissolves into pure text — Nelson's hypertext dream, words linking to words). No CTA blocks, no pricing, no stats, no testimonials, no email capture, no FAQ, no logo wall. ## Typography and Palette **Type system (Google Fonts only):** - **Engraved-frontispiece display face:** `Cormorant Garamond` (weights 300, 400, 500; also its italic) — used for the poem fragments and the four station titles. Its tall, thin-stroked, slightly old-fashioned drawing reads like a real engraved title page. Set very large (clamp 2.4rem–6.5rem), generous leading (1.5), letter-spacing `0.02em`, often in *italic* for the most dreamlike lines. Small caps for station numerals (I, II, III, IV). - **Quiet humanist companion:** `Spectral` (weights 300, 400) — used for the rare bits of running prose (a one-line program note, the river-node tooltips). It's a screen-tuned serif with a calm, literary voice that sits politely beneath Cormorant without competing. - **Whispered micro-label face:** `Cormorant SC` (small caps, weight 400) at 0.7rem, letter-spacing `0.28em`, used only for the river-node labels ("ALPH · I", "ALPH · II", …) and a single date-of-decree mark. **Palette (warm dome, cool cavern, gradient between):** - `#1A1330` — *vespertine plum*, the deepest sky and the cavern shadow. - `#3B2A52` — *amethyst dusk*, mid-sky gradient stop. - `#E8B25C` — *honeyed lamplight*, the dome's inner glow and the river's light-ribbon. - `#F4E3C3` — *parchment bloom*, the engraved type and any "lit" surface. - `#C9744E` — *terracotta ember*, warm accent in the foreground botanicals and node-glow. - `#6FB7C4` — *cavern ice*, the cool inversion accent used only in Station III. - `#0E0A1C` — *near-black ink*, the grain overlay base and deepest vignette. The whole field is a slow vertical gradient from `#1A1330` (top) through `#3B2A52` into a warm horizon-bleed of `#E8B25C` at ~70% height — sun setting *inside* a dome. ## Imagery and Motifs - **The pleasure-dome:** a single large translucent half-sphere rendered with layered radial gradients (honeyed lamplight core → parchment rim → plum edge) and a faint Fresnel-style bright ring. It **breathes** — scales 1.0↔1.035 over ~9s — and casts a soft elliptical glow-shadow on the river below. Inside it, barely visible, a slowly rotating wireframe of impossible architecture (Escher-ish arches that don't close). - **The sacred river (Alph):** a horizontal band of moving light — three stacked SVG sine-paths of varying amplitude, stroke-blurred, animated by offsetting their `stroke-dashoffset`, so the light *flows* leftward forever. It is also the navigation line. - **Poem fragments as floating engraved type:** ~7 short lines from "Kubla Khan" ("caverns measureless to man", "sunless sea", "gardens bright with sinuous rills", "a damsel with a dulcimer", "honey-dew", "the milk of Paradise") drifting on slow elliptical orbits around the dome, each with a faint drop-shadow as if pressed into paper. In Station IV they stop drifting, line up, and become **hyperlinks to each other** — clicking one word swaps the visible fragment, a tiny working homage to Nelson's transclusion. - **Inverted-dome horizon:** the far background is a row of small domes reflected *upward* into the sky (not down into water) — a quiet surreal wrongness. - **Foreground botanicals:** soft-blurred silhouettes of fern, iris, and cypress along the bottom edge, swaying ~2° — "gardens bright with sinuous rills." - **Grain + bloom:** a fixed film-grain canvas overlay (very low opacity, animated noise) plus a subtle radial vignette, so the whole image looks like a remembered photograph. - **The river-nodes:** four small pulsing orbs of honeyed lamplight on the river line; the active one wears a thin parchment ring. ## Prompts for Implementation Build xanadu.quest as **one HTML page, one CSS file, one ES module** — no framework, no build step, no router. The experience is a ~2-minute drift through four dream-stations of a pleasure-dome that keeps decreeing itself. **Structure & motion:** 1. **The dream-field** is a single `position: fixed; inset: 0` stack of layers. Each layer is a `
` or `` with its own `transform: translateZ()`-style parallax offset driven by a single `requestAnimationFrame` loop reading pointer position (very small magnitudes — 4px to 22px max — this is a dream, not a videogame). Honor `prefers-reduced-motion` by freezing parallax and breathing but keeping cross-dissolves. 2. **Station transitions:** clicking a river-node (or arrow keys, or swipe) cross-dissolves the poem-fragment set and pushes the parallax planes; Station III additionally runs a ~1.2s CSS filter animation `invert(1) hue-rotate(150deg) saturate(0.7)` over the whole field so it "descends into the caverns", then the gradient is swapped to the cool cavern-ice ramp. Station IV fades the dome's opacity to ~0.08 and brings the poem-fragments to center as an interlinked word-web (each `` swaps `--active-fragment`). 3. **The dome breathes** via a CSS `@keyframes` scale + a co-animated `box-shadow`/`filter: blur()` glow. The wireframe-architecture inside is a small inline SVG with a slow `rotate` animation and `stroke-dasharray` so the arches seem to draw and un-draw. 4. **The river** is 3 SVG `` sine curves with large `stroke-dasharray` and a perpetual `stroke-dashoffset` animation; layer them at 30%/60%/100% opacity with `filter: blur()` increasing toward the back. 5. **Poem-fragments** orbit via JS computing positions on an ellipse each frame (period ~40s, each fragment phase-offset); they're plain `` elements in Cormorant Garamond italic with `text-shadow` for the pressed-paper feel. 6. **Grain overlay:** a tiny `` redrawn with random noise every ~3 frames at ~6% opacity, plus a CSS radial-gradient vignette on top. 7. **Type loads** Cormorant Garamond + Spectral + Cormorant SC from Google Fonts with `font-display: swap`; show the first poem line as soon as Cormorant is ready. 8. **Copy is sparse:** the four station titles, ~7 poem fragments, one one-line program note ("xanadu.quest — a pleasure-dome that re-decrees itself; drift with the river ↦"), the four node labels, and one "decreed 1797 · undecreed since" mark. Nothing else. **No** contact form, **no** newsletter, **no** pricing, **no** stats grid, **no** testimonials, **no** logo wall, **no** cookie banner, **no** CTA buttons. Bias hard toward a **full-screen narrative experience**: the site is a place, not a pitch. Reward stillness — if the visitor does nothing, the dome breathes, the river flows, the fragments orbit, and after ~30s a single extra line of the poem fades in. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **It does not scroll — it drifts.** In a corpus where 84% of sites are `full-bleed` and most chain vertical `immersive-scroll`/`stacked-sections`, this is a single non-scrolling `100vh` stage navigated by cross-dissolving between four dream-stations along a river-line. The page never grows; it transforms in place. 2. **Two-headed literary source, one of them a software ghost.** The design fuses Coleridge's pleasure-dome with Ted Nelson's Xanadu hypertext project — Station IV literally turns floating poem-words into transcluding hyperlinks, a working micro-homage to Project Xanadu. No other site here is built on a hypertext-history easter egg. 3. **Surreal "wrongness" baked into the layout, not just decoration.** Domes reflected *upward* into the sky, an inversion transition that flips the entire color field for Station III, architecture-wireframes that never close — surrealism as structural behavior, not a sticker. This leans into the underused `surreal` aesthetic (8%) and `dreamy-ethereal` tone (7%). 4. **Warm-dome / cool-cavern split palette inside one continuous gradient.** Most warm-palette sites (98% of corpus) stay warm; here warmth and a cold subterranean inversion coexist and trade places per station — honeyed lamplight `#E8B25C` against vespertine plum `#1A1330` and cavern ice `#6FB7C4`. 5. **Genuinely literary type, no mono.** Where 93% of the corpus reaches for a `mono` face, this is all `Cormorant Garamond` + `Spectral` + `Cormorant SC` — an engraved frontispiece, not a terminal. Avoided patterns from frequency analysis: no `glassmorphism`/`hand-drawn` aesthetic, no `mono` typography, no `card-grid`/`centered`/`dashboard` layout, no `cursor-follow` cheap-trick (parallax magnitudes kept dream-tiny), no `photography` imagery, no `tech`/`circuit` motifs, no CTA-heavy / pricing / stat-grid structures. Chosen seed/style: **surreal dreamscape promo** — *aesthetic: surreal, layout: layered-depth, typography: garamond-classic, palette: gradient (warm↔midnight-blue↔cavern-ice), patterns: parallax + fade-reveal + path-draw-svg, imagery: grain-overlay, motifs: candle-atmospheric, tone: dreamy-ethereal*.