# Design Language for mystery.boo ## Aesthetics and Tone mystery.boo is the after-hours desk of a **paranormal cold-case examiner** — a person whose job is to file, cross-reference, and *un-solve* things that were closed too early. The whole site behaves like a single sheet of carbon-copy case paper laid on a cold steel examiner's table under one swinging interrogation lamp. The mood is **forensic noir crossed with a faint, unprovable haunting**: not jump-scares, not skulls, not cobwebs — just the specific dread of a manila folder that is one page heavier than it was yesterday, and a typewriter line that finishes itself when you look away. The aesthetic seed is documented as: ***aesthetic: surreal + dark-academia + victorian-ornate, layout: single-column dossier, typography: tech-mono + serif-revival, palette: cool-grays / oxidized-evidence, patterns: typewriter-effect + path-draw-svg, imagery: redacted-document, motifs: filing-cabinet + faint-apparition, tone: mysterious-moody***. This deliberately stays inside the **9% mysterious-moody** tone and the **25% terminal** / **12% surreal** aesthetic bands, and **refuses** the corpus's dominant warm-gradient-photography-cardgrid defaults entirely. Tone words: hushed, meticulous, slightly unwell, deadpan. The examiner never raises their voice. The *site* is the one that whispers — through animation, never through copy. Copy stays bone-dry, bureaucratic, present-tense ("Item logged. Item still here. Item now describes the person reading it."). The "boo" of the TLD is treated as **the sound of a polite ghost, not a Halloween one** — it appears exactly once, as a faint watermark, and is never explained. ## Layout Motifs and Structure Reject card-grids, hero-dominant blocks, bento boxes, and dashboards. The page is **one continuous vertical dossier** — a single 720px-wide column of "filed pages" stacked on the examiner's table, scrolled like flipping through a folder top to bottom. - **The Lamp Rail (fixed):** a thin vertical line pinned to the left margin with a small filled circle that travels down it as you scroll — the swinging interrogation lamp seen edge-on. It is the *only* navigation. Six notches on the rail = six dossier sections. Hovering a notch fades in a typewritten section name 14px to its right; it retracts on mouse-out. No top nav, no hamburger, no logo lockup, no footer menu. - **Filed Pages:** each section is a faux-paper sheet (`max-width: 720px`, off-grey stock, 1px hairline border, a single staple-dot in the top-left corner rendered as two tiny diagonal SVG strokes). Pages overlap their neighbors by ~24px with a 4px offset rotation alternating `-0.4deg / +0.3deg` so the stack reads as *handled*, not designed. - **The Margin Column:** to the right of each page, in the 80px gutter, float **examiner's marginalia** — sideways-set mono annotations, a rubber-stamp date, a paperclip drawn as a single continuous SVG path. These are decorative and asymmetric on purpose; they never line up between sections. - **Negative space is "the rest of the table":** generous cold-grey emptiness around the 720px column, with a faint circular vignette of warm lamplight centered on whichever page is in view (the only warmth allowed, and it's about 6% opacity). - **No section is a "feature block."** Sections are: 00 Intake, 01 The File, 02 Items In Custody, 03 Witness (you), 04 The Page That Wasn't There, 05 Disposition. Each is a *document type*, not a marketing slot. Composition rule: everything is **left-aligned to the page's text column** like a real typed report — ragged right, never justified, never centered headlines. ## Typography and Palette **Type system — Google Fonts only:** - **Body / report face — `Special Elite`** (Google Fonts): a battered typewriter face with uneven ink weight. Used for ALL running text, headings, captions, marginalia. Set at `17px / 1.7`, letter-spacing `0.01em`. This is the carbon-copy voice. - **System / evidence-tag face — `IBM Plex Mono`** (Google Fonts, weights 400 & 500): used only for metadata strings — case numbers, timestamps, item IDs, the Lamp Rail notch labels, the redaction-bar overlays. Tracked out `0.08em`, often `font-size: 12px`, often UPPERCASE. - **Display accent — `IM Fell English SC`** (Google Fonts): a worn 17th-century small-caps revival. Used *sparingly* — only for the single-word section sigils ("INTAKE", "CUSTODY") that sit half-faded behind each page header at ~280px and 7% opacity, like a department seal pressed too hard. This is the victorian-ornate/dark-academia thread, kept to a whisper. **Palette — cool-grays + oxidized evidence (no warm gradients, no neon):** - `#1B1D1E` — **table iron** (page background, deepest ink) - `#2A2D2E` — **shadowed steel** (vignette edges, rail track) - `#C9C7BE` — **carbon paper** (the filed-page stock) - `#E8E6DD` — **fresh sheet** (the page currently in lamplight) - `#8A8A82` — **graphite** (secondary text, marginalia) - `#5C5E5A` — **filing-cabinet green-grey** (rules, hairlines, staple strokes) - `#9A2B1E` — **stamp oxide** (the ONE accent: rubber-stamp ink, the redaction "RE-OPENED" mark, the travelling lamp dot) — used on less than 3% of any viewport - `#6E7C6A` — **patina** (a faint sickly green used only on the apparition layer and the "Page That Wasn't There") - `#F4F1E6` at 6% — **lamplight wash** (the radial vignette) Contrast is intentionally low and dusty between greys; the oxide red and the patina green are the only saturated notes, and they are rationed like evidence. ## Imagery and Motifs No photography. No stock. Everything is drawn in SVG or built in CSS so it reads as *document artifact*, not illustration. - **Redaction bars:** flat `#1B1D1E` rectangles laid over lines of text, with a 1px `#5C5E5A` border, slightly rotated (`±0.6deg`). On hover they DON'T reveal the text — they reveal a *different*, worse line of text underneath (e.g., "[name withheld]" → "the name is yours"). Used as the signature interaction. - **The Lamp:** a single hanging-lamp glyph at the very top — a thin SVG cord, a conical shade, a soft `radial-gradient` pool on the page. The cord visibly sways `±2deg` on a slow 9s ease, and the lamplight vignette drifts with it. - **Filing-cabinet motif:** section transitions look like a drawer sliding — a horizontal `#5C5E5A` rule with two small handle-circles, and a faint "drawer label" in IBM Plex Mono. - **Faint apparition:** on sections 04 and 05 only, a `#6E7C6A` figure — just a coat-and-hat silhouette as a single low-opacity (4–8%) SVG path — sits *behind* the page, never moving while the page moves, so it appears to "stay" as you scroll past. Never acknowledged in copy. - **Examiner's hand artifacts:** paperclips (one continuous bezier path), a rubber stamp ("EVIDENCE / mystery.boo / RE-OPENED" in a circle, oxide red, rotated 12°, slightly blotchy via SVG filter), a coffee-ring (single thin `#5C5E5A` ellipse, broken), pencil ticks in margins. - **The "boo" watermark:** appears exactly once, on section 05, as `IM Fell English SC` lowercase "boo." at ~340px, 4% opacity, *upside down*, in the bottom margin. No caption. Ever. - **Item cards (NOT a card-grid):** "Items In Custody" is a vertical list of evidence-tag rows — each a hairline-ruled line with a string-tied tag SVG on the left, item ID in mono, description in Special Elite. They stack; they never form a grid. ## Prompts for Implementation Build as **one HTML file, one CSS file, one ES module** — no framework, no build step, no service worker. The experience is a ~75-second scroll through a six-section cold-case folder under a swinging lamp. It is a **narrative document, not a landing page**. **Explicitly DO NOT include:** any CTA button, pricing block, plan tiers, stats grid / counters, testimonials, logo wall, signup/email capture, contact form, FAQ accordion, newsletter, chat widget, cookie banner, "trusted by" row, or feature-comparison table. If the layout starts to look like a SaaS page, it is wrong. **Storytelling spine (six filed pages, vertical scroll, typewriter-driven reveals):** 1. **00 — Intake.** Page fades up under the lamp. The case header types itself character-by-character (`typewriter-effect`): `CASE No. ████ — STATUS: RE-OPENED`. The redaction bar over `████` is the first hover target. Below, three dry intake lines type in on scroll-trigger, each with a 220ms stagger and the faint *clack* of nothing (no audio — implied by a 1px text-shift jitter on each typed glyph). 2. **01 — The File.** Body of the report. Long-form, present-tense, bureaucratic. As the user scrolls, individual nouns get *retroactively redacted* — a `#1B1D1E` bar wipes left-to-right over a word that was already visible (`path-draw-svg` style clip animation). Hovering a redaction swaps in a more personal, more unsettling line. This section carries the actual "what is this site" message, half-hidden. 3. **02 — Items In Custody.** Vertical evidence list. Each tag row draws its string (an SVG path "ties" itself, ~600ms) when it enters the viewport, then the item ID types in. No images of items — only their tags and clinical one-line descriptions. Last item's description is blank, with a mono note: `[ pending — item not yet collected ]`. 4. **03 — Witness (you).** The page addresses the reader as a deposed witness. Their scroll position is described back to them in the margin in mono (`SUBJECT has read to line 47`). One sentence updates live with the current time. Deadpan, never cute. 5. **04 — The Page That Wasn't There.** A page that animates in *differently* — it doesn't fade, it "is suddenly already there" (0ms appearance, but the pages above it shift down 1px as if making room, retroactively). The patina-green apparition path sits behind it, fixed. Text is sparser, more spaced, more wrong. A coffee-ring SVG ellipse draws itself slowly. 6. **05 — Disposition.** Closing page. The stamp SVG presses down (scale 1.08 → 1.0 with a tiny rotation settle, oxide red, one blotchy filter pass): `RE-OPENED — DO NOT FILE`. The upside-down "boo." watermark sits in the bottom margin. The lamp cord gives one last 2° sway and the lamplight vignette dims 1 stop. End. No footer links — just a hairline rule and a mono string: `END OF FILE — mystery.boo — folder remains open`. **Motion language:** - Primary motion is **typewriter reveal** (per-glyph, with sub-pixel jitter) and **clip-path wipes** for redaction bars and drawn SVG paths (string-ties, paperclips, coffee-rings, the stamp outline). - The Lamp Rail dot moves with scroll via a single `requestAnimationFrame` lerp (subtle ease-out, ~0.12 factor) — NOT a magnetic/cursor-follow effect. - The lamp cord + lamplight vignette do a slow, continuous `±2deg` / drift loop (9s, `ease-in-out`), independent of scroll — the room's only "breathing." - Apparition layers are **scroll-pinned, not parallax** — they hold absolutely still in the document while their host page scrolls, so the *stillness* is the effect. - Respect `prefers-reduced-motion`: typewriter reveals become instant, cord stops swaying, redaction hover-swaps still work (they're informational). - Absolutely no cursor-trail, no tilt-3D card flips, no spring-bounce entrances, no parallax depth layers — those are the corpus clichés this design exists to avoid. **Performance/accessibility:** out of scope per instructions — prioritize the artifact feeling. Still: redaction-swap text must be real DOM text (so the "worse line" is selectable), and the Lamp Rail notches must be real anchor links. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **It's a document, not a page.** The entire site is one carbon-copy case folder scrolled top to bottom — no hero, no cards, no grid, no dashboard, no bento. This sidesteps `card-grid` (90% of corpus), `full-bleed` hero (88%), `centered` headline blocks (84%), and every CTA/pricing/stats convention at once. The closest neighbors in the corpus are still SaaS-shaped under the skin; this one has no marketing skeleton at all. 2. **Redaction-as-interaction.** The signature hover doesn't *reveal* hidden text — it *replaces* visible text with a worse version. Hover normally exposes; here it incriminates. No other design uses redaction bars as the core interaction, and the "the swapped line is about *you*" twist is unique to this file. 3. **Stillness as motion.** The apparition layers are scroll-*pinned* — they refuse to move while everything else does. In a corpus drowning in parallax (92%) and cursor-follow (89%), the spookiest effect here is the *absence* of motion in one layer. Plus the only ambient loop is a 9s lamp-cord sway, not a particle field. 4. **Palette refusal.** Cool table-iron greys + oxidized-evidence accents (one rationed `#9A2B1E`, one sickly `#6E7C6A`) — a deliberate rejection of the corpus's near-universal warm gradients (98% warm, 95% gradient). No gradient mesh, no neon, no glassmorphism, no photography. 5. **Typeface casting against type.** `Special Elite` typewriter for *all* body copy (not just an accent), `IBM Plex Mono` only for forensic metadata, `IM Fell English SC` reduced to a 7%-opacity department-seal whisper. The victorian-ornate / dark-academia threads are present but starved — the opposite of how ornate faces usually get used. **Chosen seed/style:** *aesthetic: surreal + dark-academia + victorian-ornate, layout: single-column dossier, typography: tech-mono + serif-revival, palette: cool-grays / oxidized-evidence, patterns: typewriter-effect + path-draw-svg, imagery: redacted-document, motifs: filing-cabinet + faint-apparition, tone: mysterious-moody* (derived from the "vintage newspaper layout" seed family in seeds.json, reinterpreted as a forensic cold-case folder). **Avoided patterns from frequency analysis:** hand-drawn aesthetic (96%), glassmorphism (78%), photography imagery (98%), warm/gradient palette (98%/95%), card-grid + full-bleed + centered layouts (90/88/84%), parallax (92%), cursor-follow (89%), spring (85%), magnetic (80%), tilt-3d (27%), bento-box, dashboard, hero-dominant. **Leaned into underused bands:** mysterious-moody tone (9%), terminal (25%) / surreal (5%) aesthetics, single-column (17%), typewriter-effect (12%), path-draw-svg (39%), mono typography used as the *body* face rather than the accent.