# Design Language for mystical.quest ## Aesthetics and Tone mystical.quest is a **dreamt cartography** — a website that behaves like a half-remembered initiation glimpsed between sleeping and waking. It is not a fantasy game and not a tarot shop; it is the *field journal of an order that maps places that do not stay where you left them*. The governing aesthetic is **surreal** in the René Magritte / Remedios Varo / Leonora Carrington lineage: impossible interior architecture, doorways that open onto weather, a moon resting on a reading desk, hands holding their own reflections. Everything is rendered with the matte solemnity of a 1940s plate-book on alchemy — dense ultramarine grounds, gold-leaf annotations, the faint foxing of old paper — but composed with the *float* of a dream, where objects hover a centimetre above their shadows and gravity is a polite suggestion. The tone is **dreamy-ethereal**: hushed, processional, faintly liturgical, but never twee. Copy reads like marginalia transcribed from a vellum codex — second-person, present-tense, conditional ("If the corridor lengthens, you have arrived early"). The reader is addressed as an *initiate already mid-passage*, never as a customer. Nothing is sold; passages are *offered*. The mood sits in the narrow band between awe and unease — the website should feel like standing in a cathedral nave at 3am holding a candle that does not flicker. Crucially: **no whimsy-as-decoration, no glassmorphism, no warm pastoral palette, no hand-drawn doodle filigree.** The surrealism is *cold, lapidary, and exact* — strange because it is rendered too precisely, not because it is sketchy. ## Layout Motifs and Structure The site is a single **immersive-scroll** descent — one continuous vertical passage through **seven Thresholds**, each ~120vh, with no top navigation, no hamburger, no sticky chrome, no footer in the conventional sense. The reader does not *browse*; the reader *descends*, the way one descends a temple stair, and the page reveals itself one Threshold at a time. Structural rules: - **The Antechamber (Threshold 0).** Before the first word: a full-viewport ultramarine void with a single suspended object — a small brass key, slowly rotating on three axes, lit from an unseen window. As the void resolves it does not fade; it *deepens*, like an eye adjusting to dark. The title `mystical.quest` is set very small, lower-left, in gold — a bookplate, not a banner. A single line beneath: *"You are already on your way in."* No scroll prompt, no arrow — the page is trusted to be entered. - **Plate composition.** Each Threshold is a **dream-plate**: a near-full-bleed tableau where one impossible image, a fragment of codex text, and a hovering caption sit in deliberate asymmetric tension. Text never centres; it clings to a margin — sometimes the left gutter, sometimes rotated 90° up the right edge like a spine inscription. The "content well" is abolished. Negative space is *charged*, not empty: large fields of unbroken ultramarine carry as much weight as the imagery. - **The drifting baseline.** As the reader scrolls, foreground elements (key, moon, doorframe, hand) move at a *slightly different rate* than the background ground — not a showy parallax tunnel, just a 6–12% differential so the whole page feels gently unmoored, like reading on a slow boat. - **The hinge.** Between Threshold 3 and 4 the page *inverts* — the ultramarine ground lightens to a pale bone-vellum and the gold becomes deep indigo ink, as if the reader has passed through the page from verso to recto. The remaining Thresholds are the "lit side" of the same dream. The final Threshold (the Lintel) returns to ultramarine, completing the loop — the brass key reappears, now still. - **No grid of cards. Ever.** If multiple fragments must coexist on a Threshold they are arranged as *scattered plates on a reading table* — overlapping, slightly rotated, casting soft long shadows — never as an aligned matrix. ## Typography and Palette **Typefaces (all available on Google Fonts):** - **Cormorant Garamond** — the codex voice. Used 400 and 500-italic for all body passages, marginalia, and captions. Set generously: ~1.125rem, line-height ~1.85, max measure ~62ch, with old-style figures. The slightly nervous, high-contrast Garamond revival reads like a private press edition. - **Spectral** (serif, 300 and 400) — used for the larger "incipit" lines that open each Threshold (the single conditional sentence). Its calm, screen-bred warmth balances Cormorant's nervousness; set large (~2.4–3rem), tight leading, generous letter-spacing (~0.02em). - **EB Garamond** — used *only* at small sizes for the Threshold numerals and the running "folio" marks (e.g. *Threshold IV — De Limine*), small-caps, tracked wide (~0.18em). A sober Garamond foil so the headings don't feel like a single voice shouting. - A **monospace is deliberately refused** — there is no terminal, no code, no data here. **Palette (minimum, with exact values):** - `#0B1A3A` — **Abyssal Ultramarine.** The primary ground. Deep, slightly violet, the colour of a Lapis lazuli plate before the gold is laid. - `#142A57` — **Vault Blue.** Secondary ground, used for the inner panels and the drifting overlay shapes; reads as "a shade closer to the candle." - `#C9A24B` — **Reliquary Gold.** Text on the dark side, hairlines, the brass key, the annotation marks. Never pure yellow — slightly tarnished, matte. - `#F2EAD3` — **Bone Vellum.** The ground of the inverted Thresholds (4–6) and the colour of small inset text on dark. - `#1E2C5C` — **Indigo Ink.** Text colour on the vellum side — almost-black, but unmistakably blue at the edges. - `#7C6A9C` — **Distant Amethyst.** The single accent — used sparingly for the rare link-in-passage, the glow at the edge of a hovering object, the colour of "the weather behind the door." A jewel-tone, muted, never neon. - `#5B2E3C` — **Old Wine.** A near-secret accent reserved for one element per site (the seam where the page inverts); deep oxblood, the colour of a wax seal seen by candlelight. Texture: a permanent, very faint **plate-paper grain** (~6–8% opacity, ~0.5px) over everything, plus a barely-there warm vignette on the dark Thresholds — the page should never look like flat web canvas, always like a photographed leaf of an old book. ## Imagery and Motifs The visual language is **collage** — but *museum collage*, the kind Joseph Cornell built in shadow boxes, or the cut-plate assemblages in a surrealist's commonplace book. No stock photography, no 3D renders, no hand-drawn cartoons. Every image is built from **engraved/lithographic fragments** (architectural plates, anatomical hands, astronomical diagrams, moon phases, keyholes, curtains, staircases, single eyes) **recombined into impossible scenes** and sitting on the ultramarine ground with soft long shadows, as if pinned to dark velvet. Recurring motifs (**star-celestial** anchors the set): - **The fixed star.** A small, perfectly geometric eight-pointed star (a compass-rose-as-pole-star) recurs at the top-left of every Threshold like a folio mark; it is the only element that never drifts. On the inverted side it is drawn as a *hole* punched through the vellum, showing ultramarine beneath. - **The brass key** — appears in Threshold 0 and the Lintel; rotating, then still. - **Doorways onto weather** — at least one Threshold features a freestanding doorframe (engraved, classical) standing in a void, the opening filled with a slow-moving sky (drifting cloud, distant lightning the colour of Distant Amethyst). - **The reading hand** — an engraved hand holding, variously: a moon the size of a coin, a folded letter, a thread, its own reversed reflection. Cornell-box framing: thin gold rule, deep shadow. - **Constellation hairlines** — faint gold lines connecting points across a Threshold, suggesting a chart that is never fully drawn; they animate by drawing themselves slowly on scroll-in (SVG path-draw), then settle. - **Curtains & staircases** — used at the hinge: a velvet curtain (engraved, ultramarine) parting to reveal the bone-vellum side; a spiral stair descending into and out of frame. - **The seal.** One wax seal in Old Wine at the inversion seam, stamped with the eight-pointed star. ## Prompts for Implementation Build mystical.quest as **one long static HTML document** — seven Thresholds plus the Antechamber, no SPA router, no modals, no nav bar, no footer links grid, no email capture, no "subscribe", no pricing, no testimonials, no stat counters, no FAQ accordion, no CTA buttons of any kind. The page is a *passage to be walked*, not a funnel. If a link must exist at all, it appears once, mid-sentence, set in Distant Amethyst with a slow underline-draw on hover — never a button. **Story & sequence.** Treat the seven Thresholds as movements: (0) Antechamber — the suspended key, the bookplate title; (I) the threshold lengthens; (II) the doorway onto weather; (III) the reading hand and the coin-moon — then **the hinge**: a held moment where a velvet curtain parts and the colour world inverts to bone-vellum; (IV) the constellation that won't finish drawing; (V) the spiral stair; (VI) what you carry back; (VII) the Lintel — ultramarine returns, the brass key, now motionless, and a final conditional line. Each Threshold opens with one Spectral incipit sentence in the conditional mood, followed by 2–4 short Cormorant codex paragraphs hugging a margin, plus its collage plate. **Animation philosophy — slow, weighted, dreamlike.** No spring physics, no magnetic cursor chasing, no tilt-3D card hover, no bouncy easing. Motion is *cinematic and few*: (1) the **drifting differential** — foreground objects translate 6–12% slower than ground on scroll; (2) **blur-focus reveals** — each Threshold's plate enters at ~8px blur and 0.6 opacity and resolves to sharp/1.0 as it crosses the viewport midline, then *de-resolves* slightly as it leaves below — the page is only ever fully in focus at its centre, like a dream you can only see the middle of; (3) **SVG path-draw** for the constellation hairlines, ~2.4s ease-out, once; (4) the **hinge inversion** — a single ~1.6s crossfade of CSS custom properties (`--ground`, `--ink`, `--accent`) triggered when the curtain element reaches center, plus the curtain SVG parting from the middle; (5) the brass key: a slow continuous 3-axis CSS rotation in Threshold 0, frozen via `animation-play-state` once the Lintel is reached. Respect `prefers-reduced-motion` by disabling drift/blur and showing everything sharp and still — but keep the inversion as an instant swap. **Atmosphere over information.** Prioritise the ultramarine void, the grain, the long soft shadows, the hush. Generous whitespace is *not* empty — give the eye long fields of unbroken colour between Thresholds. Type leads; imagery is sparse and slow. The reader should finish the scroll feeling they were somewhere, not that they read a landing page. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, card-grid matrices, glassmorphic frosted panels, neon glows, warm cosy palettes, doodle filigree, hamburger nav, sticky headers. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **The mid-page colour inversion (the hinge).** Most sites in the corpus hold one palette top-to-bottom; mystical.quest *physically turns the page* — ultramarine→bone-vellum at Threshold 3.5 via animated CSS custom properties and a parting velvet curtain, then loops back to ultramarine at the Lintel. The page has a verso and a recto side. 2. **Blur-focus as the core scroll mechanic, not a flourish.** The entire page is only ever sharp at its vertical centre — plates enter blurred, resolve at midline, soften again as they leave. The "dream you can only see the middle of" is the structural metaphor, not a hover trick. Blur-focus is an underused pattern (~9% of corpus) and here it is load-bearing. 3. **Museum-collage from engraved fragments — no stock photo, no 3D, no doodles.** Cornell-shadow-box framing of recombined lithographic plates (hands, moons, doorframes, stairs, single eyes) on velvet-dark ground. Collage imagery is rare (~7%) and never appears in this *cold, lapidary surrealist* register. 4. **Refuses the standard kit entirely.** No nav, no footer grid, no CTA, no cards, no monospace, no glassmorphism, no spring/magnetic/tilt motion, no warm palette — almost the complete inverse of the corpus' dominant patterns (hand-drawn 96%, glassmorphism 78%, card-grid 90%, mono 94%, parallax 92%, cursor-follow 89%, spring 85%, magnetic 80%, warm 98%). 5. **One brass key as a frame device** — rotating at the Antechamber, motionless at the Lintel, marking the descent as a closed loop; and one wax seal in Old Wine reserved for the single inversion seam. **Chosen seed / style:** `aesthetic: surreal, layout: immersive-scroll, typography: serif-revival, palette: jewel-tones, patterns: blur-focus, imagery: collage, motifs: star-celestial, tone: dreamy-ethereal`. **Avoided patterns from frequency analysis:** hand-drawn, glassmorphism (aesthetic); card-grid, full-bleed-as-card-matrix (layout — using immersive-scroll/asymmetric plates instead); mono/tech-mono (typography — serif-only); warm, gradient-mesh-rainbow (palette — deep jewel ultramarine + gold + bone); photography (imagery — engraved collage); parallax-tunnel, cursor-follow, spring, magnetic, tilt-3d, stagger (patterns — slow cinematic drift + blur-focus + path-draw only).