# Design Language for lov.st ## Aesthetics and Tone lov.st is a **surreal dreamscape rendered as a love letter that fell asleep mid-sentence** — a site that behaves like the inside of a Magritte painting if Magritte had been asked to illustrate the word "longing." The domain name itself is a fragment: *lov* without its *e*, *st* without its anchor. We lean into that incompleteness. This is a place where doors open onto skies, where a single key floats in a room with no walls, where the horizon is folded like a paper note and tucked into a pocket. The aesthetic seed is **surreal dreamscape promo** (surreal sits at roughly 2% in the corpus aesthetic frequency — this site claims that near-empty room rather than crowding into the 97% hand-drawn / 72% glassmorphism majority). The tone is **dreamy-ethereal crossed with mysterious-moody** — never saccharine, never a Valentine's card. lov.st speaks the way you remember a dream at 11am: confident about details that make no sense, vague about the things that mattered. Copy is sparse, present-tense, slightly off-kilter: *"A staircase here led somewhere. You are sure of it."* Nothing is sold. Nothing is explained. The visitor drifts. Mood references: René Magritte's *The Lovers* (the veiled kiss), Dorothea Tanning's *Eine Kleine Nachtmusik* (the impossible corridor, the enormous sunflower), Leonora Carrington's pale dreamscape menageries, the deadpan-impossible photography of Erik Johansson, and the soft chalk-blue of a theatre cyclorama lit for "dawn." The whole site should feel like it is taking place inside a snow globe filled not with snow but with warm dust at golden hour. ## Layout Motifs and Structure The composition is **organic-flow with layered-depth** — explicitly NOT card-grid (89% of corpus), NOT dashboard (34%), NOT bento-box. There is no grid. Sections do not stack like bricks; they **dissolve into one another** the way one dream-scene becomes the next. The page is a single vertical drift through six "rooms," each room a full-bleed stage with a horizon line that never sits where you expect it. - **The Tilted Horizon.** Every room has exactly one horizon line — a thin chalk-pale rule — but it is never horizontal. It rakes at a different gentle angle in each room (−4°, +7°, −11°, +2°, −6°, +9°), so the whole scroll feels like a slow, pleasant vertigo. The horizon is the only consistent structural element; everything else floats relative to it. - **Floating objects, not blocks.** Content lives on **floating elements** — a door, a key, a folded letter, a window, a single chair, a hand — each positioned with negative space around it (ma-negative-space sensibility). Text appears *beside* these objects in small italic clusters, never in a content column. No object is ever fully resolved against a flat background; each casts a long soft shadow onto the room's "floor." - **The Pocket.** A recurring spatial device: at the bottom of three rooms the floor folds upward into a shallow "pocket" — a curved clip-path void — and the next room's first object appears to be tucked into it. Scrolling pulls the object up *out* of the pocket. This is the site's transition grammar. - **No navigation chrome.** No header bar, no menu, no breadcrumb. A single faint compass-rose mark sits fixed in the lower-left corner; its needle slowly rotates to point "back" — toward the top of the page — and is the only way to return. minimal-navigation taken to its logical edge. - **Depth layers.** Three parallax planes per room: a far cyclorama (the sky/wall), a mid plane (the floating object), and a near plane (drifting dust motes and occasional foreground silhouettes that slide past, slightly out of focus). ## Typography and Palette **Fonts — Google Fonts only. Three voices, each with a job, never blended:** - **Display / Room titles — *Fraunces* (Variable, opsz 144, wght 300–400, SOFT 100, ital 1)** — set huge (clamp 3.5rem → 8rem), light weight, soft axis maxed so serifs go pillowy, always italic. Room titles are single dream-fragments: *"the door"*, *"a window, mostly"*, *"someone's hand"*. They drift in lowercase and sit at the room's tilted angle. - **Body / wandering captions — *Newsreader* (Variable, ital, wght 300/400, opsz 18)** — a low-contrast literary serif with a soft italic. Used for the small off-kilter caption clusters that float beside objects. Line length never exceeds 34 characters; captions wrap like handwriting in a margin. - **Accent / the compass + tiny labels — *Spectral SC* (small caps, wght 300)** — used only for the compass-rose label, a single footer line, and the occasional spectral whisper of a word that appears letter-by-letter then fades. Letter-spaced wide (0.3em), nearly transparent. **Palette — a "dawn cyclorama" scheme. Deliberately NOT the 98% warm / 96% gradient default; this is a cool, chalky, slightly faded set with one warm interruption (the golden dust):** - `#E8E4DC` — **Plaster Dawn** — the dominant cyclorama / page background; a warm-grey paper-white, like a theatre backdrop seen in daylight. - `#A9BBC4` — **Cyclorama Blue** — the "sky" inside doors and windows; a flat chalk-blue, the color of painted theatrical infinity. - `#6E7E86` — **Slate Veil** — mid-tone for object outlines, the tilted horizon rules, and the soft long shadows. - `#2B2F33` — **Ink at Dusk** — near-black for the display type and the few hard silhouettes; never pure black. - `#D8A24A` — **Golden Dust** — the single warm note; used only for the drifting dust motes, the keyhole's glow, and the compass needle. Appears as glints, never fills. - `#C9B7A6` — **Faded Sepia** — for paper objects (the folded letter), aged-photo edges, and the "pocket" fold's inner curve. - `#8E6B7E` — **Bruised Mauve** — a quiet bruise-purple for the veil over *The Lovers*-style faces, and for the deepest shadow gradients at room transitions. Gradients exist but are *atmospheric, never decorative*: only soft radial vignettes (a warm glow behind a keyhole, a cool pool of light on a floor). No two-stop button gradients, no mesh gradients. ## Imagery and Motifs **Everything is built imagery — inline SVG and CSS, no photography (rejecting the 98% photography default), no 3D renders, no stock illustration.** The visual library is a small set of *impossible objects* drawn in a flat, slightly naive vector style with hairline Slate Veil outlines and soft layered shadows. **The Six Dream Objects (one per room, each appears once, each "wrong" in one specific way):** 1. **The Standing Door** — a single door frame standing in open space; through it, not a wall, but Cyclorama Blue sky with one slow cloud. The door is ajar exactly 18°. Its long shadow falls *toward* the viewer, impossibly, regardless of where the light seems to come from. 2. **The Floating Key** — an oversized brass-line key suspended at eye level, rotating once every 40 seconds. A faint Golden Dust glow leaks from its bow as if the keyhole were *inside* the key. No lock anywhere. 3. **The Folded Letter** — a sheet of Faded Sepia paper folded into a small rectangle, but the fold lines glow faintly and the visible fragment of handwriting *rewrites itself* in Newsreader italic every time it scrolls into view — never the same sentence twice. 4. **The Window, Mostly** — a window with curtains, but the curtains are on the *outside*, billowing toward the viewer, and what they reveal is the same Plaster Dawn room you are already in — a recursion. A second, smaller window floats inside the first. 5. **The Veiled Pair** — two head silhouettes (Ink at Dusk) facing each other, each wrapped in a Bruised Mauve veil rendered as soft draped SVG paths, lips meeting through cloth — the Magritte *Lovers* gesture. Between them, suspended, a single Golden Dust mote that pulses like a held breath. 6. **Someone's Hand** — a single open hand, palm up, far larger than scale allows, resting on the tilted horizon line itself as if the horizon were a shelf. On the palm: a tiny version of the Standing Door from Room 1. The loop closes. **Recurring atmospheric motifs:** drifting Golden Dust motes (slow, gravity-less, ~30 per room, parallax-layered); long soft object shadows that ignore physics; the Pocket fold; out-of-focus foreground silhouettes (a passing chair, a bird, a coat-stand) that slide across once per room and are never explained; a faint film-grain overlay (very low opacity, animated noise) to keep everything looking like memory rather than render. ## Prompts for Implementation Build lov.st as **a single-route, vertically-scrolled drift through six dream-rooms** — one HTML file, one CSS file, one JS module. The visitor experience is roughly 90 seconds of slow, voluntary falling. There is **no CTA, no pricing block, no stat grid, no testimonial row, no email signup, no contact form, no feature list**. There is only the room sequence and the slowly-rotating compass. **Storytelling structure (six rooms, vertical scroll, dissolve transitions):** 1. **the door** — fade in from Plaster Dawn white. The Standing Door drifts up out of nothing. Caption beside it, letter-by-letter in Spectral SC, then settling into Newsreader italic: *"A door here led somewhere. You are sure of it."* Scroll begins; the door's sky-rectangle slowly fills the viewport as you approach, and you scroll *through* the doorway into — 2. **a window, mostly** — wait, no: order the rooms as a gentle non-sequitur. Room 2 is **the floating key**. The key rotates; Golden Dust leaks. Caption: *"It opens nothing. You hold it anyway."* The horizon rakes the opposite way from Room 1, so the transition feels like turning your head. 3. **the letter that won't stay folded** — the Folded Letter. On enter, the handwriting fragment rewrites (use a small pool of ~12 dream-sentences, pick at random each time it enters viewport, typewriter-in then fade). Caption: *"You read it before. It said something else then."* Floor folds into the first Pocket here. 4. **a window, mostly** — the recursive Window. Curtains billow toward the viewer on a slow CSS loop. The inner-window recursion is done with a scaled-down clone, slightly desaturated, parallaxing slower. Caption: *"Outside is the room you're in."* 5. **the veiled pair** — the Magritte Lovers gesture. This is the emotional fulcrum; slow everything down — dust motes drift slower, scroll-snap gently here, the held-breath mote pulses (scale 1 → 1.08 → 1 over 4s). Caption, very small: *"The kiss happens through the cloth. It still counts."* 6. **someone's hand** — the giant Hand resting on the horizon, the tiny Door on its palm. The loop reveals itself. Caption fades in: *"You've been here before. You'll be here again."* Below: a single Spectral SC footer line — *"lov.st — a place that is mostly missing"* — and the compass needle finally completes a full slow rotation and points up. Clicking the compass smooth-scrolls back to the top, where the door is waiting, ajar 18°. **Animation & interaction guidance:** - **Scroll-driven everything.** Use `IntersectionObserver` + `scroll`-progress to drive room reveals, parallax planes (3 per room), and the horizon-angle interpolation. The page should feel hand-cranked, not auto-playing. - **Cursor as a soft light, not a follower.** Instead of the corpus-default cursor-follow dot (88%), the cursor casts a faint warm radial glow (`radial-gradient`, mix-blend `soft-light`) onto whatever it passes — objects brighten slightly as the "light" crosses them. No visible cursor element; just the wash. - **Dust system.** A lightweight canvas or pure-CSS particle field of Golden Dust motes per room — slow drift, no collisions, slight parallax offset per layer, density ~25–35. - **The letter rewrite.** ~12 pre-written dream-fragments; on each viewport entry, fade out current, typewriter in a random new one in Newsreader italic. This is the only "interactive" surprise and it should feel like a small private hallucination. - **Reduced-motion:** if `prefers-reduced-motion`, freeze the drift — objects appear in place, dust holds still, transitions become 200ms cross-fades. The dream simply stops moving; it is still a dream. - **Grain & vignette overlays** sit above everything at very low opacity; the grain animates on a 1.5s steps loop. - **Type in motion:** room titles (Fraunces italic light) drift in from a 4% scale + 30px translate, settling with a long ease (1.2s cubic-bezier). Captions reveal word-by-word. ## Uniqueness Notes Differentiators from the corpus frequency analysis: 1. **Surreal-dreamscape as a structural grammar, not a texture.** Surreal aesthetic sits at ~2% in the corpus, and where it appears it's usually a "surreal collage" image treatment. lov.st makes surrealism the *layout logic itself* — tilted horizons, the Pocket fold transition, impossible shadows, the closing loop. The impossibility is load-bearing, not decorative. 2. **No photography, no hand-drawn, no glassmorphism.** Rejecting all three corpus giants at once: photography (98%), hand-drawn (97%), glassmorphism (72%). Every visual is a flat naive-vector "impossible object" with hairline outlines and physics-breaking shadows. 3. **A cool chalky "dawn cyclorama" palette against the 98%-warm / 96%-gradient default.** Plaster Dawn, Cyclorama Blue, Slate Veil — a faded theatrical backdrop scheme with exactly one warm note (Golden Dust) used only as glints. Gradients are atmospheric vignettes only; zero button/mesh gradients. 4. **Cursor-as-soft-light instead of cursor-follow dot.** 88% of the corpus uses a cursor-follow element; lov.st uses no visible cursor object — just a `soft-light` radial wash that "illuminates" objects, an interaction nobody else in the corpus does this way. 5. **organic-flow + layered-depth, zero card-grid / dashboard / bento.** Content floats as discrete dream-objects in negative space; there is no grid, no nav chrome, only a slowly-rotating compass-rose for return. 6. **A page that is "mostly missing" — leaning into the truncated domain name.** The copy, the incompleteness, the closing-loop self-reference all dramatize *lov.st* as a fragment. The site's concept is its own URL. Chosen seed/style: **surreal dreamscape promo** — *aesthetic: surreal, layout: organic-flow, typography: elegant-serif (Fraunces/Newsreader italic), palette: cool-grays + one warm glint, patterns: scroll-triggered + fade-reveal + morph, imagery: custom-illustration (impossible-object vector), motifs: floating-elements + flowing-curves, tone: dreamy-ethereal / mysterious-moody.* Avoided patterns referenced from frequency analysis: hand-drawn (97%), photography (98%), glassmorphism (72%), card-grid (89%), centered (86%), cursor-follow (88%), warm palette (98%), gradient palette (96%), parallax-as-only-trick — all consciously sidestepped or recontextualized above.