# Design Language for monopole.style ## Aesthetics and Tone monopole.style is the field notebook of an instrument-maker who builds the impossible: a magnet with a single pole. The site presents itself as a **working physics laboratory rendered in axonometric blueprint** — an isometric cutaway of an apparatus that, were it ever switched on, would emit magnetic field lines that *radiate outward and never return*. Every other magnet's lines loop home; this one's run to the edge of the page and keep going. The whole experience is built around that one violated symmetry. The tone is **scholarly-intellectual** but with a builder's dry wit — the register of a brilliant lab manual annotated in the margins by someone who has clearly stayed up too late. No marketing voice. No "revolutionary." Captions read like figure legends ("Fig. 4 — solenoid core, wound 1,440 turns, measured leakage: 0"). Microcopy reads like instrument labels. The reader is treated as a competent colleague being walked through a build. Mood words: precise, cool, slightly obsessive, quietly thrilling. Think of the cyanotype patent drawings of Faraday's apparatus, crossed with the clean axonometric exploded views in a Bang & Olufsen service manual, lit by the blue-on-blue glow of an oscilloscope at 2 a.m. The site never shouts; it hums at mains frequency. ## Layout Motifs and Structure A **single uninterrupted vertical descent through eight numbered "plates"** — the word *plate* used in the old engraving sense (Plate I, Plate II…). This is a `timeline-vertical` spine, but the spine is literally drawn: a 2px hairline runs down the exact horizontal center of the viewport from the first plate to the last, ticked every 80px like a measuring rule, with the plate numbers seated on it in a circular bezel. As you scroll, a small filled "probe" bead rides this rule, and a thin SVG path **draws itself ahead of the bead** (`path-draw-svg`) — the field line being traced in real time. No top navigation bar. Navigation is a **right-margin instrument legend**: eight short labels (Apparatus / Field / Symmetry / Coil / Leakage / Trace / Index / Colophon) stacked vertically, set in tiny tech-mono caps, each preceded by its plate numeral. The active plate's label gets a drawn underline that extends leftward like a cursor sweep. There is no logo cluster, no hamburger, no footer nav — the colophon plate *is* the footer. Within each plate the composition is **deliberately axonometric**: content blocks are skewed onto a 30°/30° isometric grid so headings, diagrams, and body text all sit on the same implied floor plane, casting flat hard-edged blue shadows down-right. Body copy lives in a single measured column (no more than 62ch) but the column itself is tilted into the iso plane, so reading it feels like reading a label on a machined part. Generous `ma`-style negative space (`ma-negative-space`) around every diagram — each apparatus drawing gets at least 40vh of clear field around it so the eye can rest before the next plate. Breakpoints: on narrow screens the iso skew flattens to 0° (legibility wins), the center rule moves to the left edge, and the right-margin legend collapses into a thin progress rail of eight ticks. ## Typography and Palette **Type system — Google Fonts only:** - **Display / plate headings:** `Major Mono Display` — a monospaced display face where every glyph is built from circles and straight rules; it looks like it was drawn with a compass and a straightedge, which is exactly the apparatus aesthetic. Used at 56–88px for plate titles, all lowercase, letter-spacing `0.04em`. It is visually *strange* enough to carry the "this is not a normal magnet" idea on its own. - **Working text / body / labels:** `IBM Plex Mono` — the lab-notebook workhorse. Regular 400 for body at 16–17px with `1.7` line-height; 500 for figure legends; 600 caps at 11px / `0.18em` tracking for instrument labels and the right-margin legend. Tabular figures everywhere, because measurements. - **Annotation / marginalia accent:** `Gloria Hallelujah` — used *sparingly*, only for the handwritten margin notes that overlay the diagrams ("← this is the part that shouldn't work"). Rotated −3° to −7°, small (15px), in the rust accent color. These are the human fingerprint on an otherwise machined surface. **Palette — `midnight-blue` cyanotype, with two intrusions:** - `#0B1B2E` — deep cyanotype ground (the paper-that-is-not-paper; the whole site bathes in this) - `#10283F` — raised plane / panel fill, one step up from ground - `#1E3A5F` — iso shadow blue (hard-edged, no blur) - `#7FB2D9` — primary draw-ink: field lines, rules, body text on dark - `#CFE3F2` — high-key text and headings (cool near-white, never pure white) - `#3DD6C4` — *the leakage signal* — a single electric teal used ONLY for the field line that escapes the page, for the scroll probe bead, and for the active plate underline. It is the color of the broken symmetry. It appears nowhere decorative. - `#C66B3D` — oxidized-rust accent, used ONLY for handwritten marginalia and the one warning label on Plate V. Warm enough to feel like a smudge of real iron filings. Light fallback (prefers-color-scheme: light) inverts to a true blueprint: `#E8F0F7` ground, `#0B1B2E` ink, same teal and rust accents — like the cyanotype was developed in reverse. ## Imagery and Motifs **Everything is line-drawn SVG; no photography, no raster.** The core motif is the **field line** — open, directional, arrowheaded — and its repeated betrayal of expectation. - **Plate I — The Apparatus:** a full axonometric line drawing of the device: a brass-style cylindrical core (drawn as nested ellipses + verticals), a winding of helical turns, a mounting yoke, a tiny labeled gap. Exploded slightly so each part floats with a dotted leader line to its legend. ~520px tall, centered, drawn in `#7FB2D9` at 1.4px stroke. - **Plate II — The Field:** the textbook bar-magnet field — symmetric loops, N to S, lines closing — drawn faintly in `#1E3A5F`. Then, on scroll, ONE line peels off the set, straightens, recolors to `#3DD6C4`, grows an arrowhead, and exits the right edge of the viewport. The rest stay looped and dim. This is the thesis image. - **Plate III — Symmetry:** a Gauss-law "pillbox" drawn as a transparent iso cube around a point; flux arrows all pointing outward, the surface-integral symbol ∮ floating above with a slash through the zero. Pure diagram poetry. - **Background field, all plates:** a very low-contrast (4–6% opacity) generative spray of short radial tick-marks all pointing away from screen center — like iron filings that have all agreed on one direction. Parallax-drifts ~6px on scroll. - **The measuring rule** down the center, ticked and numbered, with the probe bead. - **Dotted leader lines** connecting every diagram element to its `IBM Plex Mono` legend — the universal language of technical drawing. - **Margin smudges:** 2–3 tiny `Gloria Hallelujah` notes per long plate, rotated, in rust, with a drawn arrow into the diagram. - **Crosshair registration marks** (＋) in the four corners of the viewport, faint, like a printing plate's alignment guides. They subtly track the cursor (`cursor-follow`) — moving 2–3px toward it, as if the page is a sheet being nudged on a light table. No icons from icon sets. No stock anything. Every mark looks drafted. ## Prompts for Implementation Build as **one HTML page, one CSS file, one ES module** — no framework, no build step. The page is a ~2-minute descent through eight engraved plates of an impossible instrument. The story is the argument: *here is the device, here is the field every magnet makes, here is the law it obeys, here is how we broke it, here is the proof, here is the trace, here is what's left.* **Absolutely NO:** CTA buttons, "get started," pricing tables, stat-grids, feature-card triplets, testimonials, logo walls, email capture, FAQ accordions, signup forms, cookie banners, chat bubbles, "trusted by." The colophon plate may contain a single quiet mailto link styled as an instrument label. That is the only interactive affordance that leaves the page. **Plate sequence (vertical scroll, each plate ≥ 100vh, center-rule continuous):** 1. **Plate I — Apparatus.** Cold open: black-blue field, the center rule begins, the exploded axonometric device draws itself stroke-by-stroke over ~1.4s (`path-draw-svg`, staggered parts). Title `monopole.style` in Major Mono Display fades up beneath it. One margin note: "← it's basically a coil. that's the joke." 2. **Plate II — Field.** The symmetric bar-magnet field drawn dim. On entry, the rogue line escapes (recolor to teal, straighten, arrowhead, exit viewport). Legend explains in figure-legend prose what should have happened and didn't. 3. **Plate III — Symmetry.** The Gauss pillbox + slashed-zero ∮. Body copy: the divergence of B is zero — except, by construction, here. Iso cube can be gently rotated by cursor x-position (±4°), nothing more. 4. **Plate IV — Coil.** Close-up of the winding: 1,440 helical turns drawn as a single continuous animated path that "winds" as you scroll into the plate. Tabular-figure spec list with dotted leaders. Margin note in rust: "wound by hand. yes, all of them." 5. **Plate V — Leakage.** The one plate with a rust warning label (a drawn rectangular tag, rotated, "CAUTION — FIELD DOES NOT RETURN"). A measured-leakage readout: a faux oscilloscope trace in teal, drawn as an SVG path, that flatlines at exactly 0 and then ticks once, upward, off the top — the leak. 6. **Plate VI — Trace.** The probe bead has been riding the center rule the whole time; here the rule itself curves off-axis and the traced field line fills the plate, arrowheaded, exiting bottom-right. Text: "you have been following it since Plate I." 7. **Plate VII — Index.** A drafting-table "index of figures": Fig. 1–8 listed in IBM Plex Mono with their plate numbers and one-line descriptions, each row a thin hairline rule. Hovering a row briefly highlights the corresponding plate's number bezel up the spine (a faint pulse). No links required — it's a printed index. 8. **Plate VIII — Colophon.** The footer-as-colophon: typeface credits, "drawn in cyanotype," build year, the single mailto styled as a brass nameplate. The center rule terminates in a small filled circle — the pole. Below it: nothing. The field has left the page. **Motion principles:** - All entrances are **`path-draw-svg`** (strokes drawing themselves) plus subtle **`fade-reveal`** for text — never slide-ins, never bounces. The aesthetic is *drafting in real time*, not *UI animating*. - The scroll probe bead and its trailing teal path are the spine of the whole experience — implement first, get it smooth, `requestAnimationFrame`-driven, eased. - Crosshair corner marks do a tiny `cursor-follow` (max 3px translate). The iso cube on Plate III does a tiny cursor-x rotation. That is the entire pointer interaction budget — restraint is the point. - Honor `prefers-reduced-motion`: skip all path-draw, render every diagram fully drawn, keep only the probe bead's position update (no trail animation). - Honor `prefers-color-scheme: light`: flip to the reverse-developed blueprint palette described above. **Texture / finish:** a faint film-grain or plate-noise overlay at ~3% opacity over the whole page (CSS `mix-blend-mode: overlay` on a tiny tiled noise SVG) so the cyanotype reads as a physical print, not a flat fill. All shadows are **hard-edged, single-direction, no blur** — this is line art, not Material Design. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **Cyanotype-blueprint as the literal medium, not a "theme."** The site isn't *styled like* a blueprint — it behaves like one: registration crosshairs, plate numbering in the engraving sense, dotted leader lines on every element, hard no-blur shadows, plate-noise overlay. Most `midnight-blue` sites in the corpus use blue as a *mood* (calm, ethereal, tech-y); here it's a *printing process* with strict ink rules. 2. **One color = one idea, enforced.** The electric teal `#3DD6C4` appears ONLY as "the field line that escaped" — the probe bead, the rogue line, the active-plate underline — never decoratively. The rust `#C66B3D` appears ONLY as human marginalia and one warning tag. This semantic-color discipline is the opposite of the 96%-gradient, 98%-warm corpus norm. 3. **The whole layout is a single drawn instrument.** The center measuring-rule + riding probe + self-drawing trailing field line means the navigation, the progress indicator, and the central metaphor are *the same object*. No card-grid, no full-bleed hero, no bento — instead a `timeline-vertical` spine (only 3% in the corpus) that is diegetically a piece of lab equipment. 4. **Axonometric body text.** Reading copy that is itself skewed onto a 30°/30° iso plane (flattening on mobile) is a layout move almost nothing else here does — it makes the prose feel like a label machined into a part. Pairs with `isometric` aesthetic (only 12% in corpus). 5. **Major Mono Display + IBM Plex Mono + Gloria Hallelujah** is a deliberately unusual triad: compass-and-rule display, lab-notebook mono, and a single thread of human handwriting — chosen so the page looks *drafted by a machine and annotated by a person*. **Chosen seed/style:** *isometric technical docs* — `aesthetic: isometric, layout: timeline-vertical, typography: tech-mono, palette: midnight-blue, patterns: path-draw-svg, imagery: line-illustration, motifs: circuit/crystalline, tone: scholarly-intellectual`. **Avoided patterns from frequency analysis:** no `hand-drawn` aesthetic (96% — used only as a thin marginalia accent, not the system), no `glassmorphism` (76%), no `photography` (98% — zero raster imagery), no `card-grid`/`full-bleed`/`centered` as the dominant layout (85–89%), no `warm` palette (98%), no `gradient` (96% — flat ink fills only), no `cursor-follow`/`spring`/`magnetic` as headline interactions (79–89% — pointer budget capped at 3px), no `parallax`-heavy treatment (91% — a single 6px drift), no `pastoral-romantic`/`warm-inviting` tone (the two most common). Leans into underused `timeline-vertical` (3%), `isometric` (12%), `path-draw-svg` (35% but rarely as the primary motion language), `scholarly-intellectual` tone (3%).