# Design Language for monopole.tech ## Aesthetics and Tone monopole.tech is staged as **the live readout of an imaginary observatory that is hunting for a single magnetic monopole inside a simulated universe** — a particle that, by every textbook, should not exist alone: a north pole with no south. The site is the instrument panel of that hunt, rendered the way a 1970s lattice-gauge-theory paper would look if it had been re-typeset by a contemporary scientific-computing lab that prefers cold light and quiet confidence over dashboards and hype. The mood is **clinical wonder**: the patience of someone watching a detector for decades, the thrill of a single anomalous spike. Nothing here is warm. Everything is precise. The conceit reads three ways and the site exploits all three. **Mono-pole** — one pole, an asymmetry the universe seems to forbid, so the entire page is built around a single luminous node that never has a partner. **Mono-pole** as in *monopole antenna* — a quarter-wave radiator over a ground plane, so a horizontal "ground plane" line runs the full width and a vertical radiator rises from it through the whole document. **Mono · pole** as in *monospace, polar* — a polar coordinate grid drawn in a single typewriter weight. The aesthetic is **isometric-technical** crossed with **dark-mode scientific instrumentation**: a Dirac-string drawn as a dotted ray to infinity, a 3D wire lattice you can feel rotating behind the type, field lines that resolve themselves on scroll. It is the opposite of friendly. It is the calm of a control room at 4 a.m. Tone words: precise, cold-lit, contemplative, slightly haunted by an absence. The site treats the visitor as a colleague on shift, not a customer. There is no persuasion anywhere — only observation logs, field equations rendered as ornament, and the steady blink of a node that represents something that has never been found. ## Layout Motifs and Structure The structure is **a single vertical radiator over a ground plane** — `immersive-scroll`, `single-column`, deliberately rejecting `card-grid`, `bento-box`, `dashboard`, and `centered hero` layouts. The page is roughly 640vh, divided into **seven "stations"** like positions along an antenna. The load-bearing structural conceit: - A **2px ground-plane rule** is fixed near the bottom of the viewport — a horizontal line that never moves, labeled with tick marks every 64px and a faint coordinate readout at its left end. Everything that scrolls scrolls *above* it. The ground plane is the only fixed element. - A **1px vertical radiator** runs up the exact horizontal center of the document from that ground plane, dotted, with current-node markers (small filled circles) at each station boundary. Section headings hang off this radiator like labels on a schematic. - Behind the type, in a `` pinned full-bleed, sits an **isometric wire lattice** — a 12×12×12 cube of points connected by faint edges, drawn in 30°/30° isometric projection, rotating about its vertical axis at ~0.15°/frame. This is the simulated universe. Somewhere inside it, **one node glows** — the monopole — and it drifts, slowly, never reaching an edge, never finding a mate. As the visitor scrolls, the lattice tilts (`scroll-triggered` parallax on the projection angle only, never on position) so the monopole's glow sweeps across the type. - Stations alternate **left-margin-anchored** and **right-margin-anchored** text columns (max 62ch) — `asymmetric`, never centered — so the eye zig-zags down the radiator. Negative space is enormous; most of each viewport is lattice and void. - One station breaks format entirely: a **full-bleed polar plot** — concentric rings, 12 radial spokes, the monopole's drift-track plotted as a thin spiral — with no text except axis labels. It is the "current field map." - The footer is the **detector log**: a left-aligned monospace column, fixed-width, each line a timestamped non-event ("2026-05-11T04:17:09Z — flux integral nominal — no candidate"), scrolling slowly upward on its own, forever. The last line is always blank, waiting. No nav bar. A single thin **station index** sits vertically along the left edge — seven roman numerals, the current one filled, the rest hollow — that is the only persistent UI. ## Typography and Palette **Three Google Fonts, used with laboratory discipline.** - **Space Mono** (Google Fonts) — the instrument voice. Carries the ground-plane readout, the detector log, all coordinate labels, all "data" strings, station numbers. Used at 13px / 1.7 line-height, tracked +40, never bold, often at 60% opacity. This is the typewriter-polar layer; it is everywhere small things are labeled, and nowhere large. - **Bricolage Grotesque** (Google Fonts) — the display voice, set in its heaviest weights. Carries the seven station titles ("I — THE FORBIDDEN POLE", "IV — DIRAC'S STRING", "VII — STILL WATCHING") at 64–104px, tight tracking (−2%), set `text-transform: uppercase`, color near-white, hung off the vertical radiator. Its slightly irregular, optically-corrected curves keep the page from feeling like a soulless terminal — there is a hand behind the instrument. - **Newsreader** (Google Fonts) — the reading voice, italic-leaning. Carries body paragraphs and the inline "lab notebook" asides, set at 19px / 1.62, in a desaturated blue-grey, with key terms (monopole, Dirac string, ground plane, flux quantum) set in *italic* — never bold, the way a physics text emphasizes a defined term. Generous paragraph spacing; ragged right. **Palette — cold instrumentation, one ember of light.** - `#05070A` — **void black**, the page ground. Not pure black; a hint of blue, like a cooled CRT. - `#0C1118` — **panel** — used for the polar-plot inset and the log footer plate, one step up from void. - `#1A2430` — **lattice ink** — the color of the wire-cube edges and the dotted radiator at rest, barely above the background. - `#9FB2C4` — **slate readout** — Space Mono labels, secondary text. The "powered-down" color. - `#D7E3EF` — **near-white** — Bricolage display type, primary text. Cold paper under fluorescent light. - `#5BE0C6` — **monopole glow** — the *only* saturated color in the whole site: a cold aquamarine. The drifting node, its halo, the polar-plot drift-track, the current station numeral, hover states. It must appear *sparingly* — one element lit at a time. Its rarity is the point. - `#2A66E0` — **field blue** — used only inside the canvas for the faint field-line gradients streaming toward/around the monopole; never in the DOM as text or border. Contrast is high between near-white and void; everything else is a whisper. The aquamarine should feel almost too bright when it appears — the eye should jump to it. ## Imagery and Motifs **No photography. No hand-drawn anything. No icons-as-decoration.** Every visual is generative, geometric, or typographic — `generative-art` and `geometric-abstract` over the dominant photography/hand-drawn cohort. - **The wire lattice** — the 12³ isometric point-cloud behind everything, rotating, the universe being searched. Edges at `#1A2430`, points as 1.5px squares. This is the signature image. - **The monopole node** — a single 6px disk in `#5BE0C6` with a soft 40px radial bloom, drifting on a slow Perlin-noise path through the lattice interior. It pulses faintly (±15% radius, 4s cycle), like a detector counting. - **Dirac string** — a dotted ray (`#5BE0C6` at 25%) leaving the monopole node and continuing straight off the top edge of the canvas, *forever* — the unphysical singularity line. It re-aims as the node drifts. Appears at Station IV and stays. - **Field lines** — thin Bézier curves streaming from the lattice edges toward the monopole, drawn with a `#2A66E0`→transparent gradient, density rising the closer you are to the node. They redraw continuously, slowly, like iron filings that can never quite settle (because there's no return pole). - **The polar plot** — concentric rings + 12 spokes in `#1A2430` on the `#0C1118` panel, with the monopole's recorded drift-track overplotted as a 1px aquamarine spiral and a single "candidate" marker that, on close inspection, is labeled "(artifact — retracted)." - **Tick-and-readout ornaments** — every long line (ground plane, radiator) carries Space Mono micro-labels: coordinates, "λ/4", flux values, UTC stamps. The page should read like a thing that has been *calibrated*. - **Equations as rule lines** — `∮ B·dA = μ₀ g` and `eg = nℏc/2` (the Dirac quantization condition) appear once each, set very small in Newsreader italic, used literally as horizontal divider rules between two stations — knowledge as ornament. Texture: a near-invisible scanline overlay (1px lines, 3% opacity, fixed) over the whole page — the CRT of the control room — plus the faintest film grain that animates. ## Prompts for Implementation Build monopole.tech as **one HTML document, one CSS file, one small ES module, one `` — no framework, no router, no build step beyond a single esbuild pass.** The page is one continuous ~640vh vertical scroll, seven stations, ground-plane line and vertical radiator fixed/threaded throughout. The visitor lands, scrolls down the radiator, reads the log, leaves. There is no second page and the page does not link out — it is an instrument, not a site. **Storytelling is the organizing principle, not navigation.** The seven stations compose a single arc: (I) the monopole is forbidden by symmetry; (II) yet a single one would explain charge quantization; (III) so we built a lattice universe to look; (IV) here is its Dirac string, the price of writing it down; (V) decades of the field map — the polar plot; (VI) every candidate so far has been an artifact; (VII) and still the detector watches, the log scrolling forever. Copy is sparse, declarative, present-tense, written as shift notes. Never sell. Never use a CTA, a pricing block, a stat-grid, a testimonial, a feature card, or a "trusted by" row — none of these exist here. **Canvas (the universe):** Implement the 12³ isometric lattice in vanilla canvas 2D (no WebGL needed). Project points with a fixed 30°/30° iso matrix; rotate the *whole cloud* about its Y axis at ~0.15°/frame; let scroll position add a small ±8° tilt to the projection (`scroll-triggered`, eased). The monopole node walks a 3D Perlin path bounded to the inner 60% of the cube, speed ~0.4 units/sec — it must *never* touch an edge and *never* split. Render in this order: edges → field-line Béziers (gradient toward node) → Dirac-string dotted ray (off the top, infinite) → monopole disk + radial bloom (use `createRadialGradient`). Cap at 45fps; pause when tab hidden; if `prefers-reduced-motion`, freeze the lattice and let only the node pulse. **DOM choreography:** Station titles in Bricolage Grotesque `fade-reveal` + `slide-reveal` upward (24px, 0.7s, cubic-bezier(.16,1,.3,1)) as they cross 70% viewport, hung off the vertical radiator with a 1px connector line that draws in via `path-draw-svg`. Body paragraphs `stagger` in by line, 40ms apart. The station index numerals on the left fill/empty via `scroll-triggered` IntersectionObserver. Hover on any defined term (monopole, Dirac string, ground plane, flux quantum) gently raises a one-line Space Mono tooltip that *is itself a log entry* (`micro-interactions`, `underline-draw` in aquamarine). The footer detector-log column auto-scrolls upward at ~1 line / 6s, generating new timestamped non-events from a fixed template array, last line always blank. Cursor: a faint 1px crosshair reticle follows the pointer (`cursor-follow`) with Space Mono coordinates of its position pinned to the ground-plane readout — the visitor *is* a measurement. **The break station (V):** When the polar-plot station enters, the lattice canvas dims to 20% and the `#0C1118` polar panel slides up full-bleed; draw rings/spokes, then animate the drift-track spiral with `path-draw-svg` over ~2s, then drop the single retracted-candidate marker with a `pulse-attention` that fades to nothing. One Space Mono caption. No other text. **Forbidden:** no glassmorphism / frosted cards (76% of cohort — absent here), no warm or gradient-fill backgrounds in the DOM (98% warm cohort — this page is cold), no card-grid, no parallax on element *position* (only on projection angle), no hand-drawn marks, no photographs, no emoji, no rounded friendly UI, no light mode toggle. Aquamarine appears on at most one DOM element at a time. ## Uniqueness Notes Differentiators this design commits to — none should be duplicated by any other CMassC site: 1. **A single-radiator structural skeleton.** The fixed horizontal *ground plane* + threaded vertical *quarter-wave radiator* as the page's literal spine — section headings as schematic labels hung off it — is a layout primitive that exists nowhere else in the cohort. It is `single-column` (17%) + `asymmetric` (45%) recombined into something that reads as a circuit diagram, not a webpage. 2. **The monopole-that-is-never-found as the only saturated color.** One drifting aquamarine node inside a 12³ isometric wire universe, with a literal infinite Dirac string, while the entire rest of the palette is cold blue-greys on near-black. The emotional core — *an absence rendered as a single ember* — and the self-imposed rule that aquamarine touch at most one element at a time, is the signature of monopole.tech and would be plagiarism if copied. 3. **An instrument, not a site: no persuasion architecture at all.** Zero CTAs, zero pricing, zero stat-grids, zero testimonials, zero feature cards. The "content" is shift notes and a self-generating detector log that scrolls forever. The visitor's own cursor becomes a measurement readout. This is `terminal` (25%) × `dark-mode` (13%) × `isometric` (12%) fused into a *scientific instrument panel*, a combination none of those single-tag sites attempt. 4. **Equations and calibration ticks as the only ornament.** `∮ B·dA = μ₀ g` and `eg = nℏc/2` used literally as divider rules; every long line carrying Space Mono micro-labels (λ/4, UTC stamps, flux values). Knowledge-as-decoration in place of the cohort's near-universal photography (98%) and hand-drawn marks (96%). Avoided cohort patterns: glassmorphism (76% → none), photography imagery (98% → none), hand-drawn aesthetic/imagery (96% → none), warm palette (98% → cold throughout), card-grid layout (89% → single radiator column), centered hero (85% → asymmetric zig-zag), CTA/pricing/stat-grid blocks (banned by brief and absent here). Chosen seed/style: **generative art background** (from seeds.json) — realized as the rotating 12³ isometric wire-universe canvas with a Perlin-walked monopole node, field-line Béziers, and an infinite Dirac string, behind cold instrumentation typography.