# Design Language for monopole.studio ## Aesthetics and Tone monopole.studio is a **surreal magnetic dreamscape** — a design studio that names itself after the physics object that has never been found: the *magnetic monopole*, a particle with a north pole and no south, a one-ended magnet, a Dirac fever-dream. The whole site behaves as if it were the inside of that impossible object. It is not "minimal" and it is not "maximal" — it is **physically wrong on purpose**. Iron filings climb up the page against gravity. Compass needles in the margins point not north but *toward the cursor*. Headlines fall *upward* off the screen. The mood is the precise, cool authority of a 1960s physics-department lecture hall — chalk dust, brass apparatus, Helmholtz coils — colliding with the soft, unhurried strangeness of a Tarkovsky interior where one object floats and nobody comments on it. The tone is **mysterious-moody crossed with scholarly-intellectual**: the studio speaks in quiet, exact sentences, as if every paragraph were a footnote to a theorem, and then lets one image do something genuinely uncanny. Nothing screams. Nothing converts. The visitor is meant to feel they have wandered into a working laboratory of an experiment that *almost* succeeded — equipment still warm, the field still humming — and to leave with the after-image of having seen a magnet with one pole burned into their retina. Reverence, not energy. Awe at a small impossible thing, not excitement at a product. ## Layout Motifs and Structure The site is built on **layered-depth** — five translucent "field planes" stacked in Z like the glass slides of a old optical bench, never on a card-grid, never centered in the obvious way. The governing metaphor is a **field-line topology**: content does not sit in boxes, it sits *on lines of force* that arc out from a single fixed point — the "pole" — anchored top-center of the document and never moving, even as you scroll past it into negative space. - **The Pole.** A single ~14vw circle of brushed dark iron, fixed at the top, from which 9–13 curved SVG field lines (`path-draw-svg`, hand-tuned cubic Béziers) sweep down and outward across the entire page like the classic textbook dipole diagram — except they *never return to a south pole*. They just fade into the bottom margin, unresolved. Every section's text blocks are positioned *along* these arcs: a heading might ride the crest of field-line 4; a paragraph hangs beneath it like a dewdrop on a wire. - **Antigravity columns.** Where a normal site stacks sections downward, here three of the six sections **read bottom-to-top**: the first line of body copy is at the bottom edge, the heading at the top, and on scroll the whole block drifts *upward* as if magnetised toward the Pole, decelerating with a `spring` as it nears it. - **Iron-filing gutters.** The left and right margins (≈120px desktop, full-bleed-adjacent) are dense fields of tiny line segments — iron filings — that continuously **re-orient toward the cursor** (`cursor-follow`, but rotational not translational). They are the page's only "navigation": clusters of filings thicken near the four section anchors, so density *is* the menu. - **Asymmetric, off-axis.** The optical center of every section is pulled left or right of true center along whichever field line dominates there. No section repeats the offset of the one above it. Generous `ma`-negative-space around each block — the field needs room to be felt. - One full-bleed moment near the end: **the inversion** — the entire field topology flips, lines now arcing *up* and off the top of the screen, the Pole revealed (briefly) to have been at the *bottom* all along. Then it settles back. A layout that gaslights you, gently. ## Typography and Palette **Type stack — Google Fonts only.** - **Fraunces** (variable, opsz 9–144, wght 100–900, soft + wonky axes via static cuts). The display and headline face — a "serif-revival" with optical-size drama and slightly soft, off-kilter terminals that feel like brass instrument engraving. Used at 6–14vw for section titles, set tight (`letter-spacing: -0.02em`), often italic for the most theorem-like lines. Its imperfection is the point: a precise face that is slightly *warped*, like iron under a field. - **Spectral** (serif, 300/400/500 + italics) for all body copy and the long "lab-note" passages — a Google serif with a calm screen-serif texture and beautiful italics for the inline annotations and asides ("*field strength here is undefined*"). - **Space Mono** (400, 700, italic) for one job only: the **measurement captions** — coordinates, field values, the running `B = ?` readout in a corner, the field-line index numbers (`L-04`, `L-11`). Monospaced, tracked wide (`letter-spacing: 0.12em`), uppercase, small. The cold instrument voice against the warm Fraunces. **Palette — `cool-grays` leading, with a single anomalous warm spike.** - `#0B0C10` — **Vacuum** — near-black with a blue undertone, the deepest field plane and most body text. - `#1C2128` — **Iron Filing** — graphite grey, the Pole's surface and the filing segments. - `#3A4450` — **Coil Steel** — mid cool grey for secondary text, field-line strokes at rest, hairlines. - `#C9CDD2` — **Chalk Dust** — the dominant page background, a soft cool off-white like a wiped blackboard, faintly grainy (`grain-overlay`). - `#E8E6E1` — **Lab Paper** — warmer near-white for the lab-note panels (translucent, ~88% opacity over Chalk Dust). - `#F25C2A` — **Anomaly** — a single burnt-orange that appears *only* at the would-be south pole that never forms, and on the field lines as they fade into nothing, and on the cursor's own micro-glow. It is the colour of the thing that's missing. Used on under 4% of pixels, ever. - `#7BA6B8` — **Aurora Steel** — a muted desaturated cyan, used only during *the inversion* moment, washing the whole field for ~1.5s. Cold counter-spark to the Anomaly orange. Type colour-pairing rule: warm Lab Paper panels always carry Vacuum-coloured Spectral; the dark Vacuum planes carry Chalk Dust text; Space Mono captions are always Coil Steel except the live `B = ?` readout, which is Anomaly. ## Imagery and Motifs - **Iron-filing field maps** as the central imagery — not photographs of them, but *generated* fields of thousands of short SVG line segments whose angle is a real dipole-field function of position, recomputed live around cursor and Pole. This is the site's whole visual identity: a magnet's invisible body, made visible. - **Brass-and-glass apparatus** — sparse, photoreal-but-floating line-renderings (custom-illustration / `line-illustration` style, thin Coil Steel strokes) of Helmholtz coils, a Hall-effect probe, a galvanometer, a bar magnet sawn in half — drifting slowly in the deep Z planes behind the field lines, half-dissolved into Chalk Dust. - **The compass-needle marginalia** — tiny needles set into the running text margins, each independently tracking the cursor like the filings but discrete and labelled (`N→`), so the reader is always "inside" the field. - **The unresolved arc** — the recurring graphic gesture: a field line that begins crisp at the Pole and ends mid-air in a soft Anomaly-orange fade with no terminus. It appears as a section divider, as a list bullet's tail, as the underline that draws under links (`underline-draw`) but never reaches the word's end. - **Chalk-diagram annotations** — hand-drawn-looking dashed circles, little right-angle field-measurement brackets, and `θ`, `B`, `∇·B = 0?` scrawls in a chalk texture, layered sparingly over the precise apparatus like a lecturer's live markup. - **Grain everywhere, subtle** — a 3–5% monochrome film grain over the entire page (the chalk-dust + lab-air texture), and a faint vignette toward Vacuum at the corners so the field feels contained in a chamber. ## Prompts for Implementation Build monopole.studio as **one long single HTML document** — no SPA, no router, no framework. The page is a continuous descent through a magnetic field. Roughly 520vh desktop / 640vh mobile. Structure: a fixed `.pole` element + a fixed `` overlay spanning the viewport (its paths re-projected on scroll), then six stacked `
` elements, each assigned a dominant field-line index that determines its horizontal offset and the curve its text rides. Tell the story in six movements, each a lab-note fragment: 1. **The Premise.** Chalk Dust void. The Pole fades up at top-center; nine field lines `path-draw-svg` themselves outward over ~2.4s, easing like ink bleeding along a wire. The title — *"a magnet with one end"* in Fraunces italic, 12vw — rises into place from *below*, decelerating with a heavy `spring` as if pulled up to the Pole. A Space Mono caption ticks in: `STATUS — NOT YET OBSERVED`. 2. **The Apparatus.** As you scroll, brass coils and the sawn bar-magnet drift in from the deep Z plane (`parallax`, very slow), the field lines bending subtly around them. Body copy in Spectral hangs in droplets along line L-04. Compass-needle marginalia activate and start `cursor-follow`-rotating. 3. **Antigravity I.** First bottom-to-top section: copy reads upward, the block drifts toward the Pole on scroll, `stagger`-revealing line by line from the bottom. Iron-filing gutters reach full density here — they swarm and re-orient toward the cursor continuously (rotational `cursor-follow`, ~0.12s eased lag). 4. **The Anomaly.** Where a south pole *should* close the loop, there is instead a soft burnt-orange (`#F25C2A`) glow with no edge — the missing pole. Field lines passing near it fade to Anomani-orange and dissolve mid-air (the unresolved arc, everywhere). The cursor itself gains a tiny matching glow. Quietest section: lots of Vacuum-dark negative space, one line of text. 5. **The Inversion.** Full-bleed. On scroll-trigger, the whole field topology *flips* — every path re-projects so arcs sweep *up* and off the top, the page washes Aurora Steel (`#7BA6B8`) for ~1.5s, and for a beat the Pole appears to have been at the *bottom*. Then it springs back, settling with a `ripple` through the filings. Disorienting on purpose; never explained. 6. **The Studio.** Settles to a calm Lab Paper panel (warm translucent over Chalk Dust) with Vacuum-coloured Spectral: the studio's quiet sign-off, written like the last line of a paper — *"we make things that point one way."* The Pole is still up there, still fixed, the field still drawn down past the end of the document into the bottom margin, unresolved. A final Space Mono line: `∇·B = 0 — for now`. Motion principles: everything obeys a *fake magnetic physics* — elements ease as if attracted/repelled (heavy `spring`, slight overshoot then settle), nothing uses linear or generic ease-out. The field SVG recomputes path control points from a real dipole approximation on `scroll` and `mousemove` (throttled to rAF). Iron filings = a `` layer for performance, redrawn each frame with cheap angle math. Honor `prefers-reduced-motion`: field draws once and freezes, filings snap to a static dipole pattern, no inversion flip — but the *layout* (antigravity columns, off-axis offsets, the unresolved arcs) stays intact, because the strangeness must survive even without animation. AVOID: CTA-heavy layouts, "Book a call" buttons, pricing blocks, stat-grids, testimonial carousels, hero-with-three-feature-columns, logo walls. This is a laboratory, not a funnel. No section may be a 3-up card row. No counters counting up to a big number. ## Uniqueness Notes Differentiators from the 374 designs already in the registry, and from generic surreal/studio sites: 1. **A site that simulates impossible physics as its core mechanic.** No other design here runs a live dipole-field computation re-projecting an SVG and a canvas of "iron filings" on every scroll/mousemove frame. The *content* literally lies on lines of force; navigation is filing-density, not a menu. The interaction model is "you are inside a magnet that shouldn't exist." 2. **Antigravity reading order.** Three sections are composed and animated to be read bottom-to-top, drifting *upward* toward a fixed Pole. Against the registry's 89% `full-bleed` / 89% `card-grid` / 85% `centered` orthodoxy, this is layered-depth on field-line arcs with deliberately non-repeating off-axis offsets — and an `immersive-scroll` that occasionally inverts its own gravity ("the inversion"). 3. **The missing colour.** The palette is `cool-grays`-led (grey, near-black, chalk-white) — itself rare against the registry's 98% `warm` / 96% `gradient` palettes — with one burnt-orange (`#F25C2A`) used *only* to mark the south pole that never forms. Colour-as-absence: the accent hue is literally the thing that isn't there. Plus a single 1.5-second Aurora-Steel wash during the inversion and nowhere else. 4. **Tone:** mysterious-moody + scholarly-intellectual, written as lab-note footnotes — no energy, no pitch, no conversion. Reverence for a small impossible object. Type pairing — Fraunces (warped optical-size serif, the warm body of the field) against Space Mono (cold instrument captions, `B = ?` live readout) — used to voice the contradiction between warm phenomenon and cold measurement. 5. Chosen seed/style: **"surreal dreamscape promo"** — surreal aesthetic (≈3% in registry), executed as a physics-lab fever-dream rather than the usual melting-clocks-and-floating-eyes surrealism. Avoided patterns from frequency analysis: no `hand-drawn` aesthetic (96% — only sparse chalk *annotations*, not a hand-drawn site), no `glassmorphism` (76% — the translucency here is photographic lab-glass, not frosted UI cards), no `photography` imagery (98% — all generated field maps + line-renderings), no `card-grid`, no `pastoral-romantic`/`warm-inviting` tone, no `typewriter-effect`, no `tilt-3d` card flips, no `bento-box`.