# Design Language for xanadu.wiki ## Aesthetics and Tone xanadu.wiki lives in the halcyon shimmer of a late-night desktop from 1996, viewed through a CRT monitor submerged in a tropical aquarium. The vaporwave aesthetic here is not the lazy slap of a Greek bust on a pink gradient -- it is a deeply considered excavation of the digital uncanny, where 3D-rendered angelfish drift through windows of a forgotten operating system, where pastel chrome reflections slide across interfaces that never shipped. The mood is simultaneously nostalgic and alien: you recognize the shapes (toolbars, scroll bars, tiled windows) but they have been melted, refracted, and repopulated by a marine ecosystem that treats data like coral. The tone is whimsical-creative in the truest sense -- not cutesy, but genuinely strange. Think of the feeling of stumbling into a wiki that documents an imaginary place: every page seems authoritative, every link leads somewhere unexpected, every definition is perfectly deadpan about something impossible. Xanadu, after all, is the name of both Coleridge's pleasure dome and Ted Nelson's unrealized hypertext dream. This site occupies the space between those two fantasies -- a palace of linked information that is also a fever dream of pleasure and light. Visual inspirations: Macintosh Plus album art reimagined as a marine biology textbook, Windows 95 system dialogs rendered in mother-of-pearl, the color palette of a VHS tape left in a car dashboard through a Florida summer, the interiors of the Monterey Bay Aquarium at closing time when only the jellyfish lights are on. ## Layout Motifs and Structure The layout follows a **dashboard** architecture -- but a dashboard from an alternate timeline where information design took a detour through baroque ornamentation and aquarium display. The viewport is divided into discrete **panel zones** that mimic the tiled-window interface of early operating systems, each panel floating with a subtle 2-4px drop shadow rendered in semi-transparent lavender (#b8a9c966). **Panel System:** - The primary viewport is divided into a 12-column CSS Grid, but panels deliberately break alignment, overlapping by 8-16px at their edges to create depth. No panel is ever perfectly aligned with its neighbor. - **Title Bar Panels:** Each content section has a faux title bar at the top (height: 28px) with a gradient from #c4b7d4 to #8e7ca8, three decorative dots (close/minimize/maximize) in #f7c6c7, #fde5a0, #a8d8b9, and the section title in "Recursive" at 11px, weight 400. - **Main Content Area:** Occupies columns 2-8 of the grid, leaving generous dead space on the right where decorative 3D fish swim on an infinite CSS animation loop. - **Sidebar Knowledge Panel:** A persistent narrow panel (columns 9-11) styled as a system properties dialog, containing wiki-style metadata: "Last Modified," "Category," "Related Entries" -- all fictional, all delivered with absolute seriousness. - **Bottom Dock:** A fixed-position dock at the viewport bottom (height: 64px) with translucent frosted-glass effect (`backdrop-filter: blur(12px) saturate(1.4)`), containing navigation items styled as application icons with pixel-art-style thumbnails. **Spatial Relationships:** Panels are layered at different z-index levels (10, 20, 30) and cast shadows onto one another. The background behind all panels is a slow-cycling gradient animation (60s loop) that shifts between deep teal (#1a2a3a), muted indigo (#2d1f3d), and a warm dusty rose (#3a2a2d), evoking the ambient glow of an aquarium in a dark room. Content scrolls within individual panels (overflow-y: auto with custom-styled scrollbars in #c4b7d4), not as a single page scroll -- the dashboard itself is fixed. ## Typography and Palette **Typography:** - **Display / Headlines:** "Recursive" (Google Fonts) -- a variable font with axes for Monospace, Casual, Weight, Slant, and Cursive. This is the heart of the expressive-variable approach: headlines use `font-variation-settings: 'MONO' 0, 'CASL' 0.8, 'wght' 800, 'slnt' -6` for a warm, slightly slanted, almost-casual-but-not-quite feeling. At large sizes (3rem-6rem), the letterforms have a soft, inflated quality that evokes both early Mac system fonts and hand-lettered signage. Color: #e8d5f0 on dark backgrounds, #2d1f3d on light panels. - **Body Text:** "Recursive" at `'MONO' 0, 'CASL' 0.3, 'wght' 400, 'slnt' 0` -- the same typeface shifted along its variable axes to become a clean, readable sans-serif. This unity of a single variable font across all uses creates visual coherence while allowing dramatic tonal shifts. Size: 1rem (16px), line-height: 1.65, color: #d4c6e0 on dark, #3a2a3d on light. - **Code / Metadata:** "Recursive" at `'MONO' 1, 'CASL' 0, 'wght' 400` -- the monospace axis activated for wiki metadata, file paths, timestamps, and technical details. This makes every piece of text on the site feel like it belongs to the same family while clearly differentiating function. Size: 0.85rem, color: #9a8aaa. - **Accent / Navigation:** "Bungee Shade" (Google Fonts) -- a layered, three-dimensional display font used exclusively for the site title "XANADU" and major navigation labels. Its built-in shadow effect reinforces the 3D-render aesthetic without any CSS trickery. Used sparingly: only at 2-3rem for the dock labels and 5-8rem for the hero title. Color: #f7c6c7 with `text-shadow: 2px 2px 0px #8e7ca8`. **Palette:** The muted-vintage palette is not the sepia-and-cream of typical vintage -- it is the specific color of old technology: the yellowed plastic of a 1990s keyboard, the blue-purple of a CRT's idle screen, the washed-out pink of a faded dot-matrix printout. | Role | Color | Hex | Description | |------|-------|-----|-------------| | Background Deep | Aquarium Midnight | #1a2a3a | The dark water behind everything | | Background Mid | Dusty Indigo | #2d1f3d | CRT afterglow purple | | Background Warm | Faded Rose Dark | #3a2a2d | VHS warmth | | Panel Surface | Clouded Lavender | #c4b7d4 | Window chrome, title bars | | Panel Interior | Cream Static | #f0e8f5 | Light panel backgrounds | | Text Primary | Soft Orchid | #e8d5f0 | Body text on dark | | Text Secondary | Muted Amethyst | #9a8aaa | Metadata, captions | | Accent Warm | Shell Pink | #f7c6c7 | Links, highlights, fish accents | | Accent Gold | Aged Amber | #fde5a0 | Hover states, active indicators | | Accent Cool | Seafoam Mist | #a8d8b9 | Success states, secondary accent | | Border | Phantom Lilac | #b8a9c9 | Panel borders, dividers | All colors are desaturated 15-25% from their pure hue equivalents, pushing them toward the grey center of the color wheel -- this is what makes them "muted-vintage" rather than simply "pastel." ## Imagery and Motifs **3D-Rendered Tropical Fish:** The signature visual element is a collection of tropical fish rendered in a deliberate low-poly 3D style -- not photorealistic, but the specific aesthetic of early-2000s 3D modeling software (think Bryce, Poser, 3D Studio Max R3). Each fish is constructed from 200-400 polygons with smooth shading, specular highlights in #f7c6c7, and a subtle iridescent gradient mapped across their bodies. Fish species and their roles: 1. **Angelfish (Pterophyllum):** The primary decorative motif. Two angelfish, rendered in lavender (#c4b7d4) and seafoam (#a8d8b9), drift across the right margin of the viewport on a 45-second CSS animation loop using `@keyframes swim` with bezier-curved translateX/translateY and gentle rotation. They pass behind and in front of panels, reinforcing the layered depth of the dashboard. 2. **Discus (Symphysodon):** A single large discus fish, rendered in shell pink (#f7c6c7) with amber (#fde5a0) striping, serves as a loading indicator -- it appears center-screen during panel transitions, rotating slowly. 3. **Neon Tetra school:** A group of 8-12 tiny tetra shapes (simple CSS triangles with gradient fills) that follow the cursor at a 200ms delay, creating a `cursor-follow`-adjacent effect without the typical dot-trail cliche. They scatter when the cursor moves fast and regroup when it stops. 4. **Betta (Siamese Fighting Fish):** A single elaborate betta with flowing fins rendered as semi-transparent SVG paths, positioned as a persistent element in the bottom-right corner of the sidebar panel. Its tail fin animates with a `@keyframes flutter` at 3s ease-in-out, creating gentle undulation. **Window Chrome Motifs:** Every panel is dressed in the language of 1990s operating system windows: title bars with gradients, minimize/maximize/close dots, resize handles in the bottom-right corner (purely decorative), and scrollbar tracks styled with the panel border color. These are not pixel-perfect recreations but softened, watercolor-like interpretations -- corners are rounded at 6px instead of sharp, gradients are gentle instead of hard, and the "system font" is Recursive rather than Chicago or MS Sans Serif. **Coral and Kelp Borders:** Panel borders incorporate a subtle repeating SVG pattern of stylized coral formations and kelp fronds, drawn in a single stroke weight (1.5px) in #b8a9c9. This pattern tiles along the bottom edge of panels only, growing upward by 8-24px. On hover, the coral pattern animates: individual fronds extend by 4-8px over 600ms with an `ease-out` timing function, as if responding to a current. **Wiki Glyphs:** Small decorative glyphs appear inline with text -- a miniature hyperlink chain icon, a tiny book, a small compass rose -- all rendered as 16x16 SVG icons in the muted amethyst (#9a8aaa) color. These reinforce the wiki/encyclopedia conceit and break up text blocks with visual punctuation. ## Prompts for Implementation **Full-Screen Narrative Dashboard Experience:** The site loads to a full-viewport dashboard that does NOT scroll as a page. Instead, the fixed grid of panels is immediately visible, establishing the "desktop environment" metaphor from the first frame. The background gradient begins its 60-second color cycle immediately. After a 400ms delay, panels fade in using the **fade-reveal** pattern: each panel starts at `opacity: 0; transform: scale(0.96) translateY(8px)` and transitions to full visibility over 500ms with `ease-out`, staggered by 120ms per panel (leftmost/topmost first, radiating outward). This creates the impression of windows opening on a desktop boot sequence. **Panel Interaction Model:** Clicking a panel's title bar "focuses" it: the panel gains a brighter border (#e8d5f0), rises in z-index (z-index: 50), and the panel shadow deepens from `0 2px 8px rgba(184,169,201,0.4)` to `0 4px 20px rgba(184,169,201,0.6)` over 300ms. All other panels dim slightly (`opacity: 0.85`) with a 400ms transition. Clicking the background or another panel's title bar releases focus. This creates a genuine windowing interaction without any JavaScript framework -- pure CSS `:focus-within` and sibling selectors where possible, minimal vanilla JS for z-index management. **Fish Animation System:** The angelfish animations use CSS `@keyframes` with multiple waypoints: ``` @keyframes swim-angel-1 { 0% { transform: translate(-5vw, 30vh) rotate(2deg) scaleX(1); } 25% { transform: translate(25vw, 22vh) rotate(-1deg) scaleX(1); } 50% { transform: translate(55vw, 35vh) rotate(3deg) scaleX(1); } 75% { transform: translate(80vw, 20vh) rotate(-2deg) scaleX(-1); } 100% { transform: translate(-5vw, 30vh) rotate(2deg) scaleX(1); } } ``` The `scaleX(-1)` at 75% flips the fish to face the return direction. Animation-timing-function is `cubic-bezier(0.4, 0.0, 0.6, 1.0)` for a natural, gliding movement. Fish elements have `pointer-events: none` and `z-index: 25` so they weave between panel layers. **Neon Tetra Cursor School:** A lightweight vanilla JavaScript module tracks cursor position and updates 8-12 absolutely-positioned tetra elements. Each tetra follows the cursor with increasing delay (tetra[0] = 100ms, tetra[1] = 180ms, tetra[2] = 260ms, etc.) using `requestAnimationFrame` with lerp interpolation (`currentPos += (targetPos - currentPos) * 0.08`). When cursor velocity exceeds a threshold (calculated from position delta), tetras scatter to random positions within a 200px radius, then reconverge when velocity drops. Tetras are pure CSS triangles: `width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 8px solid #a8d8b9` with a `filter: drop-shadow(0 0 3px rgba(168,216,185,0.5))` for a subtle glow. **Content as Wiki Entries:** All text content is structured as wiki entries: a bold term at the top of each panel, followed by a disambiguation line in italic Recursive Casual, then body paragraphs with inline links styled in shell pink (#f7c6c7) with a 1px underline that animates from left-to-right on hover (the `underline-draw` pattern at low frequency, fitting). Links that lead to other "panels" trigger a smooth panel-focus transition rather than page navigation. **Scrollbar Customization:** Within-panel scrolling uses custom scrollbars: ```css .panel-content::-webkit-scrollbar { width: 10px; } .panel-content::-webkit-scrollbar-track { background: #f0e8f5; } .panel-content::-webkit-scrollbar-thumb { background: #c4b7d4; border-radius: 5px; } .panel-content::-webkit-scrollbar-thumb:hover { background: #b8a9c9; } ``` **Boot Sequence Intro:** On first load, before the dashboard appears, a 2-second "boot sequence" plays: the viewport shows a black screen (#0a0a12) with Recursive Mono text appearing line by line (typewriter-effect-adjacent, 60ms per character) in #a8d8b9: ``` XANADU WIKI SYSTEM v2.47 Loading knowledge modules... OK Initializing aquatic environment... OK Establishing hypertext links... OK Welcome to Xanadu. ``` After the last line, the screen crossfades (800ms) to the full dashboard. This is entirely CSS animations and a single `setTimeout` -- no heavy libraries. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, hero-banner-with-subtitle patterns, hamburger menus, sticky headers, testimonial carousels, feature comparison tables. This is a wiki, a living document, a digital aquarium -- not a sales page. ## Uniqueness Notes **Differentiators from other designs:** 1. **Fixed-Viewport Dashboard with No Page Scroll:** While 97% of designs use scroll-triggered animations and 99% use centered layouts, xanadu.wiki presents a completely fixed dashboard where content scrolls within individual panels. The page itself never scrolls. This is fundamentally different from every other design in the portfolio and forces a unique interaction paradigm -- users click and explore panels rather than scrolling down a single narrative. 2. **Single Variable Font Across All Typographic Roles:** Rather than pairing two or three fonts, xanadu.wiki uses a single typeface (Recursive) modulated across its five variable axes to serve as display, body, and monospace. This is only possible because of the expressive-variable typography choice and creates unprecedented typographic unity -- every letterform on the page is from the same family, yet display headlines and code blocks are visually distinct. No other design achieves this level of typographic cohesion. 3. **3D-Rendered Fish as Interactive UI Elements:** The tropical fish are not decorative wallpaper -- they are active participants in the interface. The angelfish weave between panel z-layers creating genuine depth perception, the discus serves as a loading state, the tetra school follows the cursor as a living trail, and the betta anchors the sidebar. This transforms the motif from decoration into interaction design. The 3d-render imagery category is at near-zero frequency in the portfolio, and tropical-fish motifs appear at only 3%. 4. **Faux Operating System Chrome as Design Language:** The title bars, close buttons, scrollbars, and resize handles create a coherent "alternative OS" aesthetic that is neither skeuomorphic (which recreates real materials) nor flat (which abstracts everything away). It occupies a third space: deliberate anachronism rendered with modern softness. The dashboard layout (15% frequency) combined with vaporwave aesthetic (2%) creates a combination that exists nowhere else in the portfolio. 5. **Boot Sequence as Narrative Entry Point:** The typewriter-style boot sequence establishes the wiki-as-operating-system conceit from the first moment, priming users to interact with the dashboard as software rather than as a website. This narrative framing device is unique in the portfolio. **Seed/Style:** aesthetic: vaporwave, layout: dashboard, typography: expressive-variable, palette: muted-vintage, patterns: fade-reveal, imagery: 3d-render, motifs: tropical-fish, tone: whimsical-creative **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), scroll-triggered patterns (97%), warm palette (100%), mono typography (99%), minimal imagery (95%), vintage motifs (89%), friendly tone (99%). Every primary choice in this design deliberately sidesteps the top-frequency options in each category. **Preferred underused patterns:** vaporwave (2%), muted-vintage (2%), expressive-variable (3%), 3d-render (near 0%), tropical-fish (3%), whimsical-creative (3%), fade-reveal (8%), dashboard (15%). All seed elements sit in the bottom quartile of their respective frequency distributions.