# Design Language for xanadu.wiki ## Aesthetics and Tone xanadu.wiki should feel like discovering a lost hypertext workstation in a quiet archive: part terminal, part reading room, part unfinished palace of links. The mood is minimal and reverent, not flashy — a sepia phosphor interface where old ideas about non-linear writing, bidirectional references, and literary machines are made visible as calm instruments. The design should avoid the aggressive green-on-black hacker cliché; instead, make the terminal aesthetic feel bookish, amber, and ceremonial, like a command line printed onto aged vellum. The tone is sparse and lucid. Every screen should imply a system patiently waiting for the visitor to trace connections. Use silence, empty margins, faint monitor hum, tiny cursor motions, and restrained annotations to create the sense of a living index. The visual inspiration is a blend of Ted Nelson's Xanadu dream, library card catalogs, early personal-computing manuals, and a museum-grade dashboard for navigating possible documents. ## Layout Motifs and Structure Use a dashboard layout, but treat the dashboard as an archival control desk rather than a SaaS analytics panel. The page should open as a full-screen “link console”: a narrow command rail on the left, a large manuscript viewport in the center, and a right-side marginalia strip containing backlink fragments, version ghosts, and small provenance readouts. Keep the composition intentionally off-center to avoid the overused centered/card-grid pattern; the main content can sit slightly low and left, as if aligned to an old CRT scan area. Structure the site as a sequence of immersive full-height panels: “BOOT XANADU,” “THREAD INDEX,” “TRANSCLUSION VIEW,” “BACKLINK CHAMBER,” and “ARCHIVE SLEEP.” Each panel should feel like a different mode in the same machine. Use thin rule lines, terminal window chrome, bracketed labels, and quiet tabular alignment, but avoid stacking generic cards. Instead of grids of stats, build one continuous spatial interface with nested panes, split columns, tiny status cells, and drifting link paths that connect text fragments across panes. ## Typography and Palette Primary display serif: **Cormorant Garamond** (Google Fonts), used for large literary headings, quoted fragments, and the word “XANADU.” It brings elegance and a slightly antique scholarly feeling to the terminal frame. Interface and annotations: **IBM Plex Mono** (Google Fonts), used for command prompts, pane labels, file paths, timestamps, and microcopy. Keep it small, precise, and letter-spaced. Body reading text: **Literata** (Google Fonts), used for longer explanatory passages and wiki-style entries, with generous line height and a print-like rhythm. Palette: sepia-nostalgic with archival amber and oxidized ink. - `#1B1712` — smoked walnut, primary background - `#2B2118` — dark sepia panel surface - `#E7D4AE` — aged paper text - `#B9823A` — amber phosphor highlights - `#6F8E7A` — oxidized green for resolved links - `#8A5A44` — faded red-brown for warnings and broken references - `#F3E5C5` — illuminated parchment for rare emphasis ## Imagery and Motifs Imagery should be almost entirely generated through CSS and SVG: grain overlay, scanline haze, hairline link vectors, tiny terminal carets, document tabs, and ghosted rectangles that resemble transparent sheets of paper. No photography. No glossy product mockups. The visual motif is “hypertext archaeology”: fragments of sentences floating in panes, connected by fine amber filaments that brighten when hovered. Use a subtle grain overlay across the entire viewport, more visible in dark sepia areas than on parchment highlights. Add faint CRT corner vignetting and extremely soft horizontal scan bands. Decorative icons should be minimal text-glyph hybrids: `//`, `↔`, `§`, `⌁`, `[]`, `ref:`, `src:`. Build a recurring “transclusion ribbon” motif — a thin bracketed line that appears to pull a sentence from one pane into another, leaving a pale duplicate behind. ## Prompts for Implementation Implement as a full-screen narrative experience rather than a conventional landing page. The first view should look like a sleeping archive terminal: a blinking amber cursor, a serif title slowly resolving from faint grain, and three or four quiet command options. As the visitor scrolls or interacts, the interface should feel like modes are being activated, not sections being marketed. Use HTML/CSS/JS to create pane-based storytelling: sticky full-height scenes, CSS variables for sepia surfaces, SVG paths connecting fragments, and micro-interactions on every link-like element. Hovering a backlink should gently brighten its source and destination panes; clicking a command label can toggle a transcluded passage; moving across the marginalia strip can make tiny provenance labels slide open by 4–8px. Use short, delicate animations: cursor blink, text resolve, amber line draw, pane focus, and archival dust drift. Avoid heavy parallax and avoid scroll-triggered spectacle; movement should be local, tactile, and quiet. Do not use CTA-heavy layouts, pricing blocks, stat-grids, generic feature cards, or corporate gradient hero sections. Tell the story of xanadu.wiki as a place where documents remember each other. The implementation should feel like operating a minimal literary machine: every interaction reveals another relationship between text, source, and context. ## Uniqueness Notes - Differentiator 1: A terminal aesthetic softened by elegant serif typography and sepia archival atmosphere, avoiding the common neon hacker interface. - Differentiator 2: Dashboard structure is interpreted as a non-linear document console with manuscript, command rail, and marginalia panes rather than analytics cards or SaaS widgets. - Differentiator 3: The central visual motif is transclusion — sentences visibly borrowed across panes with ghost duplicates and bracketed ribbons — making the site’s interactions conceptually tied to Xanadu-style hypertext. - Differentiator 4: Motion language favors micro-interactions, cursor pulses, line brightening, and pane focus instead of overused parallax, scroll-triggered reveals, staggered entrances, card grids, centered hero blocks, photography, and corporate gradients identified in frequency analysis. - Document chosen seed/style: aesthetic: terminal, layout: dashboard, typography: elegant-serif, palette: sepia-nostalgic, patterns: micro-interactions, imagery: grain-overlay, motifs: tech, tone: minimal - Reference avoided patterns from frequency analysis: corporate aesthetic, card-grid layout, centered composition, photography-heavy imagery, warm gradient palette, parallax, scroll-triggered reveals, stagger animations, and mono-only typography.