# Design Language for underdark.xyz ## Aesthetics and Tone underdark.xyz is a **maximalist subterranean almanac** — an over-stuffed scrapbook-broadsheet pulled from a printer's drawer in a basement archive that has been quietly accumulating since 1973. The aesthetic phrase for it is **"dust-jacket maximalism"**: every square inch of viewport is occupied by labelled artefacts, tickertape annotations, hatched diagrams, and clipped ephemera, yet the overall mood is **elegant-sophisticated** rather than chaotic — the way a master archivist's wall is dense but never noisy. The tone is hushed, considered, and quietly authoritative, like a curator giving a tour by candlelight; nothing shouts, but everything earns its place. The site rejects modern SaaS minimalism completely. Where 73% of the corpus reaches for the empty hero and the centred CTA, underdark.xyz stages a **packed front-page** in the manner of a 1970s Whole Earth catalogue, an antique stamp-album page, and a Swiss-printed concert poster from Basel — collaged, then restrained by a single muted ink palette. Imagery comes pre-creased, pre-foxed, pre-thumb-printed. The voice is that of a librarian who has seen too much: dry, exact, occasionally wry, never marketing. This is **not** a product launch; it is a printed object that happens to live in a browser, an artefact of the lower archive surfacing into the lit room above. ## Layout Motifs and Structure The dominant structural motif is a **deliberate masonry** — a CSS Grid (`grid-template-columns: repeat(12, 1fr); grid-auto-rows: 12px; gap: 0`) where each "tile" spans an irregular `grid-row: span N` between 8 and 42 rows and `grid-column: span M` between 3 and 9 columns. Tiles never align to a single horizontal baseline; the eye is invited to rummage. Between tiles run **0.5px hairline rules** in `#3a342c` (Cellar Ink) so that the masonry reads as a single bound spread rather than a deck of cards. There is **no whitespace breathing room** in the SaaS sense; the negative space is instead the matte parchment ground (`#e8e1d3`) showing through small interstitial gaps where the masonry refuses to fit cleanly. The page resolves into seven labelled **strata** stacked top-to-bottom — Overburden, Topsoil, Loam, Bedrock, Aquifer, Mantle, Core — each a distinct masonry block separated by a 1px hairline horizontal rule and a small uppercase stratum-label set in the left margin (`writing-mode: vertical-rl`). Within each stratum, tiles carry: an artefact illustration, a catalogue number (`UD-XYZ-0034`), a 2–4 line caption in the running serif, and a small footnote in monospace. Tiles do not have rounded corners; they do not have shadows; they have a single 0.5px border in `#3a342c` and a faint internal `inset 0 0 0 4px #e8e1d3` letterpress margin. A **scale-hover** interaction is the only animation: hovering any tile triggers `transform: scale(1.04); transition: transform 280ms cubic-bezier(0.2, 0.6, 0.2, 1); z-index: 10;` and reveals a previously hidden full caption beneath the artefact, while the tile's hairline border thickens to 1px. The cursor becomes a custom 16×16 SVG of a magnifier in `#3a342c`. No other tile in the masonry shifts; the hovered tile lifts above its neighbours like a pressed leaf raised from a folio. Above the masonry, a **fixed top broadsheet-bar** (`position: sticky; top: 0; height: 56px;`) carries the wordmark in grotesque-neo, the current stratum-name (updated by `IntersectionObserver` as the reader scrolls), and a single thin `` bar showing depth-traversed expressed in metres (`0 m → 412 m`). At the bottom of the page is a **colophon-strip** spanning the full width, set in 11px monospace, listing the printer's marks, fictional plate numbers, and the `content_hash` rendered as a serial number. ## Typography and Palette **Typography (all from Google Fonts; the seed mandates grotesque-neo, paired with a serif and a mono for archival texture):** - **Wordmark and stratum-labels:** **"Space Grotesk"** at weight 500, `letter-spacing: -0.015em`, `text-transform: uppercase`, set at `clamp(2.4rem, 6vw, 4.4rem)` for the wordmark and `0.72rem` for stratum-labels. Space Grotesk is the **grotesque-neo** anchor — its slightly humanist g, its open apertures, and its precisely cut terminals give the broadsheet-bar its unmistakable post-Helvetica voice without being generic. - **Tile captions and running prose:** **"Cormorant Garamond"** at weight 400, occasional weight 500 italic for emphasis, `font-size: 15px`, `line-height: 1.5`, `letter-spacing: 0.005em`. The thin Garamond hairlines counter the heavy grotesque, suggesting old book-plate letterpress beneath the modern signage. - **Catalogue numbers, footnotes, colophon, and the `` numerals:** **"JetBrains Mono"** at weight 400, `font-size: 11px`, `letter-spacing: 0.04em`, `text-transform: uppercase`. JetBrains Mono is the stamped-archive register-mark; it tells the reader these are accessioned items, not opinions. - **Pull-quotes within tiles (rare, max one per stratum):** **"Fraunces"** weight 600 with `font-variation-settings: "SOFT" 50, "WONK" 1`, set at 22px italic. Fraunces' opsz axis at small size produces a hand-cut woodblock italic that lifts the quote above the running Garamond without breaking the muted register. **Palette — eight muted ink-and-parchment values, all earth-temperature, never saturated:** - `#e8e1d3` — **Foxed Parchment** — page ground; the colour of a 1970s art book endpaper after fifty years of low light. - `#d4c8b3` — **Aged Vellum** — secondary tile fill, `~10%` of tiles, used for caption sub-zones. - `#3a342c` — **Cellar Ink** — primary text and hairline rules; a deep brown-black, never pure black. - `#5e3a2a` — **Burnt Sienna Stamp** — accent for catalogue numbers and the cursor magnifier; the colour of a librarian's stamp dried decades ago. - `#7a8268` — **Lichen Olive** — used only for the `` fill and the four-of-seven-strata that appear "below the water table"; the underdark green seen through cellar glass. - `#b89968` — **Brass Patina** — used only for the wordmark's ligature dot and the colophon plate-numbers; one element per viewport maximum. - `#8a4a3a` — **Iron Oxide** — strictly reserved for `:hover` border-thickening and the active stratum-label; it appears for under 600ms of any interaction. - `#1a1612` — **Type-Set Black** — used only on the colophon strip's background, a 56px band that grounds the page like the iron base of a press. The palette is intentionally **muted** — saturation never exceeds 28% in HSL — to keep the maximalism scholarly rather than carnival. ## Imagery and Motifs - **Gradient-mesh as substrate (never as ornament):** A single full-page CSS `background-image: radial-gradient(at 22% 18%, #d4c8b3 0%, transparent 38%), radial-gradient(at 78% 64%, #7a8268 0%, transparent 42%), radial-gradient(at 48% 92%, #b89968 0%, transparent 32%);` sits **beneath** the masonry tiles at `opacity: 0.32`. The mesh is not a hero; it is the **paper grain** — a slow oxidation pattern that drifts under the entire archive. Combined with a `background-blend-mode: multiply` and a subtle 240×240 SVG noise overlay at `opacity: 0.04`, the mesh produces the foxed-paper warmth that makes a digital page feel pressed. - **Retro-patterns library (seven distinct, one per stratum):** Each stratum carries a unique tessellating SVG pattern as the inner background of one anchor tile per masonry block. The patterns are hand-drawn at 0.5px stroke in Cellar Ink on Foxed Parchment, tiled at 36×36px: - **Overburden:** Diagonal hatching, 7° from vertical, the universal symbol on a geologist's section drawing for "topsoil." - **Topsoil:** A 1970s Italian-textile **damier-tilted** check, 4×4px, off-axis by 15°. - **Loam:** Random-walk dotwork, 240 dots per tile, distributed by Poisson sampling — the look of a stippled botanical plate. - **Bedrock:** Brick coursing, 24×8px, with one out-of-line brick per tile (the "wonky brick" rule). - **Aquifer:** Horizontal wave-rule (`~~~`) at 12px wavelength, the cartographer's water-glyph. - **Mantle:** Concentric arc-rings, 6 per tile, fragments only — the look of a pressed-fern fossil. - **Core:** A pure pattern of vertical bars 1px wide at 4px pitch — the **moiré "type drawer"** evoking type-cases. - **Catalogue-illustrations (signature element):** Inside roughly 60% of tiles sits a small (max 240×240px) **archival line drawing** in 1.25px stroke Cellar Ink, no fills, with one accent pass in Burnt Sienna Stamp at 0.5px. Subjects are deliberately mundane and over-specific: a beetle preserved in resin, a brass key labelled "EAST CELLAR DOOR," a folded survey map with a coffee ring, a phonograph cylinder, a single mushroom (Mycena chlorophos) with a depth-tag, an eight-pointed iron compass-rose, a paperclip from the year 1974. Each illustration carries a tiny `(fig. 12)` caption-tag in JetBrains Mono. - **Marginalia ticker:** Down the right-hand 40px margin runs a vertical tickertape (`writing-mode: vertical-rl; animation: marginalia 180s linear infinite;`) of 200+ short field-notes ("…samples taken at 14:22, ph 6.2, no biota observed…") set in 9.5px JetBrains Mono in Cellar Ink at 60% opacity. It is the only motion on the page besides the hover scale and the progress bar — a low, slow, reading-room hum. - **Plate-numbers and printer's marks:** Every tile's bottom-right corner carries a 9px monospace plate-number in Brass Patina (`PL-XII / fig. 7`). Three "printer's marks" appear randomly across the masonry: a circle-with-cross (registration), an arrow inside a square (paper grain), and a diamond stack (colour-bar) — each rendered 8×8px in Cellar Ink, the kind of mark you only notice on the third reading. ## Prompts for Implementation - The HTML must privilege **storytelling and immersive reading** over conversion. The page is a printed broadsheet rendered on glass; there is no sign-up, no pricing, no testimonial slider, no stat-grid, no feature-tile array, and no "Get Started" CTA. The reader either descends through the seven strata or they close the tab — both are acceptable outcomes. - Render the hero (broadsheet-bar + first stratum's masonry) **before any JS executes**. Tiles, illustrations, retro-patterns, and the gradient-mesh substrate must all paint as inert HTML/SVG/CSS in the first frame. JS only enriches: stratum-detection, hover-scale (CSS would suffice but JS adds the caption-reveal + z-stacking), and the marginalia-ticker animation. - Implement the masonry with **CSS Grid using `grid-auto-rows` row spanning** — never with a JS masonry library. Decide each tile's row-span at server-render time (or in a build step) by hashing the catalogue number into the range [8, 42]. The masonry must therefore be **deterministic and reproducible** — a refresh produces the identical layout, the way a physical book's pages do. - Use `prefers-reduced-motion: reduce` to flatten everything: the hover scale becomes a 1px border-thickening only, the marginalia-ticker becomes static, the progress bar still updates because that is information rather than decoration. - Use a `:has()`-based stratum-active state: `body:has(#aquifer:target)` shifts the broadsheet-bar's stratum-label and tints its bottom hairline to Lichen Olive. No JS for navigation state. - Favicon is a 32×32 SVG of a single Cellar-Ink octagonal stamp containing the letters "UD" in Space Grotesk; the stamp is rendered with one micro-rotation per session-load using a `Math.random()`-seeded `--stamp-rotate` CSS variable, so the stamp leans differently each visit — a single, costless trace of the librarian. - Image budget is exactly **zero raster files**. All catalogue-illustrations are inline SVG, hand-drawn at the dev-stage and committed as `` definitions referenced by ``. This keeps the page under 80KB compressed and ensures every artefact prints at any zoom. Total page weight target: ≤ 110KB across all assets including fonts (subset Latin-only). - Animation budget: only **scale-hover** (the seed's mandated interaction) and the marginalia-ticker. No parallax, no scroll-jacking, no fade-in-on-scroll. The page is silent paper and should behave like silent paper. - Print stylesheet (`@media print`) must produce a usable two-column broadsheet print, dropping the broadsheet-bar and rendering the gradient-mesh as a flat Foxed Parchment fill — because of course this site looks correct on paper. ## Uniqueness Notes 1. **Seven labelled geological strata as IA:** The information architecture is not "sections" or "tabs" or "chapters" but **seven named depths** (Overburden → Core), with a live-updating depth-progress in metres in the broadsheet-bar. No site in the corpus organises a masonry under a depth-themed cartography. This gives underdark.xyz an IA shape that is at once ornamental and load-bearing — readers know exactly where they are and how far they have descended at every scroll-tick. 2. **Per-stratum retro-patterns library, hand-drawn:** Seven distinct tessellating SVG patterns — each rooted in actual cartographic, geological, or printer's vocabulary — appear once per stratum as anchor-tile backgrounds. The pattern `retro-patterns` registers at **0%** in the corpus, making this the single most underused seed-pattern in the registry; underdark.xyz makes it the spine of its motif system rather than a token reference. 3. **Maximalist masonry held by muted ink rather than colour:** The corpus shows `maximalist` at 3% and `masonry` at 6%, and the typical maximalist site reaches for saturation to handle the visual density. underdark.xyz instead uses a **muted ≤28%-saturation earth-palette** (a palette frequency of 25% but here applied with eight specific archival inks rather than the usual greige) so the page can carry catalogue-density without shouting — an inversion of the usual maximalist contract. 4. **Grotesque-neo + Cormorant + JetBrains Mono trio:** The grotesque-neo typography pattern sits at only 1% in the corpus. Pairing Space Grotesk against Cormorant Garamond's hairlines and JetBrains Mono's stamped numerals creates a three-voice typographic system specifically engineered for an archive — signage / running text / register — rather than the more common two-voice display+body pairing. 5. **Scale-hover as the only ornamental motion:** With `scale-hover` at 1% in the corpus, underdark.xyz makes it the singular interactive motif. Combined with z-index lift, hairline-thickening, and caption-reveal, the gesture becomes the digital analogue of physically picking up a card from a flat-file drawer — a complete metaphor delivered in 280ms. 6. **Gradient-mesh demoted to paper grain:** Where 60% of the corpus uses gradients as the visual hero, underdark.xyz pushes its gradient-mesh **beneath** the page at 0.32 opacity and blends it with multiply, converting the most over-used decorative pattern into substrate — paper, not poster. This is a deliberate inversion of the corpus's dominant gradient idiom. 7. **Avoidance of overused patterns:** The design explicitly rejects the **gradient hero (60%)**, the **sidebar layout (21%)**, and the **dashboard (15%)** patterns — none appear. The closest gestures (the broadsheet-bar, the marginalia ticker) are deliberately small and read as printed apparatus, not as UI chrome. **Chosen seed:** aesthetic: maximalist, layout: masonry, typography: grotesque-neo, palette: muted, patterns: scale-hover, imagery: gradient-mesh, motifs: retro-patterns, tone: elegant-sophisticated.