# Design Language for underdark.webcam ## Aesthetics and Tone underdark.webcam is a **goblincore monitoring station** — the public web face of a single, half-broken, lovingly maintained camera that someone bolted to a stalactite somewhere deep beneath the world and never came back for. The premise is literal: this is a webcam. It points into the dark. The dark, it turns out, is not empty — it glows. Pale fungal light, drip-water shimmer, the slow drift of something with too many eyes just past the focal plane. The site frames itself as the *viewer interface* for that feed, the way an old wildlife-cam portal frames a osprey nest — except the wildlife here is mycelial, the timestamps are unreliable, and nobody is moderating the comments because nobody can get down there. The tone is **mysterious-moody** with a streak of **grounded-earthy** goblin domesticity: this is a haunted place, but it's also somebody's *place* — there are personal touches, a hand-labeled clip archive, a "things I have collected" shelf rendered as a sidebar. The aesthetic vocabulary is goblincore — earthy chaos, hoarded textures, mismatched found objects, the beauty of rot and damp and shiny things pulled out of mud — pressed against the cold rectangular honesty of a **dark-mode** surveillance UI. Think: a chitin-and-amber jewelry box sitting on top of a 2003 IP-camera admin panel. The `.webcam` TLD is taken completely seriously and completely wrongly — yes, it is a webcam; no, you should not have found it. Reference mood: the green-black of a night-vision feed; the specific orange of a cave glow-worm thread; the UI chrome of decommissioned `axis-cgi` camera firmware; a goblin's pocket contents tipped onto velvet; the patient, looping boredom of a livestream of nothing, occasionally interrupted by *something*. ## Layout Motifs and Structure The page is built as a **HUD overlay on a full-bleed feed** — a layout pairing (`hud-overlay` at 2%, `full-bleed` common but rarely combined this way in the archive) that treats the entire viewport as a live camera image with interface furniture floating on top of it. **The feed plate.** The `` is the camera image: a near-black field (`#0B0E0A`) carrying a slow, generative bioluminescent canvas — soft drifting blobs of fungal light, a faint scanline drift, a timestamp burn-in in the bottom-left corner that ticks every second with a *plausible but wrong* date. A 1px vignette and a barely-visible CRT curvature shadow hug the edges. Everything else sits *over* this. **HUD furniture, anchored to corners and edges — never centered:** - **Top-left:** the station ident — `UNDERDARK.WEBCAM` in condensed mono, a tiny pulsing `● REC` dot, and a "signal strength" glyph that flickers between 2 and 3 bars. Below it, drift-down, the section nav rendered as channel buttons: `LIVE / ARCHIVE / THE SHELF / LOG / ABOUT`. - **Top-right:** environmental telemetry stack — humidity, air temp (a stable cold 9°C), "lumens detected" (a number that creeps when a blob passes), depth estimate (`−?,??? m`, deliberately corrupted). Each is a label-colon-value mono row, right-aligned, with a hairline rule between. - **Bottom-left:** the burn-in timestamp + a frame counter. - **Bottom-right:** "viewers: 1" — always 1, you, alone — and a mute/unmute speaker icon for the (fake) ambient drip audio. - **The Shelf** lives as a **right-edge drawer**: a vertical strip of "collected objects" thumbnails (an amber bead, a quartz shard, a beetle elytron, a coin, a tooth) that slides out on hover into a goblin's display case — uneven shelves, hand-written labels, each object on its own little plinth. - **Content sections** (Archive, Log, About) don't replace the feed — they slide *up* over it as **semi-translucent dark panels** (`backdrop` darkened, not blurred — this is goblincore, not glassmorphism; the panel is more like greased glass smeared with cave-mud, a `rgba(11,14,10,0.82)` over a subtle noise texture). The feed keeps running behind every panel; you can always see the dark breathing. No hero. No CTA band. No pricing. No stat-grid. The "stats" that exist are diegetic telemetry, wrong on purpose, and they are atmosphere, not metrics. ## Typography and Palette **Typefaces (Google Fonts only):** - **Sometype Mono** — the HUD face. All telemetry, timestamps, nav channel buttons, the station ident, the frame counter. Weight 400–500. Set tight, uppercase for labels, with `font-variant-numeric: tabular-nums` so the ticking numbers don't jitter. This is the "camera firmware" voice — slightly humane, not a cold pure DIN, because goblins touched it. - **Fraunces** — the goblincore voice, used in its *soft, slightly weird optical-size* register (opsz low, "wonk" axis on, weight 300–500, italic for asides). Used only for: the running narration log ("Day 4: the white thing came back. It likes the corner."), the Shelf object labels, the About prose, and any pull-quote. Fraunces' soft serifs + wonky italics read as *handwritten field notes in a damp notebook* without being a literal handwriting font. - **Big Shoulders Stencil Display** — used *sparingly*, large, for the single section title that crowns each slide-up panel (`ARCHIVE`, `THE SHELF`, `THE LOG`). Stencil because it reads like spray-paint stencilled onto cave rock or onto a piece of equipment, and it's heavy enough to anchor the panel against the moving feed behind it. **Palette — `dark-neon` cave-bioluminescence, not the usual warm gradient:** - `#0B0E0A` — **cave black**, the feed plate, almost-but-not-quite pure black, with a green undertone (like the inside of an eyelid in a dark room). - `#11160F` — **damp stone**, panel fill before the noise/alpha, slightly lifted. - `#7FE3A1` — **fox-fire green**, the primary bioluminescent glow — fungus light, the `REC` dot's healthy state, active nav channel, link hover. Used as light, often with a soft `box-shadow` halo, never as a flat fill block. - `#E89B3B` — **glow-worm amber**, the secondary light — the timestamp burn-in, the Shelf's amber bead, "lumens detected" when it spikes, warm accents on collected objects. - `#C8C2B0` — **bone / lichen white**, the default text color over the feed — a desaturated warm grey-white, the color of pale things underground, never `#fff`. - `#5A6B57` — **moss grey-green**, hairline rules, inactive UI, secondary telemetry, the "signal" bars when weak. - `#7A2A2A` — **rust red**, danger/anomaly state: when *something* enters frame, the `REC` dot, the vignette edge, and one telemetry row flush to this for a few seconds, then settle. Contrast is high where it matters (bone text on cave black) and deliberately murky where the mood wants it (moss-grey rules nearly vanishing into stone). ## Imagery and Motifs **Primary imagery is generative, not photographic** — which is itself a differentiator in an archive where 98% of designs reach for photography. The "feed" is a `