# Design Language for mystical.boo ## Aesthetics and Tone mystical.boo is a **surreal nocturnal scrying-glass** — a website built like a black mirror you tilt toward candlelight, where the interface itself behaves like an oracle: it never *tells*, it *reveals*. The aesthetic sits at the crossing of three references: the cosmological plate-engravings of 17th-century alchemical manuscripts (Robert Fludd's *Utriusque Cosmi*, the spheres-within-spheres diagrams), the airbrushed dream-logic of 1980s tarot box art and Roger Dean record sleeves, and the cold luminous chrome of a modern observatory dome at 3am. The mood is **mysterious-moody** with a thread of **dreamy-ethereal** — not spooky-Halloween, not crystal-shop-pastel, but the specific quiet vertigo of looking into something deep and finding it looking back. Everything is dim by default; meaning arrives as a slow bloom of light, like a Polaroid of a constellation developing. The site does not sell readings, does not list prices, does not stack testimonials. It is a *vestibule* — a threshold experience. The reader arrives, the dark settles, a single sigil breathes, and the journey downward (or inward) is the whole point. Copy is sparse, oracular, set like inscriptions on a planchette: short lines, present tense, second person, never imperative. ## Layout Motifs and Structure The architecture is **layered-depth over immersive-scroll** — but the scroll is *vertical descent through nested glass spheres*, not a page of stacked sections. Imagine seven concentric translucent orbs; scrolling pushes the viewport *through* each membrane into the next, and at every membrane the previous orb's contents shrink to a point of light behind you while the new orb's contents resolve from blur. There is no top navigation bar, no footer chrome, no sticky header — only a thin **orrery-rail** down the right edge: seven tiny rings, the active one haloed, that mark which sphere you are inside. Each sphere is full-bleed and composed on a **radial grid** rather than a column grid — content orbits a center rather than aligning to a left margin. Text blocks sit at "clock positions" (10 o'clock, 4 o'clock) at varying radii from the focal sigil; a single section may have one line of type at 60% radius and a paragraph at 110% radius bleeding past the viewport edge. The center of every sphere holds **the Eye** — a slowly rotating procedural mandala (SVG, generated from the section's index) that is both the section's emblem and the scroll-progress indicator: it completes one quarter-turn per sphere. Spheres in order: (1) *The Threshold* — domain mark, the breathing sigil, an instruction so quiet it's almost a dare; (2) *The Mirror* — an interactive scrying surface that reflects a distorted, rippling render of whatever is above it; (3) *The Three Doors* — three arched portals, each a different procedural sky; (4) *The Pendulum* — a long-swing physics element the cursor can perturb; (5) *The Constellation* — points of light the reader connects by dragging, spelling a phrase; (6) *The Well* — a downward-tunneling parallax of receding rings; (7) *The Return* — a single contact glyph, a fade to the same dark the site opened with. ## Typography and Palette **Typefaces — Google Fonts only:** - **Cormorant** (and **Cormorant Garamond** for body) — the oracular voice. Used at very large optical sizes (`clamp(72px, 12vw, 220px)`) in weight 300, wide letter-spacing (`0.08em`), small-caps for the sphere titles. Cormorant's high contrast and ink-trap delicacy reads like an engraved plate caption. - **Spectral SC** — for the orrery-rail labels and the tiny inscriptions around the Eye; small-caps, weight 400, tracked out to `0.22em`, never larger than 12px. It is the planchette-text. - **Fraunces** (variable — weight, optical size, "soft", "wonky") — used *only* on the breathing sigil's wordmark in sphere 1 and on the connected-constellation phrase in sphere 5, with the "wonky" axis nudged so the letters feel hand-set by candlelight. It is the one warm, alive type voice in an otherwise cold system. - Numerals and any code-like marks (the orrery ring indices, timestamps): **IBM Plex Mono**, weight 300, faint. **Palette — cool, deep, with two ignition colors:** - `#05060B` — *Obsidian* — the base void, near-black with a blue undertone. The page background, always. - `#10131F` — *Midnight Slate* — sphere membranes, raised glass surfaces (used as a barely-there gradient stop, never a flat fill). - `#2B3358` — *Lapis Shadow* — the deep mid-tone for radial gradients, the "far wall" of the Well. - `#6E7BB8` — *Ashen Periwinkle* — body text on dark, dimmed UI, the resting color of the orrery rings. - `#C7CBE0` — *Moon Powder* — primary readable text, the sigil at full bloom. - `#7CE7D6` — *Spectral Mint* — **ignition color #1**: the scrying-mirror ripple highlight, the active orrery ring halo, link underlines as they draw. Cold phosphor green-cyan, used like a held breath. - `#E0A24A` — *Brass Ember* — **ignition color #2**: candle-warmth, the pendulum's tip-glow, the constellation points before they're connected. The single warm spark, used sparingly (under ~4% of any view). Grain is mandatory: a 5–7% SVG `feTurbulence` (baseFrequency ~0.85) noise layer over everything, plus a faint radial vignette so the corners of every sphere fall into deeper Obsidian. ## Imagery and Motifs **No photography. No hand-drawn scribble. No glassmorphic card stacks.** All imagery is *procedural and astronomical*: - **The Eye / mandala** — generative SVG: nested rings of unevenly-spaced tick marks, a polygon whose vertex count = sphere index + 3, and a slow sweep-hand. Stroke only, 1px, Ashen Periwinkle, with the active arc in Spectral Mint. Re-rendered per sphere from a seed. - **The breathing sigil** — a single bespoke SVG glyph (an open eye fused with a crescent and a downward arrow, drawn as one continuous path) that animates its `stroke-dashoffset` in a slow inhale/exhale, and whose stroke width oscillates 0.75px↔1.5px. This is the brand mark; it appears at the Threshold and again, tiny, on The Return. - **Scrying ripple** — a WebGL or CSS-filter displacement applied to a live, blurred capture of the content above the mirror surface; concentric ripples emanate from the cursor with `turbulence` distortion. The mirror is *literally reflective of the page*. - **Procedural skies** — the Three Doors each frame a different fragment-shader gradient: one a slow aurora-fold in Lapis/Mint, one a star-scatter that drifts on parallax, one a single enormous receding ring like a planet's limb. No clip-art celestial icons — everything is gradient, point, and line. - **Constellation lines** — thin Spectral Mint strokes the reader draws between Brass Ember points; once a valid connection is made the point "ignites" (a 600ms radial flare) and the line locks with a faint hum-glow. - **The orrery rail** — seven hairline circles, only the active one filled with a pulsing Mint ring; a faint dotted "orbit path" connects them. Decorative grammar throughout: **concentric rings**, **radial tick-marks**, **sweep-hands**, **single points of light against deep field**. Never: tarot card photos, zodiac wheel clip-art, smoke PNGs, moon emoji. ## Prompts for Implementation Build this as **one continuous HTML document** — not routes, not an SPA framework — because the experience *is* the scroll-descent through the spheres. The page is dark from the first paint; nothing flashes white. - **Boot:** Obsidian fill, grain layer fades in over 1.2s, then the breathing sigil draws itself via `stroke-dashoffset` (2.5s ease) at screen center. One line of Spectral SC fades up beneath it — *"look long enough and it looks back."* The orrery rail's first ring lights. No "scroll down" arrow; instead, on first cursor-move, the sigil's stroke brightens 10% — an invitation, not a command. - **Sphere transitions = membrane-pass.** As the reader scrolls between spheres, the outgoing sphere's content scales to ~0.2 and blurs to a point behind a darkening overlay; the incoming sphere resolves from `blur(24px)` + scale 1.15 down to crisp. Pin each sphere briefly (scroll-triggered) so the pass reads as a deliberate threshold, not a swipe. The Eye/mandala does its quarter-turn during the pass. - **Cursor-follow, but gravitational, not magnetic-snappy.** The breathing sigil, the pendulum, and the constellation points all feel the cursor as a *mass* — they drift toward it with heavy easing and overshoot slightly (spring, low stiffness, high damping). Nothing jumps to the cursor; everything *leans*. - **The Mirror (sphere 2)** is the centerpiece interaction: a horizontal band that displays a live, vertically-flipped, blurred, displacement-mapped render of the content above it (use a `` capture or CSS `backdrop-filter: blur()` over a transformed clone). Cursor over the mirror emits concentric ripple distortion. A faint line of Cormorant text *under* the mirror surface is only legible *through* a ripple — the reader has to "disturb the water" to read it. This is the storytelling beat: knowledge requires touching the unknown. - **The Pendulum (sphere 4):** a long SVG line with a Brass-Ember-glowing bob, running a real pendulum equation in `requestAnimationFrame`. It swings on its own; cursor proximity adds a gentle push. As it swings, it sweeps past words arranged in an arc — each word brightens when the bob passes over it, so the *answer* assembles itself differently each visit. Never let the reader "control" it fully — it has its own will. - **The Constellation (sphere 5):** ~9 Brass Ember points scattered on the radial grid. The reader drags from point to point; valid edges (predefined) ignite with a flare and a Mint line; completing the figure spells a short Fraunces phrase that fades in at center — *"you were always the one reading."* Wrong drags simply don't connect (no error shake — silence is the feedback). - **The Well (sphere 6):** pure parallax depth — 30+ hairline rings at increasing scale and decreasing opacity, the nearest ones drifting fastest, creating a tunnel that *recedes* as you scroll *down* (inverted expectation). Faint Mint motes fall upward through it. - **The Return (sphere 7):** everything dims back to opening-Obsidian; the tiny sigil reappears at center, breathes once, and a single contact glyph (an envelope rendered as one more concentric-ring sigil) sits below it. Hover draws a Mint ring around it. The page ends exactly as quiet as it began. - Respect `prefers-reduced-motion`: replace membrane-passes with 400ms cross-fades, freeze the pendulum mid-swing, make the mirror a static soft-blur, keep the grain. The mood survives without the motion. - **AVOID:** CTA buttons, pricing tiers, "Book a Reading" hero blocks, stat counters, testimonial carousels, FAQ accordions, cookie-banner-as-design. This is a vestibule, not a funnel. ## Uniqueness Notes Differentiators this design commits to — other CMassC sites must not duplicate these: 1. **Scroll = descent through nested translucent spheres**, marked by membrane-pass transitions (shrink-to-point-behind + resolve-from-blur), navigated by an orrery-rail of seven hairline rings. Not parallax sections, not slides, not a card grid — a concentric-orb tunnel. 2. **The Mirror that literally reflects the page** — a displacement-mapped, rippling live render of the content above it, with hidden Cormorant text legible *only through cursor-induced ripples*. The interaction *is* the thesis: touch the unknown to read it. 3. **A self-willed pendulum oracle** running a real physics equation that the cursor can only nudge, sweeping past arc-arranged words so the "answer" reassembles every visit. Agency is deliberately withheld. 4. **Radial / clock-position layout grid** (content orbits a procedural mandala "Eye" at clock positions and varying radii) instead of a column grid — and that Eye doubles as the scroll-progress meter via quarter-turns. 5. **Cool obsidian-and-periwinkle palette with exactly two tightly-rationed ignition colors** (Spectral Mint phosphor + Brass Ember candle), deliberately rejecting the overused warm/gradient default and the crystal-shop pastel cliché. Chosen seed/style: **surreal dreamscape promo** (seeds.json) — realized as aesthetic: surreal + ethereal, layout: layered-depth + immersive-scroll, typography: elegant-serif (Cormorant) with a variable-fluid Fraunces accent, palette: midnight-blue, patterns: blur-focus + scroll-triggered + spring, imagery: generative-art, motifs: star-celestial + crystalline, tone: mysterious-moody + dreamy-ethereal. Avoided patterns from frequency analysis: **hand-drawn** (96% — none used), **glassmorphism** (78% — explicitly rejected, surfaces are inky gradient + grain, not frosted glass cards), **photography** (98% — zero photos, all procedural SVG/shader), **warm palette** (98% — base is cold obsidian/periwinkle; warmth confined to one <4% ignition spark), **card-grid** (90% — radial grid instead), **cursor-follow magnetic snap** (89%/80% — replaced with heavy gravitational lean-and-overshoot).