# Design Language for parallel.quest ## Aesthetics and Tone parallel.quest is the field journal of a *cartographer of forking paths* — a fictional bureau that maps the lives you almost lived. The premise: every choice you didn't make spawned a parallel self who did, and somewhere there is an atlas of them all. The site is that atlas, half-bound, water-stained, annotated in three hands. The governing aesthetic is **surreal** in the lineage of René Magritte's daylit impossibilities crossed with Borges's *Garden of Forking Paths* and the diagrammatic calm of a vintage astronomy chart — but rendered in a cool, dawn-before-rain palette rather than the warm sepia that saturates the corpus. Think: a single road that splits into seven, each branch leading into a different weather; a door standing in a wheat field opening onto a corridor; a staircase that is also a river. Nothing is loud. Nothing flashes. The mood is **dreamy-ethereal** and quietly **mysterious-moody** — the hush of standing at a crossroads at 5 a.m. with a map you can't quite read. The tone of voice is contemplative, second-person, and gently uncanny: it addresses *you*, the one who chose this branch, and speaks of the others with affectionate distance. No urgency. No selling. The reader is a wanderer being handed a lantern, not a customer being closed. ## Layout Motifs and Structure The page is an **immersive-scroll** descent organized as a **vertical timeline that keeps splitting** — a single trunk line runs down the center-left of the viewport (a hairline SVG path, ~1.5px, drawn as you scroll), and at five waypoints it *forks*: the trunk continues, but a ghosted branch peels off into the margin, carrying a "parallel" fragment that the reader can glance at but never fully enters. The composition is deliberately **asymmetric** and **layered-depth**: foreground text columns sit at ~52ch max-width and drift between left-third and right-third anchoring as the trunk meanders; behind them, full-bleed surreal vignettes occupy distinct z-planes that move at three parallax depths (far horizon ~0.15×, mid-object ~0.4×, near-foreground grain ~1×) — but the parallax is *slow and small*, never theme-park. **Section logic — seven "Crossings":** - **Crossing 0 — The Threshold.** A full-viewport hold: a single door standing open in an empty field under a split sky (one half clear, one half storm). The trunk line ignites from the doorway downward. One line of text, no nav. - **Crossings I–V — The Forks.** Each is min-100vh. Structure: a left-or-right anchored text passage (a short meditation on one kind of choice — *the city you didn't move to*, *the letter you didn't send*, *the name you almost had*), a central surreal tableau bleeding behind it, and a **margin ghost** — a faint, desaturated, slightly-rotated card showing the parallel outcome, pinned to the opposite edge, that gently *resolves into focus* when its waypoint scrolls past the viewport midline, then *blurs back* as it leaves. The ghost is never clickable; it is a thing glimpsed. - **Crossing VI — The Confluence.** All five branch lines that peeled away curve back and braid into a single thicker path. The text here is one paragraph — the only place all hands of annotation agree. The braided path exits the bottom of the frame. - **Coda — The Next Threshold.** A second open door, smaller, far down a perspective road, with the trunk line vanishing into it. A single closing line. Then nothing — the page ends in negative space the color of fog. No header bar. No hamburger. No footer columns. Navigation, if it exists at all, is a thin **progress meridian** on the far right: a vertical line with seven tick-marks (the Crossings), the current one marked by a small hollow ring; clicking a tick performs a slow scroll, never a jump-cut. There is no "back to top" button — the reader either keeps walking or closes the tab. ## Typography and Palette **Typefaces (all Google Fonts, all verified available):** - **Fraunces** (variable; used at optical-size "soft" axis, weights 300 / 400 / 500, with the *italic* and a touch of the "wonk" axis for display) — the primary voice. A "soft-serif with personality" whose slightly melting serifs and warm wonk read like handwriting that learned to be a book. Used for all Crossing passages at 1.125rem / line-height 1.85, and for the large Crossing titles at clamp(2.8rem, 6vw, 5.5rem) in a light italic. - **Spectral** (300 / 400 italic) — used *only* for the margin-ghost cards and the marginalia annotations: small (0.8125rem), tight, set in italic, in the faded ink color. It is the "other hand" — a different but kindred serif, so the parallel selves write in a script that is *almost* yours. - **Space Mono** (400, 700) — used sparingly and only for *coordinates*: each Crossing is stamped with a fictional set of branch coordinates (e.g. `47.6°N // 122.3°W // δ-04`), set at 0.6875rem, letter-spacing 0.18em, uppercase, in the dim grey. Mono appears nowhere else — no body, no buttons, no nav labels. This keeps the site out of the 94%-mono monoculture by *quarantining* mono to a single ornamental role. **Palette — "Dawn Before Rain" (cool, the deliberate anti-warm choice):** - `#0D1418` — *Deepwater* — the page floor; near-black with a green-blue cast, never pure black. - `#1B2A30` — *Slate Tide* — section backdrops and the storm-half of skies. - `#E8EDE9` — *Bonelight* — primary text on dark; a cool off-white, the color of overcast morning. - `#9FB1AE` — *Faded Ink* — marginalia, ghost-card text, secondary copy; a muted sage-grey. - `#C9A24B` — *Brass Compass* — the single restrained accent: the trunk line's glow at waypoints, the hollow progress-ring, the coordinate stamps' rules, the door's threshold light. Used at <5% of any viewport. The only warmth permitted, and it is *instrument brass*, not sunset. - `#6E8FA6` — *Distance Blue* — far-horizon parallax layer, the clear-half of skies, hairline branch lines before they're "lit." - `#B7705C` — *Rust Echo* — appears only inside margin-ghost vignettes (the parallel weather), never in the trunk world; a desaturated terracotta that signals "the other place." Contrast spine: Bonelight on Deepwater for all reading. Brass Compass is never used as text — only as line, glow, and rule. ## Imagery and Motifs **Surreal tableaux (full-bleed, behind text, one per Crossing).** Each is a single composited image, cool-graded, with a fine analog grain (~7% monochrome noise, 0.5px) and an extremely subtle film-gate vignette. Catalog: - A two-lane road that splits into seven, each tine disappearing into a different sky-condition (Crossing I). - A wooden door standing free in a field of pale grass, ajar, light spilling *upward* out of it (Crossing 0 / Coda). - A staircase descending into still water that reflects a *different* staircase ascending (Crossing II). - A wall of identical envelopes, one of them mid-fall, frozen (Crossing III — "the letter you didn't send"). - A constellation chart where the lines between stars are tiny roads with tinier travelers (Crossing IV). - A single tree whose roots and branches mirror exactly, planted in a horizon line, no ground (Crossing V). - Five rivers braiding into one, seen from above, the water the color of Distance Blue (Crossing VI). **Recurring decorative motifs:** - **The forking line.** The hairline path is the spine of the whole site — SVG, `vector-effect: non-scaling-stroke`, drawn via `stroke-dashoffset` tied to scroll. At each waypoint it emits a soft Brass Compass radial glow (~24px blur) for the duration that waypoint is in view, then dims to Distance Blue. - **Margin ghosts.** Small (~14rem wide) Spectral-set cards, desaturated to ~30%, rotated ±2.5°, with a 1px Faded-Ink border and a torn-edge mask along one side (CSS `mask-image` with a hand-drawn-looking deckle). They sit half-off the viewport edge until activated. - **Coordinate stamps.** A small fictional `lat // long // branch-delta` block at the top of each Crossing, framed by two thin Brass rules — like the corner-stamp on an old survey map. - **Three hands of annotation.** Occasional Spectral-italic marginalia in Faded Ink ("*she went left*", "*he never learned the name*", "*you stayed*") — pinned to the gutter, set very small, never more than four words. - **Texture grain.** A single fixed-position 200×200 tiling noise PNG at ~4% opacity, `mix-blend-mode: overlay`, sitting above everything — gives the whole atlas the tooth of old paper without ever looking "vintage-warm." No photography of people. No icons from an icon set. No logos. No UI chrome ornaments. The only "graphics" are the line, the ghosts, the stamps, the grain, and the seven tableaux. ## Prompts for Implementation Build parallel.quest as **one long static HTML document** — seven Crossings plus a Coda, no SPA, no router, no modal, no nav drawer, no cookie banner, no email capture, no "get started," no pricing, no testimonials, no stat-grid, no FAQ accordion, no CTA of any kind. The reader scrolls from one open door to another. Prioritize *atmosphere over information*, *one slow vertical descent over interaction*, *the line that forks over any button*. **Structure & motion:** - Single `
` with seven `
` plus `.coda`, each `min-height: 100vh`, no centered `max-width` wrapper on the page — sections are full-bleed; only the *text columns inside* them are constrained to ~52ch and anchored left-third or right-third in alternation. - The trunk **SVG path** is one fixed-position element spanning the full document height (set its viewBox height in JS from `document.body.scrollHeight`). Animate `stroke-dashoffset` from full length → 0 mapped linearly to `window.scrollY`. Branch sub-paths fork off at the five waypoints; they share the same draw mechanic but lag ~120px behind the trunk's progress so the fork visibly "peels." - **Waypoint activation:** `IntersectionObserver` with `rootMargin: "-45% 0px -45% 0px"` so a Crossing "activates" only when its center is near viewport center. On activation: the trunk's glow filter at that node ramps `0 → 1` over 700ms `cubic-bezier(.22,.61,.36,1)` (a soft spring, no overshoot bounce); the margin ghost transitions `filter: blur(8px) saturate(.3) opacity(.25)` → `blur(0) saturate(.45) opacity(.85)` over 900ms; on deactivation it reverses. **No element ever appears or disappears with a hard cut.** - Parallax: three depth layers per tableau via `transform: translate3d(0, calc(var(--scroll) * ), 0)` updated in a single `requestAnimationFrame` loop (factors 0.15 / 0.4 / 1.0). Keep total travel under ~80px per layer across a section — this is drift, not a ride. Honor `prefers-reduced-motion: reduce` by freezing all parallax and replacing draw/blur transitions with instant-but-gentle 0.01s fades. - Crossing titles enter with a slow letter-by-letter **fade-reveal** (stagger ~45ms per word, not per glyph), opacity + 6px upward translate, once, on activation. No typewriter clatter — it's a fog lifting, not a teleprinter. - The right-edge **progress meridian**: a `position: fixed` vertical hairline with seven `