# Design Language for monopole.one ## Aesthetics and Tone monopole.one is **a single magnetic pole, isolated and observed in a white room** — the site behaves like the lab notebook of a physicist who has finally caught the particle that physics says should not exist alone: a north without a south, a charge of magnetism with no opposite. The aesthetic is **Swiss-typographic instrumentation rendered in near-total monochrome**, the visual register of a Dieter Rams oscilloscope crossed with a 1968 Helvetica timetable, every element behaving like a calibrated readout rather than a marketing surface. Tone is **mysterious-moody but clinically calm**: this is not a startup pitching "disruption," it is a quiet instrument humming in a Faraday cage at 3am, fixed on one phenomenon. Nothing pulses for attention; the only motion is the slow, deliberate redrawing of field lines as you scroll, as though the monopole is breathing its magnetic flux outward and you are watching the lines bend. The governing metaphor: **everything on this page has exactly one pole.** One column. One accent. One direction of reading. One particle. The "one" in the domain is not a version number — it is the count of magnetic poles, and the entire layout is an argument that one is enough. ## Layout Motifs and Structure The composition is **ma-negative-space** taken to instrument-panel extremes: a single 8-column Swiss grid where, on most screens, **six of those eight columns are deliberately empty white**, and content lives in a narrow vertical channel offset hard to the left — never centered, because a monopole has a direction. The page is **one continuous vertical column of "field readings,"** each reading separated not by a card or a box but by a single 1px hairline rule that spans the full viewport width, like the graticule of an oscilloscope screen. - **The flux-line spine.** Running down the left margin, fixed, is one continuous SVG path — *the field line* — that curves, bows outward, and reconverges as you scroll, drawn live with `path-draw-svg`. It is the only ornament and it is never decorative; it is a literal data trace. - **Eight readings, stacked.** The page is eight horizontal bands (Reading 01 through Reading 08), each a full-width hairline-bounded strip with generous vertical air. No band is a "section" in the brochure sense — each is labeled like an instrument log entry: `READING 03 — FLUX DENSITY`. - **No grid of cards. Ever.** Where other sites would show a 3×2 card grid, monopole.one shows a single vertical list, left-aligned, each item a line of monospaced telemetry. - **The graticule.** A faint 1px grid (8% black on white) underlies the whole page like screen-printed graph paper, locked to an 8px baseline so every line of type sits exactly on a graticule line. - **Asymmetry as physics.** The right margin is always emptier than the left, because the field emanates leftward; this imbalance is intentional and load-bearing. ## Typography and Palette **Fonts (Google Fonts only):** - **Display & Wordmark — *Archivo Expanded* (wght 700–900, wdth 125)** — Used for the wordmark "monopole.one" and the eight Reading numerals. Archivo's expanded grades give the headline the squared, engineered-on-graph-paper feel of equipment silkscreen lettering; set in ALL CAPS with +0.04em tracking, never italic, never below 700. - **Body & Telemetry — *Space Mono* (wght 400 / 700)** — Every paragraph, label, caption, and field reading is monospaced Space Mono, because instrument output is monospaced. Body at 15px / 26px line-height locked to the 8px-derived baseline. Mono is admittedly common (94% in the corpus) — so it is used *un-ironically*: not as a "hacker" affectation but as the literal typeface of a lab readout, paired with an *expanded* (not condensed) display face, which the corpus barely touches. - **Numerals & Annotations — *IBM Plex Sans* (wght 300, only for small annotation footnotes)** — A single humanist register, used sparingly, for the tiny "[1]"-style margin notes that gloss the physics, so the page has one quiet human voice among the machine type. **Palette — monochrome, with one electric exception (the "single pole" of color):** - `#0A0A0A` — **Near-black ink.** All primary text, all hairlines at full weight. - `#FFFFFF` — **Paper white.** The dominant field; ~78% of every viewport. - `#F2F2F0` — **Cool laboratory off-white.** Used only for the underlying graticule fills and the rare inset panel, so "white" has subtle depth like real bond paper. - `#8C8C8C` — **Graphite mid-grey.** Secondary labels, the live field-line at rest, the graph grid at higher opacity. - `#1E4DFF` — **Monopole blue — the ONE accent, used exactly once per viewport, never twice.** This is the magnetic charge made visible: the active field-line glows this blue at the cursor, one word per Reading is set in it, the wordmark's final "one" is this blue. It is the north pole. There is no second accent because there is no south pole. The palette is **monochrome (13% in corpus) with high-contrast (20%)** — and crucially it is *cool* monochrome, refusing the warm/gradient defaults that dominate 96–98% of the corpus. ## Imagery and Motifs **No photography. No 3D renders. No stock illustration. No gradient mesh.** Every visual is a hairline SVG diagram, drawn as though plotted by a pen-plotter onto graph paper. The corpus is 98% photography — monopole.one has *zero*. - **The field-line (primary motif).** One Bézier path, 1px stroke, that bows out from the left spine and returns — animated to redraw on scroll via stroke-dashoffset. At cursor proximity it brightens to `#1E4DFF` and bends slightly toward the pointer, as if attracted. This single line is the site's mascot, logo, navigation cue, and ornament all at once. - **The iron-filing scatter.** Behind Reading 05, a generative scatter of ~2000 tiny 1px black tick-marks arranged along invisible dipole-vs-monopole field equations — the classic "iron filings around a magnet" demonstration, but plotted as pure marks, animating once on entry to "snap" into alignment. - **Graticule & fiducials.** Corner crop-marks (┌ ┐ └ ┘) frame every Reading band like a measurement plate; tiny tick scales run down the left spine numbered in arbitrary "flux units." - **The compass-needle dingbat.** A minimal needle glyph (▲ over a hairline circle) marks the start of each Reading — always pointing the same direction, because near a monopole a compass has only one stable answer. - **Annotation brackets.** Physics asides are set in IBM Plex Sans inside square brackets in the right margin, leadered to the body with a 0.5px line, mimicking a textbook figure caption. - **The "missing south."** A recurring empty dashed-outline circle labeled `S` with a strikethrough — the pole that isn't there — appears faintly in three of the eight Readings as a structural absence. ## Prompts for Implementation Build monopole.one as **a single-route, single-column, vertically scrolled instrument log** — one HTML file, one CSS file, one JS module. Treat the page as a ~70-second descent through the field of an isolated magnetic pole; the visitor is reading telemetry, not a sales page. There is **no CTA button, no pricing block, no stat-grid, no testimonial row, no logo wall, no email-capture, no contact form.** There is only the sequence of eight Readings and the field-line that connects them. **Storytelling structure (eight Readings, vertical scroll, `fade-reveal` + `path-draw-svg`):** 1. **READING 00 — THE CLAIM.** Full white viewport. Left-offset: the wordmark `monopole.one` in Archivo Expanded, the word "one" in monopole-blue. Beneath, one line of Space Mono: *"A magnet with a single pole. Maxwell's equations forbid it. We are looking anyway."* The field-line begins here, descending off the bottom edge. 2. **READING 01 — DEFINITION.** Three short monospaced paragraphs, leadered margin notes, what a magnetic monopole *is* — Dirac, 1931; the symmetry it would restore to electromagnetism. 3. **READING 02 — THE SYMMETRY ARGUMENT.** A hairline SVG of the four Maxwell equations, the magnetic-charge term faintly highlighted blue as it scrolls into view. 4. **READING 03 — FLUX DENSITY.** A live plotted curve (SVG path drawn on scroll) of 1/r² falloff; the field-line spine bows widest here. 5. **READING 04 — THE SEARCHES.** A left-aligned vertical list (NOT a grid): MoEDAL, IceCube, ancient mica, lunar rock — each one line of telemetry: `[ 2024 ] LHC / MoEDAL ........ NULL`. The repeated `NULL` is the quiet drama. 6. **READING 05 — IRON FILINGS.** The generative tick-mark scatter snaps into a monopole field pattern on entry. One sentence: *"This is what the field would look like. We have never photographed it."* 7. **READING 06 — DIRAC QUANTISATION.** The single most beautiful idea: one monopole anywhere in the universe would explain why all electric charge is quantised. Set this Reading with the most air of all — almost the whole viewport empty, one short blue sentence floating left. 8. **READING 07 — STILL LOOKING.** The field-line reconverges to the left spine and terminates in the dashed empty `S`-circle (the absent south). Footer: domain, year, a single Plex Sans line: *"north without south — still hypothetical, still searched for."* **Motion rules:** - `path-draw-svg` is the signature: the spine field-line draws/redraws via `stroke-dashoffset` tied to scroll progress. (path-draw-svg is 34% — present but not dominant; here it is the entire visual concept.) - `fade-reveal` only — Readings fade up 12px on entry, 600ms, cubic-bezier(.2,.6,.1,1). No spring, no bounce, no elastic — instruments do not bounce. - `cursor-follow` is restrained to ONE behavior: the field-line bends ~6px toward the pointer and brightens to blue within a 200px radius. Magnetic attraction, literally — but subtle, never a glowing blob. - `counter-animate` once: the "flux units" tick scale on the left spine counts up as you scroll, like a dial. - Respect `prefers-reduced-motion`: field-line draws to final state instantly, scatter shows pre-aligned, no cursor reaction. - Type stays pinned to the 8px baseline grid at all breakpoints; on mobile the left-offset column simply becomes near-full-width but stays left-aligned, never centered. **Tone of copy:** terse, precise, faintly awed — a working physicist's voice, never a marketer's. Numbers are exact. The word "revolutionary" never appears. The word "particle" does. ## Uniqueness Notes Differentiators, each a deliberate departure from the patterns in the frequency analysis: 1. **Zero photography in a 98%-photography corpus, zero gradient in a 96%-gradient corpus.** monopole.one is pure 1px-stroke SVG diagram on cool white — pen-plotter physics figures, no images of any kind. Visually it cannot be confused with the warm/gradient/photographic majority. 2. **Monochrome with exactly ONE accent colour, used once per viewport.** Most monochrome designs (13% of corpus) still pull in 2–4 supporting hues; here the single blue `#1E4DFF` is conceptually load-bearing — it is the magnetic charge, and a "second accent" would contradict the entire premise (a monopole has no second pole). This one-accent discipline is, as far as the corpus shows, unique. 3. **Hard-left asymmetry as physics, not style.** While 85% of the corpus centres content and 89% uses card-grids, monopole.one is one offset-left vertical column with six of eight grid columns intentionally empty — the layout *is* the field direction. 4. **`path-draw-svg` promoted from decoration to the whole concept.** At 34% in the corpus it usually accents a hero; here a single redrawing field-line is mascot, logo, navigation, and ornament simultaneously, and the page has no other graphic element. 5. **Expanded display type + un-ironic monospace.** The corpus leans condensed/handwritten/humanist for display; Archivo *Expanded* (wdth 125) reads as engineered equipment silkscreen, and Space Mono is used as literal instrument output rather than as a "terminal/hacker" costume — pairing them this way is unusual. 6. **Anti-conversion structure:** no CTA, no pricing, no stat-grid, no testimonials, no email capture — eight "Readings" of telemetry and one absent south pole. The page sells nothing; it observes. Chosen seed/style: **monochrome stark landing** — realised as *aesthetic: swiss · layout: ma-negative-space · typography: grotesque-neo (Archivo Expanded) + mono (Space Mono) · palette: monochrome / high-contrast (cool, single-accent) · patterns: path-draw-svg + fade-reveal · imagery: line-illustration (zero photography) · motifs: grid-lines + crystalline field-lines · tone: mysterious-moody yet clinically calm.* Avoided patterns from frequency analysis: hand-drawn (96%), glassmorphism (76%), photography (98%), warm palette (98%), gradient (96%), card-grid (89%), centered (85%), full-bleed (89%), parallax (93%), cursor-follow-as-glowing-blob (89%), spring/magnetic/elastic bounce (79–86%), pastoral-romantic tone (34%). None of these appear in monopole.one.