# Design Language for persona.quest ## Aesthetics and Tone persona.quest is a **surreal dreamscape** — a slow nocturnal procession through the masks a single person wears in one lifetime. Imagine the antechamber of a Venetian *bottega* where a maskmaker works only at night: half-finished faces hang from copper wires, plaster molds dry on velvet, and a single oil lamp throws long swaying shadows across them. Now dissolve that room and let it float — the masks unmoor from their wires and drift in a warm violet void, turning slowly like satellites. That is the site. It is **dreamy-ethereal** above all: unhurried, hypnagogic, faintly melancholic, the way you feel the moment before sleep when you remember a version of yourself you no longer are. There is no urgency, no "product." The visitor is a sleepwalker invited to wander a hall of selves. The mood register is borrowed from: Leonora Carrington's masked figures, Remedios Varo's instrument-cluttered interiors, the chiaroscuro of Georges de La Tour's candle paintings, the floating geometry of Magritte's *Le château des Pyrénées*, and the dim jewel-lit dioramas of an old natural-history museum after closing. Warm where it should be cold, lit from a single low source, everything suspended. The tone of the writing is second-person, intimate, a little oracular — *"You owned this face for a winter. Then you set it down."* — never instructional, never a pitch. ## Layout Motifs and Structure **Layered-depth, not flat scroll.** The page is built as a **stack of parallax planes in a dark chamber** — at minimum five z-depths: a far backdrop of slow-drifting motes, a mid-field where the masks float, a foreground of hanging copper wires and the occasional plaster shard, plus a glass-pane plane that carries text, plus a near vignette plane that frames everything in shadow. Scrolling does not move a document; it moves the *camera* deeper into the chamber, masks sliding past the lens at different rates, some passing in front of the text, some behind it. Depth is the primary spatial metaphor — the visitor descends through layers of self rather than reading down a column. **Composition rules:** - **No centered content well.** Text is set in floating *glass cartouches* — irregular rounded-rectangle panes of frosted violet glass — that drift slightly with cursor parallax and never sit dead-center. They favor the lower-left or upper-right thirds, leaving the masks room to breathe. - **Seven Stations.** The descent is divided into seven *Stations*, each one mask: *The Borrowed Face · The Public Face · The Face for Grief · The Face You Wear Alone · The Half-Mask · The Face You Were Given · The Face Beneath.* Each Station is roughly 130vh and is anchored by one large mask (40–60vh tall) plus 2–4 smaller masks orbiting at depth. - **The Hanging Wire spine.** A single thin copper line runs the entire vertical length of the page at an irregular angle (never perfectly vertical — it sways by ±6° between Stations), and every floating mask is *tethered* to it by a thinner thread. It is the only continuous element; it is the through-line of identity. - **Overture, then descent, then the Unmasking.** The page opens on a single dark frame, lamp unlit. The lamp kindles (a 2.6s warm bloom), masks fade up out of black. The descent runs the seven Stations. The page ends in the **Unmasking**: every mask we've passed reassembles in a slow ring around an empty oval of light — the face beneath is the visitor's own reflection-shaped void, left blank on purpose. ## Typography and Palette **Typefaces (Google Fonts, all confirmed available):** - **Fraunces** (variable — soft optical axis, weights 300/400/500, italics enabled) — the body voice and the Station titles. Fraunces' "wonk" and old-style softness reads like something hand-lettered on a museum placard by candlelight. Station titles at 3.4rem, italic, weight 400, letter-spacing -0.01em. Body at 1.1rem / line-height 1.85, weight 300, generous and slow. - **Cormorant Garamond** (weight 500 italic, *only*) — used for the oracular pull-lines that float free of any cartouche, set large (2.2rem) and italic, like a thought half-spoken. Restricted: never body, never headings. - **Syne Mono** (weight 400) — used only for the tiny station numerals (*ECCE I · ECCE II …*), the hanging-wire tags, and the colophon. Uppercase, +0.18em tracking, ~0.7rem. The single mechanical note in an otherwise hand-soft page — the maskmaker's inventory tags. **Palette** (warm, jewel-toned, lit from one low source): - `#1A0E1E` — *Bottega Dark*, the void behind everything (near-black aubergine). - `#2E1730` — *Velvet Shadow*, the mid-depth plane and cartouche shadow. - `#E7A14B` — *Lamp Amber*, the single warm light source — bloom, rim-light on masks, the copper wire's highlight side. - `#7B3F6B` — *Amethyst*, the dominant mid-tone — frosted glass cartouches, distant motes. - `#C2546A` — *Carnelian*, accent — the thread of the half-mask Station, certain plaster cracks lit warm. - `#F2E4D0` — *Old Plaster*, the warm off-white of unpainted mask interiors and body text on dark. - `#3E6E63` — *Patina Teal*, the rare cool note — oxidized copper, the cold side of the wire, one mask glazed in verdigris. Gradients are used only as *light falloff* — radial amber-to-aubergine blooms emanating from the lamp position, never as decorative banners. High contrast between the lit and unlit faces of every object. ## Imagery and Motifs **Collage is the exclusive imagery mode** — no photography, no 3D renders, no flat vector icons. Every visual is a layered paper-and-ink collage of mask forms, built as SVG with subtle paper-grain and a 7% film-grain overlay across the whole canvas. **Required collage assets (SVG, hand-cut feel, hairline + soft-fill):** - **Seven principal masks**, each distinct: a Venetian *volto* (full face), a *bauta* with its jutting chin, a *moretta* (the strung oval), a Greek tragic mask with hollowed eyes, a half-mask *colombina*, a plain plaster casting still bearing the seam, and the *Face Beneath* — which is an empty oval of warm light with only the suggestion of features. Each rendered as torn-edge paper layers (3–5 plies) so the eye reads depth even when still. - **The copper hanging wire** — one continuous SVG path with a two-tone stroke (amber-lit edge, patina-teal shadow edge), drawn on as you scroll via stroke-dashoffset, sagging realistically between tether points. - **Drifting motes** — small soft-blurred dust particles in amethyst and amber, slow upward drift, never fast, never sparkly. Dust in a lamp-beam, not stars. - **Plaster shards** — occasional broken fragments of discarded masks tumbling slowly at the foreground depth, slightly out of focus. - **The lamp** — never fully shown; only its bloom and the hard-edged shadows it throws. Implied, off-canvas, lower-left. Decorative motif: **the tether knot** — a small hand-drawn figure-eight knot reused as section dividers and the bullet glyph, always rendered in Syne Mono-adjacent thin copper line. ## Prompts for Implementation Build persona.quest as **one continuous full-bleed dark canvas** — seven Stations plus overture plus Unmasking, no SPA, no router, no modals, no nav bar, no hamburger. The visitor scrolls and the *camera descends*; that is the entire interaction. Prioritize **atmosphere over information**, **slow drift over snappy motion**, **one descent over branching paths**. - **Layered parallax** is the core technique: 5+ planes, each translated at a different rate on scroll (backdrop ~0.15×, mid-masks ~0.4–0.6× with slight per-mask variance, glass cartouches ~0.8×, foreground wires/shards ~1.2×, vignette ~1×). Use `transform: translate3d()` for everything, `will-change: transform`, and clamp the parallax math so nothing escapes its Station's bounds. - **The lamp bloom is mouse-reactive but lazy** — the radial amber gradient's center eases toward the cursor over ~1.2s with heavy damping, so shadows on the masks shift slowly as you move. Never instant; it should feel like a heavy hanging lamp swaying. - **Masks rotate slowly and forever** — each principal mask has a unique slow `rotateY` / `rotateZ` loop (18–40s periods, eased sinusoidally, not linear) so the chamber is never quite still. Smaller orbiting masks drift on elongated elliptical paths via animated `offset-path`. - **Morph is the signature transition**: as you cross from one Station to the next, the departing mask's SVG paths *morph* toward the silhouette of the arriving mask before dissolving — a face becoming another face. Use a path-interpolation lib or pre-tweened path frames; keep it slow (~1.8s) and let it overlap the scroll. - **The hanging wire draws itself** via `stroke-dashoffset` keyed to overall scroll progress — it's the page's progress indicator, but disguised as a copper thread, never a bar. - **Text reveals as breath** — glass cartouches fade in with a slight blur-to-focus and a 1.5–2.5% scale settle, staggered word-by-word for the oracular pull-lines. Nothing slides in from offscreen; everything *condenses* into being. - **The Unmasking finale**: on reaching the bottom, the seven masks we've passed each fly back into view and arrange in a slow rotating ring around a blank warm oval. A single Cormorant italic line fades up beneath: *"The last face is the one you cannot see."* Then the lamp dims by ~30% and the page rests. No CTA, no email field, no "begin your journey" button, no pricing, no testimonials, no stat counters, no FAQ accordion, no logo bar. If a single link is unavoidable, it is one underlined word in the colophon, set in Syne Mono, no box around it. - **Reduced-motion**: collapse parallax to a gentle static composition, replace mask rotations and morphs with slow cross-dissolves, keep the lamp bloom but make it stationary. The dreamscape should survive as a still painting. - Performance is not a concern here — favor richness, layered SVG, and grain. ## Uniqueness Notes **Differentiators against the existing corpus:** 1. **Camera-descent depth model instead of document scroll.** Most sites in the corpus (89% full-bleed, 12% immersive-scroll) still treat scroll as moving a page; persona.quest treats scroll as pushing a *camera* through five-plus parallax planes in a dark room, with masks passing both in front of and behind the text. The text plane is sandwiched inside the imagery, not laid over it. 2. **Surreal aesthetic at ~6% representation, fused with collage imagery at ~7%.** Both are deep-cut choices on their own; combined as torn-paper mask collage floating in a lit void, this pairing does not appear elsewhere. The page explicitly rejects the corpus defaults — no hand-drawn doodle layer (96%), no glassmorphism-as-card-system (81%); glass appears only as drifting cartouches, not a UI kit. 3. **Mask-to-mask morphing as the section transition** — a face literally becoming another face via SVG path interpolation, slow and overlapping the scroll. Path-draw-svg exists in 43% of the corpus but as decorative line-draw; here it is the structural device of the entire narrative (identity as continuous transformation), plus the morph itself which is rarer still. 4. **A finale that ends on a deliberate void** — the seventh and last "face" is the visitor's own, rendered as a blank warm oval. The site refuses to fill it. No other design in the corpus closes on an intentional absence rather than a CTA or colophon flourish. 5. **Single low light source as a design constraint.** Every object has a lit face and an unlit face, every shadow points away from one off-canvas lamp, and that lamp sways with the cursor on a heavy 1.2s damp. Chiaroscuro as system, not effect. **Chosen seed / style:** `aesthetic: surreal, layout: layered-depth, typography: expressive-variable, palette: jewel-tones, patterns: morph, imagery: collage, motifs: floating-elements, tone: dreamy-ethereal` **Avoided patterns from frequency analysis:** hand-drawn (96%), glassmorphism-as-card-system (81%), photography (98%), card-grid (91%), centered content well (83%), cursor-follow as snappy magnetic pointer (89%), counter-animate / stat-grids, warm-but-bright pastoral palettes (pastoral-romantic 35%). Parallax (91%) and morph (14%) are used, but parallax is repurposed as literal camera depth and morph is elevated to the central narrative mechanic rather than a micro-interaction.