# Design Language for underdark.stream ## Aesthetics and Tone underdark.stream is a **broadcast signal escaping from a place that has never seen the sun** — a livestream channel transmitted upward through three miles of bedrock from a fungal city in the deep dark. The visual register is **surreal dreamscape**: not the moody-neon "dark mode" cliché of glowing dashboards, but the warm, hallucinatory phosphorescence of a real cave system — bioluminescent mushroom gills breathing pale gold, glowworm threads strung like dewed silk across a ceiling, mineral seams that fluoresce violet when the camera light passes. The mood is **mysterious-moody but never menacing**: this is a *cozy* underworld, a place broadcasting because it wants to be witnessed, narrating its own slow geology with a low, patient voice. Think of it as a nature documentary filmed by something that lives down there — David Attenborough's cadence over imagery that does not obey ordinary biology. Spores drift upward instead of falling. Water beads run sideways. The horizon is always a curved rock dome, never a sky. The tone is hushed, intimate, faintly amused at its own strangeness — a host who has been live for ten thousand years and is in no hurry to wrap the segment. The core feeling: **you have tuned into a channel that should not have reception, and the picture is impossibly clear.** ## Layout Motifs and Structure The site is **one continuous downward descent** — an `immersive-scroll` that behaves like a slow elevator dropping through cavern strata. There is **no card grid, no bento box, no centered hero stack** (the three most overused layouts in the corpus). Instead the page is a **vertical core sample**: seven depth-bands, each one a stratum of the descent, scrolled through top to bottom, with the page background color cooling and darkening band-by-band as you go deeper — from a dim cave-mouth amber at the top to near-black abyssal indigo at the bottom, then a final faint upward glow as the signal "transmits." - **Left-edge depth gauge:** a thin vertical rule pinned to the left margin, marked with descending depth readouts (`-40m`, `-220m`, `-900m`, `-1.8km`, `-3.0km`, `-4.4km`, `-∞`) that illuminate one at a time as their band enters frame. This is the only persistent navigation — no top bar, no hamburger, no footer menu. - **Off-axis content placement:** within each band, the text block and its accompanying specimen sit on a **broken, asymmetric line** — text hugging the left third in one band, drifting to the lower-right in the next, as if the content is being carried by an unseen subterranean current. Nothing is ever dead-centered. - **The "live" frame:** a single fixed element — a slim corner bracket in the top-right, like a viewfinder overlay, with a slow-pulsing dot and the word `LIVE · UNDERDARK` in micro-mono. It never moves. It is the only thing on the page that insists this is a *stream*. - **No section dividers as lines.** Bands transition by *gradient bleed* — the rock-color of one stratum dissolving into the next over ~30vh of scroll, with drifting spore-particles crossing the seam. ## Typography and Palette **Type system — Google Fonts only:** - **Display / band titles:** `Cormorant Garamond` (weights 300, 500; often italic) — a high-contrast serif with long, reaching ascenders. Used very large (clamp from 2.6rem to 6rem), often broken across two lines, sometimes in italic for the "narrator's aside" lines. Its thin hairlines read like glowworm filaments — fragile, luminous, slightly unreal. Letter-spacing `0.01em`, line-height `0.95` at display sizes. - **Body / narration:** `Spectral` (weights 300, 400) — a screen-tuned serif with a calm, documentary-subtitle quality. Generous line-height (1.75), max measure ~62ch, set in a soft warm grey so it reads like a voice-over caption rather than a wall of text. - **Micro-labels, depth gauge, the LIVE bracket:** `Space Mono` (400) — uppercase, tight, tracked out `0.18em`, tiny (0.7rem). This is the only "instrumentation" voice — depth readouts, the live indicator, timestamp-like annotations (`segment 03 / strata: gypsum`). **Palette — a descent from cave-mouth warmth to abyssal cold, lit by bioluminescence:** - `#1A1208` — **peat-dark**, the top band background (cave entrance at dusk) - `#0E0B12` — **deep-strata**, mid-descent background - `#05060B` — **abyssal-indigo**, the deepest band background - `#E8C879` — **spore-gold**, primary bioluminescent glow (mushroom gills, glowworm light, headline accents) - `#7FE3C4` — **cavern-mint**, secondary fluorescence (mineral seams, water beads, link states) - `#B98CE0` — **fluor-violet**, the rare tertiary glow (struck-mineral flash, hover sparks) - `#C8C2B4` — **limestone-grey**, body narration text - `#5A5347` — **silt**, muted captions and the dimmed depth-gauge marks Glow is achieved with layered soft `box-shadow` / `filter: drop-shadow` halos in `spore-gold` and `cavern-mint` at low opacity — never hard neon, always a diffuse breathing aura. ## Imagery and Motifs **One luminous specimen per depth-band**, each rendered as inline SVG with animated glow — never photography (photography is 98% of the corpus; this site has zero): 1. **Band -40m — The cave mouth.** A jagged rock arch in silhouette, beyond it not sky but a darker rock dome. A single thread of spore-gold light leaks from inside. Caption: *"reception begins."* 2. **Band -220m — Bioluminescent shelf fungi.** A cluster of fan-shaped brackets climbing a rock face, gills picked out as thin spore-gold radial lines, each fan breathing (opacity oscillation, 6–9s, staggered). Spores lift off the gills and drift *upward* off-screen. 3. **Band -900m — The glowworm ceiling.** A field of vertical silk threads hanging from the top of the band, beaded with light, swaying microscopically. `path-draw-svg` reveals each thread on scroll-in, drawn from ceiling downward. 4. **Band -1.8km — A subterranean stream.** A horizontal ribbon of dark water with cavern-mint highlights skating along its surface; ripples expand from where (implied) drips strike. The water flows but the "current" pulls *content blocks* in the layout slightly with it (gentle parallax drift). 5. **Band -3.0km — Crystal geode wall.** A cross-section of mineral seams; when the (implied) camera-light sweeps past, a band of `fluor-violet` flashes along the crystals in sequence — a wave of struck fluorescence. 6. **Band -4.4km — The deep host.** Not a creature, just the *suggestion* of one: two faint paired points of spore-gold light in the dark (eyes? lures?), a slow blink, and the narration becomes a first-person aside in Cormorant italic. The page is nearly black here. 7. **Band -∞ — Transmission.** The screen darkens fully, then a single column of light rises from the bottom edge — the signal going up — carrying tiny mono fragments of everything seen, scrolling upward and out. The LIVE bracket finally pulses brighter once, then the page rests. **Recurring motifs:** upward-drifting spore particles (a low-density `` layer, ~40 motes, slow Perlin drift, faint gold/mint); the crystalline facet (used as bullet markers — tiny rotated quad outlines); the "current-pull" (every band has a subtle horizontal drift on its content tied to scroll velocity, as if everything is suspended in slow water); breathing glow (any luminous element oscillates opacity/blur on a long, irregular cycle so nothing feels like a static UI element). ## Prompts for Implementation Build as **one HTML page, one CSS file, one ES module** — no framework, no build step. The experience is a ~2-minute slow descent. **No CTA, no pricing block, no stat grid, no testimonials, no logo wall, no email capture, no FAQ, no contact form, no newsletter, no cookie banner, no chatbot.** This is a transmission, not a product page. **Storytelling structure (the descent — seven bands, one continuous scroll):** 1. **-40m / Reception begins.** Cave-mouth arch SVG, peat-dark background. Cormorant display title: "*you've found the channel.*" One line of Spectral narration. The LIVE bracket and depth gauge appear here and persist. 2. **-220m / The shelf-fungi.** Background cools one notch. Breathing bracket-fungi SVG climbs in from the left third; spores drift up. Narration in documentary voice-over cadence. 3. **-900m / The glowworm ceiling.** `path-draw-svg` threads draw downward as the band scrolls in, beads of light fading up after each path completes. Content block sits lower-right here. 4. **-1.8km / The stream.** Horizontal water ribbon, cavern-mint surface highlights, ripple bursts. Content blocks in this band get extra horizontal drift tied to scroll velocity — the "current." 5. **-3.0km / The geode wall.** On scroll-in, a `fluor-violet` light-sweep flashes across crystal seams in sequence (CSS keyframes + stagger). Bullet markers here are crystalline facet quads. 6. **-4.4km / The deep host.** Near-black. Two faint paired gold points in the dark; a slow blink (opacity). Narration switches to first-person Cormorant italic — the host speaking. Spore-canvas thins to almost nothing. Quietest band. 7. **-∞ / Transmission.** Full fade to abyssal-indigo, beat of pure dark, then a rising column of light from the bottom edge carrying upward-scrolling Space Mono fragments ("segment 01 — cave mouth", "segment 02 — shelf fungi"…). LIVE bracket pulses once, bright. Page rests in stillness. **Motion language:** - **Spring-eased reveals** on band content (gentle overshoot, ~280ms), staggered by ~80ms within a band. - **path-draw-svg** for the glowworm threads, the cave arch outline, and the rising transmission column. - **Breathing glow:** every luminous SVG element animates `opacity` 0.55→1 and `filter` blur 0.4px→1.6px on long irregular cycles (6–11s, randomized offsets) so the cave feels alive. - **Cursor:** a soft `cavern-mint` halo follows the pointer faintly, like a diver's lamp catching motes — spore particles near the cursor brighten and drift slightly toward it. No magnetic buttons, no tilt cards. - **Scroll-tied background color** interpolation across the seven band colors; **scroll-velocity-tied horizontal drift** on content in the "stream" band. - Respect `prefers-reduced-motion`: kill the canvas drift, the breathing oscillation, and the transmission animation; keep static glows and instant reveals. **Performance note for the implementer:** the spore `` is the only continuous animation — cap it at ~40 particles, pause it when the tab is hidden, and never run more than one `requestAnimationFrame` loop. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A literal underground, not a metaphorical "dark mode."** The corpus's dark sites are crypto dashboards, terminal devtools, cyberpunk HUDs — cold, glowing, technological. underdark.stream is *biological and geological*: warm bioluminescence, fungal light, mineral fluorescence, a cave you descend through. The darkness is earthen, not electric. 2. **Depth-driven scroll, not section-driven scroll.** Instead of stacked "sections" or a card grid (93% of the corpus uses card-grid), the entire page is a single calibrated *descent* — background color, depth gauge, and quietness all tied to a downward journey through seven rock strata. The left-edge depth gauge replaces all conventional navigation. 3. **"Stream" interpreted as a slow live broadcast from below, not a media player UI.** No video chrome, no playlist, no controls — just a fixed `LIVE · UNDERDARK` viewfinder bracket and a narrator's voice-over cadence in the body copy. The site *is* the stream. 4. **Anti-gravity surreal touches.** Spores drift upward, water beads run sideways, content blocks are carried by an unseen "current." Small physics violations make it a dreamscape rather than a tour. 5. **Zero photography, zero glassmorphism.** The two most ubiquitous corpus conventions (photography 98%, glassmorphism 85%) are entirely absent — every visual is hand-built luminous SVG over flat earthen color fields. **Chosen seed/style:** `surreal dreamscape promo` — *aesthetic: surreal, layout: immersive-scroll, typography: serif-revival (Cormorant Garamond + Spectral) with tech-mono instrumentation (Space Mono), palette: ocean-deep / midnight-blue cooled with warm bioluminescent accents, patterns: path-draw-svg + spring + cursor-follow, imagery: generative-art (canvas spores) + custom luminous SVG, motifs: crystalline + nature (fungal/cavern) + star-celestial (the host's eye-points), tone: mysterious-moody / dreamy-ethereal.* **Avoided overused patterns from frequency analysis:** card-grid (93%), centered (79%), hero-dominant, photography (98%), glassmorphism (85%), warm-flat-gradient hero stacks, magnetic buttons (77%), tilt-3d (32%), counter-animate stat blocks, typewriter-effect headers — none appear here.