# Design Language for monopole.boo

## Aesthetics and Tone

monopole.boo is a **generative-art field laboratory** dressed as a haunted physics preprint server. The premise: a magnetic monopole has never been observed — it is the particle that, if it exists, would make Maxwell's equations symmetric, and it has been "almost found" a dozen times in fifty years. The site treats that century-long absence as its emotional core. The `.boo` TLD is not cute here; it is **the ghost of a particle that refuses to materialize** — a single pole, eternally separated from its pair, a thing that should be there and isn't.

The tone is **mysterious-moody** with the cold precision of an instrument readout. Think: the dark room of the Stanford superconducting gravimeter at 4 a.m. on 14 February 1982, the night Blas Cabrera's detector recorded the one unrepeatable jump that physicists still call "the Valentine's Day monopole." The site lives inside that single event — a flicker on an oscilloscope that may have been the universe whispering, or may have been nothing. Everything on the page is built around the dignity of an unconfirmed result: rigorous, restrained, quietly devastated, never sensational.

Visually this means: near-black backgrounds, fine luminous vector lines that behave like field lines around an imaginary charge, type set with the sobriety of a physical review journal, and a sense that the whole composition is *being computed in front of you* rather than designed. Nothing is decorative; everything is a readout of an equation. The aesthetic vocabulary is **generative** — the page literally draws Gauss's-law field lines, dipole-vs-monopole comparisons, and Dirac string diagrams in real time on `<canvas>` — paired with **dark-mode** restraint and a faint **grainy-textured** film over everything, like long-exposure detector noise.

## Layout Motifs and Structure

The layout is **layered-depth** over a **single-column** spine — explicitly *not* card-grid, *not* bento-box, *not* dashboard. The frequency analysis shows card-grid at 89% and dashboard at 34%; this site refuses both. Instead the content is one narrow vertical column of text (max-width 58ch) floating *above* a full-viewport generative canvas that is always running behind it. The reader scrolls through a paper; the field keeps simulating underneath, indifferent.

**The depth stack (back to front):**

1. **Layer 0 — the field.** A fixed, full-bleed `<canvas>` running a particle-and-fieldline simulation. Early in the page it shows a clean magnetic *dipole* (two poles, closed loops). As the reader scrolls, one pole is gradually pulled off-screen / dissolved, and the simulation tries — and visibly fails — to render the field of a lone monopole: lines that should radiate outward but keep snapping back, a Dirac string trailing to infinity off the bottom edge.
2. **Layer 1 — the grain + vignette.** A subtle animated noise overlay (3–5% opacity, regenerated every ~120ms via a tiny shader-less canvas trick or pre-baked PNG sprites) and a soft radial vignette that keeps focus center-column.
3. **Layer 2 — the column.** The reading column: a translucent near-black slab (`rgba(8,9,14,0.72)`, backdrop blur *only* 6px — not glassmorphism, just enough to keep text legible over the moving field) with a 1px hairline left border in electromagnet-coil copper.
4. **Layer 3 — the instrument chrome.** A thin fixed left rail (44px) carrying a vertical "detector status" readout — a live-updating monospace string like `B-FIELD :: STABLE` / `FLUX QUANTUM :: h/2e` / `EVENTS :: 1` — and a hairline scroll-progress tick that doubles as a "magnetic charge accumulated" meter that never quite fills.

**Section rhythm:** the page is paced as a six-part argument, not a sales funnel — *The Symmetry / The Prediction (Dirac, 1931) / The Search / The Valentine's Day Event / Cosmic Inflation Ate Them / Why We Keep Looking*. Each section break is marked by the canvas changing state, not by a divider line. There is **no nav bar, no footer CTA, no pricing, no stat-grid** — just a colophon at the bottom set like a journal's "received / accepted" line, except it reads *received: 1931 — accepted: never*.

## Typography and Palette

**Typefaces (Google Fonts only):**

- **IBM Plex Mono** — the instrument typeface. Used for the left-rail readouts, all numeric values, equation fragments inline (`∇·B = 0` vs the wished-for `∇·B = ρ_m`), figure captions, and the colophon. Weights 300 and 500. Tracked +20 in the rail. This is the **mono** register but used sparingly and with intent, not as body text.
- **Spectral** — the body and display serif: a screen-optimized transitional serif with the gravity of a printed physics journal. Body text at 18px / 1.7, weight 400. Section titles at weight 300, large (clamp 2.2rem–3.6rem), set lowercase except for proper names. Spectral's slightly condensed italic carries the contemplative pull-quotes ("a magnet you can break in half and still have two magnets — that is the strangest fact in physics").
- **Archivo** — a single utility sans for micro-labels and the wordmark "monopole.boo", weight 600, letter-spacing -0.01em. Used almost nowhere else; it exists to give the masthead one crisp modern anchor against the serif.

**Palette — "detector dark":**

- `#070810` — *vacuum* — the base background, near-black with a hint of blue-violet.
- `#0E1018` — *chamber* — the reading-column slab base before transparency.
- `#E8E6DF` — *trace paper* — primary text, warm off-white, like aged journal stock.
- `#9AA0AE` — *graphite* — secondary text, captions, the dimmer rail lines.
- `#C9743A` — *electromagnet copper* — the field-line accent and the left hairline border; the color of wound coil wire. Used for the dipole's "south" loops.
- `#3FB6C9` — *Cherenkov cyan* — the second field-line color and link color; the cold blue glow of charged particles in water. Used for the dipole's "north" loops, and — crucially — it is the color the simulation *fails* to render properly once the second pole is gone.
- `#7C5CFF` — *Dirac violet* — reserved for exactly one element: the Dirac string, the singular line trailing off the bottom of the screen. It appears once and is never reused.

High-contrast text on near-black; the only saturated colors are the three field accents, and they only ever appear as thin lines or faint glows, never as fills.

## Imagery and Motifs

**Primary imagery: generative-art** — there are no photographs and no stock illustration. Every visual is a live `<canvas>` rendering:

- **Field-line bundles.** Bézier-traced magnetic field lines computed from a small set of point charges. Stroke 1px, with a 4px soft `shadowBlur` glow in copper/cyan. They drift slowly (a gentle flow along the line, like iron filings settling) and react to the cursor as a faint local perturbation — a magnet passing near filings — *but the cursor-follow is deliberately weak and lagged*; the field has its own life and only acknowledges you slightly.
- **The dipole → monopole transition** as the page's central visual narrative: closed loops opening up, one focus point dissolving, the renderer "struggling."
- **The Dirac string**: a single thin `#7C5CFF` line, slightly trembling, that anchors to the (now lone) monopole and runs straight off the bottom edge of the viewport — the unobservable gauge artifact that makes the math work.
- **Detector traces**: in the "Valentine's Day Event" section, a horizontal oscilloscope-style baseline runs across the column, flat — and then, exactly once, makes a single clean step of 8Φ₀ (eight flux quanta, the value Cabrera measured) and returns to flat. It never does it again, no matter how long you wait.
- **Equation glyphs** as decorative-but-true motifs: `∇·B = 0` watermarked huge and faint behind the first section; `g = h/2e` (the Dirac quantization condition) appears at the structural pivot.

Motif keywords: **circuit** (coil windings, the topology of field lines, the wiring of a superconducting loop) and **abstract-tech** (oscilloscope traces, flux quanta, detector readouts) — both well below 8% in the corpus.

## Prompts for Implementation

Build as a **single self-contained HTML document** — one `<canvas>`, one `<style>` block, one `<script>` — no framework, no build step, no router. Target under 70KB before the Google Fonts link.

**The canvas is the site.** Implement a tiny 2D field-line integrator:

- Maintain an array of point charges `{x, y, q}`. Start with two: `+1` and `−1` (a dipole). Each "scroll chapter" mutates this array — chapter 3 moves the `−1` charge off-screen, chapter 4 leaves only `+1` and adds a `string` flag, chapter 5 multiplies charges to a chaotic many-body cloud (cosmic inflation diluting them), chapter 6 returns to a single distant `+1` flickering at the edge of detectability.
- Trace ~120 field lines per frame using RK4 or simple Euler steps along `E(p) = Σ q_i (p − p_i)/|p − p_i|³`; render as `quadraticCurveTo` segments. Animate a flowing dash offset along each line.
- When only a monopole remains, the integrator's lines visibly *don't close* and the code should make a small show of "retrying" — lines that fade and re-seed — to dramatize that a clean monopole field is topologically fine but the *renderer's loop-closing heuristic* keeps failing. This is the emotional beat: the math is consistent, the picture won't resolve.
- Cursor adds a transient weak charge at the pointer (`q ≈ 0.15`, decaying over ~600ms) — subtle, lagged, never the main event.

**Scroll choreography:** use a single `IntersectionObserver` on six `<section>` sentinels to set a `chapter` integer; everything else (canvas state, background tint shift from `#070810` toward a faintly warmer `#0B0A10`, the rail readout strings, the one oscilloscope step) keys off that integer. Use `prefers-reduced-motion` to freeze the canvas to a static rendered frame per chapter and disable the flow animation — but keep the imagery.

**Type in motion:** section titles do a slow **fade-reveal** with a 12px upward drift and a 0.5px → 0px letter-spacing settle — calm, not springy. The left-rail mono readout uses a restrained **typewriter-effect** when a value changes (e.g. when `EVENTS` ticks from `0` to `1` at the Valentine's section). Pull-quotes in Spectral italic fade in at 0.9 opacity. No bounce, no elastic, no card-flip, no tilt-3d — this site is grave.

**The one interaction that matters:** in the Valentine's Day Event section there is a small button-less affordance — `[ replay the event ]` set in IBM Plex Mono. Clicking it re-runs the single 8Φ₀ step on the oscilloscope trace once. That's it. The whole point is that it only ever happened once, and pretending you can replay it is itself a quiet joke about irreproducible results.

**Tone of copy guidance:** write like a careful experimentalist, not a marketer. State the prediction, state the searches, state the null results, state the open question. Let the absence do the work. End on Dirac's actual reasoning: the mere *existence* of one monopole anywhere in the universe would explain why electric charge is quantized — so we keep looking, not because we expect to find it, but because the alternative is that the universe had no reason to be the way it is.

AVOID entirely: hero CTAs, "Get Started" buttons, pricing tiers, testimonial cards, stat-grids with big numbers counting up, feature-comparison tables, glassmorphism panels, generic gradient meshes.

## Uniqueness Notes

Differentiators this design commits to (and which other CMassC sites should not duplicate):

1. **The site IS a physics simulation, not a page with an animation on it.** A live field-line integrator on `<canvas>` is the entire visual substrate; content floats over it. `generative` aesthetic sits at ~12% in the corpus and almost none use it as the literal load-bearing layer rather than a background flourish.
2. **A layout that refuses card-grid and dashboard** (89% / 34% in the corpus) in favor of `layered-depth` + `single-column` reading spine with a 44px instrument rail — closer to a journal article than a landing page. No nav, no footer CTA, no stat-grid.
3. **The "renderer that fails on purpose"** — the central visual conceit (a dipole resolving cleanly, a monopole that the loop-closing heuristic can't draw) is a piece of narrative engineering tied to the domain's meaning. It is not a generic particle field.
4. **The Dirac string in `#7C5CFF`** used exactly once, trailing off the viewport — a single-use color and motif, the opposite of the corpus norm of repeated accent colors.
5. **Mysterious-moody tone in service of an unconfirmed scientific result** — restraint, null results, the dignity of "received: 1931 — accepted: never" — rather than the corpus-dominant pastoral-romantic / warm-inviting registers.

Chosen seed/style: **generative art background** (from seeds.json), realized as `aesthetic: generative, layout: layered-depth, typography: mono, palette: midnight-blue, patterns: fade-reveal, imagery: generative-art, motifs: circuit, tone: mysterious-moody`.

Avoided overused patterns from the frequency analysis: hand-drawn (96%), glassmorphism (76%), photography imagery (98%), warm/gradient palettes (98%/96%), card-grid (89%), centered (85%), full-bleed-as-photo-hero, parallax (93%), strong cursor-follow (89%), spring (86%) — the cursor reaction here is intentionally weak and lagged, and motion is calm fade-reveal rather than spring/elastic/tilt-3d. Where `magnetic` (79%) appears it is the *conceptual core* (the magnetic monopole) rather than a hover micro-interaction.
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:36:25
  seed: generative art background
  aesthetic: monopole.boo is a **generative-art field laboratory** dressed as a haunted physi...
  content_hash: 3753f9acbd6c
-->