# Design Language for xanadu.wiki ## Aesthetics and Tone xanadu.wiki is **a working model of Ted Nelson's parallel-document machine, rendered as a website that visibly refuses to be a single page.** The governing fantasy: it is 1974, you have walked into a basement room where the Xanadu prototype is humming, and someone has wired two facing CRT terminals so you can watch a quotation flow from one document into another in real time — the *transclusion*, the original sin and original miracle of hypertext. The aesthetic is **anti-design experiment crossed with archival print-shop**: nothing is centered, nothing is "clean," everything is *connected*, and the connections are drawn as literal bridging lines that arc across the gutter between panes. The mood is **scholarly-intellectual but mischievous** — the tone of a manifesto typed on a Selectric, photocopied too many times, and stapled into a samizdat zine about "the most audacious vaporware in the history of computing." It is unapologetically text-forward. Where most sites hide their structure, xanadu.wiki *exposes the wiring* — link-glyphs in the margins, version-stripes down the left edge, a perpetual two-column "compare" view as the default reading mode rather than an option buried in a menu. Color is **xanadu-yellow legal-pad paper** (the actual fabled "Xanadu yellow" of Nelson's mockups), **photocopier black**, and **two link-colors that never appear as text, only as connective tissue**: a hot transclusion-cyan and a citation-magenta. The whole thing should feel slightly out of registration — like a two-color print job where the plates didn't quite line up — which is itself a quiet joke about parallel documents almost-but-not-quite aligning. ## Layout Motifs and Structure The page is a **permanent split-screen** — two vertical document columns, "DOC ⍺" on the left and "DOC β" on the right, separated by a wide central **gutter of pure paper** that exists only to hold the bridging lines. This is the structural thesis: a Xanadu page is never alone. On narrow viewports the two columns *stack*, and the bridging lines re-route to become vertical hairpins down the side margin — they never disappear, because the connections are the content. - **The gutter is sacred.** Roughly 14–20% of viewport width, kept empty of text. SVG arcs spring across it from a margin-glyph on the left column to a margin-glyph on the right. When you hover a transcluded passage in DOC ⍺, its twin in DOC β highlights and the arc connecting them thickens and pulses cyan. - **Broken grid inside each column.** Within a column, paragraphs are *not* a tidy stack — they're set on a 12-unit sub-grid where transcluded blocks indent, jut, and overlap their neighbors by a few pixels, as if pasted in. Block quotes have a visible "seam" — a dashed rule top and bottom — marking the splice point. This is intentional editorial-flow chaos: the document looks *assembled*, not authored. - **Version-stripes.** Down the far-left edge of the whole page runs a thin vertical band of stacked colored ticks — the "version spine" — every tick a saved state of the document. It's decorative-functional: scrolling animates a little reading-head marker down the spine. - **No hero, no nav bar, no footer in the conventional sense.** The top of the page is just DOC ⍺'s title set in oversized type, half-bleeding off the left edge; DOC β's title bleeds off the right. The "navigation" is a margin column of link-glyphs you scrub through. The "footer" is the version spine reaching its terminus and a single line: *"every document is a quotation of every other document."* - **Page is one long scroll** — a ~70-second reading of a short Nelson-flavored essay on transclusion, with the right column continuously reacting to the left. ## Typography and Palette **Fonts — Google Fonts only, three voices that argue rather than harmonize (eclectic-hybrid):** - **Body & long-form — *Spectral* (serif, wght 400 / 500, with 300 for asides)** — a screen-tuned transitional serif with slightly mechanical, almost-typewriter cadence. Set generously: ~19px, line-height ~1.7, measure deliberately *narrow* (~58ch per column) so the two columns can sit side by side. Transcluded passages render in *Spectral italic* so the eye catches the borrowing instantly. - **Display, titles, the wordmark — *Big Shoulders Stencil Display* (wght 700–900, ALL CAPS, tracked tight)** — a stencil-cut industrial face that reads like signage stamped onto a server rack. Used for "XANADU.WIKI", for "DOC ⍺ / DOC β", for section numbers. The stencil breaks (the gaps in the letterforms) echo the "things not quite connecting" motif. Sizes from 64px up to ~140px, always partially bleeding off an edge. - **Margin glyphs, version labels, link IDs, metadata — *Spline Sans Mono* (wght 400 / 600, small, ~12px, letter-spaced)** — every link gets a fake Xanadu address like `0.1.2.3.4.0~doc.β/§3`, every version tick a hex-ish label. Mono is the connective lingua franca in the margins; it never sets a sentence, only an identifier. **Palette (six+ colors, deliberately mis-registered two-color-print feel):** - `#F3E9B8` — **Xanadu yellow**, the legal-pad paper. Primary background. Slightly uneven; a faint fibrous paper texture overlay. - `#EFE2A4` — **deep pad**, a darker yellow for the gutter and for inset/transcluded blocks (the "pasted in" tone). - `#1A1712` — **photocopier black**, all body text. Not pure black — warm, ink-on-cheap-paper. - `#0FB6C8` — **transclusion cyan**, used *only* for bridging arcs, hovered link-glyphs, and the splice seams when active. Never as text color. - `#D4257A` — **citation magenta**, used *only* for the version-spine ticks, external-reference glyphs, and the "out of registration" ghost-offset behind display type. - `#7A6E3F` — **faded ink**, for hairlines, dashed seams at rest, secondary metadata, the margin column rules. - `#FBF6D8` — **paper highlight**, near-white wash used behind a passage when it's the live "focus" of a transclusion link. The mis-registration trick: display headlines get a 2–3px ghost copy in citation-magenta offset down-and-right, like a misaligned spot color. Subtle, persistent, faintly wrong — the whole point. ## Imagery and Motifs **No photography. No 3D. No stock anything.** Every visual is SVG, hairline-drawn, or pure CSS — the design vocabulary of a 1970s technical manual photocopied for a zine. - **Bridging arcs (the signature).** Bezier curves spanning the central gutter, anchored to margin-glyphs. At rest they're thin faded-ink lines, slightly hand-wobbled (use a subtle path jitter). On interaction they snap to a clean cyan arc and pulse. Several arcs cross each other in the gutter — a deliberate tangle. - **Margin link-glyphs.** Tiny SVG marks in the inner margin of each column: a hollow diamond for a transclusion, an arrowed circle for an external citation, a stacked-bars mark for a version reference. Each labeled with a mono Xanadu-address string. Hovering a glyph lights its arc and its target. - **The version spine.** A vertical column of ~40 thin horizontal ticks down the far left, magenta, varying lengths, with a triangular reading-head marker that tracks scroll position. Click a tick → the whole page does a brief "diff flicker" (a few paragraphs flash their before/after) then settles. - **Splice seams.** Transcluded blocks are bracketed top and bottom by a dashed rule plus a corner-tick, like crop marks on a paste-up board. Active seams glow cyan. - **Out-of-registration ghosts.** Behind every display word, an offset magenta duplicate. Behind a few body paragraphs, an extremely faint offset gray duplicate — the document and its parallel almost-aligning. - **Marginalia / handwriting.** Sparse fake-handwritten annotations in the outer margins (use *Spline Sans Mono italic*-substituted or a very light hand — actually keep it mono and slanted for consistency) — caret marks, "(transcluded 1974→now)", little arrows. The tone of a scholar scribbling in a library copy. - **Paper texture.** A faint fibrous noise + the very occasional photocopier streak (a soft vertical gradient band) drifting down the page on scroll. ## Prompts for Implementation Build xanadu.wiki as **a single-route, vertically-scrolled, permanent two-column "parallel document" reader** — one HTML file, one CSS file, one JS module. The content is a short essay (~7 sections) titled something like *"Transclusion, or: The Document That Refuses To Be Alone"* — riffing on Project Xanadu, transclusion, visible connections, "the original digital manuscript," in a warm scholarly-mischievous voice. There is **no CTA, no pricing block, no stat grid, no testimonial row, no signup form, no feature cards.** The only "interaction" is *reading and watching the connections fire.* **Storytelling structure (left column = DOC ⍺ leads, right column = DOC β reacts):** 1. **Title plate.** "XANADU.WIKI" in Big Shoulders Stencil, oversized, bleeding off the left edge, magenta ghost behind it. DOC β's mirror title bleeds off the right. Below: a single Spectral italic line — *"This page is two pages. Watch them quote each other."* The version spine fades in down the far left, the reading-head settling at top. 2. **The promise (1965).** DOC ⍺ tells the origin: Ted Nelson, the word "hypertext," the dream of every quotation knowing its source. As key phrases appear, a *bridging arc* draws across the gutter (path-draw-svg, ~900ms ease) and the *same phrase* materializes in DOC β as a transcluded italic block with a dashed splice seam. First demonstration of the core trick. 3. **What transclusion is.** DOC ⍺ defines it; DOC β *performs* it — a paragraph from section 2 literally re-appears here, indented, seam-bracketed, its arc curving back up the gutter. Hovering the original in §2 (still visible if you scroll up) thickens this arc. Establish the hover→highlight→pulse loop. 4. **Visible connections.** The gutter fills with three or four arcs crossing each other — a tangle. A margin note: *"Nelson wanted you to SEE the links. Most of the web hid them. Here they are."* Each arc, on hover, dims the others (blur-focus on the non-focused arcs). 5. **Parallel pages / out of registration.** The two columns drift very slightly out of vertical alignment (a few px), magenta ghosts widen behind the headers — the "misprint" joke at full volume. DOC β here carries a *variant* of DOC ⍺'s paragraph with a word or two changed, the differences underlined in faded ink. A version tick on the spine pulses. 6. **The version spine, explained.** DOC ⍺ describes Xanadu's "every edit preserved forever." Clicking any tick triggers the *diff flicker*: 2–3 paragraphs in both columns swap to a slightly older wording for ~400ms then snap back, the changed words flashing cyan. Purely playful, no real state. 7. **Coda.** The arcs all fade to faded-ink rest state, the columns re-align, the ghosts settle. DOC ⍺ and DOC β converge on the same final sentence — rendered once, *spanning the gutter*, the only text ever allowed in that empty channel: *"Every document is a quotation of every other document."* The reading-head reaches the bottom of the version spine. End. **Motion vocabulary:** path-draw-svg for every arc; stagger for phrases entering a column (line by line, ~60ms apart); blur-focus to recede non-active arcs; a gentle counter-animate on the version-tick count in a corner ("v.0014" → "v.0015" as you scroll); cursor proximity *thickens* the nearest margin-glyph and pre-lights its arc (magnetic-ish, but subtle). Everything eases like ink soaking into paper — slowish, no bounce, no spring overshoot. Respect prefers-reduced-motion: arcs appear pre-drawn, ghosts static, diff-flicker disabled. **Layout enforcement:** two columns + sacred empty gutter on desktop; on mobile the columns stack and the arcs become side-margin hairpins (still drawn, still interactive). Body measure stays narrow. Display type always bleeds off an edge. The version spine is always pinned to the far-left viewport edge. Paper texture and faint photocopier streaks are constant but very low-opacity. ## Uniqueness Notes Deliberate departures from the patterns in the frequency analysis: 1. **The empty central gutter as the protagonist.** Nearly every site in the corpus fills its space; xanadu.wiki *reserves a vertical channel of pure paper* whose only job is to carry SVG bridging arcs between two documents. A permanent two-column "compare" view as the *default* reading mode — not split-screen-as-section-divider (split-screen is 3%), but split-screen-as-thesis — appears unique here. 2. **Anti-design + archival print, not anti-design + neon.** Anti-design sits at 5% and brutalist at 8%, and that slice trends toward harsh black/white or acid color. This site routes anti-design through 1970s photocopied-zine print: Xanadu-yellow legal-pad paper, warm photocopier black, and a two-color *mis-registration* gag — chromatically the opposite of the corpus's brutalist instinct. 3. **Links rendered as literal drawn connective tissue, never as colored text.** path-draw-svg is at 50%, but almost always for decorative line art or underlines. Here the *entire link system* — transclusion arcs, splice seams, margin glyphs with fake Xanadu addresses — is the SVG, and the two "link colors" (cyan, magenta) are *forbidden as text colors*. Hypertext that shows its wiring. 4. **Out-of-registration ghost type as a persistent structural motif** — every display word gets an offset magenta double, the columns themselves drift out of alignment — a typographic conceit I don't see elsewhere in the corpus, and one that *means* something (parallel documents almost-aligning). 5. **Zero conversion furniture.** No CTA, pricing, stats, testimonials, feature cards, or forms — the page is a 70-second supervised *reading*, with the only "click" being a purely cosmetic version-diff flicker. Card-grid is at 93%; this design has no cards at all. Avoided per frequency analysis: glassmorphism (85% — none here), card-grid (93% — none), cursor-follow as a literal trailing dot (89% — replaced with subtle magnetic glyph pre-lighting), hand-drawn-illustration aesthetic (94% — this is print/photocopy, not whimsical sketch), warm-gradient palette (93% gradient — this is flat two-color-print with texture, no gradients except a faint photocopier streak), photography (98% — none). Chosen seed/style: **experimental type layout** (aesthetic: anti-design, layout: split-screen, typography: eclectic-hybrid, palette: muted-vintage, patterns: path-draw-svg, imagery: line-illustration, motifs: book-scholarly, tone: scholarly-intellectual).