# Design Language for underdark.date ## Aesthetics and Tone underdark.date is a **luxury-premium** salon ledger from a forgotten subterranean court — a faded aristocratic registry of beings who only meet by appointment, deep below the surface. Imagine an heirloom velvet-bound book pulled from a vault beneath the earth: its pages oxidised to dusty ochre, its gilt worn to a whisper, its entries inked in a slow, deliberate hand. The aesthetic is **muted-vintage** opulence — restrained, dignified, suggestive of wealth measured in centuries rather than coins. The tone is rigorously **minimal**: no exclamations, no marketing register, no smiling emoji-equivalents. Words are placed sparingly on the page like single pearls on dark felt. Every interaction feels like turning a heavy page in a private archive — slow, intentional, observed by no one but the reader. Inspiration draws from antique apothecary cabinets, the Almanach de Gotha, midcentury hotel guest registers, embossed cigar-bar membership cards, and the way moonlight pools on aged brass plaques. Nothing here shouts. The site invites — once, quietly — and waits. ## Layout Motifs and Structure A **dashboard** of subterranean dossiers, but rendered as a noble's escritoire rather than a SaaS console. The viewport is divided by a 12-column muted-vintage grid (`grid-template-columns: repeat(12, 1fr)`) with `gap: 2rem` and `max-width: 1320px` framed by deep parchment-coloured margins. The top zone is a single wide panel (cols 1–12) presenting the salon's name in condensed letterforms, an enigmatic dateline, and one ledger entry of the evening. Below, four **floating-elements** dossier cards drift on the page (cols 1–3, 4–6, 7–9, 10–12) — each anchored by `position: relative` but offset by `transform: translateY(calc(var(--n) * -8px))` so they sit at uneven heights, evoking unframed portraits hung on a study wall. Each card is a small marbled rectangle with a thin gold-leaf rule (`border: 1px solid #8a7355`) and a barely-perceptible `box-shadow: 0 18px 40px -24px rgba(20, 14, 8, 0.55)` that lifts it from the page. A second band beneath the cards holds an **archive ledger** (cols 2–8) and a **whispered correspondence** column (cols 9–12). The ledger is a vertical list of past appointments rendered as numbered entries (No. 0411, No. 0412…) with right-aligned dates in small condensed numerals. The correspondence column is narrow, set in a single column of typewriter text that reveals one character at a time on viewport entry. A final lower band centers a **lone seal** — a generative motif spinning at 0.05 turns/second — followed by the colophon. There is no global navigation bar. Instead, three small ligature-marks float at the top right (`◇ ◈ ◆`) and act as anchors. Whitespace is treated as luxury good, not absence: vertical rhythm uses `--lh: 1.7` and section padding `clamp(5rem, 10vw, 9rem)` to give entries room to breathe. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / domain wordmark:** **"Oswald"** — Weight 300, `letter-spacing: 0.18em`, `text-transform: uppercase`, set at `clamp(2.4rem, 6.4vw, 4.6rem)`. A condensed sans with the slim verticality of an engraved theatre programme. - **Section headings:** **"Cormorant Garamond"** — Weight 500 italic, `letter-spacing: 0.02em`, set at `clamp(1.4rem, 2.4vw, 2.1rem)`. Provides a hairline serif counterpoint that suggests bookplate calligraphy. - **Body running text:** **"Cormorant Garamond"** — Weight 400, size `1.05rem`, line-height `1.75`, optical-sizing on. Reads like a printed memoir. - **Ledger numerals & metadata:** **"Barlow Condensed"** — Weight 300, `letter-spacing: 0.04em`, size `0.82rem`, uppercased for caption labels (`No.`, `Anno`, `Sigil`). - **Whispered correspondence column:** **"Special Elite"** — Weight 400, size `0.95rem`. A typewriter face whose uneven inking sits exactly inside the typewriter-effect reveal. **Palette (muted-vintage, eight tones — all hex):** - `#1a1410` — Tarnished Pitch (page background, deep below-ground brown-black, never pure black) - `#211b15` — Vault Umber (secondary panel background, used for dossier card surfaces) - `#2d2620` — Aged Calfskin (raised inner panels, ledger striping every 2nd row) - `#c9b896` — Faded Vellum (primary ink colour for body text — soft, never #fff) - `#a8956b` — Patina Brass (rules, dividers, ligature marks, small icons) - `#8a7355` — Tarnished Gilt (active links, focus state, subtle borders) - `#7a3838` — Sealed Wax (single accent colour, used only for the lone seal motif and 1–2 emphasis words per page) - `#6b6759` — Dust Grey (metadata, timestamps, tertiary text) The palette deliberately omits pure white, pure black, saturated blue, and any neon. All colours have been desaturated to <40% so the page reads like a sun-faded ribbon rather than a screen. ## Imagery and Motifs **Generative-art seal (centerpiece motif):** A single SVG sigil rendered into a 360px circular frame at the page's lower band. Each visitor sees a seal generated from a deterministic seed (`crypto.subtle.digest` of the date string) that produces 6–9 overlapping rotational arcs in `#a8956b` over a `#211b15` field. The arcs are drawn with `stroke-dasharray` so they appear "engraved." The seal rotates at `0.05 turns / 12s` via `animation: sigil-turn 240s linear infinite`. No two days share the same sigil — the artwork is a small daily souvenir of having visited. **Generative-art card backgrounds:** Each of the four floating dossier cards carries a subtle generative texture — a Perlin-noise-driven `` painted once at load with `globalAlpha: 0.04` in `#a8956b` over the card's `#211b15` ground. The texture mimics the irregular fibre of aged paper; it is too faint to read as decoration and reads instead as material. **Floating-elements composition:** Four card panels and the three navigation ligatures float independently, each given its own slow vertical drift via `@keyframes float-{n}` running 14–22s, displacing `translateY` by ±6px and `rotate` by ±0.4deg. The drift is desynchronised so the page never settles into a still composition; it breathes like dust catching torchlight in a motionless cellar. **Typewriter-effect correspondence:** The narrow right column ("Tonight's Letter") reveals its body one character per 38ms via a JS scroll-trigger when `IntersectionObserver` reports `intersectionRatio > 0.6`. A single block-cursor (`▮` in `#7a3838`) blinks at 530ms intervals at the head of the writing line. A faint `ding` SVG bell glyph appears at the end of each paragraph as a margin ornament. **Engraved rules and marginalia:** Section dividers are 1px `#a8956b` rules with a centered diamond ligature (`◆`) breaking the line. Ledger entries are prefixed by an italic No. and a hairline rule. Drop caps on first paragraphs are set in Cormorant Garamond at 4× line-height with `float: left` and `margin-right: 0.3em`. **No photographs, no stock illustration, no icon set.** The visual vocabulary is restricted to: generative SVG, hairline rules, ligature characters (`◇ ◈ ◆ § ¶`), and the typewriter cursor. This restraint is the design's central luxury signal. ## Prompts for Implementation Build as a **single, slow archive page** — not a marketing site, not a product dashboard, but a member's evening browsing of an archive. The page should load with a 700ms parchment fade-in (`@keyframes vellum-rise` lifting opacity 0 → 1 and `translateY(16px) → 0`) before any content settles. There is one viewport's worth of "above the fold" content — the wordmark, dateline, and tonight's single highlighted entry — and the rest unfurls only as the reader scrolls. Use a CSS custom-property design system: `--color-page`, `--color-vellum`, `--color-brass`, `--color-wax`, `--leading`, `--measure: 64ch`. All section padding, font sizes, and gaps derive from `clamp()` so the layout breathes from 360px phone screens to 1440px desktop without any media-query hacks. Implement the typewriter-effect with a small inline `