# Design Language for underdark.xyz ## Aesthetics and Tone underdark.xyz is a **goblin cartographer's lichen-lit field journal of the world beneath the world** — the collected survey notes, ore-sketches, and superstition-margins of a subterranean guild that maps caves no surface map will ever show. The conceit: you have descended past the last sunbeam, past the root-cellars and the drowned mines, into a place where the only light is the cold green glow of foxfire moss and the faint blue pulse of crystal veins in the rock. Someone went down here before you. They left a book. The book is this website. The tone is **mysterious-moody, but earthy and tactile, never sleek** — this is not a slick "dark mode" tech aesthetic of pure black and neon accents. It is *goblincore*: damp stone, patinated brass, beeswax-stained paper, hoarded trinkets, mismatched ink, the proud chaos of a collector who labels everything in their own crooked hand. The page should feel *lived in by a small clever creature* — fingerprints on the margins, a pressed cave-fern between two pages, a tally of footsteps scratched into a wall. Wonder over fear. Curiosity over horror. The Underdark here is not Lovecraftian dread; it is a cathedral of minerals that nobody is allowed to be afraid of because the cartographer is too busy being delighted by a new species of blind salamander. Mood references: the inside of a geode; a Victorian naturalist's specimen drawer lit by a single oil lamp; moss growing on a forgotten church bell; the bioluminescent ceiling of the Waitomo glowworm caves rendered as a hand-inked star chart; a goblin's coat pockets turned inside out onto a stone table. ## Layout Motifs and Structure The site is a **single vertical descent** — one long-scroll document structured as a *spelunking dive log*, where scrolling down is literally going deeper. The page is divided into **strata**: stacked horizontal bands, each one a "depth layer" with its own rock-color, its own ambient glow, its own discovered contents. Depth markers run down the **left margin** as an engraved measuring rule — `−40m`, `−220m`, `−1,400m`, `−THE SUMP` — fixed-position numerals in patinated brass that tick past as you scroll, the way a diver watches a depth gauge. This rule is the spine of the layout: thin, always present, never collapsed into a hamburger. Within each stratum the composition is **organic-flow, not grid** — content sits in irregular hollows the way crystals grow in a vug. A survey note might be a slightly-rotated paper card wedged into a crack of stone; a specimen sketch floats in its own pool of moss-light with hand-ruled callout lines (`path-draw-svg`) tethering labels to it; a "found object" (a brass key, a chunk of ore, a salamander) sits in negative space with a museum-style index tag. Nothing aligns to a clean column. The only straight line on the page is the depth rule. Edges between strata are **uneven rock seams** — jagged SVG clip-paths, not flat dividers — so the page reads as a geological cross-section rather than a stack of `
` boxes. No card-grid. No bento. No three-up feature row. No CTA band, no pricing, no stat counters. If a "list of contents" is needed, it is a **goblin's hoard laid out on stone** — objects scattered with hand-drawn arrows, not a uniform gallery. A persistent thin top strip carries only the journal's name in inked capitals and a tiny `lamp-oil: 64%` gauge as decorative atmosphere. ## Typography and Palette **Type stack — Google Fonts only:** - **Display / stratum headings:** `IM Fell English` (and `IM Fell English SC` for small-caps) — a 17th-century revival face with broken, ink-bled letterforms that look pressed by a worn iron press. Used at 44–80px for things like "STRATUM IV · THE GLASS GALLERIES" and "Field Note 31 — On The Singing Drip." Its irregular baseline and antique texture *is* the goblin-cartographer's printing kit. `letter-spacing: 0.01em`, occasional `text-transform: lowercase` for an intimate note-to-self feel. - **Body / survey prose:** `Spectral` at 18–20px, 1.7 line-height — a transitional serif with enough warmth to read like a journal and enough structure to carry long passages of cave description. Italics used freely for species names and overheard guild-superstitions. - **Marginalia / labels / depth rule:** `Cutive Mono` — a typewriter-toned monospace, used at 12–14px for specimen index tags (`SPEC. №407 / BLIND SALAMANDER / sec. 9-G`), the brass depth numerals, and the lamp-oil gauge. The slightly mechanical contrast against the two antique serifs reads as the cartographer's *instruments* (the gauge, the ruler, the field-tag punch) versus their *hand* (the prose). **Palette — damp stone, foxfire, and crystal:** - `#0E1410` — **Sump Black**, the deepest background, a green-shifted near-black like wet basalt (never pure #000). - `#1B2A22` — **Cavern Moss**, mid-depth background panel, a dark loden green. - `#2E2A20` — **Beeswax Vellum Shadow**, used behind paper-card content so the "paper" reads warm against the cold rock. - `#E8DCC0` — **Tallow Paper**, the warm cream of the journal's pages and most body text. - `#7FE3A3` — **Foxfire Glow**, the bioluminescent moss-green — used sparingly for the ambient glow halos, active links, and the "this is alive" accents. It *emits*; it never just sits there. - `#5AC8E0` — **Crystal Vein**, a cold cyan for mineral seams, depth-rule highlights, and the rare second glow. - `#C8923C` — **Patina Brass**, warm metallic ochre for the depth numerals, found-object index tags, hand-drawn arrows, and rule ticks. - `#8A7B5C` — **Lichen Grey-Gold**, a desaturated bridge tone for hairlines, faded marginalia, and inactive states. Contrast pairing rule: Foxfire (`#7FE3A3`) and Crystal (`#5AC8E0`) only ever glow *out of* the dark stone tones — never on the Tallow Paper. Brass (`#C8923C`) is the only accent allowed to touch the paper. ## Imagery and Motifs - **Hand-inked naturalist specimen plates** as the primary imagery — blind cave fish, eyeless salamanders, glowworm clusters, crystal habits, fungus gills — drawn as fine single-weight line-illustrations in `#E8DCC0` on transparent backgrounds, each one floating in a soft radial `#7FE3A3` glow as if lit by the moss it grew on. No photography anywhere. - **The depth rule** — an engraved brass measuring strip down the left edge, numerals in `Cutive Mono`, with tiny etched tick marks every "10 metres" and an occasional scratched annotation (`← here the air changed`). - **Crystalline geometry** — angular faceted SVG shapes (quartz habits, fluorite octahedra) used as section bullets, scroll-progress indicators, and the jagged stratum-seam dividers. Faceted, never round; this is the antidote to the registry's `organic-blobs` overuse. - **Goblin hoard objects** — small inked illustrations of a brass key, a chipped lantern, a knot of rope, a single boot, a die carved from bone — scattered as decorative punctuation with `Cutive Mono` museum tags. - **Foxfire particle drift** — a slow, sparse rise of dim green motes in the background of the deeper strata, like spores in still cave air. Sparse. Lazy. Almost subliminal. - **Hand-ruled callout lines** — thin brass leader-lines (drawn on scroll) connecting labels to the part of a specimen they describe, exactly like a field sketch. - **Ink-bleed and foxing** — subtle paper-foxing speckle and bled-ink edges on the paper cards (CSS `filter` + SVG turbulence, very low opacity) so the "pages" feel handled. ## Prompts for Implementation Build underdark.xyz as **one single long-scroll HTML document** — no SPA, no routing. The reader's experience is a descent: they open the journal at the cave mouth and scroll down into the dark, and the page gets quieter, glowier, and stranger the deeper they go. **The descent backbone:** - Fixed left **depth rule**: `position: fixed; left: 0; top: 0; bottom: 0; width: 58px;` rendered as a brass strip (`background: linear-gradient(...#C8923C tones with subtle vertical engraving lines)`). Inside it, the current depth numeral in `Cutive Mono`, updating on scroll (`-40m` → `-1,400m` → `-THE SUMP`). Etch tick marks with repeating `linear-gradient`. As the reader passes each stratum boundary, the active depth number briefly brightens to `#7FE3A3` then settles back to brass — a small, slow `path-draw`-style flicker, not a bouncy spring. - Background color transitions between strata via scroll-driven interpolation: `#0E1410` near the top deepening through `#1B2A22` mid-depths and back toward `#0E1410` at the sump. Each stratum's ambient glow (a large, very soft radial-gradient `#7FE3A3` or `#5AC8E0` at ~6–10% opacity, fixed behind content) fades in and out as it enters/leaves the viewport. **Stratum seams:** divide major sections with **jagged rock-seam SVG dividers** — irregular polylines clip-pathing one stratum's bottom edge into the next, with a 1px `#8A7B5C` "fracture line" along the seam and a faint `#5AC8E0` glow bleeding through the crack. Never a flat horizontal rule. **Content as found pages:** present writing in **paper cards** — `background: #E8DCC0; color: #2E2A20;` with a slight random rotation (`transform: rotate(-1.4deg)` etc.), a soft long shadow onto the rock, torn/deckled SVG edges, and very-low-opacity foxing speckle. On scroll-in, each card does a small **fade-reveal with a subtle settle** (translateY 18px → 0, no overshoot, ~600ms ease-out) as if it were just set down on the stone. Stagger multiple cards in a stratum so they land one after another like a hand dealing notes. **Specimen plates:** each line-illustration sits in its own dark hollow with a `radial-gradient` foxfire halo behind it. On scroll into view, the **hand-ruled callout leader-lines draw themselves** (`stroke-dashoffset` animation, ~900ms, slight pause between each line) and the `Cutive Mono` labels fade in at the ends. On hover, the whole plate gives a faint extra glow pulse and the relevant label brightens — `blur-focus`/`pulse-attention` style, slow and bioluminescent, not snappy. **Scroll-progress as a growing crystal:** instead of a progress bar, a small faceted quartz crystal in a corner *grows* new facets / brightens as the reader descends — pure SVG, `path-draw` on the new edges. **Foxfire drift:** a `` or pure-CSS layer of ~30–50 dim green motes drifting slowly upward with gentle horizontal sway, denser in the deeper strata, behind everything, `mix-blend-mode: screen`, very low opacity. It should be felt more than seen. **Type behavior:** stratum headings in `IM Fell English` arrive with a slow **ink-bleed reveal** — start slightly blurred and over-inked (heavier text-shadow, blur 4px) and resolve to crisp over ~700ms, like wet ink drying. Body prose just fades. Marginalia in `Cutive Mono` can do a brief `typewriter-effect` only for short index tags — never for paragraphs. **Atmosphere, not conversion:** there is no CTA, no signup, no pricing, no stat grid, no testimonial row, no feature cards. If the journal needs a "table of contents," render it as a **goblin's hoard spilled on a stone slab** — scattered inked objects (key, lantern, bone die, fern) each tagged and connected by hand-drawn brass arrows to its stratum, the reader clicking an object to glide-scroll down to that depth. End the page at **THE SUMP**: the deepest stratum, nearly black, one final specimen plate and one last journal line, then the depth rule simply stops — no footer links, just the bottom of the cave. Respect prefers-reduced-motion: drop the foxfire drift, the parallax glow shifts, and the leader-line draws; keep static glows, static paper cards, and crisp type. ## Uniqueness Notes Differentiators from the rest of the registry: 1. **Goblincore + forest-green + crystalline, used as a *subterranean field journal*** — the frequency analysis shows `goblincore` at only ~2% and almost never paired with a structured long-scroll documentary layout; here it is the entire spine. It is the registry's antidote to the 95% `hand-drawn`/85% `glassmorphism` monoculture: tactile and ink-stained without being a doodle theme, dark without being a neon "dark-mode" theme. 2. **Scroll = literal physical descent with a brass depth gauge** — not `parallax storytelling` decoration but a load-bearing structural metaphor: backgrounds darken, glows shift, strata stack as a geological cross-section, and a fixed engraved measuring rule replaces conventional navigation. No `card-grid` (93% of registry), no `bento-box`, no `centered` hero — content grows in irregular rock hollows via `organic-flow`. 3. **Bioluminescence as the only "glow," and it only glows out of stone** — `#7FE3A3` Foxfire and `#5AC8E0` Crystal Vein emit light exclusively against dark loden-green rock and are forbidden on the warm Tallow Paper; the paper carries only `#C8923C` Patina Brass. This strict light-source logic (moss glows, paper doesn't) is unlike the registry's blanket gradient-and-warm palette use (98% warm, 93% gradient). 4. **Faceted crystalline geometry instead of organic blobs** — section bullets, the scroll-progress "growing crystal," and the jagged stratum seams are all angular quartz/fluorite habits, deliberately countering the overused round `organic-blobs` motif. 5. **Anti-conversion ending** — the page terminates at THE SUMP with no footer, no CTA, no stat counters, no pricing; the "contents" UI is a scattered goblin hoard with hand-drawn arrows, not a uniform gallery. Chosen seed/style: **goblincore earthy chaos shop** (`aesthetic: goblincore, layout: organic-flow, typography: serif-revival, palette: forest-green, patterns: path-draw-svg, imagery: line-illustration, motifs: crystalline, tone: mysterious-moody`). Avoided patterns from frequency analysis: `hand-drawn` (95%), `glassmorphism` (85%), `photography` (98%), `card-grid` (93%), `full-bleed`/`centered` heroes, `warm`+`gradient` blanket palette, `cursor-follow` (89%), `spring`/`magnetic` bouncy interactions, `mono` typography monoculture, and `organic-blobs` imagery.