# Design Language for underdark.science ## Aesthetics and Tone underdark.science is staged as **the live instrument console of a fictional research station suspended in a lightless cavern system** — a place where biologists, geochemists and acoustic surveyors study an imaginary subterranean biosphere that has never seen the sun. The page does not "advertise" anything; it behaves like the glass of a deep-survey instrument that has just been switched on in absolute darkness, then slowly starts resolving a world out of grain, sonar pings and faint bioluminescence. The dominant feeling is **patient, cold, awed quietness** — the hush of a dry chamber two kilometres down, broken only by drip echoes and the soft chemiluminescent breathing of organisms that make their own light. Nothing glows for decoration; every glow is "data" — a tagged specimen, a temperature anomaly, a pocket of cave air, a returning sonar wavefront. The tone of the writing is a careful field scientist narrating a transect: measured, specific, never hyped, occasionally moved despite themselves. This is **dark-mode used as a subject, not a skin** — darkness here is the ecosystem, and the UI is a respectful, low-luminance window onto it. Think bathyscaphe porthole crossed with a planetarium dome crossed with a geologist's notebook left open under a single LED headlamp. ## Layout Motifs and Structure The site is **one continuous descent**: a single long vertical scroll modelled as a depth profile, where scrolling down literally takes you deeper into the cavern column. A persistent **left-edge "depth gauge" rail** runs the full height — a thin vertical scale ticked in metres below datum, with the current depth riding it as a small luminous bead; chapter markers ("Twilight Threshold −40 m", "The Dry Galleries −310 m", "Sump & Phreatic Zone −880 m", "Hadal Pocket −2,100 m") sit on the rail like sample stations. The body is **not a card grid**; it is a stack of full-viewport "stations", each a dim chamber rendered with a continuous generative particle field (drifting motes of marine-snow-like sediment and slow bioluminescent sparks) so that, like one long axonometric pan, the cave feels physically continuous from station to station rather than paginated. Within each station, content is arranged as **annotated overlays floating on the dark**: a leader-lined callout to a glowing specimen, a small "field card" pinned at a slight rotation with a specimen ID and notes, a faint isometric sketch of the chamber's cross-section in a lower corner. A **bottom-edge "sonar strip"** shows a slowly scrolling waterfall spectrogram of cave sound; clicking a chapter on the depth rail "drops" you to that station with a brief settling motion. Negative space is treated as literal darkness with depth — distant motes parallax slower than near ones — so the layout has real z-depth instead of flat sections. ## Typography and Palette **Typefaces — Google Fonts only:** - **`IBM Plex Mono`** — the primary instrument face: depth readouts, specimen IDs, coordinate tags, sonar timestamps, axis labels, the depth-rail ticks. Used small, tracked `+0.05em`, frequently in measured ALL-CAPS for station titles ("THE DRY GALLERIES / −310 m"). Its slightly humanist monospace reads as "logged by a real instrument", not as decorative terminal cosplay. - **`Newsreader`** — the field-journal prose face: a quiet, low-contrast serif (use its italic generously) for the narrating scientist's transect notes and the longer descriptive passages on each station. It supplies warmth and a hand-written-log intimacy against the cold mono. - **`Spline Sans`** — a clean neutral sans for small UI affordances, captions under sketches, and the legend of the sonar strip; kept understated so it never competes with the mono/serif pairing. **Palette (low-luminance, "aphotic" base with rationed bioluminescent accents):** - `#05070B` — Abyssal Black: the page ground, the deepest cave dark (near-black with a trace of blue). - `#0C141C` — Phreatic Slate: panel and overlay fills, the "wet rock" mid-dark. - `#16222B` — Karst Shadow: borders, depth-rail body, sketch line-work base. - `#5BD6C4` — Chemolume Teal: the principal bioluminescent accent — tagged specimens, the active depth bead, key data points. - `#7FB8FF` — Sonar Glacier Blue: returning wavefronts, cold-water anomalies, link/interaction highlights. - `#C9A14A` — Headlamp Amber: the single warm light — the diver's lamp cone, "you are here", critical annotations; used sparingly so it always feels like the only warm thing down here. - `#D7DEE4` — Specimen Bone: high-readability text on dark, the colour of pale cave-adapted life and clean field-card paper. ## Imagery and Motifs No photography. Everything is **generative canvas/SVG drawn live** — the cave is computed, not pictured. - **Marine-snow sediment field**: a slow, three-layer particle drift of tiny pale flecks falling/suspended, denser near the floor of each station, the literal "snow" of an underground water column. - **Bioluminescent sparks**: occasional teal/blue points that bloom, pulse once or twice, and fade — clustering near tagged specimens; cursor proximity makes nearby sparks "wake" and drift toward the pointer like curious deep fauna. - **Sonar waterfall spectrogram**: a perpetually scrolling band of stacked frequency lines at the page bottom; a ping sent from a station sends a faint expanding ring across the dark and a fresh bright streak down the waterfall. - **Isometric chamber cross-sections**: thin-line axonometric sketches of each station's geometry (a phreatic tube, a breakdown pile, a flowstone gallery, a sump syphon), drawn in `#16222B` with `path-draw` reveal, annotated with leader lines and metre dimensions. - **Field cards**: small slightly-rotated "specimen log" cards — a faint paper-coloured rectangle on the dark holding an ID (`UD-SCI-0447`), a one-line note, and a tiny stippled sketch of the organism (eyeless fish, translucent isopod, fungal mat, cave pearl). - **Speleothem silhouettes**: stalactite/stalagmite/column outlines at chamber edges, used as compositional framing rather than ornament. - **Datum & contour ticks**: hairline grid only where it reads as instrumentation — the depth rail, a faint horizon line marking the water table, contour rings around anomalies. ## Prompts for Implementation Build underdark.science as **one long-scroll HTML page, one CSS file, one ES module — no framework, no build step.** Treat it as **a narrated descent through a lightless cavern, instrumented**, not as a landing page. - **No CTA buttons, no pricing tables, no stat-grids, no testimonials, no logo wall, no FAQ accordion, no newsletter capture, no chatbot, no cookie banner.** The only controls are: the left depth-rail (click a station to descend to it), a "ping" affordance per station (sends the sonar ring + waterfall streak), and a small lamp toggle that warms/cools the ambient light a touch. Keep the chrome to almost nothing. - **Storytelling first.** The copy is a continuous transect log: each station is a beat in the journey ("we leave daylight", "the dry galleries", "the water table", "the sump", "the hadal pocket where the air tastes of stone"). Specimen callouts are diary entries, not feature bullets. - **Animation = environment, not flourish.** A `requestAnimationFrame` particle system drives marine-snow + bioluminescent sparks on a full-bleed `` behind everything (respect `prefers-reduced-motion` by freezing drift and keeping only a gentle opacity shimmer). Three parallax depth layers tie scroll position to mote speed. Use `IntersectionObserver` to "arrive" at each station: cross-section sketch draws in via SVG `stroke-dashoffset`, field cards fade and settle with a tiny spring, the depth readout counter-animates to the new metre value, the sonar strip brightens its band for that station's "soundscape". - **The depth bead** on the left rail tracks scroll smoothly (lerp), and chapter labels light in Headlamp Amber as you pass them. - **Cursor as a faint headlamp**: a soft radial lightening (~120px, very low alpha) follows the pointer over the dark, and bioluminescent sparks within range wake and drift toward it. - **Bias toward full-screen, immersive, narrative pacing.** Each station should fill the viewport and feel like a room you are standing in, lit only by instruments and living light. End not with a sign-up but with the deepest station going almost fully dark — a single teal spark, a final log line, the depth gauge at its floor. ## Uniqueness Notes Differentiators from other designs in this set: 1. **Darkness as the subject, not a theme** — most "dark-mode" designs in the set (~10% dark-mode, ~4% dark-neon, "dark mode neon crypto" seeds) use black as a stylish backdrop with neon UI; here black *is the ecosystem*, light is strictly rationed and always diegetic (bioluminescence, sonar return, headlamp), so it reads as a science instrument in a real cave rather than a glowing product page. 2. **Generative environment in place of photography** — with photography at 98% and glassmorphism at 85% across the corpus, this site has neither: the cave is a live `` particle simulation (marine snow + bioluminescent sparks + sonar waterfall) plus thin isometric SVG cross-sections — a *computed* world, not a stock-photo or frosted-card one. 3. **The page literally descends** — a left-edge metre-scaled depth gauge with sample-station chapters and a lerping depth bead makes the single scroll a physical descent profile (immersive-scroll + timeline-vertical hybrid), instead of the near-ubiquitous card-grid (93%) / centered (79%) layouts. 4. **A persistent audio-visual sonar strip** — a perpetually scrolling spectrogram waterfall along the bottom edge that responds to per-station "pings" with expanding rings; an instrumentation motif essentially absent elsewhere. 5. **Three-layer parallax z-depth built from drifting particles** rather than scroll-jacked panels — distance is expressed by how slowly far motes move, giving genuine spatial depth. Chosen seed/style: **generative art background** (generative aesthetic ~14%, generative-art imagery ~10% — underused; reinterpreted as a bioluminescent deep-cave simulation). Avoided overused patterns flagged by frequency analysis: glassmorphism (85%), photography imagery (98%), hand-drawn aesthetic (95%), card-grid layout (93%), warm/gradient palettes (98%/93%) — this design instead leans on a near-monochrome aphotic palette with three small accents, computed generative imagery, an immersive descending single-column profile, and instrument-grade mono + quiet serif typography.