# Design Language for mystical.boo

## Aesthetics and Tone

`mystical.boo` is a **professional divination bureau operating inside a corrupted signal**. The domain collapses two registers: *mystical* — ancient, knowing, deliberate — and *.boo* — a ghost's single syllable, a glyph that refuses to be taken entirely seriously. The aesthetic response is **glitch as séance interference**: the visual artifact of a Baskerville-set grimoire whose PDF was transmitted through a degraded satellite uplink, reassembled on-screen with candy-bright chromatic aberration traces and grain-blown noise where ink used to be.

This is not cyberpunk. Cyberpunk glitch is aggression — razor wire, RGB splits for their own sake. This glitch is **transmission error during contact with the ineffable**. The signal breaks not because the system is failing but because what is being communicated is too dense for the channel. The corruption is proof of the content's weight.

**Tone**: Professional in the way a forensic document analyst is professional — precise language, no hedging, no warmth theater — but operating on subject matter that is genuinely strange. Every typographic choice is authoritative. Every glitch is controlled to the millimeter. The candy palette (hot pink, electric lime, cold violet, cream) is not playful — it is the spectral emission spectrum of something that cannot be photographed by ordinary means.

**Mood references**: The reading room of a Victorian society for psychical research whose librarian has been replaced by a very competent ghost. The grain of a daguerreotype overexposed to a flash. The moment before a sentence completes itself on a Ouija board.

## Layout Motifs and Structure

The page structure is a single **editorial-flow column** — the spine of a journal issue, not a marketing landing page. No sidebars. No card grids. No pricing rows. The column is 680px wide at desktop, center-anchored with generous outer margins that catch the chromatic bleed.

**Macro composition (top to bottom, continuous scroll):**

1. **Masthead** (`100svh`). Full-viewport typographic lockup. The domain name `mystical.boo` is set in Libre Baskerville at ~18vw, stacked on two lines: `mystical` / `.boo`. The `.boo` line is offset 14px left and carries a persistent 1.5px cyan channel-split ghost at all times — no hover required, always displaced. Behind the type: a full-bleed noise-texture field at 8% opacity, grain size 1.2px, which shifts grain seed on every page load. No hero photography. No illustration. Type and grain only.

2. **Lede Block** — 3–5 sentences, Libre Baskerville italic, 24px, tracking −0.02em. Sets the premise of the site. The cursor-follow mechanic is live here: as the pointer moves, a soft candy-pink radial light source (radial-gradient, 320px radius, `#FF2D78` at 7% opacity) tracks the cursor position beneath the text column, as if a candle is following the reader.

3. **Section Dividers** — thin 1px horizontal rules in `#C8FF3E` (electric lime), with a 2px horizontal drift animation: the rule appears to slide 0–3px left and right every 4–7 seconds on a randomized cycle, simulating micro-tremor. No decorative ornaments, no flourishes.

4. **Body Sections** (3–4 of them) — narrow editorial prose column. Each section opens with a `<drop-cap>` letter set 3 lines tall, color `#C8FF3E`, with a Baskerville display italic. Paragraphs are Libre Baskerville regular 17px, line-height 1.72, with generous paragraph spacing. Pull-quotes break the flow: indented 40px, set in Baskerville italic 22px, color `#B57BFF`, no quotation marks, just a `|` bar in `#FF2D78` at left.

5. **Noise Interstitials** — between sections, full-width bands of animated noise (CSS `filter: url(#noise)` SVG turbulence) at 12% opacity over the background, 120px tall, which shift their phase continuously. They function as visual palate cleansers and reinforce the transmission-interference metaphor.

6. **Colophon / Footer** — narrow centered block, Libre Baskerville small-caps 13px, `#9B9B9B`. Domain, year, a single sentence. The `.boo` TLD appears one more time with the channel-split ghost, slightly more pronounced.

**No hero CTA. No pricing blocks. No testimonials. No stat grids. No navigation burger menus.** The page is read like an article in a journal of unexplained phenomena.

## Typography and Palette

**Typography — baskerville-refined, all Google Fonts:**

- **Primary Display & Body**: [Libre Baskerville](https://fonts.google.com/specimen/Libre+Baskerville) — the workhorse of the entire page. Weights 400 (regular) and 400 italic. Used for the masthead wordmark at clamp(5rem, 14vw, 16rem); section drop-caps at 3-line cap-height; body text at 17px/1.72; lede at 24px italic; pull-quotes at 22px italic. Libre Baskerville carries the exact tension this site needs: it is classically authoritative (old-style proportions, high contrast thick-thin stroke) while being slightly more robust on screen than the original Baskerville — the contrast whispers rather than shouts, which lets the glitch effects read as intrusion rather than competition.

- **Label / UI / Metadata**: [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) — weight 400 only. Used for section numbers (01., 02., etc.), timestamps, the small-caps colophon, and any technical annotation text. Set at 12–13px, tracking +0.08em. The mono face creates a register collision with Baskerville that reads as: *the instrument panel of the séance machine*.

- **No third typeface.** Two faces only. The tension between them IS the typography system.

**Palette — candy-bright with noir substrate:**

| Token | Hex | Role |
|---|---|---|
| `Ink` | `#0F0D12` | Page background — near-black with violet undertone, not pure black |
| `Cream` | `#F5F0E8` | Primary text color for all Baskerville body copy |
| `CandyPink` | `#FF2D78` | Cursor-follow radial light, `|` pull-quote bar, the channel-split ghost on `.boo` |
| `ElectricLime` | `#C8FF3E` | Section divider rules, drop-cap letters, active state indicators |
| `VioletSignal` | `#B57BFF` | Pull-quote text, secondary accent, the noise-interstitial tint |
| `ColdCyan` | `#00E5D4` | The channel-split ghost offset copy on masthead — displaced 1.5px left, 1px up |
| `GrainMid` | `#2A2530` | Noise-interstitial band background — slightly lighter than `Ink` |

**Color logic**: `Ink` provides the noir substrate that makes the candy colors read as signal emissions rather than decorations. The three candy colors (`#FF2D78`, `#C8FF3E`, `#B57BFF`) are never used together at high opacity in the same visual zone — they appear in rotation, one per section. `ColdCyan` is reserved exclusively for the channel-split effect. `Cream` carries all reading text.

## Imagery and Motifs

**No photography. No stock art. No icon fonts. No 3D renders.**

The visual language is two elements: **typographic form** and **noise-texture fields**.

**Noise Texture (primary image system):**
- An inline SVG `<feTurbulence>` filter generates all grain/noise on the page. The filter has two layers: `baseFrequency="0.9 0.9"` for fine grain and `baseFrequency="0.04 0.04"` for low-frequency cloud structure. The two layers composite together via `feBlend mode="multiply"`. The grain shifts phase on `requestAnimationFrame` at 0.3fps (slow enough to feel organic, fast enough to feel alive).
- The masthead grain field sits at `z-index: 1` behind the type, at 8% opacity in `Cream`.
- Noise interstitial bands sit at 12% opacity, tinted to `VioletSignal`.
- The cursor-follow radial light interacts with the grain: as the radial light source moves, it appears to illuminate the grain — this is achieved by blending the radial gradient ABOVE the grain layer at low opacity, so nearby grain brightens.

**Glitch Effects (motif system):**
- **Channel-split type**: The masthead `mystical.boo` wordmark has two `::before`/`::after` pseudo-elements. `::before` is offset `+1.5px / +1px` in `ColdCyan` at 55% opacity. `::after` is offset `-1px / -0.5px` in `CandyPink` at 40% opacity. Both are permanently displaced — not a hover state. On an 8–14 second randomized interval, the offset values snap to a new random position within ±3px range and return in 80ms — a micro-jitter that reads as signal noise, not animation.
- **Scan line artifact**: A repeating `linear-gradient` overlay on the masthead creates 1px horizontal lines at 2.4% opacity — the visual artifact of a CRT or a fax machine receiving.
- **Section entry glitch**: When a body section scrolls into the viewport (Intersection Observer), it enters with a 120ms horizontal position oscillation (CSS `translate` keyframes: `0px → 3px → -2px → 1px → 0px`) before settling. This is the only scroll-triggered effect; it is not parallax.

**Futuristic motifs (structural):**
- Section numbers: `01.`, `02.`, etc. in IBM Plex Mono, `ElectricLime`, 11px, positioned as absolute floats 60px left of the column edge. They are the only UI chrome.
- The cursor-follow mechanic extends to a **subtle magnetic pull on pull-quote `|` bars**: as the cursor approaches within 80px of a bar, the bar elongates from 3em to 4.2em height over 200ms, then returns when the cursor retreats. This is a micro-interaction that rewards attentive navigation without performing for inattentive visitors.

## Prompts for Implementation

**The story to tell.** A visitor opens what appears to be a professional journal — clean, authoritative, Baskerville-set — but the transmission is slightly corrupted. The masthead loads with grain already present; the `.boo` in the wordmark is already split. The cursor, moving across the page, drags a soft pink light source beneath the text as if carrying a candle through the archive. Sections enter with a brief tremor. Divider lines drift. Noise bands mark the passage between chambers. The visitor reads from top to bottom without being asked to do anything — no CTA, no sign-up, no pricing. They finish the page the way they finish a well-edited magazine article: satisfied, slightly altered, not sure what exactly was communicated but certain that it was.

**Implementation priorities:**

1. **Masthead first.** The `mystical.boo` wordmark at 18vw Libre Baskerville with permanent channel-split ghosts (CSS pseudo-elements, `ColdCyan` + `CandyPink` offsets) and full-bleed SVG noise behind it. This is the site's identity — it must be correct before anything else is built.

2. **Cursor-follow light.** A single `div` absolutely positioned, pointer-events none, updated via `mousemove` event listener using `transform: translate()` for performance (no `left`/`top`). The radial gradient is defined in CSS variables and the div moves with the cursor. On mobile, the effect is disabled and the div is hidden — `prefers-pointer: coarse` media query.

3. **SVG noise filter.** Define the `<feTurbulence>` filter once in a hidden `<svg>` at the top of the body. Apply it via `filter: url(#noise)` to the masthead background div and the interstitial bands. Animate the `seed` attribute of `<feTurbulence>` via JavaScript at 0.3fps using `setInterval` to create the shifting grain.

4. **Section entry animation.** Use `IntersectionObserver` with `threshold: 0.15`. When a `.section` enters the viewport, add a class that triggers a 120ms keyframe animation: `@keyframes glitch-enter { 0%{transform:translateX(0)} 20%{transform:translateX(3px)} 50%{transform:translateX(-2px)} 75%{transform:translateX(1px)} 100%{transform:translateX(0)} }`. Remove the observer after first trigger.

5. **Divider drift.** The `<hr>` elements are `position: relative`. A `@keyframes drift` moves them between `translateX(-2px)` and `translateX(3px)` over randomized durations set via `style="animation-duration: Xs"` where `X` is a per-element random value between 4 and 7, assigned at DOM-ready.

6. **Pull-quote magnetic bar.** On `mousemove`, check proximity to all `.pull-quote-bar` elements. If pointer is within 80px, animate height from `3em` to `4.2em` using `transition: height 200ms ease-out`. On `mouseleave`, return to `3em`.

7. **Typography settings.** Libre Baskerville loaded at weights 400 and 400-italic only. IBM Plex Mono at weight 400 only. Both loaded via Google Fonts `<link>` with `display=swap`. Body `font-size: 17px`, `line-height: 1.72`, `letter-spacing: -0.01em` on body text. Drop-caps via CSS `::first-letter` on section opening paragraphs: `float: left; font-size: 4.8em; line-height: 0.75; padding-right: 0.1em; color: #C8FF3E; font-style: italic`.

8. **Background color**: `#0F0D12` on `<html>` and `<body>`. Text color `#F5F0E8`. Set immediately in `<head>` via a `<style>` block (before CSS loads) to prevent white flash.

**AVOID in implementation:**
- Parallax scrolling (77% frequency — overused across registry)
- Stagger entrance animations for multiple elements (55% — overused)
- Gradient meshes or decorative gradients (78% — overused)
- Any photography or stock imagery
- CTA buttons, pricing sections, testimonial blocks, stat counters
- Navigation bars with multiple links — this page is a single scroll
- Mobile hamburger menus

## Uniqueness Notes

**Differentiators from the existing registry:**

1. **Glitch as transmission error, not cyberpunk aesthetics.** The registry's 11% glitch usage is almost entirely RGB channel-split as visual aggression (cyberpunk, sci-fi contexts). `mystical.boo` repositions glitch as *séance interference* — the static that appears when a signal from the ineffable degrades during transmission. The Baskerville serif substrate makes this legible: old-world typography experiencing digital artifact is dissonant in a way that no amount of neo-grotesque + glitch achieves.

2. **Candy-bright palette on a near-black substrate with professional editorial typography.** The registry's candy-bright usage is minimal (low frequency). Most candy-bright applications in the registry live in playful/dopamine contexts with rounded sans-serifs. Using `#FF2D78`, `#C8FF3E`, `#B57BFF` as accent emissions against `#0F0D12` with Baskerville body text creates a register collision that is both luxurious and unsettling — the colors read as spectral emissions rather than design choices.

3. **Cursor-follow as a metaphor, not a gimmick.** The registry's cursor-follow pattern (8%) is typically used for magnetic hover buttons or decorative spotlight effects. Here, the cursor drags a soft pink radial light source beneath the editorial text column — the visitor is a candlebearer navigating an archive. The mechanic reinforces the séance/occult metaphor at the interaction layer without any visible UI chrome.

4. **SVG turbulence noise as the primary image system, no photography.** With photography at 89% in the registry, `mystical.boo` abstains completely. All visual texture comes from a single `<feTurbulence>` SVG filter animating at 0.3fps. The noise is not decorative grain on top of photography — it IS the photography replacement, the analog texture that photography would provide, generated procedurally.

5. **Two typefaces only, with IBM Plex Mono as instrument panel.** The baskerville-refined typography seed is interpreted through strict two-font discipline: Libre Baskerville for all reading content, IBM Plex Mono exclusively for numbering/metadata. No display face, no decorative headline font, no variable font axis animation. The mono face creates a register collision (ancient serif + precision instrument readout) that is specific to this site's premise.

**Chosen seed:** `aesthetic: glitch, layout: editorial-flow, typography: baskerville-refined, palette: candy-bright, patterns: cursor-follow, imagery: noise-texture, motifs: futuristic, tone: professional`

**Patterns avoided from frequency analysis:** gradient (78% — avoided entirely), parallax (77% — avoided entirely), stagger (55% — avoided entirely), hand-drawn (58% — avoided entirely), scroll-triggered (35% — used only once, for section-entry glitch, not parallax), minimal (40% — design is editorially dense, not sparse), sidebar (29% — single editorial column only), high-contrast (19% — palette is high contrast but used for signal, not decoration pattern).
<!-- DESIGN STAMP
  timestamp: 2026-05-09T13:38:57
  seed: is interpreted through strict two-font discipline: libre baskerville for all reading content, ibm plex mono exclusively for numbering
  aesthetic: `mystical.boo` is a **professional divination bureau operating inside a corrupte...
  content_hash: 711848d854d7
-->