# Design Language for underdark.webcam ## Aesthetics and Tone underdark.webcam is presented as the public-facing dashboard of a fictional **subaquatic-cave research station** -- a long-duration scientific observation post lowered into a flooded limestone sinkhole, broadcasting whatever its lensed eye picks up from the lightless water column. The aesthetic is **skeuomorphic-instrumentation**: think a 1970s oceanographic research console rebuilt from polished phenolic-resin panels, brushed-aluminum bezels, recessed glass portholes, riveted seams, and the soft greenish-blue glow of cathode dials seen through tempered acrylic. The materials are *honest*: every panel is screwed down, every dial has a serial-number plate, every porthole has condensation streaks. The tone is **scholarly-intellectual** -- this is not a thrill-ride or a horror site, it is a cartographer's logbook. Captions are dispassionate, lab-precise, and curious. The mood is hushed reverence: the underdark is cold, slow, and indifferent, and the station is humble before it. The site reads like the field journal of a scientist who has been alone with a single porthole for three years and has begun annotating the silt that drifts past it. The overall feeling is **submerged and listening** -- the visitor is not exploring, they are *receiving* a slow telemetry feed from somewhere quiet. There is no urgency, no marketing, no conversion funnel; there is only the porthole, the handwritten log, and the wave-form trace of whatever the hydrophone is hearing right now. Inspirations: Jacques Cousteau's Conshelf habitats, the analog gauges of a Trieste bathyscaphe, Edward Forbes' 1840s azoic theory marginalia, Kawase Hasuga's woodblock waves transcribed onto graph paper. ## Layout Motifs and Structure The page is a vertical scroll built around a strict **split-screen** spine that runs the entire viewport height, dividing the world into two parallel registers that never mix. **Left register -- "The Porthole" (45vw):** A skeuomorphic circular viewport, 38vw diameter, recessed into a dark phenolic-resin panel (#0a1a26) with eight visible brass rivets, a brushed-bezel ring (#3a5266 with a 1px inner highlight #6a8aa6), and a thin meniscus of condensation along the upper inside arc rendered as a soft 6px white-to-transparent gradient. Inside the porthole, a slow-drifting field of **abstract-shapes** (see Imagery) suggests organisms or sediment. A small engraved plate below reads "PORT-A / DEPTH 47.2 m / TEMP 8.1 C" in the handwritten log font. **Right register -- "The Log" (55vw):** A canvas of laid bond paper (#e8eef0 with a 6% pulp-fiber noise overlay) tilted 1.4deg, pinned to the panel with two skeuomorphic brass thumbtacks. The handwritten field notes scroll at a slightly slower rate than the left side (parallax differential of 0.85), so as the visitor scrolls the porthole drifts faster than the log -- as if the world outside is moving past while the scientist's hand records steadily. **The seam:** Between the two registers runs a 2px raised aluminum-bezel column (#5a7286 -> #2a3846 vertical gradient) with a small embossed serial number every 800px ("SR-001 / SR-002 / ...") and a thin **wave-form** trace rendered live down its center -- a 1px ethereal-blue (#7ec4d6) vertical sinusoid driven by a spring-physics oscillator that wobbles in response to scroll velocity. This seam is the design's literal spine. **Sections (top to bottom):** 1. **CONSOLE** -- The instrument panel hero: porthole left, station identification card (handwritten) right, with three skeuomorphic gauges (depth, water temp, ambient lumens) embedded in the seam. 2. **TRANSMISSION-01** -- Today's observation: porthole shows abstract-shape "specimens," log handwrites today's annotation in cursive. 3. **HYDROPHONE** -- Full-width section that breaks the split temporarily for a single panoramic wave-form trace, 22vh tall, drawn as if etched into polished aluminum. 4. **TRANSMISSION-02 through TRANSMISSION-05** -- Repeating split observations from prior days, each with a different abstract-shape composition and handwritten annotation. 5. **THE LIBRARY** -- A skeuomorphic card-catalog drawer (right side) revealing specimen index entries; left side shows their corresponding porthole sketches. 6. **SIGNING OFF** -- A handwritten station log closer with the keeper's looping signature, and the porthole goes dark (a slow fade to #000814 with a single retreating point of ethereal-blue light). **Mobile (<768px):** The split collapses to alternating full-width bands -- porthole-band, log-band, porthole-band -- each retaining its skeuomorphic frame. The aluminum spine becomes a horizontal divider, and the wave-form trace reorients along it. ## Typography and Palette **Typography (all Google Fonts):** - **Station Plates / Engraved Labels:** "Special Elite" -- a typewriter-revival face with broken-key irregularity. Used for instrument labels, serial numbers, and porthole captions at 0.78rem, weight 400, letter-spacing 0.06em, color #c8d4dc on dark panels. Set ALL CAPS for plates. - **Handwritten Field Log:** "Caveat" -- a casual cursive that reads as a researcher's hurried but legible cursive. Used for the right-register log text at 1.05rem/1.7, weight 400, color #1a2a36 on the bond-paper background. For emphasized observations, weight 700. - **Display / Section Headings:** "IM Fell English" -- a 17th-century revival serif with subtle ink-bleed character, used for section titles like "TRANSMISSION-01" at clamp(1.4rem, 3vw, 2.4rem), letter-spacing 0.18em, color #2a4a5e. - **Numeric Readouts (gauges, depth, temp):** "Major Mono Display" -- a slab monospace with a faintly mechanical look, used at 0.95rem for depth/temperature readouts, weight 400, color #7ec4d6 (the ethereal-blue) so it reads as backlit glass. **Palette -- "Ethereal Blue with Resin and Brass":** - `#0a1a26` -- **Phenolic-Resin Panel** -- the base color of the instrument console; deep cold blue-black, used for the left-side panel background. - `#1a2a36` -- **Cabinet Steel** -- a slightly lighter slate used for nested skeuomorphic surfaces and handwriting ink color when on bond paper. - `#3a5266` -- **Brushed Aluminum Bezel** -- the metallic ring around portholes and gauges, with a 1px inner highlight at #6a8aa6. - `#7ec4d6` -- **Ethereal-Blue Glow** -- the signature color: backlit gauge glass, the wave-form trace, the bioluminescent edges of abstract-shape specimens. Always reserved for *living light*, never for chrome. - `#a8dde8` -- **Surface Refraction** -- a paler ethereal-blue for highlights on the porthole condensation arc and for the spring-bouncing wave amplitude peaks. - `#c8d4dc` -- **Plate Engraving** -- the etched-text color on dark panels; reads as backlit white but with a cool cast. - `#e8eef0` -- **Bond Paper** -- the right-register notebook background. - `#b89968` -- **Brass Rivet / Thumbtack** -- the only warm accent, used sparingly for hardware (rivets, tack heads, drawer-pull handles). - `#000814` -- **Underdark Void** -- the deepest layer, used inside the porthole when nothing is being observed, and for the final fade-out. **Contrast pairings:** - #c8d4dc on #0a1a26 (engraved plate text) -- 11.8:1 - #1a2a36 on #e8eef0 (handwritten log) -- 11.4:1 - #7ec4d6 on #0a1a26 (gauge glow) -- 8.2:1 ## Imagery and Motifs **Core Motif 1 -- The Porthole:** A persistent circular framed viewport, recessed into the left panel. Its interior is rendered as a layered SVG composition: a base of `#000814` (Underdark Void), a soft radial gradient from #0a1a26 at center to #000814 at edges (suggesting limited bioluminescence in the middle distance), and 4-7 abstract-shape "specimens" drifting at different parallax speeds. The porthole has a 6px condensation meniscus along its upper inside arc. **Core Motif 2 -- Abstract-Shape Specimens:** The "imagery" inside each porthole is **abstract-shapes** rendered as soft-edged SVG blobs and ellipses with no clear identity -- they could be jellyfish, could be air bubbles, could be sediment clouds, could be light interference. Each shape has a fill of #0a1a26 with a 0.5-1.5px stroke in #7ec4d6 (ethereal-blue) at 40-70% opacity, and a soft outer glow `filter: blur(8px)` halo at #7ec4d6 / 25% opacity. They drift on independent slow loops (40-90s each) using `translate` + slight `scale` breathing. This is **deliberately not photography** -- it is a scientific abstraction, a hand-drawn sketch of "something seen." **Core Motif 3 -- Wave-Forms (the seam trace):** A continuous 1px sinusoidal trace runs the full vertical seam in #7ec4d6, generated by overlaying three sine waves at different frequencies (slow base wave, medium harmonic, fine ripple) and modulated by scroll-velocity through a **spring-physics** oscillator (stiffness 80, damping 14). When the user scrolls fast, the wave amplitude swells to 18px peak-to-peak and overshoots, then settles back to a 4px resting amplitude. This is the literal heartbeat of the page. **Core Motif 4 -- Spring-Suspended Hardware:** All skeuomorphic interactive elements (the brass thumbtacks, the gauge needles, the card-catalog drawer pulls) move with **spring** dynamics rather than linear easing. A thumbtack pressed visibly compresses 2px and releases with a 1.2-amplitude bounce. Gauge needles, when displaying a new value, swing past and settle. This makes the entire instrument feel mechanical and inhabited. **Decorative Treatments:** - **Bond-paper texture:** a pre-rendered SVG noise filter (turbulence baseFrequency 0.9, displacement 1.4) at 6% opacity, layered over the right-register #e8eef0 base. - **Brushed aluminum:** a horizontal 0.5px linear stripe pattern at 8% opacity, applied to all bezels and the central seam. - **Engraved plate text:** every label has a 1px inset shadow (#000814) below and a 1px highlight (#6a8aa6) above the type to read as machine-engraved. - **Condensation streaks:** three subtle vertical white-to-transparent gradients (1-2px wide, 18% opacity) on the inside of the porthole, slowly drifting downward over 90s. - **Annotation arrows:** in the handwritten log, occasional hand-drawn ink arrows curve from a marginal note to a referenced word, drawn in #1a2a36 with `stroke-dasharray` revealed on scroll. **No-go list:** - No photography (porthole is always abstract SVG). - No emoji or pictogram icons. - No flat-design icon system; every interactive metaphor must be a real-looking instrument. - No color outside the palette; especially no warm gradients, no saturated greens, no neon. ## Prompts for Implementation Build the site as a single long-scroll `index.html`. The body is a CSS Grid: `grid-template-columns: 45vw 2px 55vw` for the spine layout. The left column is `position: sticky; top: 0; height: 100vh; overflow: hidden` so the porthole stays anchored while the right column (the log) scrolls past it, except during dedicated scroll-driven transitions where the porthole content updates. On scroll, the **active porthole composition** is selected from a sequence of 6 keyed compositions; an `IntersectionObserver` watching the right-side log sections triggers a 1200ms cross-fade in the porthole between specimen sets. The seam wave-form is a single full-height inline SVG with a `` whose `d` attribute is recomputed on `requestAnimationFrame`. The path generator function takes scroll velocity and feeds it into a spring oscillator (`react-spring`-style or hand-written: `velocity += (target - position) * stiffness; velocity *= damping;`) to produce the amplitude. The wave traces vertically using a parametric equation: for each y from 0 to viewport height, `x = centerX + amplitude * sin(y * 0.012 + t) * 0.6 + amplitude * 0.3 * sin(y * 0.045 + t * 1.7)`. The handwritten log is set in "Caveat" font at 1.05rem with a tilted (1.4deg) bond-paper background. Story: the log text is the *content*. Write five long-form field-journal entries (200-400 words each) in first-person scholarly voice, dated descending from "Day 1,247" backward. Each entry references what is "currently visible through the porthole" so the visual and the prose are bound. This is a **storytelling-first** site -- the log is the narrative, and the porthole is its evidence. Include marginal annotations with hand-drawn arrows. Animations: all skeuomorphic interactives use spring physics (the `Animate` snippets should declare CSS custom properties driven by JS-spring values). The brass thumbtacks compress 2px on scroll-enter then release with a bounce. Gauge needles in the CONSOLE section animate from a parked position to their reading on first scroll-into-view, overshooting by 8% before settling. The card-catalog drawer (THE LIBRARY section) opens with a `cubic-bezier` only as fallback -- prefer a manually integrated spring. The porthole contents drift independently using `requestAnimationFrame` per specimen, each with its own slow elliptical path; respect `prefers-reduced-motion` by reducing drift to 1/4 speed and disabling the spring overshoot. The hydrophone section is the one place the split is broken: a full-width 22vh "etched aluminum" panel with a single horizontally-running wave-form trace, generated by playing back a fictional pre-recorded amplitude buffer (stored as an array of ~2000 floats). The trace draws progressively as the user scrolls into the section, like a seismograph drum revealing yesterday's recording. Avoid: CTA buttons, pricing tables, stat grids, testimonial blocks, signup forms, social-proof rows, feature comparison matrices. There are no calls-to-action -- this is an *exhibit*. The only "interactive" element is a small skeuomorphic toggle at the bottom labeled "RESUME TRANSMISSION" that simply scrolls back to the top. Bias toward: full-bleed atmospheric immersion, slow temporal pacing (no element animates in less than 600ms), hand-crafted texture, mechanical honesty (every skeuomorphic detail must imply a real material). ## Uniqueness Notes 1. **Sticky-porthole / scrolling-log split-screen with parallax differential:** Most split-screen designs scroll both halves equally; here the left half is sticky and updates by cross-fade between 6 keyed compositions while the right half scrolls continuously, creating a "world moving past the observer" effect that maps directly to the underdark research-station premise. The 0.85 parallax differential makes the log feel anchored and the porthole feel adrift. 2. **Spring-physics-driven wave-form spine as literal site heartbeat:** The vertical seam between the two registers is a live, scroll-velocity-responsive sinusoidal trace using spring dynamics. No other site in the batch turns its layout divider into a kinetic instrument readout, and the spring-overshoot behavior tied to scroll velocity gives the page a felt mechanical liveliness. 3. **Skeuomorphic oceanographic instrumentation with engraved-plate typography:** While skeuomorphism shows at 1% in the batch, this design uses it not as nostalgia but as a *narrative device* -- every panel, rivet, gauge, and thumbtack reinforces the fiction of a working research station. The Special Elite typewriter-revival face on engraved plates with inset shadow + highlight is a typographic execution unlike any other in the batch. 4. **Abstract-shape specimens as scientific abstraction (not photography):** The porthole is never a photograph; it is a hand-drawn-feeling SVG abstraction of bioluminescent forms, treating "imagery" as scientific sketch rather than stock content. This combines the rare abstract-shapes imagery (1%) with wave-forms motif (1%) and ethereal-blue palette (1%) -- a triple-rare combination. 5. **Handwritten field-log as primary content vehicle:** Long-form first-person scholarly prose in Caveat cursive on tilted bond-paper drives the entire narrative; the design is content-first in a way that resists conversion-funnel thinking. The handwritten typography (12% in batch) is paired with marginal hand-drawn annotation arrows revealed on scroll, an interaction motif unique to this site. [Document chosen seed/style: aesthetic: skeuomorphic, layout: split-screen, typography: handwritten, palette: ethereal-blue, patterns: spring, imagery: abstract-shapes, motifs: wave-forms, tone: scholarly-intellectual] [Reference avoided patterns from frequency analysis: avoided playful aesthetic (70%), warm palette (84%), gradient palette (60%), photography imagery (82%), tech motif (20%), dark-mode generic (30%), and CTA-driven layouts -- this design is an unhurried scholarly exhibit, not a marketing surface.]