# Design Language for monopole.wiki ## Aesthetics and Tone monopole.wiki is **a field-line atlas rendered as an isometric drafting table** — picture a 1962 Bell Labs lab notebook propped at a 30° tilt under fluorescent light, except the pages have been re-drawn by a CAD plotter that only knows how to draw in axonometric projection. The whole site behaves like a physical workbench you are leaning over, viewing every diagram from the same fixed three-quarter angle. The conceptual hook is the magnetic monopole itself: a hypothetical particle that has *one pole and no opposite* — so the entire design is built around the visual grammar of **radial divergence**: lines, type, panels, and shadows all spray outward from a single source rather than balancing between two. There is no symmetry of poles here; there is one center, and everything flees it. The tone is **scholarly-intellectual with a draftsman's dry wit** — the voice of a physicist who has spent thirty years not-finding something and has made peace with the elegance of the search. Confident, precise, faintly amused. Captions read like margin notes. Section headers read like figure labels ("FIG. 3 — DIRAC STRING, UNOBSERVABLE"). Nothing is breathless; everything is annotated. It should feel like reading a beautifully typeset preprint that someone has lovingly turned into a tilted, walkable diorama. The lighting model matters: imagine a single warm desk lamp at the upper-left of the isometric scene. Every raised panel casts a hard-edged offset shadow down and to the right (the classic "Y2K isometric block" shadow, but desaturated). Nothing glows. Nothing is glassmorphic. The surfaces are matte paper and matte anodized aluminium. ## Layout Motifs and Structure The page is one continuous **isometric workbench** — a single scrolling plane tilted in CSS via `transform: rotateX(55deg) rotateZ(45deg)` applied to a parent "table" element, with content blocks counter-rotated just enough to stay legible while their *containers, shadows, and connecting lines* remain in full axonometric projection. (Isometric layouts sit at ~4% in the corpus; full isometric *scroll* is rarer still — this site claims that room.) - **The Source Point.** Top of the page: a single luminous node, the "monopole," sitting on the iso-grid. Every field line, every connector, every section's leftmost edge can be traced back to this one point. As you scroll, you are following the field outward. - **Field-line rails.** Instead of a vertical scroll spine, the page is organized along **curved SVG field lines** that arc from the Source Point down across the tilted plane. Sections are "stations" pinned to these arcs. Three primary field lines fan out (left, center, right); content panels dock onto them like instruments clamped to a rail. - **Iso-block panels.** Each content panel is a **flat slab with visible 3D extrusion** — top face holds the text, the south and east faces are visible as thin colored bands giving it ~14px of apparent thickness, and a hard offset shadow falls onto the grid below. Panels never overlap ambiguously; they stack in clear z-order like parts laid out on a bench. - **The graph-paper substrate.** The entire tilted plane is ruled with a fine isometric triangular grid (three line directions at 0°/60°/120°), drawn faint, like engineering graph paper. Major gridlines every 8 minor cells, slightly darker. - **No nav bar in the conventional sense.** Navigation is a small **"index card"** clipped to the upper-right corner of the bench — a literal tilted card listing the article sections, each a hand-set entry. Clicking scrolls the bench so that station rises to center. - **Right margin = the apparatus rail.** A persistent thin strip along the right edge holds tiny isometric line-drawings of detectors (a SQUID loop, a balloon-borne array, the MoEDAL trapping detector) that fill in as you scroll — diegetic progress indication. - **Footer is the underside.** At the very bottom the bench "flips" — a short section rendered as the *underside* of the table (raw plywood texture in flat shading), holding colophon, sources, license. A small joke: the underside is the only flat (non-iso) part of the site. The reading rhythm is deliberately slow and lateral. You don't just go down; you drift outward along a curve, the way a compass needle would if there were a single pole to point at. ## Typography and Palette **Fonts (Google Fonts only):** - **Display / Figure labels — *Major Mono Display*.** A monospaced display face where each glyph sits in a precise square cell — perfect for the "FIG. N —" labels and the wordmark "MONOPOLE.WIKI". Set in uppercase, wide letter-spacing (0.18em), it reads like Letraset transfer type on a technical drawing. Used sparingly, always horizontal even when its container is tilted. - **Body / Article text — *Spectral*.** A calm, slightly literary serif designed for screen reading, with real italics and old-style figures. This is the "preprint" voice — long paragraphs of clear physics prose set at a generous measure (~62ch), 1.7 line-height. Spectral's low contrast survives the slight perspective skew without shimmering. - **Annotations / margin notes / captions — *Inconsolata*.** A humanist monospace for the dry asides, equation snippets ("∇·B = ρ_m"), figure captions, and the index card entries. Tighter, smaller (0.82rem), in the muted graphite color, often prefixed with a "—" like a lab-notebook jotting. - Numerals throughout default to Spectral's old-style figures except inside Inconsolata equation runs. **Palette — desaturated drafting room ("blueprint bleached to bone"):** - `#F4F1E8` — **bench paper.** Warm bone white, the main background — aged drafting vellum, not pure white. - `#E7E2D2` — **panel face.** A half-tone deeper, for the top faces of iso-blocks so they read as raised off the bench. - `#1C2733` — **graphite ink.** Near-black blue-charcoal for body text and primary linework — the color of a hard pencil pressed firm. - `#2E5E5A` — **patina teal.** Oxidized-copper green-teal for the south faces of iso-blocks and the secondary field lines — the color of old lab equipment and verdigris on brass. - `#B6543A` — **drafting red.** A muted brick-red (the classic "correction red" of engineering markup) for the *one* monopole Source Point, for active states, and for the primary field line. Used like a scarce resource — there is only one pole, so there is very little red. - `#C9A24B` — **brass.** Warm aged-gold for the apparatus-rail detector drawings and the index-card clip. - `#8C8675` — **graphite-muted.** Sage-grey for Inconsolata annotations, faint gridlines, and the east faces of iso-blocks. - `#0F1620` — used only on the footer "underside," with `#5B4A36` plywood-brown grain over it. Contrast pairing: `#1C2733` on `#F4F1E8` for all reading; `#B6543A` and `#2E5E5A` strictly for structural accents and never for body copy. ## Imagery and Motifs **Everything is SVG line-art in axonometric projection. No photography, no gradient meshes, no glassmorphic cards, no neon. The visual world is "physics-lab technical illustration."** - **The monopole Source Point.** A single small sphere rendered in cross-hatched isometric shading (hatching follows the iso axes), with a faint radial "field aura" of short tick marks pointing outward in all directions — the iconographic heart of the site. It is the only object that may pulse, very slowly (a 6s breathing scale, ±2%). - **Field lines.** Hand-curved cubic Bézier arcs in `#B6543A` (primary), `#2E5E5A` (secondary), `#1C2733` (tertiary, faint), each with small arrowheads at intervals indicating direction *away* from the source. They are drawn with `stroke-dasharray` and animated to "draw on" via `path-draw-svg` as their station scrolls in. - **Iso-block extrusions.** Every panel, the index card, the footer — all built as flat top face + two parallelogram side faces, the geometry done in CSS transforms, the side faces in patina-teal and graphite-muted. - **The Dirac string.** A recurring motif: a thin, deliberately *dashed* and *semi-transparent* line trailing from the monopole off the bottom-left of the bench — labeled "DIRAC STRING (UNOBSERVABLE)" — a sly visual in-joke for the section on Dirac's 1931 argument. It's the one line that refuses to be solid. - **Apparatus drawings.** Tiny isometric outline illustrations: a SQUID magnetometer loop, a stack of nuclear-emulsion plates, the Cabrera "Valentine's Day" detector schematic, a balloon array, MoEDAL's NTD foils. Brass-colored, ~80px, lining the right rail. Each is a real, recognizable schematic, drawn minimally. - **Equation plates.** Maxwell's equations *with the magnetic charge term restored* (the symmetric form) set as little framed iso-block "specimen slides," ∇·B = ρ_m highlighted in drafting red. - **The iso-grid texture.** Triangular graph-paper ruling underlies everything; near the Source Point the grid lines bend subtly toward it (a CSS/SVG warp), as if spacetime — or at least the paper — were being tugged. - **Margin doodles.** Occasional faint Inconsolata-labeled callout lines (leader lines with a dot at one end) pointing from an annotation to a spot on a diagram, exactly like a textbook figure. ## Prompts for Implementation Build monopole.wiki as **a single-route, single-scroll, isometric drafting bench** — one HTML file, one CSS file, one JS module. The reader is leaning over a tilted workbench, following magnetic field lines outward from a single pole, past stations of annotated diagrams, in roughly 90 seconds of unhurried scrolling. **No CTA buttons. No pricing tiers. No stat-grid of big numbers. No testimonial carousel. No newsletter signup. No "trusted by" logos.** It is a wiki article that has become a physical object. **Storytelling structure (stations along the field lines, top → bottom):** 1. **The Source.** Full bench. The monopole sphere materializes at the top of the iso-plane; field lines draw themselves outward in `#B6543A`/`#2E5E5A`. Wordmark "MONOPOLE.WIKI" in Major Mono Display rises beside it. A one-line definition in Spectral italic: *"A hypothetical elementary particle that is an isolated magnet with only one magnetic pole."* The grid visibly bends toward the sphere. 2. **FIG. 1 — WHY WE EXPECT IT.** Iso-block panel docked on the center field line: Maxwell's equations shown twice — the asymmetric textbook form, then the symmetric form with ρ_m and J_m restored, the new terms glowing faintly drafting-red. Spectral prose on Dirac's 1931 quantization argument. The Dirac string motif first appears, trailing off-bench, labeled UNOBSERVABLE. 3. **FIG. 2 — THE GRAND UNIFIED PROMISE.** Panel on the left field line: 't Hooft–Polyakov monopoles, GUT-scale mass (~10¹⁶ GeV), the "as heavy as a bacterium" margin note in Inconsolata. A small isometric diagram of a topological "hedgehog" configuration of field vectors. 4. **FIG. 3 — THE HUNT.** The longest station, running down the right field line, with the apparatus rail filling in: Cabrera 1982 single event (the famous one candidate, drawn as a step in a SQUID trace), MACRO, IceCube, MoEDAL at the LHC, cosmic-ray searches, the Parker bound. Each experiment a tiny brass iso-schematic with a Spectral paragraph and an Inconsolata result line ("RESULT: no confirmed detection"). 5. **FIG. 4 — THE COSMOLOGICAL EMBARRASSMENT.** Panel: the monopole problem — why GUT monopoles should flood the universe, and how cosmic inflation was partly invented to dilute them. A faint iso-diagram of an expanding cell of the grid sweeping monopoles apart. 6. **FIG. 5 — ANALOGUES & EMERGENT MONOPOLES.** Panel: spin ices, Bose–Einstein condensate synthetic monopoles — "not the real thing, but the field looks right." Honest, slightly wry caption. 7. **THE UNDERSIDE.** The bench flips: flat (non-iso) plywood-shaded footer. Colophon ("set in Spectral, Major Mono Display & Inconsolata"), a real reading list (Dirac 1931; 't Hooft 1974; Cabrera 1982; Milton's review; MoEDAL collaboration), CC license, last-edited timestamp styled as a lab-notebook entry. A final tiny line: *"∇·B = ρ_m — pending."* **Motion & interaction:** - **Scroll-triggered `path-draw-svg`:** each field line and each leader/callout line draws itself on as its station enters; `prefers-reduced-motion` → instant. - **Parallax in iso-space:** the grid substrate scrolls slightly slower than the panels, and panels at different apparent "heights" off the bench shift by different amounts — depth via real z, not blur. - **Hover-lift on iso-blocks:** hovering a panel raises it (~6px more apparent thickness, shadow lengthens) with a short spring — like picking a part off the bench. - **The Source Point** breathes (6s, ±2% scale) and on hover emits one slow ring of outward tick marks — the only "alive" element. - **Cursor-follow, restrained:** a faint compass-needle glyph trails the cursor and always rotates to point back at the Source Point — a quiet reminder that here, the needle has somewhere singular to point. (Magnetic/compass-follow is thematically essential, not decorative filler.) - **Index card** entries: hover underlines via `underline-draw`; click → smooth scroll so that station rises to bench-center. - Stagger the first paint of station 1's elements (sphere → field lines → wordmark → definition) ~120ms apart. **Build notes:** The iso illusion is one `transform-style: preserve-3d` parent with `rotateX(55deg) rotateZ(45deg)`; children that hold text get a counter-`rotateZ(-45deg) rotateX(-55deg)` wrapper so prose stays flat-on while frames/shadows stay axonometric. Field lines live in one full-bench SVG behind the panels. Keep it static-buildable — no backend, no webfonts beyond the three Google Fonts, no canvas required (SVG + CSS transforms only). ## Uniqueness Notes Differentiators from the corpus, each a deliberate departure from the frequency analysis: 1. **A fully isometric scrolling document.** Isometric aesthetic is ~4% and isometric *layout* ~4% in the corpus, almost always used for app illustrations or tech-doc spot graphics — never as the load-bearing structure of an entire scrolling reading experience. Here the whole bench is tilted and you read off the tilted plane. 2. **Layout driven by curved field lines, not a vertical spine.** Instead of stacked sections or a card-grid (89%), content stations dock onto hand-drawn SVG Bézier "magnetic field lines" fanning out from one source — a navigation/structure metaphor I don't see anywhere in the corpus. 3. **Radical mono-source asymmetry as a design principle.** The site literally has *one pole*: one red accent point, everything diverging from it, a compass cursor that always points home. The form is the physics. 4. **No glow, no glass, no photography, no neon — pure technical line-illustration.** Glassmorphism (76%), photography (98%), and warm-gradient palettes (96%/98%) are corpus defaults; this design uses none of them. It's matte vellum, anodized aluminium, and pencil hatching. 5. **The Dirac-string in-joke and the flipped-underside footer** — diegetic, physics-literate touches (a deliberately-dashed "unobservable" line; a footer that's the literal underside of the table and the only non-iso surface) that aren't generic decorative motifs. 6. **Scholarly-intellectual + draftsman's-wit voice** with figure-labelled sections and lab-notebook annotations, against a corpus dominated by warm-inviting / pastoral-romantic / friendly tones. Chosen seed/style: **isometric technical docs** (interpreted as a magnetic-field-line atlas on a tilted drafting bench). Avoided patterns per frequency analysis: glassmorphism, hand-drawn cutesy illustration, photography, warm gradient palettes, card-grid, full-bleed hero-dominant centered layouts, cursor-follow used as empty decoration, CTA/pricing/stat-grid blocks.