# Design Language for underdark.stream ## Aesthetics and Tone underdark.stream presents itself as **the field-archive of a subterranean broadcaster** — a single, slow-descending page that reads less like a website and more like the recovered logbook of a cartographer who lived years in a cave system tracing the path of a black river. The aesthetic is **watercolor**, but interpreted through the discipline of a 1930s geological survey: damp pigment bleeds, blotted rings from a chemist's beaker, and pooled washes of indigo and sulfur ink applied over hand-ruled measurement grids. The watercolor never feels decorative or whimsical — it always reads as *documentation*. Each pigment pool implies a real measurement: a depth taken, a tributary mapped, a temperature logged at 3:14 in the dark. The tone is **authoritative**, but in the specific register of a senior expedition leader writing under lamplight — confident, unhurried, and entirely unsentimental. There are no exclamations. There are no second-person addresses to the visitor. The page speaks in the third person and the past tense, the way a geological monograph or a mid-century explorer's report would: "The current was measured at 0.4 m/s on the 14th. The acoustic floor flattened beyond the third bend." This authority is reinforced by the conspicuous absence of ornament — every flourish on the page exists to mark a coordinate or annotate a transcript, never to please the eye for its own sake. Atmospherically, the page evokes the moment a darkroom lamp clicks on inside a wet-plate photographer's tent, deep below the surface. Vintage-photography halftones, watercolor stains from spilled fixer, and sharp-angled instrument silhouettes share the same paper. The visitor is meant to feel they have been handed a sealed envelope of survey materials and asked to scroll through them in order — slowly, without interruption, the way one would read a journal that has been waiting in an archive for ninety years. ## Layout Motifs and Structure The page is structured as a **vertical descent through six parallax-sections**, each modeled as a stratigraphic layer of the Underdark river system. The metaphor is literal: as the visitor scrolls, they move *downward* through earth, and each section represents a deeper geological zone with its own pigment palette, its own measured depth caption, and its own slower parallax velocity (the deeper you go, the more sluggish the foreground responds, as if the air itself thickens). **Section 1 — Surface Notation (depth: 0 m).** A wide upper register of bone-cream paper at full viewport height. A single watercolor wash of dilute graphite blue sits at the upper-third, with the wordmark UNDERDARK·STREAM hand-drawn beneath it in sans-grotesk capitals, each letter underlined by a slow underline-draw stroke that completes itself one letter at a time on load. To the right margin, a vertical column of survey marks (tick-rule with depth labels every 50 m) runs floor-to-ceiling — this rule persists across every section, scrolling at 1:1 speed while the watercolor washes parallax behind it at 0.4x. **Section 2 — The Threshold (depth: 80 m).** A torn, inset vintage-photograph (sepia halftone, deliberately dust-flecked) occupies the right two-thirds, depicting a cave mouth with surveyor's tripod. The left third holds three paragraphs of authoritative caption text, each opening line introduced by a sharp-angled triangular bullet (▲) drawn in vermillion. The background watercolor shifts to a damp ochre-orange wash, parallaxed at 0.5x. **Section 3 — The Hydrograph (depth: 220 m).** Full-width composition. A single hand-drawn hydrograph chart spans the section: ruled axes, a ragged blue waterline tracing measured flow rates across an imaginary year, with sharp-angled annotation arrows pointing to anomalies. Watercolor blotting blooms beneath the chart, simulating water damage to the page itself. Parallax: 0.6x. **Section 4 — The Catalogue (depth: 410 m).** A two-column gallery of small vintage-photograph plates, each numbered in a circle (PLATE I, PLATE II...), each captioned in tight authoritative microcopy. The plates tilt at sharp angles (-3°, +2°, -5°) as if pasted into a journal by a tired hand. Indigo-violet watercolor stains pool at the margins. Parallax: 0.7x. **Section 5 — The Acoustic Floor (depth: 740 m).** Near-black background. A single horizontal underline-draw stroke pulses across the full width of the section like an oscilloscope reading, drawn in sulfur yellow against deep indigo. Caption text below explains the acoustic floor measurement in the same dry expedition voice. Parallax slows to 0.8x — the foreground feels nearly motionless. **Section 6 — Closing Stamp (depth: 1,000 m).** A final muted wash of triadic indigo, ochre, and vermillion overlapping at low opacity. A single rectangular embossed stamp ("FIELD RECORD CLOSED · UNDERDARK SURVEY · No. 0011") sits center-bottom, sharp-cornered, with a hand-drawn underline beneath. No call to action, no link, no email field — only the stamp. The persistent spine: a depth-rule running the full height of the document on the right margin (sticky, fixed), and an angled crop mark in each corner of the viewport, hand-drawn in graphite. These elements do not parallax — they belong to the *page*, not the *terrain*. ## Typography and Palette Typography uses a single **sans-grotesk** family throughout, paired with a **monospaced caption face** for survey annotations. The sans-grotesk choice is deliberate against the watercolor backdrop: where a serif would soften the documentation tone toward literary nostalgia, the grotesk keeps the page in the register of a 1930s scientific monograph or technical bulletin. **Display headings:** **Space Grotesk** (Google Fonts), weight 700, set in ALL CAPS at clamp(2.4rem, 5.6vw, 4.8rem) with tight 0.96 leading and +0.08em positive tracking. Each letter is paired with an underline-draw stroke that animates in on scroll, drawn one stroke-width below the baseline. **Body and authoritative captions:** **Space Grotesk**, weight 400, at 17px with 1.6 leading and +0.005em tracking. Long-form passages use a max measure of 58 characters per line — narrow enough to feel like a journal column, never magazine-wide. **Microcopy and survey labels:** **JetBrains Mono** (Google Fonts), weight 500, at 12px with +0.04em tracking, used exclusively for depth markers, plate numbers, coordinates ("N 41°08′17″"), and timestamp annotations. **Palette: triadic** built on three pigments equidistant on the color wheel, each chosen to behave like a wet-pigment ink rather than a digital color: - **#1F2A55 — Cartographer's Indigo** — the primary text and structural ink; deep, bluish-black with a violet undertone, the color of dried fountain-pen ink on rag paper. - **#B86B2B — Sulfur Ochre** — a warm, slightly muddy orange-brown used for vintage-photograph tints, plate numbers, and one of the watercolor wash stratum colors. - **#7A2A3A — Vermillion Earth** — a desaturated, oxidized red used sparingly for sharp-angled bullets, oscilloscope strokes, and the embossed closing stamp. Plus two neutral substrates that act as paper, not as palette: - **#F2EBD8 — Lamp-Lit Paper** — the dominant page background, slightly warm cream with a faint visible paper-fiber noise texture. - **#1A1814 — Lampblack** — used only in Section 5 (Acoustic Floor) for the near-black field; never used as body text color. All watercolor washes are rendered with these five values at low opacity (0.10–0.32) and feathered, irregular edges. No flat-color rectangles ever appear — every colored region must look like it was painted, not filled. ## Imagery and Motifs Imagery is built from four distinct material languages that share the page without ever blurring into one another: **Watercolor washes.** Rendered as inline SVG with stacked `feTurbulence` and `feDisplacementMap` filters applied to soft-edged organic shapes. Each wash uses one of the three triadic pigments at 12–32% opacity, with deliberate "hard edges" where the pigment pooled and dried (achieved by layering a slightly more opaque, slightly displaced inner shape). Washes never have geometric boundaries; they always feather into the paper. Crucially, watercolor is never used as a section background fill — it always sits as a *stain* with visible margins, the way a real wash dries on real paper. **Vintage-photography plates.** Sepia and indigo-tinted halftone images embedded as `` with a `feComponentTransfer` duotone filter, plus a `feTurbulence` dust-and-scratch overlay at 0.05 opacity. Plates are framed with hand-ruled rectangular borders (1.5px stroke, slightly wavering on each side via SVG path imprecision) and tilted at small sharp angles. Each plate carries a numbered circle in the lower-right corner ("PLATE IV") drawn in JetBrains Mono. Subjects suggested by the captions: cave mouths, surveyor instruments, water-stain marks on rock walls, lamp-lit chambers — but rendered as SVG silhouettes and gradient masks, never as actual photographs (the page contains no raster image files). **Underline-draw strokes.** A signature recurring motif. Every primary heading, every plate number, and the section transition rules carry a single hand-drawn underline that animates on scroll (`stroke-dashoffset` from full length to zero, eased over 900ms). The strokes are not perfectly straight — each is rendered as an SVG `path` with three or four slight Bézier deviations, so the line wobbles like a ruling pen. Stroke width: 1.6px. Color: matched to the pigment of the section it belongs to. **Sharp-angled instruments.** A small library of geometric SVG line-drawings: a theodolite tripod, a triangular survey bullet (▲), a sharp-cornered rectangular stamp, two crossed measurement arrows, a sextant outline, a compass rose with sharp 8-point spurs. These are rendered in 1px strokes of Cartographer's Indigo and used as section openers, bullet markers, and structural punctuation. They never carry watercolor fill — their job is to be the rigid, dry counterpoint to the wet pigment around them. The four languages obey a strict rule: **watercolor is wet, photography is faded, underline-draw is hand-ruled, sharp-angles are precise.** They share paper but never blend — an underline never bleeds into a wash, a wash never crosses a sharp instrument silhouette without leaving a visible interrupted edge. This separation is what gives the page its archival authority: each layer was made with a different tool, on a different day, by a different hand, and assembled into one document. ## Prompts for Implementation Build the entire experience as a **single full-screen vertical narrative** in one `index.html` with embedded `
` with a transform applied each scroll frame: `translateY(${scrollOffsetIntoSection * (1 - velocity)}px)` where `velocity` is 0.4, 0.5, 0.6, 0.7, 0.8, 1.0 across the six sections. The depth-rule and the corner crop marks have `velocity = 1.0` (they belong to the page, not the terrain). Use `IntersectionObserver` to gate parallax computation to only the currently-visible section for performance, but never expose this as a perceptible loading shimmer. **Underline-draw animation.** Every primary heading has an inline SVG `` placed beneath it (absolutely positioned to the heading's bottom edge, full text width, ~1.6px stroke, slight Bézier wobble). On scroll-into-view (use IntersectionObserver with threshold 0.4), animate `stroke-dashoffset` from `pathLength` to 0 over 900ms with `cubic-bezier(0.25, 0.1, 0.25, 1)`. The stroke is drawn left-to-right. Once drawn, it stays drawn (no re-draw on scroll-back). **Watercolor rendering.** Use SVG, not CSS gradients. Each wash is a `` containing `feTurbulence` (baseFrequency around 0.012, numOctaves=2) feeding `feDisplacementMap` (scale 18–32) applied to a `` with an organic blob shape. Stack 2–3 washes per section at varying opacities to build dimensional pigment. Never animate watercolor on scroll — it parallaxes, but the pigment itself is dry and static. **Vintage-photography plates.** Build as SVG silhouettes with a duotone `` (`feComponentTransfer` mapping luminance to a two-stop gradient between Lamp-Lit Paper and Cartographer's Indigo, or between Lamp-Lit Paper and Sulfur Ochre). Add a low-opacity `feTurbulence` dust layer at 0.04 opacity. Frame each plate with a hand-ruled SVG rectangle (1.5px stroke, slightly imperfect Bézier corners) and tilt the entire `
` by a small sharp angle (-5° to +3°) using CSS `transform: rotate()`. **Section 5 acoustic-floor stroke.** A single horizontal SVG `` spanning 80% of viewport width, animated continuously with a slow `stroke-dashoffset` oscillation (period: 6.4s, eased) so it pulses like a quiet oscilloscope reading. Color: Sulfur Ochre on Lampblack background. This is the only continuously-animating element on the page; everything else either parallaxes or animates once on entry. **Voice and copy.** Every text block on the page reads as a survey caption from a 1930s expedition leader. Past tense. Third person. No second-person address. No marketing language. No rhetorical questions. Sample lines: *"The current was measured at 0.4 m/s on the fourteenth of March."* / *"Plate IV depicts the third tributary at lamp-lit hour."* / *"Acoustic measurements beyond the floor proved consistent with prior soundings."* The scrolled-through narrative has the cadence of a quiet expert speaking aloud while writing — never a brand, never a host, never an interface. **What to avoid.** No hero with CTA stack. No three-column feature grid. No testimonial carousel. No pricing block. No sticky shrinking nav. No video background. No emoji. No icons from icon libraries (every icon is hand-drawn SVG in this design's vocabulary). No "scroll for more" indicator (the page's structure makes scrolling self-evident). No second accent typeface beyond the two specified. The finished page should feel, on first scroll, like the visitor has been quietly handed a sealed survey envelope and is reading its contents under lamp-light, with no one watching, with no bell ringing at the end, with no email asked. ## Uniqueness Notes - **Overused patterns avoided:** hero-with-CTA stack, three-column feature grid, testimonial carousel, pricing tiers, sticky shrinking top nav, gradient-on-rectangle hero, full-bleed video background, "scroll for more" indicators, neumorphism, glassmorphism, brutalist black-on-white grids, generic dark-mode-with-neon-accent, second-person marketing voice, emoji-as-icon. - **Underused patterns prioritized:** watercolor used as documentation rather than decoration (watercolor at 5% codebase usage is normally paired with playful tone — here it is paired with authoritative survey-leader tone); vintage-photography (0% codebase usage) rendered as SVG-duotone plates rather than raster images; triadic palette (0% codebase usage) built from oxidized-pigment values rather than saturated digital primaries; underline-draw used on every primary heading as a structural motif rather than a single accent flourish; sharp-angles deployed as instrument silhouettes (theodolite, sextant, compass) rather than as generic geometric shapes; parallax-sections re-keyed to *geological depth* with progressively slowing velocity per section, tying the parallax math directly to the narrative metaphor. - **Tension as concept:** the design is built on the deliberate non-blending of four material languages (wet watercolor, faded photography, hand-ruled lines, sharp-angled instruments) sharing one paper. Each layer was "made with a different tool on a different day" and the page never lets them mix — this material discipline is what carries the authoritative archival voice and distinguishes the site from any decorative-watercolor or vintage-aesthetic site that lets its layers bleed together. - **Domain-fit:** "underdark.stream" is read as a subterranean broadcaster's archive — an ongoing field record of a hidden river system — rather than as a video-streaming service or D&D fan page. The depth-rule, the six stratigraphic sections, and the closing field-record stamp all serve this reading. - **Seed declaration:** aesthetic=watercolor, layout=parallax-sections, typography=sans-grotesk, palette=triadic, patterns=underline-draw, imagery=vintage-photography, motifs=sharp-angles, tone=authoritative.