# Design Language for xanadu.science ## Aesthetics and Tone Xanadu.science channels the mythic grandeur of Coleridge's "Kubla Khan" — a place of measureless scientific wonder, where empirical rigor dissolves into the visionary. The aesthetic is **neomorphic dark science**: soft-shadow depth modeling applied to a near-black canvas, creating surfaces that appear carved from obsidian rather than flat on glass. Every element breathes with physicality — buttons feel pressable, panels feel lifted, text feels embossed into the void. The mood is **bold-confident** without arrogance: the atmosphere of a scientist who has discovered something extraordinary and knows it. Not boastful — inevitable. The site communicates mastery through restraint and scale. Oversized typographic moments anchor the scroll, while atmospheric candlelight-warm accents flicker against cold deep backgrounds. Inspiration draws from: deep-sea research vessel interiors, CERN's underground chambers photographed at night, 17th-century alchemist manuscripts, the visual language of particle collision visualizations, and the warm glow of antique scientific instruments in museum displays. Science as ritual. Discovery as ceremony. The duotone palette enforces chromatic discipline — only two hue families exist in the entire visual system, creating an almost sacred restraint that makes every color choice feel deliberate and meaningful. ## Layout Motifs and Structure The layout is a single continuous **immersive scroll narrative** — no pages, no modals, no separate sections breaking the spell. The viewport is treated as a cinematic frame moving through space, not a container holding content. **Vertical rhythm architecture:** - Each scroll chapter occupies 100-150vh, demanding full presence before advancing - Content is positioned asymmetrically: first chapter anchors text bottom-left, second shifts to upper-right, creating diagonal eye movement across the scroll - Organic blob shapes bleed beyond viewport edges — suggesting an infinite, living environment beyond the frame - Neomorphic floating panels appear mid-scroll as if materialized from the background, with inset shadows on one side and raised shadows on the opposite **Spatial relationships:** - Generous negative space (never empty — always atmospheric): 80px minimum margins, 160px chapter padding - Text and blobs operate on separate z-layers: blobs occupy z-index 0-5 in background, text sits at z-index 20, floating panels at z-index 10-15 - Horizontal rule separators replaced by subtle neomorphic dividers — thin ridges in the surface - No grid columns in the traditional sense; instead, content follows organic positioning anchored to blob boundaries **Scroll choreography:** Content doesn't just appear on scroll — it enters from the precise direction its blob is flowing toward, as if carried on thermal currents of the atmosphere. ## Typography and Palette ### Typefaces **Display: Bebas Neue** (Google Fonts) - Primary headline weight, all-caps, letter-spacing 0.08em to 0.15em - Used at extreme scales: 12vw for hero, 8vw for chapter headers - The condensed geometry of Bebas against organic blob forms creates productive tension **Secondary: DM Serif Display** (Google Fonts) - Italic variant for subheadings and atmospheric pull-quotes - Creates a classical-scientific contrast against the brutalist Bebas **Body: DM Sans** (Google Fonts) - Regular 400 for body copy, Medium 500 for labels - Clean, modern legibility against dark backgrounds - Letter-spacing 0.02em for air **Accent: Bebas Neue** used sparingly at small scale (14-16px) for data labels and navigation — creates a unified typographic system ### Color Palette (Duotone System) The two hue families are **deep amber-cognac** and **near-black indigo**. All colors derive from these two ancestral hues. **Indigo Family (Background/Structure):** - `#0A0A14` — void black-indigo, primary background - `#0F0F20` — lifted surface (neomorphic elevated panels) - `#07070F` — pressed inset (neomorphic recessed elements) - `#1A1A35` — soft ambient layer, blob fill undertone - `#2A2A50` — subtle border, ridge highlight **Amber-Cognac Family (Light/Accent):** - `#C8860A` — primary amber, primary text and key accents - `#E8A020` — highlight amber, hover states, glow sources - `#8B5A06` — shadow amber, dark amber for depth gradients - `#F5C842` — electric gold, used sparingly for maximum impact moments **Neomorphic Shadow Pair:** - Light shadow: `rgba(42, 42, 80, 0.6)` — the "raised" shadow direction - Dark shadow: `rgba(4, 4, 10, 0.9)` — the "pressed" shadow direction **Text:** - `#D4A843` — primary body text (warm amber on dark field) - `#F0E8C8` — near-white for maximum contrast moments ## Imagery and Motifs ### Organic Blob Architecture Blobs are the primary visual element — not decorative, but structural. They define space, guide eye movement, and serve as atmospheric mood carriers. All blobs are: - SVG-rendered with `border-radius` constructed via CSS `clip-path` using `path()` with cubic Bezier curves — never simple `border-radius` shortcuts - Semi-transparent fills: `rgba(200, 134, 10, 0.08)` for amber blobs, `rgba(26, 26, 53, 0.6)` for indigo blobs - Equipped with a CSS `filter: blur(60px)` outer aura, and a sharper inner core at `blur(0px)` — creating dual-layer blob depth - Slowly rotating (60-120s CSS keyframe animation, very subtle 3-5° rotation arc) - Three size classes: Mega (60-80vw), Macro (30-50vw), Micro (10-20vw) ### Candle-Atmospheric Motifs The candle motif manifests not as literal candles but as **light behavior**: warm pooling glows, flickering vignette pulses, radial gradients suggesting a single-point heat source. Specific implementations: - **Glow halos** around key text elements: CSS `text-shadow` with layered amber values at 0px blur, 4px blur, 20px blur, 60px blur — simulating candlelight bloom - **Flame flicker** on scroll-triggered moments: CSS keyframe animation that oscillates `opacity` between 0.7-1.0 and `filter: brightness()` between 0.9-1.1 at irregular intervals (using `animation-timing-function: steps()` for authentic flicker) - **Vignette burn**: radial-gradient overlay from transparent center to `rgba(0,0,0,0.4)` at edges, as if the viewport itself is the burning zone of a dark room - **Warm breath**: subtle `box-shadow` on neomorphic panels includes a distant amber glow: `0 0 80px rgba(200, 134, 10, 0.06)` ### Neomorphic Surface Language - All interactive panels use the dual-shadow neomorphic formula: `box-shadow: -6px -6px 12px rgba(42, 42, 80, 0.5), 6px 6px 12px rgba(4, 4, 10, 0.9)` - Pressed/active states invert the shadows for tactile feedback - Borders are never used — depth is communicated entirely through shadow - Surface texture: subtle `background-image: url("data:image/svg+xml...")` noise pattern at 3% opacity for grain ### Decorative Elements - Thin amber line etchings suggesting scientific notation (atomic orbital paths, DNA double-helix fragments, Fibonacci spirals) rendered as SVG `stroke` paths at low opacity (0.15-0.25) - Particle field: 30-50 tiny `
` dots (2-3px) in amber scattered across the background layer, animated with slow drift — suggesting a cloud chamber visualization - Chapter transition: a horizontal amber line that draws itself across the viewport (SVG stroke-dashoffset animation) before the next section bounces into place ## Prompts for Implementation ### Core Architecture Build as a single `index.html` with all CSS in a `