# Design Language for xanadu.science ## Aesthetics and Tone xanadu.science is a **surreal dreamscape memorial to the document that was never finished** — the half-built pleasure-dome of perfect hypertext, equal parts Coleridge's opium-vision "Kubla Khan" and Ted Nelson's Project Xanadu, the original hypertext system promised in 1960 and still, in a sense, under construction. The site does not sell a product. It is a walk through the ruins and blueprints of an idea: *transclusion* (a quote that stays alive, umbilically tethered to its source), *parallel pages* that scroll side by side, *visible links* drawn as literal threads, and *deep versioning* where nothing is ever deleted, only layered. The mood is **lucid-dream cartography**: a warm vellum night, ink that floats slightly above the paper as if the page were a shallow pool, and architecture that is half-drawn — domes sketched in plan, never elevation; "caverns measureless to man" rendered as nested wireframe vaults; a "sacred river" that runs as a single luminous line threading every section together. It is melancholic but not gloomy — the tone of an unbuilt cathedral whose drawings are themselves beautiful. Think: a Piranesi etching crossed with an early CRT wireframe, lit by a single candle, narrated by an archivist who genuinely believes the dome will be finished. Emotionally: reverent, slightly fevered, intellectually generous. Never corporate, never a pitch, never urgent. The reader should leave feeling they walked through someone's most ambitious dream and were trusted with the floor plans. ## Layout Motifs and Structure The governing motif is **the parallel page** — Xanadu's signature: two columns of text that scroll in linked lockstep, with visible connector threads ("struts") spanning the gutter between a phrase on the left and its transcluded origin on the right. The whole site is one long **immersive vertical scroll** built as **seven "rooms" of the pleasure-dome**, but every room internally splits into this two-column parallel-page structure when it has source material to show, and collapses to a single centered measure (max 62ch) when it is pure narration. Spatial system: - A persistent **left margin rail** holds the "sacred river" — a single 2px luminous vertical line that runs the entire document height, kinking sideways into the content at each room boundary like a river finding its course. Section markers (I–VII) sit on the river as small open circles ("springs"). - The right edge carries a **version stratum** — a thin vertical band of horizontal hairlines, one per scroll-room, that fills in as you descend, visualizing Xanadu's "nothing is deleted, only layered" principle as geological strata. - Content blocks float on **z-layers**: the vellum field is z0; transcluded quote-blocks lift to z1 with a soft drop-shadow and a faint outline, making them feel physically *pulled forward* off the page; connector threads are drawn on an SVG overlay above everything. - **Broken-grid asymmetry**: narration columns are never centered on the viewport — they hang from the river rail, weighted left, so the page always feels like a working manuscript margin rather than a finished spread. - No top navigation bar. No hamburger. No footer with link columns. Navigation is the river itself: clicking a spring-circle smooth-scrolls to that room. A faint "you are in Room III of VII" whisper-label fades in at the top-left only while scrolling, then fades out. - The seven rooms: **I. The Decree** (the 1960 promise, stated plainly), **II. Transclusion** (a quote that stays connected — interactive demo), **III. Parallel Pages** (the linked-scroll showcase), **IV. The Sacred River** (visible links as threads), **V. Deep Versioning** (the strata, nothing deleted), **VI. Caverns Measureless** (the unbuilt parts — wireframe vaults, honest about what never shipped), **VII. The Dome Decreed** (a closing reflection; the dome rendered only as a plan-view circle, never built up). ## Typography and Palette **Fonts — Google Fonts only:** - **Display / room titles:** `Cormorant Garamond` (weights 300 and 500, with italic) — a high-contrast Renaissance serif with long, dreaming extenders; set very large (clamp ~3rem to 6rem), letter-spacing tightened to `-0.01em`. Used for the seven Roman-numeral room titles and the Coleridge fragments. Its slightly literary, candlelit feel carries the "Kubla Khan" half of the concept. - **Body narration:** `Spectral` (weights 300/400, italic available) — a screen-tuned serif with steady rhythm and a faintly technical, almost editorial cadence. Carries the long passages of hypertext history at a generous 1.7 line-height. - **System / labels / connector annotations / version-stratum numerals:** `Space Mono` (400 and 700) — the monospace voice of the *machine* that was supposed to run all this. Used for link IDs (e.g. `xu/884.2.0`), room counters, the "you are in Room III" whisper-label, transclusion source-tags, and any UI affordance. Tracked out `+0.04em` at small sizes, uppercase for micro-labels. **Palette — warm vellum night (six core colors):** - `#1C1A14` — **ink-bittern**, the deepest near-black-brown, used for primary text and the void behind wireframe caverns. - `#2B2820` — **umber-shadow**, panel backgrounds for transcluded quote-blocks and the version stratum band. - `#F2E8D2` — **vellum**, the dominant page field; a warm aged-paper cream, never pure white. - `#E4D4AE` — **tallow**, secondary surface / hover wash / the parchment of lifted quote-cards. - `#C9462C` — **cinnabar-thread**, the single saturated accent: the "sacred river" line, all visible-link connector threads, active spring-circles, the seal on "The Decree". Used sparingly, like sealing wax. - `#5C7E8C` — **river-slate**, a muted dusty teal for secondary lines, the wireframe cavern strokes, and the parallel-page strut-shadows — the cool counterweight that keeps the warm field from going saccharine. - (Optional tint) `#9C7E3A` — **brass-gilt**, for the plan-view dome's compass arcs in Room VII only. Texture: a very low-opacity (~4%) tiled paper-grain noise over the vellum field; a faint vignette pulling the corners toward ink-bittern; transcluded blocks get a 1px `#9C7E3A` inner hairline and a 14px blurred `#1C1A14` at 18% drop-shadow to read as physically lifted. ## Imagery and Motifs No stock photography. Everything is **drawn as inline SVG or CSS** — hand-plotted, slightly imperfect, like an architect's working sketches. - **The sacred river** — a continuous luminous `#C9462C` polyline running the full page height in the left rail, with a soft outer glow; it bends into the content at each room. Seven open-circle "springs" sit on it as section anchors. - **Connector threads ("struts")** — thin curved SVG bezier lines spanning the parallel-page gutter, each linking a highlighted phrase to its transcluded origin; on hover of either endpoint, the matching one and the thread between them brighten to cinnabar; the thread has a tiny `xu/####.#.#` mono label riding its midpoint. - **Transclusion specimen (Room II)** — a single famous sentence rendered twice on screen, joined by a living thread; editing the source (a built-in contenteditable origin block) updates the transclusion in real time, with a brief cinnabar pulse traveling down the thread. - **Wireframe vaults (Room VI)** — nested arches and a half-section dome drawn in `#5C7E8C` 1px stroke on the ink-bittern void, deliberately *unfinished*: dashed where the design was never resolved, with mono annotations like `// not implemented, 1974` and `// deferred indefinitely`. - **The version stratum** — right-edge horizontal hairlines, one per room, accreting downward; each labeled with a fake version stamp (`v0.1`, `v0.7`, `v0.7.1` …) in Space Mono; nothing is ever crossed out. - **The plan-view dome (Room VII)** — only ever shown from directly above: concentric `#9C7E3A` arcs, radial compass spokes, a tiny `#C9462C` dot at the centre marked `here` — the dome decreed but never raised. - **Floating ink** — body text and especially the Cormorant fragments cast a 1–2px soft shadow on the vellum, as if the words hover a millimetre above a shallow golden pool. - **Marginalia** — occasional hand-drawn arrows, asterisks, and brace-brackets in cinnabar in the left margin, in the manuscript-annotation tradition, pointing at key claims. ## Prompts for Implementation Build xanadu.science as **one HTML page, one CSS file, one ES module** — no framework, no build step, no analytics, no cookie banner, no chatbot. It is a roughly 2-minute scrolled walk through seven rooms of an unbuilt pleasure-dome of hypertext. Treat it as a piece of interactive prose, not a website with sections. **Forbidden, absolutely:** CTA buttons, pricing tables, stat-grids ("10,000+ users"), feature-card rows of three, testimonials, logo walls, email capture, "Get started" anything, FAQ accordions, hero-with-two-buttons. None of these exist here. If a layout decision starts to feel like a SaaS landing page, it is wrong. **Storytelling spine (vertical scroll, room by room):** 1. **Room I — The Decree.** Full-bleed vellum; the river-rail draws itself top-to-bottom on load (SVG `stroke-dashoffset` path-draw, ~1.6s, easing out). A wax-seal SVG stamps in with a tiny rotate-and-settle spring. Cormorant Garamond, huge: *"In Xanadu did Kubla Khan / a stately pleasure-dome decree"* — set as two lines, the second indented to hang off the river. Below, in Spectral, a calm paragraph: in 1960 a man named Ted Nelson decreed a different dome — a document system where nothing breaks, nothing is lost, every quote stays alive. The seven Roman numerals fade up along the river as the page settles. Scroll cue: a single cinnabar drop slides down the river. 2. **Room II — Transclusion.** The page splits into parallel columns. Left: narration about transclusion (a quotation that remains umbilically connected to its source, not a dead copy). Right: an editable origin block holding a sentence; the same sentence appears, transcluded, mid-paragraph on the left, joined by a curved SVG thread. Typing in the origin updates the transclusion live; a cinnabar pulse animates along the thread on each change. Hovering either copy magnetically nudges the thread and brightens both endpoints (cursor proximity → thread bows slightly toward the pointer). 3. **Room III — Parallel Pages.** Two long text columns that **scroll in linked lockstep** — scroll-driven: as the viewport descends through this room, both columns advance together, with several struts visible across the gutter at once. Highlighting a phrase in one column draws a fresh thread to its counterpart with a path-draw animation. This is Xanadu's most literal idea, made physical. 4. **Room IV — The Sacred River.** The river-rail kinks dramatically into the content here and becomes the subject: a meditation on *visible links* — that in this dream, hyperlinks were never hidden underlines; they were drawn as threads you could see and follow both directions. Several decorative threads arc between distant lines of this room's prose, each with its `xu/####.#.#` mono ID. Threads gently undulate (very slow sine drift) so the page feels alive, like reeds in a slow current. 5. **Room V — Deep Versioning.** The right-edge version stratum becomes prominent; as you scroll, hairlines accrete with `v0.x` mono stamps. Narration: nothing in Xanadu is ever deleted — only layered; you could scroll *backward in time* through any document. Implement a small interaction: a slider that "ages" a paragraph, fading older word-choices in beneath newer ones as faint strikethrough-free palimpsest layers (stagger the word transitions). 6. **Room VI — Caverns Measureless.** Background shifts to ink-bittern void. Cormorant fragment: *"Through caverns measureless to man / down to a sunless sea."* Wireframe vaults and a half-section dome draw themselves in river-slate, parts dashed and annotated `// never built` / `// deferred 1979` in Space Mono. Honest, elegiac copy about the parts of Xanadu that never shipped — the dome that stayed a drawing for sixty years. The river still threads through, the only warm thing in the dark. 7. **Room VII — The Dome Decreed.** Back to vellum. The plan-view dome assembles: concentric brass-gilt arcs and radial spokes draw in (path-draw, staggered from the centre out), a cinnabar dot at the middle labeled `here`. Closing Cormorant line and a short Spectral coda: the dome was decreed, the drawings survive, you have just walked through them; perhaps that is enough, perhaps it is not. The river drains off the bottom of the page into nothing. No newsletter. No "thanks for reading" with social icons. Just the plan, and silence. **Motion principles:** - Everything line-based animates via SVG `stroke-dashoffset` path-draw (the river, the threads, the wireframe vaults, the dome arcs). Easing: `cubic-bezier(.22,1,.36,1)`. - Threads have a subtle continuous undulation (transform on control points, ~8–14s loop, very low amplitude). - Scroll-triggered reveals are gentle fade-up + 12px translate, staggered by line for the long prose blocks; respect that this is *reading*, so reveals trigger early and never block content. - Cursor proximity: threads bow toward the pointer within ~120px; spring-circles on the river scale up slightly when the cursor nears (magnetic, low strength). - One ambient touch: a faint candle-flicker on the global vignette (opacity oscillation 0.96–1.0, irregular, ~5–9s) — barely perceptible, just enough to feel lit by flame rather than fluorescent. - All motion gated behind `prefers-reduced-motion`: in that mode, lines appear already-drawn, threads sit still, the page is a quiet manuscript. **Build notes:** semantic HTML (`
` of seven `
` rooms, real `
` for transclusions, headings I–VII). CSS custom properties for the six palette colors. The river, version stratum, and all threads are a single fixed SVG overlay updated on scroll via `requestAnimationFrame`. Keep the JS module small and legible — it is, after all, a tribute to a system that valued documents you could understand. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **The literal Xanadu mechanic, not just the name.** This site *implements* transclusion (live editable origin → updating quote, joined by a visible thread) and parallel linked-scroll columns — the actual technical inventions of Project Xanadu — as the central interactions. No other site in the corpus turns a document-architecture idea into the page's own behavior; most "tech" sites here use circuit/HUD decoration. Here the concept *is* the layout. 2. **Double literary source fused.** Coleridge's "Kubla Khan" (the pleasure-dome, the sacred river, the sunless caverns) and Ted Nelson's 1960 hypertext dream are braided into one set of motifs — the river-rail is simultaneously the poem's "sacred river" and the document's spine of visible links. This specific fusion appears nowhere else. 3. **Honest melancholy about an unbuilt thing.** Room VI deliberately shows the *failures* — dashed wireframes annotated `// never built` — and the closing room refuses to "build" the dome at all, showing it only in plan view. The corpus is full of confident, optimistic, "cutting-edge" tech tones; this is the rare site whose tone is *mysterious-moody / scholarly elegy* about a beautiful failure, with zero triumphalism. 4. **Warm vellum-night palette instead of dark-neon or hand-drawn-warm.** Avoids the 85% glassmorphism and the dominant hand-drawn-warm/cottagecore register: this is a candlelit manuscript in ink-bittern, vellum, and a single cinnabar accent — closer to a Piranesi etching than to any glass UI or pastel illustration set. 5. **Navigation-as-river, no chrome at all.** No top bar, no hamburger, no footer link columns, no CTA — wholly against the 93% card-grid / hero-dominant conventions. The only navigation is clicking springs on a luminous line. The "you are in Room III of VII" whisper-label is the only locational UI. **Chosen seed:** `surreal dreamscape promo` — *aesthetic: surreal, layout: immersive-scroll, typography: serif-revival (Cormorant Garamond + Spectral) with tech-mono (Space Mono) counterpoint, palette: warm + high-contrast (vellum-night, single cinnabar accent), patterns: path-draw-svg + scroll-triggered + magnetic + stagger, imagery: line-illustration / custom-illustration (no photography), motifs: flowing-curves (the sacred river) + book-scholarly + abstract-tech, tone: mysterious-moody / scholarly-intellectual.* **Avoided overused patterns** from frequency analysis: glassmorphism (85%), hand-drawn (94%), photography imagery (98%), card-grid layout (93%), cursor-follow as a gimmick (89% — used here only as a faint thread-bow, not a custom cursor blob), mono-only typography (93% — mono is the *counterpoint* voice here, not the lead), warm-only palette without a cool anchor (the river-slate teal deliberately breaks it). Leaned instead into underused territory: surreal (8%), immersive-scroll (15%), serif-revival (18%), path-draw-svg used as the primary motion language, and a scholarly-elegiac tone (mysterious-moody 13%, scholarly-intellectual 10%).