# Design Language for monopole.systems ## Aesthetics and Tone monopole.systems is the public-facing instrument panel of a (fictional) deep-physics collective that hunts for the **magnetic monopole** — the hypothetical particle that carries a *single* magnetic charge, a north without a south. The entire site is built around one stubborn physical fact: a monopole's field lines stream **outward only**. There is no return path. Everything radiates from a center and never closes. This is not a marketing site; it is a **field-monitor**, an always-on observatory readout rendered for the web — the kind of screen you would find dimmed in a corner of a detector hall at 4 a.m. The mood is **mysterious-moody, instrument-grave, quietly obsessive** — the tone of a research log written by someone who has spent eleven years looking for something that has never been seen. Not cyberpunk (no neon excess, no glitch theatrics, no chrome), not corporate-SaaS-dark (no gradient buttons, no friendly accent pops). Instead: **midnight-blue void, a single warm signal color, hairline grids, and slow drifting generative field-line geometry** computed live. The aesthetic is **generative** in the truest sense — the hero is not a picture of a field, it *is* a field, recomputed every frame from a charge that the visitor's cursor perturbs. Think of the deep blue of a long-exposure night-sky plate, the amber phosphor of an old oscilloscope, and the cold precision of a vacuum-chamber schematic — fused into one calm, humming surface. ## Layout Motifs and Structure The site is a **full-bleed HUD-overlay**: one fixed dark canvas that fills the viewport at all times, with content panels floating *over* it like instrument widgets pinned to a monitoring console. Scrolling does not move the canvas — the canvas is the constant; only the overlay panels translate and the underlying field re-seeds. Structure — six "stations," each a translucent panel docked to a different edge or corner so the radiating field is never fully covered: 1. **STATION 00 — THE CHARGE.** Centered, minimal: just the title `monopole.systems`, a sub-line, and the live field filling the whole screen behind it. A faint reticle (crosshair + tick ring) marks the singular charge at screen center. Field lines emanate from it and run off all four edges — never curving back. 2. **STATION 01 — WHAT WE'RE LOOKING FOR.** Panel docked **bottom-left**, narrow column. A plain-language note on monopoles: Dirac's 1931 argument, why one monopole would quantize all electric charge, why none has ever been caught. Text set like a lab memo. 3. **STATION 02 — THE INSTRUMENT.** Panel docked **right edge**, vertical. A schematic-style breakdown of the (imagined) detector: induction loop, SQUID magnetometer, the "persistent-current" trap. Rendered as labeled hairline line-art, callout leaders pointing to parts. 4. **STATION 03 — THE LOG.** Panel **top-center**, wide and short. A scrolling run of dated entries — candidate events, false alarms, the famous real 1982 Valentine's-Day event at Stanford that was never repeated. Monospaced, like a terminal tail. 5. **STATION 04 — FIELD STUDY.** Full-width band, the overlay nearly transparent here — the visitor is invited to *play the field*: drag to move the charge, press to flip its sign, watch the lines re-route. A caption explains: a real monopole would do exactly this to a real instrument. 6. **STATION 05 — STANDING WATCH.** Panel **bottom-right**, small. Closing note, a quiet "the search continues," a single contact line (`signal@monopole.systems`), and a tiny live "uptime since" counter styled as detector run-time. No CTA buttons, no form, no pricing. A persistent thin **status bar** runs along the very bottom edge across all stations: left = current station id (`00 / THE CHARGE`), center = a faint live readout (`Bz: +0.00 µT · drift nominal`), right = a slow blinking square (the "armed" indicator). It is decor, not chrome — it never links anywhere except the station dots. Spatial rule: **the center of the screen is sacred** — the charge lives there and overlay panels must always leave a clear radial corridor through the middle. Negative space is the void; it is supposed to feel mostly empty, with instruments huddled at the margins. ## Typography and Palette **Type system — Google Fonts only:** - **Instrument display / headings:** `Major Mono Display` — a monospaced, almost-stencil face with circular bowls; used *sparingly* and at large size for station ids and the wordmark. Its mechanical evenness reads like laser-etched panel labels. Tracked `+0.12em`, lowercase. - **Working monospace (logs, readouts, schematic labels, body in STATION 03):** `JetBrains Mono`, weights 300–500. This is the workhorse for anything that should feel like it came off a console — timestamps, field values, code-like annotations. Tabular figures on. - **Humanist body (the lab-memo prose in stations 01, 02, 04, 05):** `Spectral` at 300/400, with `Spectral` italic for asides and quoted physicists. A literary serif here is the deliberate counterweight — it signals that humans, not dashboards, wrote these notes. Generous 1.7 line-height, max 62ch measure. **Palette:** - `#070A12` — **chamber black-blue**, the void / page base (very dark navy, never pure black). - `#0E1626` — **panel field**, the translucent overlay panel fill (used at ~82% opacity over the canvas with a 0.5px `#2A3A57` hairline border). - `#9FB4D6` — **cold dust**, primary readable text on the void; the muted steel-blue of starlight. - `#5E7196` — **dim label**, secondary text, axis ticks, schematic leaders. - `#1C2740` — **grid line**, the faint reticle and background graticule. - `#F2B544` — **signal amber**, THE ONE accent: the field-line glow, the active station dot, the "armed" blinker, the cursor-charge marker. Used only for live/active state — never for plain links, never for buttons. When the visitor flips the charge sign in STATION 04, this shifts to: - `#3FD0C9` — **inverse cyan**, the only secondary accent, appearing solely to denote a flipped (south-only) charge — a momentary cool counterpart to the amber. Contrast intent: a near-monochrome blue field where the amber is so rationed it reads as *information*, the way a single lit LED on a black rack means something. ## Imagery and Motifs - **The live field (the centerpiece, generative, not an image).** A radial vector field of ~120–200 streamlines integrated outward from the charge using simple Euler steps; lines fade from `#F2B544` near the core to `#2A3A57` at the edges; they **never close into loops** — if a streamline would curve back it instead runs off-canvas (this is the whole conceit). Subtle per-frame jitter makes it breathe like a long exposure. A faint hexagonal-ish dust of slow-drifting particle points sits behind, advected along the field — `particle-effects` motif, used at very low density so it reads as vacuum, not snow. - **The reticle.** A 1px crosshair at the charge with a broken tick-ring (12 ticks, 4 long), plus tiny corner brackets framing the active panel — borrowed from viewfinder/HUD vocabulary. - **Schematic line-art (STATION 02).** All instrument parts drawn as flat hairline SVG — induction loop as a torus in 2-line cross-section, SQUID as a small interrupted ring, callout leaders as thin elbowed lines ending in a 2px dot and a `JetBrains Mono` label. Pure `#5E7196` on void, no fills. - **The graticule.** A barely-there full-screen grid (`#1C2740`, 1px, 64px cells) that the field is drawn *over* — anchors the void to a coordinate frame. - **Dirac string (easter-egg motif).** One single dashed line trailing from the charge to one edge — the "unobservable" Dirac string — drawn at 6% opacity, only visible if you look. A hover near it reveals a one-line tooltip: *"the string you can't measure."* - **No photography. No stock. No 3D render. No icons-as-decoration.** Every visual is either generated math or hairline schematic. ## Prompts for Implementation Build monopole.systems as **one HTML page, one CSS file, one ES module** — no framework, no build step. The page is a quiet 90-second visit to an observatory monitor. - **The canvas is everything.** A single full-viewport `` fixed at z-0, redrawn each `requestAnimationFrame`. On load, seed a charge at screen center; on `pointermove`, ease the charge toward the cursor with a spring (slow, ~0.06 stiffness) so the field *follows* gently; on `pointerdown` in STATION 04's band, flip the charge sign (amber↔cyan) with a 600ms color morph and a brief radial shimmer. Field math: for each streamline seed on a small ring around the charge, integrate `dir = (p - charge)/|p-charge|` with a tiny tangential swirl term, ~40 steps, stop at viewport bounds — **draw, never close**. Respect `prefers-reduced-motion`: freeze the field to a static integrated frame, keep only the blinker. - **Overlay panels.** Plain absolutely/`position:fixed` panels at the docked edges described above, `#0E1626` at 82% opacity, `backdrop-filter: blur(3px)`, 0.5px `#2A3A57` border, corner brackets in `::before/::after`. They `fade-reveal` + `slide-reveal` in as their station enters the viewport (IntersectionObserver, 24px translate, 700ms). Stagger child lines by 60ms. - **Storytelling, in this order:** (00) the charge + wordmark over the breathing field → (01) what a monopole is, in plain memo prose, Spectral → (02) the imagined instrument as hairline schematic with path-draw-svg leaders animating in → (03) THE LOG: a `JetBrains Mono` list of dated entries that types its newest line on reveal (typewriter-effect, one line only), including the real 1982 Cabrera event → (04) FIELD STUDY: hand the field to the visitor, caption it → (05) STANDING WATCH: closing line, `signal@monopole.systems`, a run-time counter that counts up live (`counter-animate`). - **Status bar:** fixed bottom strip, three zones, the right blinker a 7px square pulsing amber on a 1.1s ease. The center readout shows a slowly wandering fake `Bz` value derived from the field magnitude under the charge. - **Navigation:** a column of six tiny dots up the **left edge**, one per station; active dot fills `#F2B544`; clicking smooth-scrolls. No top nav, no hamburger, no logo lockup, no footer links. - **Motion budget:** everything slow and damped — springs, eases over 600–900ms, no bounce, no elastic. The site should feel like it is *monitoring*, patiently. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero-with-button, feature-card triads, newsletter capture, cookie banners, chat bubbles, gradient buttons, neon glow stacks, glassmorphic card grids. None of these. The only "card" is an instrument panel; the only accent is a signal. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The hero is a physics integrator, not an illustration.** Where the corpus overwhelmingly leans on `photography` (98%) and `gradient-mesh` imagery, monopole.systems has *zero* images — the centerpiece is a live-computed open vector field whose defining behavior (lines that radiate and never close) is the literal scientific signature of a magnetic monopole. The decoration is the subject. 2. **HUD-overlay as the whole architecture.** `hud-overlay` is a ~2% layout in the corpus; here it is total — a single never-moving canvas with instrument panels docked to the margins, leaving a sacred radial corridor through screen center. No card-grid (89%), no centered hero stack (85%) in the conventional sense — content hugs the edges so the void can be seen. 3. **Ration discipline on color.** Against the corpus's near-universal `warm` + `gradient` palettes (98% / 96%), this is an almost-monochrome midnight-blue void with exactly one accent (`signal amber #F2B544`) used only for *live state* — plus one secondary (`inverse cyan`) that appears only when the visitor flips the charge's sign. Amber here is information, not flavor. 4. **Serif prose inside a console.** Pairing `Spectral` literary serif body against `Major Mono Display` / `JetBrains Mono` instrument type — the deliberate "a human wrote this log" counterweight — runs opposite to the typical all-mono or mono+humanist-sans tech treatment. 5. **The Dirac-string easter egg.** A 6%-opacity dashed line you're not supposed to be able to measure, with a single self-aware tooltip — a piece of real theoretical physics smuggled in as a near-invisible motif. **Chosen seed/style:** `generative field-monitor — aesthetic: generative, layout: hud-overlay, typography: tech-mono, palette: midnight-blue, patterns: morph, imagery: data-viz, motifs: particle-effects, tone: mysterious-moody` **Avoided overused patterns (per frequency analysis):** no `hand-drawn` (96%), no `glassmorphism`-as-style (76%) beyond a thin functional panel blur, no `photography` (98%), no `card-grid` (89%), no `centered`-hero cliché (85%), no `warm`+`gradient` palette default (98%/96%), no `cursor-follow` gimmickry beyond the physically-motivated charge spring, no `parallax` scenery.