# Design Language for underdark.date ## Aesthetics and Tone underdark.date is a courtship oracle for the lightless world beneath the world — a place where romance is conducted by spore-signal, glow-pulse, and the slow handshake of mycelial networks threading through cold stone. The mood is *bioluminescent goblincore*: damp, mineral, faintly fungal, and unexpectedly tender. Picture a cavern grotto three miles down where someone has strung up jars of luminous moss to set a mood, where the courier-beetles carry love-notes pressed into wax, and where the only sunlight anyone has ever known is the cool teal flicker of foxfire on a cave ceiling. The tone is *mysterious-moody* shading into *whimsical-creative* — it takes its underworld seriously (the dark is real, the cold is real, the distance between two cave-dwellers is real) but it is fundamentally a love letter, not a horror story. There is mud under its fingernails and stars made of fungus on its ceiling. Nothing here is sleek; everything is *grown*. Surfaces look like wet slate, raw geode, chitin, packed earth, and the soft underside of a mushroom cap. Light does not come from above — it seeps, pulses, and breathes from within objects, the way deep-sea creatures and cave fungi make their own. ## Layout Motifs and Structure An **organic-flow** layout that behaves like a network of caverns connected by tunnels rather than a stack of rectangular sections. The page is a vertical *descent* — you scroll downward through strata of stone, each "section" a chamber the tunnel widens into. Hard rules: NO card-grid, NO bento-box, NO symmetric hero. Content sits in irregular pockets that follow the contour of hand-drawn cave walls (SVG blob paths with rough, jittery edges, never smooth bezier curves). A meandering vertical *root-line* — a single glowing mycelial filament — runs down the left third of the page, branching toward each chamber, pulsing light along its length as you scroll (path-draw-svg). Negative space is **packed darkness**, not white margin: the void between chambers is near-black stone with faint mineral speckle, and you genuinely cannot see the next chamber until the root-line carries light to it (blur-focus → reveal). Chambers vary wildly in size — some are cramped alcoves holding one line of text, some are vast caverns holding a slowly-drifting field of spore-motes. Typography occasionally clings to the cave wall, set at slight rotations (±2–4°) as if chiseled by someone working in cramped quarters. A persistent thin status-rune in the corner shows DEPTH: −1,847 ft and rising as you scroll, and AMBIENT LUMEN: a tiny number that ticks up when glowing elements are on screen. ## Typography and Palette **Typefaces (all Google Fonts):** - Display / chamber headings: **Cinzel Decorative** — carved, slightly Gothic capitals that read like runes hewn into rock; used sparingly at large sizes, letter-spaced wide, given a faint inner-glow text-shadow. - Secondary display / pull-quotes: **Cormorant Garamond** italic — a fragile, candle-lit serif for the whispered, romantic register (love-notes, courier wax-seal text). - Body text: **Spectral** — a screen-native serif with enough warmth to feel hand-set and enough structure to stay legible on dark stone at 17–19px, 1.7 leading. - Utility / status runes / depth counter: **Spline Sans Mono** — a clean monospace for the cold instrumentation overlay (DEPTH, LUMEN, coordinates). **Palette:** - `#0A0D0B` — *cavern void*: the near-black base, faintly green-shifted like wet stone in the dark. - `#141C18` — *deep slate*: chamber backgrounds, one shade up from the void. - `#2A3A30` — *moss shadow*: mid-tone for textured panels and tunnel walls. - `#5BE3C0` — *foxfire teal*: the primary bioluminescent glow — root-line, active links, spore-motes. - `#9D7CFF` — *amethyst spore*: secondary glow, used for accents, hover states, the courier-beetle trails. - `#E8C76A` — *moth-lantern gold*: rare warm light, used only for the most intimate moments (a single jar of moss, a wax seal) — never more than one gold element per chamber. - `#D8E0D2` — *pale lichen*: the text color on dark grounds, a soft off-white with a green undertone so it never glares. - `#7A8C82` — *stone dust*: muted secondary text, captions, ambient labels. Gradients are radial and *emissive only* — light blooming out of a point (a fungus, a jar, a beetle), never linear background washes. ## Imagery and Motifs - **Hand-drawn cave geometry**: every chamber boundary is a rough SVG path with deliberate jitter — stalactites hanging from the top edge, stalagmites rising from the bottom, the occasional embedded crystal cluster glinting (CSS sparkle keyframes). - **Bioluminescent fungi as the entire iconographic system**: glowing mushroom clusters, shelf fungus, puffballs, mycelial threads — drawn as flat vector-art with soft drop-shadow glows. Bullet points are tiny mushroom caps. Section dividers are a horizontal run of shelf fungus along a ledge. - **Spore-motes**: slow-drifting particles (40–80 of them) that float *upward* and sideways on lazy sine paths, brighten near the cursor, and occasionally settle on text. They are the page's ambient life. - **Courier-beetles**: 2–3 tiny iridescent beetles that crawl along the root-line and chamber edges carrying glowing wax-sealed notes; hovering one pops open a love-note fragment in Cormorant italic. - **Geode cross-sections**: large decorative circular forms with crystalline interiors (concentric jagged rings in amethyst/teal) used as the backing for the most important chamber. - **Mineral speckle texture**: a subtle SVG noise/stipple overlay at ~6% opacity on all dark surfaces, with a faint vertical drip bias — the cave sweats. - **Foxfire flicker**: glowing elements don't pulse on a clean sine — they flicker with a slight irregular stutter (like real bioluminescence / a guttering flame), 0.92→1.0 brightness on a randomized interval. ## Prompts for Implementation Build this as one immersive, full-screen, single-route **descent narrative** — the visitor falls (slowly, by scroll) from the cave-mouth down through the strata of the Underdark, and each chamber is a beat in the story of how courtship works down here. The scroll *is* the descent; there is no nav bar, no menu, no "Sign Up" button competing for the first viewport. The first thing the visitor sees is darkness, a single glowing filament, and the words carved in Cinzel Decorative: *"There is no surface here. Only depth, and who you find in it."* Hard biases for the engineer: - **AVOID entirely**: CTA-stacked layouts, pricing tiers, stat-grids ("10,000 members!"), card-grid galleries, testimonial carousels, feature-icon rows. None of that exists in this cave. - **Light is the only progress indicator.** Chambers below the fold are rendered dark/blurred until the scrolling root-line "carries light" to them — use IntersectionObserver to trigger a `filter: blur()` → sharp + brightness ramp as each chamber enters. The reveal should feel like your eyes adjusting, not a fade-in. - **Use SVG path-draw for the root-line** — `stroke-dasharray`/`stroke-dashoffset` tied to scroll progress, with a `` Gaussian-blur glow layer behind it in foxfire teal. Branches sprout toward each chamber as the main line passes their depth. - **Spore-mote particle field**: canvas or pooled DOM elements, upward+drift motion, brighten within ~120px of cursor (cursor-follow but gentle — the cave reacts to your warmth, it doesn't chase you). Respect `prefers-reduced-motion` by freezing motes and slowing the flicker. - **Foxfire flicker keyframes**: irregular brightness/opacity stutter on all `--glow` elements, randomized per-element animation-delay so they're never in sync. - **Courier-beetle micro-interactions**: small sprites pathing along the root-line; hover → a wax-sealed `