# Design Language for monopole.quest ## Aesthetics and Tone monopole.quest is the field journal of an obsession: the century-long hunt for the **magnetic monopole** — a particle Dirac said *must* exist for charge to be quantised, that Maxwell's equations have a polite empty chair waiting for, and that no detector has ever caught. The site is built like a **deep-underground observatory's logbook crossed with a generative-art plotter print**: graphite-dark vellum, faint engineering grid, and over everything a living, drawn-in-real-time tangle of **magnetic field lines** that behave correctly — they loop, they pinch, they emanate from a single imaginary north pole with no south. The tone is **mysterious-moody** with the dry patience of an experimentalist who has waited thirty years for one event and is prepared to wait thirty more. Not spooky — *vigilant*. The mood is 3 a.m. in a control room a kilometre below a mountain: the hum of cryostats, a single oscilloscope trace, coffee gone cold, and the conviction that absence of evidence is just data you haven't finished collecting. Nothing here sells. There is no "product." The site is a **monument to a maybe** — an essay you fall through, narrated in the cadence of a lab notebook, illustrated by mathematics that moves. The emotional register: humility in the face of a 150-year-old open question, and the quiet thrill of a search that has never been closed. ## Layout Motifs and Structure **Immersive vertical scroll** through seven numbered **Entries** (Entry 00 → Entry 06), each a full-viewport plate. No centred content well in the conventional sense — instead a **continuous left margin rail** runs the entire document: a hairline vertical line at ~14vw from the left edge, ticked like a ruler, against which every Entry's number, timestamp, and "instrument reading" are hung. The body text sits in a single column of ~58ch that floats just right of the rail and *drifts* — some Entries align it left against the rail, some let it fall to centre, one (Entry 04, "The Null Result") pushes it to the far right edge so the empty left two-thirds of the screen becomes the visual subject. **The field-line layer is the backbone.** A full-bleed `` sits behind everything, rendering ~40–80 magnetic field lines as thin curves. They originate from a single moving **virtual monopole** (the "north pole with no partner") whose position is driven by scroll: Entry 00 it sits dead-centre and the lines radiate symmetrically; as you scroll the pole migrates and the field deforms, lines bunching where it nears the text column, splaying where it recedes. By Entry 04 the pole drifts entirely off-screen and the field goes nearly flat and parallel — the visual equivalent of "nothing detected." Entry 06 it returns, but doubled and unstable, flickering between one pole and a dipole as if the universe can't decide. **Plate composition rules:** - Each Entry: 100vh min, `display: grid` with the margin rail as a fixed-width first column. - A persistent **HUD strip** along the very bottom edge — 28px tall, monospace, showing a fake live readout: `FIELD INTEGRAL ∮B·dl = 0.000 ± 0.07 ⌀ | RUN 11042 | LIVE` — the numbers twitch slightly on a slow timer. It never advertises anything. - One large **drawn diagram** per Entry, rendered as inline SVG with `path` stroke-dashoffset animation: a Dirac string, a solenoid cross-section, the MoEDAL detector array, a hysteresis loop. These draw themselves on scroll-into-view. - **No nav bar.** Wayfinding is a thin progress meridian on the right edge — a vertical line with seven nodes; the active node glows faint cyan. Clicking jumps. That's the entire navigation. - Generous **ma** (negative space): Entry 02 ("Dirac, 1931") is almost entirely empty — one sentence, one equation, one slowly rotating field-loop. Let it breathe for a full screen. ## Typography and Palette **Typefaces — all available on Google Fonts:** - **Spectral** (serif, weights 300 / 400 / 500 / 400-italic) — the narrative voice. A screen-bred serif with calm, slightly technical proportions; reads like a well-set physics monograph. Body at 1.0625rem, line-height 1.8, generous measure. Used for all prose, abstracts, the long essayistic passages. - **IBM Plex Mono** (weights 400 / 500 / 600) — the instrument voice. Everything that pretends to be machine output: Entry numbers, timestamps, the bottom HUD readout, equation labels, axis ticks, the progress meridian's node labels, figure captions prefixed `FIG.`. Set tight, tracked +0.04em, often in the cyan accent. - **Fraunces** (variable, 72pt optical size, weight 300 / 400, italic) — used *only* for the seven Entry titles, set large (clamp 2.8rem → 5.5rem), low-weight, italic, in near-white. A single expressive serif gesture per plate; never anywhere else. **Palette:** - `#0A0C10` — *pitch graphite*, the page base; the underground dark. - `#11151C` — *cryostat slate*, panels and the field-canvas tint. - `#E8EBF0` — *plotter white*, primary text and the Fraunces titles (used at ~88% opacity for body so it never glares). - `#7C8694` — *lead grey*, secondary text, captions, the engineering grid lines. - `#3A4250` — *graphite rule*, hairlines, the margin rail, inactive meridian nodes. - `#5BE0D0` — *Cherenkov cyan*, the single accent: active states, the live HUD numbers, the imaginary monopole's glow, drawn-diagram highlight strokes. Used like a laser pointer — rarely, deliberately. - `#C9A24B` — *brass index*, a deep warm gold reserved for equation glyphs and the Dirac-quantisation condition when it appears (Entry 02). The only warmth in the whole palette; it earns its appearance. Field lines render in `#7C8694` at 18–32% opacity; lines passing close to the virtual monopole tint toward `#5BE0D0`. ## Imagery and Motifs - **Generative magnetic field lines** — the signature element. Not decoration: a small physics sim. Compute the field of one virtual monopole (plus, in later Entries, image charges and a phantom dipole), trace streamlines from a Poisson-disc set of seed points, render as `bezierCurveTo` paths with subtle per-line jitter so it reads as *hand-plotted*, not vector-perfect. The whole field redraws smoothly as the monopole's scroll-driven position changes. On pointer movement, a faint extra test-charge perturbation ripples the nearest 6–8 lines, then settles (spring easing). - **Drawn scientific diagrams**, SVG, self-drawing on scroll: (1) the **Dirac string** — a semi-infinite solenoid trailing from a point, dashed; (2) a **solenoid cross-section** with circulating B; (3) the **MoEDAL** nuclear-track-detector stack at the LHC, rendered as a clean isometric exploded view in lead-grey line work; (4) a **hysteresis / magnetisation loop** for Entry 05 ("Cabrera's Valentine") — the famous single candidate event of 14 Feb 1982, drawn as a SQUID magnetometer step on a time axis with one lonely vertical jump labelled in brass. - **The empty detector** — Entry 04's only image: a wide, near-black photograph-style render of a vast clean experimental hall, a cylindrical detector at centre, no people, no event, captioned `FIG. 04 — 41 YEARS. ZERO MONOPOLES. THE NULL IS ALSO A MEASUREMENT.` - **Engineering grid**: a faint 48px graph-paper grid (lines at `#3A4250`, ~6% opacity) under everything, with slightly heavier rules every 5th line — the substrate of every lab notebook. - **Equation typesetting as ornament**: ∇·B = 0 (crossed out, faintly, in Entry 00 — "the law we're trying to break"), and eg/ℏc = n/2 (Dirac's condition, in brass, Entry 02) are the recurring textual motifs, set large and given their own space. - **Grain overlay**: a 4–6% monochrome film grain across the whole viewport, animated at ~8fps — the look of a long-exposure plate, of patience made visible. ## Prompts for Implementation Build monopole.quest as **one long single HTML document** — seven Entries, no SPA, no router, no modals, no marketing chrome. The visitor scrolls top-to-bottom through a field journal; the experience is *one continuous descent into a question*, not a set of pages. Prioritise **atmosphere and the physics-driven generative layer over information density**, **slow narrative over branching**, **one moving idea per screen**. **Hard exclusions:** no CTA buttons, no "get started," no pricing tables, no stat-grid / number-counter blocks, no testimonial cards, no FAQ accordion, no email capture, no newsletter bar, no feature-card grid, no logo cloud, no hero-with-two-buttons. If a section feels like a landing page, delete it. The closest thing to a "call to action" permitted is a single quiet line at the very end: *"The search remains open."* **Structure & motion:** - **Overture (≤ Entry 00, ~2.5s, non-skippable):** black screen; the engineering grid fades up; then a single point of cyan light at centre; field lines draw outward from it, one at a time, accelerating, until the full radial field is rendered — then the title *"The particle that should be"* (Fraunces, italic) fades in over it. Only then does scroll unlock. Respect `prefers-reduced-motion`: skip the line-by-line draw, present the field complete. - **Scroll-driven field:** map `window.scrollY` (normalised 0→1) to the virtual monopole's `(x, y)` along a hand-chosen path that visits centre → drifts left near the text → off-screen-right by Entry 04 → spirals back, doubled and jittery, by Entry 06. Recompute streamlines each frame with `requestAnimationFrame`, but throttle the *seed-point* recompute to ~20fps and only interpolate paths between — keep it smooth, keep it cheap. - **Diagram reveals:** each inline SVG diagram uses `stroke-dasharray`/`stroke-dashoffset` driven by an `IntersectionObserver`; draw over ~1.4s with a gentle ease-out; brass-highlighted strokes draw last. - **Text reveal:** body paragraphs do a soft `blur(6px)→0` + 12px rise + opacity, staggered by line at ~60ms, triggered at 35% into view. Entry titles do a slow letter-by-letter opacity rise (no bounce, no slide — dignified). - **HUD readout:** `setInterval` ~900ms nudging the fake field-integral number within ±0.07, occasionally (1 in ~30) flashing a brief `— EVENT? —` in cyan that resolves back to `— null —` after 600ms. Never links anywhere. - **Pointer interaction:** moving the cursor introduces a transient "test charge" that bends the nearest field lines (spring-back), and very faintly brightens the grid cells it passes over. On touch devices, drag does the same; tap on the progress meridian jumps Entries with a smooth scroll. - **The seven Entries (titles, for tone):** 00 *The particle that should be* · 01 *A hole in Maxwell's symmetry* · 02 *Dirac, 1931* (almost-empty, brass equation) · 03 *Looking everywhere* (MoEDAL isometric) · 04 *The null result* (right-pushed text, empty-hall image, flat field) · 05 *Cabrera's valentine* (the 1982 single event, hysteresis diagram) · 06 *The search remains open* (doubled, flickering field; final quiet line). - **Performance discipline (visual, not a11y):** cap field lines on small viewports (~28), pause the canvas RAF when the document is hidden, never let the grain layer cost a repaint of content. - **Footer:** no footer in the marketing sense — just the persistent bottom HUD, and below the final line a single monospace credit row: `monopole.quest · a field journal · ∮B·dl = 0`. The whole thing should feel like you opened someone's lifelong logbook, the equations started moving, and you couldn't stop reading until the bottom. ## Uniqueness Notes **Differentiators from sibling designs:** 1. **A physically-correct generative field as the entire background system.** The corpus has gradient-mesh and organic-blob backgrounds; none run an actual magnetic-field streamline simulation whose single source migrates under scroll control and deforms around the text. The "imaginary monopole that drives the layout" is the structural conceit and it exists nowhere else here. 2. **Negative space *as the message*, not as polish.** Entry 04 deliberately pushes all content to the right edge and lets two-thirds of the screen go empty with a flat parallel field — the layout *enacts* "we found nothing." Most ma-negative-space designs in the corpus use emptiness for elegance; this uses it as an argument. 3. **The anti-CTA stance carried to its logical end.** No buttons, no captures, no stat-grids — and the only "action" line is *"The search remains open,"* which asks nothing. A monument-to-a-question rather than a funnel. 4. **Brass-on-graphite scarcity rule.** One warm colour (`#C9A24B`) in the entire palette, used exactly twice (the crossed-out ∇·B = 0 and Dirac's eg/ℏc = n/2). Restraint as drama. 5. **The fake live HUD with its 1-in-30 phantom event.** A persistent instrument readout that occasionally teases `— EVENT? —` then resolves to null — narrative tension built into ambient UI, links to nothing. **Chosen seed/style:** `aesthetic: generative, layout: immersive-scroll, typography: serif-revival, palette: midnight-blue, patterns: path-draw-svg, imagery: generative-art, motifs: abstract-tech, tone: mysterious-moody` (derived from the seed family *"generative art background"* / *"parallax storytelling journey"*; no explicit seed was supplied in the assignment). **Avoided overused patterns (per frequency analysis):** no hand-drawn aesthetic (96%), no glassmorphism (76%), no photography-led imagery (98%), no card-grid (89%), no warm/gradient palette dominance (98%/96%), no cursor-follow-glow cliché beyond a restrained physics perturbation, no pastoral-romantic tone (34%). Leans into underused territory: `generative` aesthetic, `path-draw-svg` patterns, `generative-art` imagery, `mysterious-moody` tone, `midnight-blue`/`ethereal` palette, `immersive-scroll` + `ma-negative-space` layout.