# Design Language for xanadu.science ## Aesthetics and Tone xanadu.science should feel like discovering a discontinued 2002 research appliance in a desert observatory: translucent plastic, CRT bloom, beige field notes, and a future that never stopped being optimistic. The mood is **Y2K futurism filtered through earth pigments** rather than candy chrome — a nostalgic-retro science portfolio where knowledge appears as softly glowing specimens under smoked acrylic. The visual story is a pilgrimage through a fictional institute named XANADU: a place where speculative biology, planetary archives, and forgotten interface experiments are catalogued as living tiles. Avoid sterile lab whiteness. The page should carry the warmth of sun-baked clay, olive circuitry, mushroom paper, and muted copper, with occasional aqua screen-glow used like a precious signal. Everything should feel slightly out of focus until the visitor approaches it, as if memories are resolving on an old LCD. ## Layout Motifs and Structure Use a **portfolio-grid** as an immersive research atlas, not a conventional card grid. The whole page can be a full-screen "archive wall" made of irregular specimen panes: wide tiles, narrow strips, circular viewport windows, and one or two oversized feature cells that interrupt the rhythm. The grid should curve visually through the page using CSS masks, wavy borders, and flowing gutters so it feels less like masonry and more like a river of archived experiments. Suggested structure: 1. **Boot Screen Atrium:** A 100vh opening with the domain name suspended inside a soft CRT oval. The background uses broad flowing curves, like topographic contour lines inside translucent plastic. A tiny coordinate readout and faux catalog code establish the science-fiction archive without becoming a HUD cliché. 2. **Specimen Portfolio Field:** A responsive asymmetric portfolio grid where each tile represents a "science of Xanadu" fragment: terraforming notes, memory crystals, soft machines, microbial gardens, orbital dust, oceanic simulations. Tiles should overlap by a few pixels, have blurred glass edges, and snap into clarity on hover/focus. 3. **Flow Corridor:** A full-bleed horizontal band of animated curves passing behind text, like a liquid timeline. This section should function as narrative breathing room rather than a stats strip. 4. **Deep Archive Finale:** The grid dissolves into one large circular viewport with layered captions around it, ending in a quiet mystery rather than a hard sales CTA. Avoid centered SaaS sections, dashboard rectangles, pricing blocks, feature-card repetition, and statistic grids. Spatially, prioritize drifting panels, partial overlaps, translucent margins, and depth created by blur/focus states. ## Typography and Palette Typography should be an **eclectic-hybrid** pairing: retro digital precision plus humane archive notes. - **Display / Logotype:** "Audiowide" (Google Fonts) for `xanadu.science`, large lowercase or small-caps, with wide letter spacing and subtle horizontal stretching through CSS transforms. It gives the site the correct Y2K console-memory tone without becoming cyberpunk. - **Section Titles:** "Space Grotesk" (Google Fonts), weights 500–700, used for concise scientific labels and grid tile headings. - **Body / Captions:** "IBM Plex Serif" (Google Fonts), weights 400 and 600, for warm research prose, marginalia, and archive descriptions. - **Micro Labels:** "JetBrains Mono" (Google Fonts), weight 400, for coordinates, catalog IDs, timestamps, and tiny interface fragments. Palette: earth-toned Y2K with restrained glow. - Dry Clay: `#B8794A` - Mushroom Paper: `#E7DCC2` - Deep Olive Console: `#26351F` - Smoked Umber: `#34251C` - Tarnished Copper: `#9A653E` - Fossil Taupe: `#8E8067` - Memory Aqua Signal: `#7DE3D1` - Soft CRT Cream: `#FFF3CC` Use `#34251C` and `#26351F` as deep grounding backgrounds, `#E7DCC2` for paper panels, `#B8794A` and `#9A653E` for warm structural curves, and `#7DE3D1` only as rare glow, scanline, or active-state color. ## Imagery and Motifs Imagery should be **minimal**, generated entirely through CSS/SVG rather than photography. The key motif is **flowing-curves**: contour lines, soft cables, river paths, orbital arcs, and translucent plastic seams. These curves should connect grid tiles, implying that every specimen belongs to the same living archive. Visual elements to include: - CSS/SVG contour maps that slowly drift behind the grid, drawn in low-opacity copper and olive. - Blurred circular "lens portholes" that reveal sharper detail inside a tile, like looking through an old microscope camera. - Tiny retro interface marks: pill-shaped tabs, rounded capsule buttons that are decorative rather than CTA-focused, pixel ticks, catalog numbers, and amber status lights. - Minimal scientific glyphs: seed pods, waveform arcs, orbital dots, mineral cross-sections, and soft robotic tendrils drawn as thin single-line illustrations. - A subtle CRT treatment: faint scanlines, edge glow, chromatic softness, and occasional aqua bloom, but no aggressive glitching. Keep iconography sparse and specimen-like. The site should feel like an archive of mysteries, not a tech dashboard. ## Prompts for Implementation Build a single immersive HTML/CSS/JS experience with embedded styling and lightweight JavaScript. Load Google Fonts: Audiowide, Space Grotesk, IBM Plex Serif, and JetBrains Mono. Use CSS custom properties for the palette and create most visuals with gradients, SVG masks, pseudo-elements, and clipped shapes. Prioritize a full-screen narrative journey. The first viewport should behave like a booting memory console: the title starts blurred, scanlines sweep once, and the archive grid slowly resolves behind it. As the visitor scrolls, specimen tiles should transition from soft blur to crisp focus using `filter: blur()`, opacity changes, and depth shadows. Use blur-focus as the main animation language: distant panels stay hazy, the active tile sharpens, and inactive captions recede into warm fog. The portfolio grid should be storytelling-first. Instead of "projects," label tiles as field specimens or research chambers: "Terra Null Memory," "Aqua Fossil Loop," "Soft-Machine Orchard," "Orbital Mycelium," "Archive Weather," and "Xanadu Drift." Each tile can contain a short poetic scientific note. Hover states should not lift cards; they should clarify lenses, brighten aqua signal lines, and animate a curve toward the next tile. Include one or two slow continuous animations: contour lines flowing like lava-lamp topography, a circular lens gently breathing, and tiny status lights pulsing irregularly. Avoid CTA-heavy layouts, pricing blocks, stat-grids, generic hero buttons, stock photography, dashboard chrome, and corporate gradient SaaS styling. End with a quiet full-screen archive seal or unresolved coordinate rather than a conversion panel. ## Uniqueness Notes - Combines **Y2K futurism with earth-tones**, replacing the common chrome/neon Y2K look with clay, olive, mushroom paper, and restrained aqua signal. - Uses a **portfolio-grid as a scientific specimen atlas**, not a card-grid or centered project gallery; the grid flows through curved gutters and lens portholes. - Makes **blur-focus the central narrative mechanic**, with memories/specimens resolving from haze instead of relying on overused parallax, stagger, or scroll-triggered reveals. - Keeps imagery minimal and generated, using contour curves, portholes, and retro catalog marks rather than photography, dashboards, or icon-heavy layouts. - Chosen seed/style: aesthetic: y2k-futurism, layout: portfolio-grid, typography: eclectic-hybrid, palette: earth-tones, patterns: blur-focus, imagery: minimal, motifs: flowing-curves, tone: nostalgic-retro. - Frequency analysis notes to avoid: corporate aesthetics, card-grid/centered layouts, warm gradients, parallax, scroll-triggered/stagger effects, mono-dominant typography, photography, tech/nature clichés, CTA-heavy SaaS structures, pricing blocks, and stat-grids.