# Design Language for underdark.science ## Aesthetics and Tone underdark.science is a **playful subterranean curio-cabinet** — a portfolio of impossible experiments displayed as if they were specimens in the basement laboratory of a 1970s natural-history museum that has been hit by a power surge from the year 2099. The aesthetic word for it is **"arcade vitrine"**: every piece of work is a small, lit cabinet on a dark velvet wall, each cabinet glowing with its own ultra-saturated **dopamine-neon** label, each tilted slightly off-axis like a row of pinball machines that someone has nudged with a hip. The mood is **elegant-sophisticated** the way a maitre d' at a haunted dinner club is elegant — perfect posture, immaculate grammar, but the menu is in a font that keeps swapping itself out and the soup is glowing. The visual North Star is the imagined intersection of three things: (1) an old W. T. Copeland & Sons pharmaceutical apothecary, with its hand-lettered labels and imperfect glass jars; (2) a Famicom / TurboGrafx-16 box-art illustration, with its electric magentas and acid yellows and the way the airbrush feathers off into deep cyan space; (3) the page-margin doodles of a researcher who has been awake for thirty hours. There is no slick "studio website" blandness. Nothing is fully aligned. The grid is honored, then tweaked by 1.5 degrees per row. Everything has the faint smell of ozone and library dust. The tone language is a deliberate paradox: an octogenarian art-restorer narrates each project in **elegant-sophisticated** prose ("permit me to introduce specimen 04…"), while behind her the labels are blinking, jittering, glitching, and humming. The total effect should be **playful**, but the kind of playful that a Borges story is playful — there is real intelligence underneath the wink. No emoji. No exclamation points. The wit is in the typography, the layout slips, and the way a hover state will, occasionally, emit an entirely different word than the one you clicked on. ## Layout Motifs and Structure The dominant structural motif is a **portfolio-grid** of vitrines, but rendered specifically as a **tilted display-case wall** — not the standard 3-column equal-card grid. The page is built on a 12-column base grid that has been deliberately broken: each project card spans either 4, 5, or 7 columns (never the same width twice in a row), each card is rotated between -2.5° and +2.5°, and each card sits on its own miniature "shelf" — a 2px under-bar of neon glow that doubles as the bottom of a museum vitrine. Vertical structure (top → bottom): - **Specimen Hall (Hero, 100vh):** A near-black canvas (#0a0612) covered in a barely-visible parchment-noise SVG. Centered slightly off-axis is the wordmark "underdark.science" set in eclectic-hybrid type (see Typography), with the period rendered as a glowing neon-pink dot that pulses on a 2.4-second cycle. To the right of the wordmark, an isometric icon of a single empty vitrine (line-illustration, neon-cyan stroke, no fill) floats in a 3D wireframe. Below: a single sentence of dossier copy in oxidized gold serif italics. No CTA button. No nav bar. Scroll cue is a tiny, hand-drawn down-arrow that flickers with a 1-frame glitch every 6s. - **Index Drawer (Specimens 01–N):** A staggered portfolio-grid of project vitrines. Each card is its own small composition: top-left has a hand-stamped specimen number ("№ 04 / 17") in deep-purple monospace; the body of the card is an isometric-icon illustration of the project subject (a pixel-tilted server, a tilted potion bottle, a 2.5-D manuscript); the bottom of the card has a card-foot label in vintage Didone, with the project title set in a different display face per card to honor "eclectic-hybrid" — the cards do not share a single voice, only a single wall. - **Process Margin Notes:** A single full-bleed strip of dark velvet (#16091f) with the words "MARGINALIA / 余白" scrolling left at 12px/sec. Above the strip: three handwritten sticky-note callouts on tilted yellow rectangles, each containing a research aphorism in **Caveat** script. The tilt of each note is taken from the rotation of the card directly above it, creating a "the notes fell out of the cabinet" continuity. - **Selected Writings (Filed Drawer):** A two-column reading list using card-foot tabs reminiscent of an old card-catalog. Each entry is a single line — date, title, a 7-word abstract — typeset in mono with a faint scan-line glitch on hover. No images here; the contrast with the icon-rich grid above is deliberate. - **Colophon Vault (Footer):** A 3D isometric drawing of a single open file-drawer rendered in 3 line-weights of cyan, magenta, and chartreuse. To its right, four micro-columns of metadata: contact, RSS, GPG fingerprint, last-updated. The footer ends with a faint, full-width line of static-noise SVG that subtly animates at 0.3 opacity. Negative space rule: every card carries at least 24px of breathing room to its neighbors, and at least one card per viewport row has its margin doubled, creating a deliberate "missing tooth" in the grid. This hole is what keeps a portfolio-grid from feeling like a generic case-study site. ## Typography and Palette **Typography (all from Google Fonts, intentionally eclectic-hybrid — five faces, each with a job):** - **Display Wordmark:** "Bagel Fat One" (Google Fonts) — a chunky, almost-inflated display face with rounded outer contours and a single-line counterform. Used for the wordmark "underdark.science" at clamp(3.5rem, 9vw, 8.5rem), letter-spacing -0.04em, with the period replaced by a circular SVG that holds the neon-pink glow. The fat geometry channels arcade-cabinet signage without tipping into kitsch. - **Editorial Display:** "DM Serif Display" (Google Fonts) — high-contrast modern Didone, used for project titles inside vitrine cards at clamp(1.4rem, 2.4vw, 2rem). Italic where appropriate. This is the maitre-d' voice: refined, slightly haunted. - **Counterpoint Display (every 3rd card):** "Bungee Shade" (Google Fonts) — a dimensional retro signage face with built-in shadow. Used at smaller sizes (1.1rem, letter-spacing 0.06em) on every third card title only, to enforce the eclectic-hybrid premise without descending into chaos. - **Body Text:** "Spectral" (Google Fonts) at 1.05rem / 1.6 line-height. Optical sizing helps it stay readable on dark substrates. Italics handled by Spectral Italic, never synthesized. - **Mono / Specimen Numbers / Catalog Cards:** "JetBrains Mono" (Google Fonts) at 0.85rem with letter-spacing 0.04em. Specimen numbers use the small-caps figures. - **Marginalia / Sticky Notes:** "Caveat" (Google Fonts) — a casual hand-script that prevents the layout from feeling design-system-clean. Used only on the three callouts in the Marginalia strip and on hover-tooltips ("see also…"). Type-pairing rule: **never put more than three faces in a single visible viewport** even though the system has six total. The eclecticism is across the page, not within any single moment. **Palette (dopamine-neon on a deep substrate — minimum 7 hues):** - `#0a0612` — *Underdark Substrate*. The page background. Almost-black with a 4% violet tint so it never reads as flat #000. - `#16091f` — *Velvet Shelf*. Used for the marginalia strip and the inside of vitrine cards. One shade lighter than the substrate, still deeply dark. - `#ff2b8a` — *Dopamine Magenta*. The signature "alive" pink. Used for the wordmark dot, primary hover glows, and the under-bar of every other vitrine. - `#fff04d` — *Acid Lemon*. Used for sticky-note backgrounds (at 92% opacity), small accent rules, and the "open drawer" highlight in the footer. - `#3df0d4` — *Lab Cyan*. Isometric-icon stroke color, scroll-cue arrow, every third card's under-bar. - `#c084fc` — *Phosphor Lilac*. Body-text emphasis color (used sparingly for `` and link-hover), and the rotation glow under the marginalia strip. - `#e8c976` — *Oxidized Gold*. The single warm "old paper" tone — used for the hero subtitle italics, footer column headings, and divider rules in the writings section. This is the vintage anchor that keeps the neon from looking generic. - `#f4eeff` — *Specimen Slip*. The off-white foreground used for body type. Never pure white — has a 3% violet bias to belong to the palette. Contrast: every neon hue is paired against the substrate at ≥8:1 (AAA). Body type sits on the substrate at #f4eeff for 14.6:1. ## Imagery and Motifs - **Isometric-icon Vitrines (signature element):** Every project card is illustrated by a **2.5-D isometric line drawing** at exactly 30°/30° projection. Stroke weights are tiered: 2px primary structure (Lab Cyan), 1px accents (Phosphor Lilac), 0.5px hatching (Oxidized Gold). No fills. Subjects are catalogued: a tilted server with one drawer pulled out, a stoppered Erlenmeyer flask with a glowing meniscus, a manuscript with the corner peeling up, an open file-drawer with index cards visible. Every icon is hand-positioned so its vanishing point lines up with the card's rotation — when the card is tilted, the icon "stays level" with the world, producing a subtle uncanny effect. - **Glitch Stratum (atmosphere, not chrome):** A single global glitch budget — the page may glitch in **at most one place at a time**, never simultaneously. Glitches manifest as: (a) the wordmark briefly RGB-channel-splits on a 11s irregular cadence (1-frame, then back); (b) on hover of any card title, the title performs a 90ms scanline-displacement using `clip-path` and a duplicated text-shadow in Dopamine Magenta + Lab Cyan; (c) a single character within the running body text — chosen at random per page-load — replaces itself with a Unicode lookalike (e.g. Latin "e" → Cyrillic "е") for the lifetime of the session. Visible only to readers who notice. Never used as decoration; always as a tell. - **Vintage Specimen Stamps:** Each card carries a hand-drawn rectangular rubber-stamp graphic in oxidized gold at the top corner, reading "EX LIBRIS / UNDERDARK / 19—" with the year hand-corrected with a strikethrough. The stamp uses a slightly distressed SVG with 4% noise and a 2° rotation independent of the card. This is the elegant-sophisticated counterweight to the dopamine palette. - **Marginalia Sticky Notes:** Three Caveat-script callouts on tilted #fff04d rectangles, each with a 4px Phosphor Lilac shadow and a torn-edge SVG mask along one side. Content is short: "specimen survived re-grounding", "do not feed after midnight", "cf. note 17". This is the only place handwriting appears. - **Card-Catalog Footer Drawer:** The footer's centerpiece is a single isometric line-illustration of an open card-catalog drawer, with three index cards visible inside. On hover, a CSS-only animation slides the topmost card up by 8px and reveals a fourth card with the GPG fingerprint. No JS required. - **Scanline Texture (very subtle):** A 0.04-opacity full-page SVG of horizontal 1px scan-lines at 4px spacing, fixed-position, screen-blend. Provides CRT mood without legibility cost. - **No Photography. No Stock. No Generic Illustration:** Imagery is exclusively isometric line-icons + SVG glyphs + typographic specimens. Photography would break the vitrine premise. ## Prompts for Implementation - The HTML/CSS/JS implementation must privilege **storytelling over conversion**. There is no pricing block, no "Get Started" CTA, no testimonial slider, no stat-grid, no feature-tile array. The site is a museum exhibit, not a product page. - Render the hero **before** any JS executes — the wordmark, the isometric vitrine, and the dossier sentence are inert SVG/HTML and load as a single paint. Glitch effects and the marginalia ticker are enhancements, never required for legibility. - Use **`prefers-reduced-motion: reduce`** to disable all glitch animations, the marginalia scroll, and the wordmark RGB-split. The Unicode-lookalike substitution is also disabled in this mode. - Cards animate in on initial scroll with a per-card 30ms-staggered `transform: translateY(12px) rotate()` reveal, using `IntersectionObserver`. The persisted-tilt is generated once per card on first paint and stored in `dataset.tilt` so resize never re-randomizes the wall. - The Unicode-lookalike substitution runs **once on DOMContentLoaded** with a fixed PRNG seeded by `new Date().toDateString()` so the same character is "wrong" all day and SEO crawlers see consistent text. - All neon glows are achieved with stacked `text-shadow` / `box-shadow` (no `filter: blur` on text) — this keeps subpixel rendering crisp on dark backgrounds. - The portfolio-grid is built with CSS Grid using `grid-template-columns: repeat(12, 1fr)` and per-card `grid-column: span N` overrides; do **not** use a JS masonry library. The deliberate height-mismatch is part of the wall. - Isometric icons live as a single inline SVG sprite at the bottom of ``; cards reference them with `` etc. This keeps the page to one HTTP request post-fonts. - Avoid: hero CTA buttons, pricing cards, "Trusted by" logo strips, stat counters with animated numbers, full-width carousels, hamburger nav (the page is a single scroll), dark-mode toggle (the page is intrinsically dark — there is no light variant), photography, gradient-mesh backgrounds, glassmorphism, drop-shadow on cards (use the under-bar glow instead). ## Uniqueness Notes - **Differentiator 1 — Tilted Vitrine Grid:** Rather than the ubiquitous 73%-frequency card-grid with equal cells, every card has a persisted micro-rotation (-2.5° to +2.5°) and an irregular column span (4/5/7), producing a "museum wall, slightly knocked askew" rather than a generic portfolio. The portfolio-grid pattern itself sits at only 1% in the corpus, and no current site combines it with persistent per-card tilt + variable span. - **Differentiator 2 — Glitch Budget of One:** Glitch (8% in corpus) is almost universally deployed as constant decorative noise. Here it is rationed: at most one glitch event animates at any given moment, and the running body text contains exactly one Unicode-lookalike substitution per page-load. The effect is a site that feels haunted rather than busy. - **Differentiator 3 — Five-Face Eclectic-Hybrid Typography with a Three-Per-Viewport Cap:** Eclectic-hybrid sits at 0% in the corpus. The site uses six display/body faces (Bagel Fat One, DM Serif Display, Bungee Shade, Spectral, JetBrains Mono, Caveat) but enforces a hard rule that no single viewport shows more than three. Eclecticism is paginated, not crowded. - **Differentiator 4 — Isometric-Icon Vitrines Replace All Photography:** Imagery isometric-icons sits at 0% in the corpus, against photography at 82%. Every "image" on the site is a 30°/30° isometric line drawing rendered as inline SVG. No photography, no stock, no generic illustration. - **Differentiator 5 — Dopamine-Neon on a Velvet Substrate, Anchored by Oxidized Gold:** Dopamine palette is at 3%, dopamine-neon paired with oxidized gold and phosphor lilac is essentially unique. The gold anchors the neon to a vintage register so the page reads as "elegant-sophisticated 19th-century specimen cabinet wired up to a 1992 arcade", not "generic synthwave". Chosen seed: aesthetic: playful, layout: portfolio-grid, typography: eclectic-hybrid, palette: dopamine-neon, patterns: glitch, imagery: isometric-icons, motifs: vintage, tone: elegant-sophisticated. Avoided patterns from frequency analysis: photography (82%, replaced with isometric-icons), card-grid as default (73%, replaced with tilted-portfolio-grid), warm palette (84%, substituted with dopamine-neon-on-violet), centered layout (66%, substituted with off-axis hero + asymmetric vitrines), gradient palette (60%, replaced with flat dopamine fields + single oxidized-gold anchor), photography-driven hero (replaced with inline SVG vitrine), hero-CTA-button pattern (replaced with single italic dossier sentence), conventional sans-serif body (replaced with Spectral serif on dark for editorial weight).