# Design Language for sister.quest ## Aesthetics and Tone sister.quest is a **surreal dreamscape** rendered as a half-remembered fable about two sisters who walk into the same forest from opposite edges and spend the whole story trying to find each other. The site is built like the inside of that forest at the exact minute the sky cannot decide whether it is dusk or dawn — everything is doubled, mirrored, slightly out of register, the way a memory of a sibling is never one image but two overlaid: the child she was and the person she became. The tone is **dreamy-ethereal** with an undercurrent of **mysterious-moody** — not gloomy, but liminal. Think of the visual logic of a Leonora Carrington painting crossed with the soft impossible architecture of a Rebecca Sugar storyboard: staircases that loop, two moons low on the horizon, a deer made of folded paper, a hand reaching out of a pond that is also a mirror. Nothing on the page behaves quite like physics says it should. Elements have **twins** — a heading and its faint reversed echo three pixels off; a photograph and its rippled reflection that moves when you don't look directly at it. This is explicitly **not** a SaaS landing page, not a directory, not a "quest platform." It is a single immersive narrative: you arrive, you are told there are two of you, and you descend through eight *Chambers* of a dream-forest, each one a tableau, until at the end the two halves of the page literally fold together. There is no signup, no pricing, no testimonial, no stat-grid, no FAQ accordion, no "get started" button. The only interaction is moving deeper. ## Layout Motifs and Structure **Mirror-spread layout.** Every Chamber is a `100vh+` full-bleed panel, but the governing motif is the **bilateral fold**: each panel is internally composed around an invisible vertical seam down the center of the viewport. Content on the left is answered — not duplicated, *answered* — by content on the right, the way the two sisters answer each other. Sometimes the seam is honored (text mirrors); sometimes it is violated on purpose (one sister's side bleeds across into the other's, signaling the chambers where they almost touch). - **Chamber I — The Two Edges.** Split-screen: left half is a forest at dawn (cool, blue-violet), right half the same forest at dusk (warm amber). A single line of text straddles the seam: "There were two of you. You started here. And here." Scrolling pulls the two halves slightly apart, revealing a thin luminous gap between them — the path. - **Chambers II–VII — interior dream-rooms.** Each is an asymmetric, off-register tableau: a large hand-drawn / collaged scene occupying ~70% of the panel, a column of soft serif narration occupying ~30%, but the narration column drifts position chamber to chamber (left, then right, then center, then floating diagonally) so the reader never settles. Decorative **paper-folded animals** (deer, fox, crane, hare) sit at the panel margins as scroll-anchored sentinels. - **Chamber VIII — The Fold.** As you scroll the final panel, the left and right halves of the entire page rotate inward on a Y-axis hinge at the center seam and meet — the two forests becoming one image, the two sisters' silhouettes overlapping into a single figure with a doubled outline. The narration resolves to one centered line. No nav bar. No logo lockup. No footer with links. A single faint **vertical progress thread** runs down the center seam — a glowing filament, like a spider-silk, that lengthens as you descend; it is the only "UI." Generous **ma negative space** between tableaux: each chamber opens and closes with ~30vh of near-empty fog-colored field so the dream can breathe. ## Typography and Palette **Typefaces (all Google Fonts, all real and available):** - **Cormorant Garamond** — the body / narration voice. Variable, used at 400 and 500-italic. Set ~1.125rem, line-height 1.85, generous letter-spacing (0.01em). Its slightly attenuated, faintly archaic serifs read like a fairy tale typeset by someone half asleep. Italic is used for the *sister's* interjected lines. - **Fraunces** — display headings (the Chamber titles). Used at the high-`SOFT`/high-`opsz` settings (the wonky, almost wobbly optical-size axis), weight 300–400, often in italic. Fraunces' "old style" quirk gives titles a hand-cut, dream-logic instability. Chamber titles are oversized (clamp to ~12vw) and always rendered *twice*: once solid, once as a 6%-opacity mirrored echo offset 4px right and 2px down. - **Della Respira** — used sparingly for the single inscribed lines that straddle the seam (the "There were two of you" type moments). An engraved-looking serif with thin contrast; feels carved into the air. Letter-spaced wide (0.18em), uppercase, small. **Palette — the dusk/dawn double sky:** - `#1B1A2E` — *Forest Dark*. The deep base behind everything; near-black indigo, the color of the canopy at the in-between hour. - `#2E2B4A` — *Twilight Slate*. Mid-tone panel washes, the "fog field" between chambers when on the dark side. - `#7C6FB0` — *Dream Violet*. The cool sister's side; mist, shadows, the dawn edge. - `#E8B26A` — *Dusk Amber*. The warm sister's side; lantern-light, the dusk edge, the glow of the seam thread. - `#D98B8B` — *Mirror Rose*. The blush where the two skies bleed into each other; used for accents, the doubled silhouette outline. - `#EFE6D8` — *Paper Cream*. The folded-animal paper, the narration text on dark fields, the resolved final line. - `#9AB4A0` — *Sage Mist*. Muted green for foliage strokes and the rare moments of "real" forest color. Gradients are used as **soft meshes**, never hard stops: dawn-violet melting into dusk-amber across the seam, with mirror-rose pooled in the middle. The whole site is **muted** and slightly **grainy-textured** — a fine film grain overlay (~7% opacity) sits above everything so it reads like a photograph of a dream rather than a screen. ## Imagery and Motifs - **Collage / mixed-media dream tableaux.** Each Chamber's central scene is a hand-assembled collage: torn-paper forests, a cut-out vintage photograph of a girl mid-stride, an ink-drawn deer, a watercolor moon — layered with visible edges and slight drop-shadows so the seams *show*. Two of everything where it matters: two moons, two paths, two pairs of footprints crossing. - **Folded-paper animals.** Recurring origami sentinels — deer (Chamber II), fox (III), crane (V), hare (VII) — rendered as flat geometric paper forms in Paper Cream with single fold-line shadows. They subtly turn their heads to follow the scroll position. They are the forest "watching" the sisters. - **The mirror-pond.** A recurring element: a still water surface that is also a mirror that is also a doorway. Reflections in it are always *wrong* — reflecting a different chamber, or the other sister, or the reader's own scroll-shadow. - **The silk thread.** The center-seam progress filament — thin, luminous Dusk Amber, faintly vibrating, occasionally branching into a doubled strand and rejoining. At Chamber VIII it ties itself into a single knot. - **Doubled outlines.** Headings, silhouettes, and key shapes carry a faint offset echo — never a literal duplicate, always slightly transformed (mirrored, rotated 1°, color-shifted to mirror-rose). The whole page has a soft *double-exposure* feeling. - **No icons, no stock UI glyphs, no arrows-in-circles.** Wayfinding is the silk thread and the descending fog only. ## Prompts for Implementation Build sister.quest as **one long full-bleed HTML document** — eight `
` chambers, top-to-bottom scroll, no SPA router, no modals, no nav chrome, no hamburger menu. The reader descends through a dream; the page is a *passage*, not an app. Bias every decision toward **atmosphere over information** and **a single slow vertical descent over branching navigation**. No CTA, no pricing block, no testimonial carousel, no stat-grid, no FAQ, no email capture, no "subscribe." **Structure & CSS:** - Use CSS Grid with a central seam: `grid-template-columns: 1fr 1fr;` on each chamber, then break it deliberately in chambers where the sisters "touch" (`grid-column: 1 / -1` content that bleeds across). - The dawn/dusk meshes: layered `radial-gradient`s in violet, amber, and rose, animated very slowly (`@keyframes drift` over 40s, `prefers-reduced-motion` respected — fall back to static mesh). - Grain overlay: a fixed full-viewport `::after` with an inline SVG `feTurbulence` noise at ~7% opacity, `mix-blend-mode: overlay`. - Chamber titles: render twice in markup (or via `::before` with `content: attr(data-title)`), the echo layer at `opacity: .06; transform: translate(4px, 2px) scaleX(-1);` — *mirrored*, not just offset. - Generous spacing: ~30vh fog-field padding at the top and bottom of each chamber so tableaux never crowd. **JavaScript / animation (storytelling-first):** - **Scroll-triggered reveals** (IntersectionObserver): each collage layer in a chamber fades and drifts up in *staggered* sequence — paper animal first, then forest, then the cut-out sister, then the narration line by line. Soft `cubic-bezier` ease, no bounce. - **Parallax** on the collage layers: back layers move slower, the folded-animal sentinels move *opposite* to scroll a few pixels (they're watching you pass). - **The seam-pull** on Chamber I: as you scroll into it, the two halves `translateX` apart by ~24px, the luminous path-gap widening between them, then easing back as you leave. - **Folded-animal head-turn**: each sentinel's `rotate` is mapped to scroll progress within its chamber (a gentle ±8°), via `requestAnimationFrame`, throttled. - **The mirror-pond ripple**: a subtle CSS/SVG displacement on the reflection that idles, and intensifies for ~1.2s when that chamber enters view, then settles — "something moved in the water." - **Chamber VIII — The Fold**: the climactic moment. Scroll-scrub a `rotateY` hinge: left half rotates from `0deg` toward `+38deg` and right half toward `-38deg` about the center seam (`transform-origin` at the seam, `perspective` on the parent), the two forest images visually converging; simultaneously the two sister silhouettes `translateX` toward center and their opacities crossfade into a single doubled-outline figure; the silk thread contracts into a knot (an SVG `stroke-dasharray` / path morph). End on one centered line in Della Respira: e.g. "Two of you went in. The forest only ever held one." Then ~40vh of quiet Paper Cream fog. Nothing after. No links. - All motion `prefers-reduced-motion`-aware: collapse parallax and the fold to simple cross-fades; the story still reads. **Voice of the copy** (for whoever writes it): second person, present tense, fable cadence, short lines. The "sister" speaks back in italics, never in quotes. Never explain the metaphor. Let the reader decide whether the second sister is real, a memory, a self, or the reader. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **The bilateral-fold layout as the entire structural metaphor.** No other site in the corpus is built around an invisible vertical center-seam that content "answers" across, and certainly none whose climax is a literal `rotateY` hinge folding the two halves of the page into one image. Split-screen exists elsewhere as a static device; here it is the *plot*. 2. **Doubled, mirrored typography.** Every Chamber title carries a `scaleX(-1)` 6%-opacity echo — a *mirrored* ghost, not the usual offset-shadow. The whole site has a deliberate double-exposure quality (doubled silhouettes, twin moons, the branching-and-rejoining silk thread) that reads as the visual signature of "two sisters." 3. **The folded-paper animal sentinels that turn to watch the scroll.** Scroll-mapped head-rotation on origami creatures at the panel margins is a bespoke interaction not present in other designs; they make the forest a character. 4. **No UI at all except a vibrating silk thread down the seam.** No nav, no logo, no footer, no buttons — wayfinding is the lengthening, occasionally-branching luminous filament and the descending fog. A radical-restraint move distinct from the card-grid/CTA-heavy norm. 5. **Surreal-dreamscape register applied to a "quest" domain without any game/RPG/leaderboard tropes.** It refuses the obvious reading of "quest" entirely. **Chosen seed / style:** `surreal dreamscape promo` — expressed as `aesthetic: surreal, layout: split-screen (bilateral-fold), typography: serif-revival (Cormorant Garamond + Fraunces + Della Respira), palette: muted dusk/dawn double-sky (Dream Violet / Dusk Amber / Mirror Rose), patterns: scroll-triggered + parallax + stagger + morph, imagery: collage / mixed-media + grain-overlay, motifs: flowing-curves + star-celestial (twin moons) + floating-elements, tone: dreamy-ethereal with mysterious-moody undertone`. **Avoided patterns from frequency analysis:** Skipped the corpus-saturated **hand-drawn (94%)** and **glassmorphism (84%)** aesthetics; avoided **card-grid (92%)** and **centered (80%)** layouts in favor of split-screen/bilateral-fold (rare); avoided **photography (98%)** as primary imagery, using collage/mixed-media instead; avoided **cursor-follow (89%)** and **magnetic (78%)** interactions entirely — there is no cursor-reactive chrome here. Leaned into underused **surreal (7%)**, **split-screen (2%)**, **mixed-media (2%)**, and **dreamy-ethereal (7%)**.