# Design Language for mysterious.boo ## Aesthetics and Tone mysterious.boo is a **surreal dreamscape promo for a thing that refuses to name itself** — a single-screen vignette that behaves like the half-second after you wake from a dream you can almost still see. The `.boo` ghost-pun is taken literally but never cutely: this is not Halloween, it is the *uncanny* — a soft, warm-lit room where the furniture is wrong, where a doorway opens onto a corridor that opens onto the same room, where a hand reaches up out of a still pond made of bedsheets. The tone is **dreamy-ethereal layered over a quiet dread you can't justify** — Magritte's deadpan, Remedios Varo's alchemical interiors, the painted backdrops of *Last Year at Marienbad*, the melting clocks but rendered in honeyed afternoon light rather than desert glare. Nothing jumps out. The "scare" of `.boo` is the slow realization that the scene has been gently rearranging itself behind your scroll. Copy is sparse, declarative, and slightly off — captions like *"the room you are remembering does not exist yet"* or *"keep going. it is fine. nothing is following you."* The whole page is a promotion, but it never says *for what* — that withholding **is** the product. ## Layout Motifs and Structure The page is a **vertical sequence of full-viewport "dream rooms"** — five immersive scenes stacked in a single column, each one occupying exactly 100vh, joined not by hard cuts but by **morph-transitions where the floor of one room becomes the ceiling of the next**. There is no conventional header, no nav bar, no footer — instead a thin **"dream-thread"** runs down the left margin: a hand-drawn wavering vertical line (SVG path) that the scroll position travels along like a bead, occasionally knotting, occasionally splitting into two threads and rejoining. Within each room the composition is **deliberately impossible**: a single vanishing point that doesn't agree with the horizon, objects that cast shadows in two directions, a window-frame floating with no wall around it. Negative space is treated as *fog* — large soft-edged voids where the eye expects content and finds only graded warm haze. On narrow screens the rooms keep their 100vh height and the dream-thread moves to a 2px hairline; the impossible geometry simplifies to single floating objects on haze, never collapsing into a normal stacked layout. ## Typography and Palette **Type system (Google Fonts only):** - **`Fraunces`** (variable, used at optical sizes 9–144, weights 300–600, with the *soft* and *wonk* axes pushed toward their expressive extremes) — every headline, every room title, every drop-cap. Fraunces' wobbling serifs and slightly drunk italics read as *handwriting from a dream* — confident but unstable. Room titles are set huge (clamp 3rem–9rem), low-contrast against the haze, letter-spacing slightly negative, often half-occluded by a floating object. - **`Spectral`** (300 italic and 400 roman) — the sparse caption sentences and the single paragraph of body copy per room. Spectral's calm, screen-tuned serif gives the *off* sentences an air of being matter-of-factly true. Captions set at 1.0625rem, generous 1.7 leading, max 38ch, italic for anything that is "the dream speaking." - **`Spline Sans Mono`** (400) — used *only* for the page's one diegetic UI element: a tiny ticking timestamp in the corner that counts in a unit that isn't seconds (`0.00 dream-minutes elapsed`). Mono here = the one piece of "machinery" visible inside the dream. **Palette — "honeyed-neutral haze with a wrongness underneath":** - `#F4E9D8` — *bonelight*: the dominant warm parchment haze, the air of every room - `#E7D3B3` — *afternoon dust*: secondary haze, soft shadows on the parchment - `#C9A36A` — *amber varnish*: midtones, the warm light pouring from impossible windows - `#7A5C3E` — *walnut shadow*: deep furniture shadows, the dream-thread line, body text on light - `#2B2118` — *closed-eye dark*: the near-black used sparingly for the deepest doorway voids and headline strokes - `#A7B6A1` — *dishwater sage*: the single cool note — the color of the "pond made of bedsheets," used for exactly one element per room so the warmth never feels safe - `#D98C6A` — *wrong-blush*: a muted clay-coral accent for the one impossible object per scene (the floating hand, the upside-down candle) — warm but slightly feverish No pure white, no pure black, no saturated primaries. Everything sits inside a film of warm grain. ## Imagery and Motifs **Imagery is custom-illustration only** — flat-painted, slightly grainy SVG/Canvas scenes with no photography and no glossy 3D. The visual register is **gouache illustration with hand-painted gradients**, every shape carrying a soft deckled edge and a fine film-grain overlay (animated, ~12fps, very low opacity). Recurring motifs across the five rooms: - **The reaching hand** — a single open hand emerging from an unexpected surface (a pond, a wall, a slice of bread). Appears once per room, always at a different scale, always in `wrong-blush`. It never grabs anything. - **The recursive doorway** — an open door that frames the previous room, shrunk and re-lit, Droste-style, two or three levels deep before dissolving into haze. - **The floating window-frame** — an empty wooden window sash hovering with no wall, light pouring through it onto the floor where there shouldn't be any. - **The shed object** — a familiar domestic thing made strange: a melting key, an upside-down candle whose flame points down, a clock with a single hand that the cursor drags, a chair growing one impossibly long leg, a glass of water with the water shaped like a small calm animal. - **The dream-thread** — the wavering left-margin line; it ties the whole document together and is the only "navigation." - **Grain & breath** — the entire page very slowly "breathes": a 14-second sine-wave scale (1.0 → 1.008 → 1.0) applied to each room's background, imperceptible per-frame, deeply felt over time. ## Prompts for Implementation Build mysterious.boo as a **single HTML page, one CSS file, one ES module** — no framework, no build step, no analytics, no fonts beyond the three Google fonts above. The page is a five-room surreal dreamscape the visitor *falls through*; it promotes something it never identifies. **There is NO call-to-action, NO pricing block, NO stat-grid, NO testimonial row, NO feature comparison, NO logo wall, NO email capture, NO newsletter, NO cookie banner, NO chatbot, NO FAQ accordion, NO contact form, NO "as seen in".** If the design seems to want a button, it gets a *door* instead — and the door leads to the next room, not off-site. **Storytelling spine — the five rooms, in scroll order:** 1. **`THE ROOM YOU ARE REMEMBERING`** — opens mid-scene: warm empty interior, a floating window-frame, light on a floor with no source. Drop-cap intro in Fraunces. Caption (Spectral italic): *"you have been here. the furniture disagrees."* The dream-thread starts here, beaded to scroll. 2. **`THE POND MADE OF BEDSHEETS`** — the floor of room 1 morphs into a still sage-colored "pond" of rumpled fabric; the reaching hand breaks the surface in `wrong-blush`. Cursor near the hand makes the surface ripple (cheap SVG turbulence displacement, throttled). Caption: *"keep going. it is fine. nothing is following you."* 3. **`THE CORRIDOR THAT IS ALSO HERE`** — the recursive doorway: scrolling pushes the camera "into" a door that frames a smaller copy of room 1, then room 2, Droste-nested. A subtle parallax between the nested layers. Timestamp in `Spline Sans Mono` appears bottom-right: *"0.00 dream-minutes elapsed"* and starts ticking in not-seconds. 4. **`THE OBJECT THAT WANTS YOUR HAND`** — a single impossible domestic object centered on haze: a clock with one hand the user can *drag* (pointer-driven rotation, with spring/elastic settle on release); dragging it past 12 briefly reveals a sixth room in the gaps that isn't really there, then it's gone. Caption: *"time is a suggestion in here. you are doing great."* 5. **`THE ROOM YOU ARE REMEMBERING (AGAIN)`** — identical to room 1 but the window-frame is now where the door was, and the door is now where the window was, and the caption has changed: *"the room you are remembering does not exist yet. thank you for visiting it."* The dream-thread terminates in a small open loop, not an arrowhead. **Motion & technique:** - Scroll is the only timeline. Use `IntersectionObserver` + `requestAnimationFrame`; pin each room with `position: sticky; top: 0; height: 100vh` and crossfade/morph between them by interpolating on scroll progress. - **Morph transitions:** between rooms, animate a full-bleed SVG `clipPath` / mask so the floor of the leaving room peels up to become the ceiling of the arriving room. No hard cuts anywhere. - **The breathing background:** every room background gets a ~14s sine `scale()` of ±0.8% via rAF — set it and forget it; never expose controls. - **Grain:** a fixed full-screen `` redrawing low-opacity noise at ~12fps, `mix-blend-mode: overlay`. One canvas, whole page. - **The dream-thread:** an SVG path down the left margin; compute total length, and on scroll move a small `` along it via `getPointAtLength()`. The path itself wavers (its `d` animated very slowly between two hand-drawn variants). - **Cursor reactivity** is gentle and rare — ripples on the bedsheet pond, the draggable clock hand. No cursor-trail, no magnetic buttons, no spotlight-follows-mouse. The dream barely notices you. - Honor `prefers-reduced-motion`: freeze the breathing, the grain animation, the thread waver, and the auto-morph — let the rooms simply crossfade on scroll. The *content* of the surreal scenes stays; only the perpetual motion stops. - Everything stays inside the honeyed palette; never let a UI affordance break the painted-haze illusion with a system-blue link or a default focus ring — restyle focus as a soft amber halo. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **A promo that withholds its product as the entire concept.** The corpus is full of CTA-driven, stat-driven, "here's-what-we-do" pages; mysterious.boo never states what it advertises — the unresolved curiosity *is* the deliverable. The five rooms are the pitch and the pitch is "you'll want to come back to remember it." 2. **Surreal as warm-and-deadpan, not dark-glitchy.** "Surreal" sits at ~5% in the corpus and where it appears it tends toward neon, glitch, vaporwave, or horror. This design takes the Magritte/Varo route: honeyed afternoon light, gouache illustration, impossible-but-calm geometry — dread by quiet rearrangement, not by jump-scares. It also leans on `mysterious-moody` tone (~9%) but inverts its usual midnight-blue palette into honeyed-neutral haze. 3. **The dream-thread as the only navigation.** No nav bar, no menu, no scroll-to-top — wayfinding is a single hand-drawn wavering SVG line down the left margin with a bead riding the scroll. Knots and splits in the line are the only "section markers." 4. **"Breathing" architecture.** Every room's background runs a perpetual ±0.8% sine-scale — sub-perceptual per frame, unmistakable over thirty seconds. The page is alive in a way you feel before you see. 5. **Floor-becomes-ceiling morph transitions.** Instead of fades or slides between sections, the boundary between rooms is a clip-path morph where one room's floor peels up into the next room's ceiling — the building is non-Euclidean by construction. 6. **A diegetic clock that controls time, not a scroll progress bar.** The lone mono-type UI element is an in-world timestamp counting "dream-minutes," and room 4 lets you physically drag a clock hand — interaction folded into the fiction rather than bolted on as chrome. **Frequency analysis honored:** Avoids the corpus-saturated patterns — no glassmorphism (78%), no hand-drawn-as-primary-aesthetic (96%), no card-grid (90%), no photography (98%), no cursor-follow gimmick (89%), no magnetic buttons (80%), no tilt-3d. Prefers underused territory: surreal aesthetic (5%), custom-illustration imagery (4%), immersive-scroll layout (11%), morph (13%), dreamy-ethereal tone (5%), honeyed-neutral palette (4%), Fraunces variable display type (rare in corpus). **Chosen seed:** *surreal dreamscape promo* — aesthetic: surreal, layout: immersive-scroll, typography: expressive-variable (Fraunces) + serif-revival (Spectral), palette: honeyed-neutral, patterns: morph + elastic, imagery: custom-illustration, motifs: floating-elements, tone: dreamy-ethereal / mysterious-moody.