# Design Language for monopole.cloud ## Aesthetics and Tone monopole.cloud is a **blobitecture field-laboratory** — a website that behaves like the inside of a vacuum chamber the instant after a magnetic monopole is detected. The conceit is taken literally from physics: an isolated magnetic charge, a particle that has *only one pole*, predicted by Dirac in 1931 and never observed. The entire site is staged as the moment of an event that has not happened yet — a quiet, instrument-lit room where the curves of a field are visibly bending toward a single point that should not exist. The mood is **mysterious-moody crossed with calm-serene** — not cyberpunk neon, not data-dashboard cold. Think the Super-Kamiokande detector photographed by candlelight; think a Bridget Riley field-painting that has started to drip; think the slow, gel-like motion of ferrofluid under a hidden magnet. Everything on the page is soft-bodied — there are no hard rectangles, no card borders, no straight rules. Surfaces are gelatinous, semi-translucent, lit from within like deep-sea organisms. The single accent of true saturation — a hot magnetic vermilion — appears *only* at the monopole point itself, and everything else on the page is pulled, optically and physically, toward it. The brand voice in copy is hushed, precise, faintly reverent: the lab notebook of someone who knows the apparatus might be lying to them but writes it down anyway. This is **not** a tech-startup landing page. There is no product. There is a phenomenon, and the site is the chamber it lives in. ## Layout Motifs and Structure The composition is **organic-flow / blobitecture** — the page rejects the grid entirely. Instead of columns, the layout is governed by a single invisible attractor point (the "monopole locus") that sits roughly at 62% width / 70% height of the first viewport and migrates slowly down-page as you scroll. Every element on the page is positioned, sized, and warped *relative to its distance from that locus* — closer elements are larger, more saturated, more tightly curved; distant elements are pale, small, and stretched into long thin filaments like field lines escaping to infinity. Structurally the site is **one continuous immersive-scroll** of ~620vh, divided into five "field regions" rather than sections — they bleed into one another with no hard transitions, the way iso-potential bands blur: 1. **The Null Field** (0–110vh) — near-empty cream space, one impossibly thin curved line entering from the top-left. The wordmark `monopole` set very small, lower-left, almost a footnote. A single sentence floats: *"A magnet with one end."* 2. **First Curvature** (110–250vh) — the blobs begin: three or four large soft-bodied translucent forms drift in from the edges, each visibly bowing toward the (still off-screen) locus. Text sits *inside* the blobs, justified to follow the blob's inner curve. 3. **The Locus** (250–400vh) — the monopole point itself enters frame: a tiny dense vermilion node from which dozens of field-line filaments radiate. This is the only place on the entire site where lines are *straight-ish* — they're radial spokes — but even they curve slightly as they leave. All surrounding blobs are now maximally deformed, teardropped, pointing at the node. 4. **Dirac's String** (400–530vh) — a single continuous SVG path — the "Dirac string," the unobservable line of singularity that must trail behind any monopole — snakes through the whole region, drawing itself as you scroll, threading behind and in front of the blobs. Copy here is the technical / historical material, set in mono, pinned to the string like luggage tags. 5. **Return to Vacuum** (530–620vh) — the blobs retreat, deflate, drift back to the edges; the locus shrinks to a pinprick and winks out; the curved line exits bottom-right; the page returns to the cream null field. A last line: *"Not yet observed. Keep the chamber clean."* and the minimal contact / colophon, set as faint instrument-panel etching. No navigation bar. No footer band. A single fixed micro-element — a tiny "field strength" gauge in the top-right, a soft-bodied blob that swells and reddens as you near the Locus region — is the only persistent chrome. ## Typography and Palette **Type stack — Google Fonts only.** - **Fraunces** (variable, opsz 9–144, soft serif, "wonk" axis dialed up). This is the voice of the *phenomenon* — the floating sentences, the wordmark, the region titles. Fraunces is chosen for its slightly molten, optically-greasy serifs at large optical sizes; set the SOFT axis high and the WONK axis high so that at display size the letterforms feel like they're made of the same gel as the blobs. Wordmark `monopole` is Fraunces 144opsz, weight 340, letter-spacing -0.01em, lowercase always. - **Spline Sans Mono** (variable, weight 300–700). The voice of the *instrument* — Dirac's-string luggage tags, the field-strength gauge readout, the colophon, all numerals, all dates (1931, 1974, 1982 — the famous "Valentine's Day monopole" candidate event). Chosen over the usual JetBrains/Space Mono because Spline Sans Mono has gently rounded terminals that don't fight the blob world while still reading as clean lab-equipment type. - **Spline Sans** (variable, weight 300–600) for the rare passage of running body text inside blobs — humanist, soft, sets quietly along a curved baseline. **Palette — a vacuum chamber, mostly pale, one hot point.** - `#F4F0E6` — **Chamber Cream**: the dominant background, ~58% pixel area. Warm off-white, the colour of aged instrument enamel. - `#E7E0CF` — **Iso-Band**: slightly deeper cream, used for the soft tonal bands that mark iso-potential zones; the only "structure" the eye can find. - `#C9D3D0` — **Cold Field**: a pale grey-green, the colour of the most distant, most stretched field-line filaments — things far from the monopole are cool. - `#7E8E94` — **Field Slate**: muted blue-grey for mono text, gauge etching, the Dirac-string path stroke. - `#1E2326` — **Vacuum Ink**: near-black warm charcoal for the few words of high-emphasis serif copy; never pure #000. - `#D6431B` — **Monopole Vermilion**: the single saturated accent. Used *only* at the locus node, its immediate radial filaments, the swollen field-strength gauge at peak, and the underline of a single key word per region. Never a button. Never a background fill larger than ~40px. - `#F2A07B` — **Heat Bleed**: a desaturated coral tint, the gradient halo that bleeds outward from any Vermilion element, fading to transparent over ~140px. Blob bodies are rendered as `radial-gradient` fills of Iso-Band → Chamber Cream at 70–88% opacity with `mix-blend-mode: multiply` so overlapping blobs deepen organically, plus a 1px inner highlight stroke at `rgba(244,240,230,0.9)` to read as a gel meniscus. ## Imagery and Motifs - **Soft-bodied blobs (blobitecture primitive).** Every container is a blob: an SVG `` of 6–9 cubic-bezier anchor points whose control handles are gently animated by a slow noise function so the blob *breathes* — perimeter wobbles ±2–4% on a 9–14s loop, different phase per blob. Blobs are never circles; they're always slightly teardropped, and the point of the teardrop always aims at the monopole locus. - **Field lines.** Thin (0.75px–1.5px) SVG paths in Cold Field / Field Slate, sweeping across the page in families of curves that all converge toward — but for monopoles, *never quite reach* — the locus. They animate with `stroke-dasharray` so they appear to be drawn from infinity inward as you scroll. Density increases near the Locus region. - **The Locus node.** A small (peaks at ~32px) Vermilion blob with a Heat Bleed halo, very high-frequency micro-jitter (±1px, 60fps) so it reads as *unstable* — something that shouldn't be holding together. From it, 24–40 radial filaments in Vermilion fading to Field Slate. - **Dirac's String.** One continuous, page-spanning SVG path with a subtly animated `stroke-dashoffset`; rendered with a faint `filter: blur(0.4px)` and 65% opacity so it reads as half-real, half-erased. Mono "luggage tag" labels hang off it on hairline leader lines. - **Iso-potential bands.** Wide, very-low-contrast horizontal-ish bands of Iso-Band cream that warp around blobs — the only background texture. - **Ferrofluid grain.** A near-invisible monochrome noise/grain overlay at ~3% opacity over the whole page, just enough to make the cream feel like a physical surface rather than a CSS color. - No photography. No icons. No logos-of-companies. No 3D renders. The only "illustration" is generative line + blob, all drawn live in SVG/Canvas. ## Prompts for Implementation Build monopole.cloud as **one long static HTML document** — no SPA, no router, no framework. One `
` containing five `
` plus a fixed `