# Design Language for monopole.ai ## Aesthetics and Tone monopole.ai is a **generative-physics field study rendered in midnight indigo** — the entire site is the visual proof of an object that probably does not exist. A magnetic monopole is the hypothetical particle with a single magnetic pole: a place from which field lines *radiate outward forever and never return*. We build the brand around that asymmetry. Every dipole you have ever seen on a website — the symmetric hero, the balanced two-column, the call-and-response of CTA pairs — is a dipole, and monopole.ai refuses all of it. The mood is **mysterious-moody**: a cold theoretical-physics observatory at 3 a.m., the hum of a superconducting magnet, a single point of light on a near-black field with iron filings arranging themselves into open arcs that drift off the edge of the viewport and never close. The tone is the controlled awe of a researcher who has spent a decade looking for something and has learned to find the search itself beautiful. Not hype. Not "revolutionary AI." The copy reads like field notes: terse, precise, occasionally lyrical when the data earns it. The site should feel like it was built by someone who genuinely cares whether the divergence of B is zero — and who suspects, hopes, that on monopole.ai it is not. Generative geometry is doing the talking; the prose stays in the margins. ## Layout Motifs and Structure The governing layout is **organic-flow** built on a *radial* coordinate system rather than a Cartesian grid. There is one anchor point — the **pole** — placed at roughly 28% from the left and 40% from the top of the first viewport (deliberately off-center; a monopole has no center of symmetry). From that anchor, every structural element is positioned by angle and radius, not by row and column. Section headings sit on concentric arcs. Body text columns curve very slightly (1–2 degrees of optical skew via transform, never enough to harm reading) so the eye feels the field. Navigation is a thin ring of labels orbiting the pole at a fixed radius, rotating ~6 degrees on scroll. Five movements, each a single full-bleed scene, total scroll length ~560vh desktop / ~700vh mobile: 1. **The Anchor.** Near-black field. The pole ignites. Field lines (animated SVG paths) draw themselves outward and exit every edge — none return. 2. **The Search.** Field lines become a timeline of monopole hunts (Dirac 1931, Cabrera's 1982 "Valentine's Day event", IceCube, the LHC) arranged along curved trajectories radiating from the pole. No stat-grid — each milestone is a single glowing node on an arc, annotated with a hand-set caption. 3. **The Charge.** The product/idea: what monopole.ai actually does, explained as the consequence of a single source. Text flows in arcs around an interactive filings field that reacts to the cursor. 4. **The Asymmetry.** A near-empty movement. One sentence. Vast negative space. The point where the field is so weak it is almost vacuum — the design's breath. 5. **The Open Field.** Resolution: the lines extend past the frame into implied infinity; a quiet single line of contact-as-coordinates (an angle and a radius, styled like an observation log entry), no button-heavy footer. The whole composition obeys one rule: **nothing is mirrored, nothing is centered, every line that leaves does not come back.** ## Typography and Palette **Type stack — Google Fonts only.** - **Sora** (variable, weights 200–700) — the primary geometric display face. Used for the wordmark `monopole.ai`, all movement titles, and the largest numerals. Sora's slightly squared geometry and open apertures read as instrument-panel precision without coldness; at 200 weight in huge sizes it becomes almost a wireframe of letters, which suits a particle that is mostly theory. - **Fraunces** (variable, opsz 9–144, soft + wonky axes dialed low) — the field-notes serif. All running prose, captions, the lyrical interludes. Its slightly humanist, slightly antique character is the *human margin* against the machine geometry — like fountain-pen annotations on a printout. - **Spline Sans Mono** — coordinates, dates, the orbiting nav labels, the contact log entry, any number that represents a measurement. Tabular, exact, faintly retro-scientific. **Palette — midnight-blue dominant, chrome-metallic accents, cold high contrast.** - `#080A14` — **Vacuum** — the near-black indigo ground, ~70% of pixel area. - `#0E1430` — **Field Indigo** — slightly raised panels, the deepest gradient stop. - `#1B2A5C` — **Flux Blue** — mid-tone for arcs, dividers, dimmed field lines. - `#7FA8FF` — **Lumen** — the active field-line glow, links on hover, the live edge of an arc. - `#C9D2E8` — **Filing Silver** — primary text on Vacuum; iron-filing particle color; chrome highlights. - `#E8ECF6` — **Pole White** — the single point of light at the anchor; reserved, used almost nowhere else. - `#D98C3A` — **Cabrera Amber** — one warm accent only, for the single historical "candidate event" node in Movement 2 and nothing else (the one anomaly in a cold dataset). Type colors: prose in Filing Silver at ~88% opacity over Vacuum; titles in Pole White; mono coordinates in Lumen at 70%; the amber appears exactly once. ## Imagery and Motifs **Generative-art is the entire visual content** — there is essentially no photography, no stock, no icon set. The recurring motif is the **field line**: thousands of thin (0.75px) cubic-bezier SVG paths originating at the pole and flowing outward, computed (not hand-drawn) so their density falls off ~1/r². They are the navigation, the dividers, the decoration, the proof. Secondary motif: **iron filings** — a particle system of ~600 short silver dashes that align tangent to the local field direction, drifting slowly, scattering away from the cursor like a real magnet under glass. On idle they relax back into the field pattern. Tertiary: **the observation log** — every date, citation, and the contact line is set in a bordered Spline Sans Mono block styled like a strip from a chart recorder: thin tick marks down the left edge, a faint horizontal baseline. Texture: a very fine film grain (`feTurbulence`, low opacity) over the Vacuum ground so the black has the photographic noise of a long-exposure plate, never a flat #000. A subtle radial vignette *brightening toward the pole* (inverse vignette) — the light source is internal to the page. No glassmorphism, no cards, no rounded UI chrome, no gradients-as-buttons. The only "container" is the chart-recorder log block. ## Prompts for Implementation Build monopole.ai as **one long semantic HTML document** — five `
` blocks, no SPA, no router, no heavy framework. Vanilla JS + a single `` overlay layer that spans the document, plus `` for the iron-filings particle system. Respect `prefers-reduced-motion` by freezing the field in its drawn state. - **Field-line engine:** on load, generate N seed angles around the pole; for each, integrate a smooth outward path with slight curl, render as an SVG `` with `stroke-dasharray` = path length, animate `stroke-dashoffset` from full to 0 over 1.8–3.2s with staggered delays so lines *grow* outward from the anchor. Critically: every path must terminate by exiting the viewport bounds — write the geometry so no line curves back. Density ∝ 1/r². - **Scroll = rotation, not just translation.** As the user scrolls, the whole field group rotates a few degrees and the pole's glow intensity tracks scroll velocity (faster scroll = brighter, hotter core). The orbiting nav ring co-rotates. - **Iron filings on canvas:** ~600 dashes; each frame, orient to the analytic field vector at its position; apply a repulsion impulse within ~120px of the cursor; ease back. This is the one playful, tactile moment — let it be mesmerizing. - **Movement 2 (The Search):** lay milestone nodes along 4–5 distinct field-line trajectories. Each node: a small pulsing Lumen dot, a Fraunces caption that fades + rises on scroll-trigger, a Spline Sans Mono date in a mini chart-recorder strip. The Cabrera 1982 node alone glows Cabrera Amber and pulses on a slightly irregular rhythm — the anomaly. - **Movement 4 (The Asymmetry):** almost nothing. One Fraunces sentence at ~32px, set on an arc, far from the pole, surrounded by 80vh of Vacuum. A single faint field line drifts through. Let the silence land. This is the page exhaling. - **Storytelling spine:** Anchor → Search → Charge → Asymmetry → Open Field. The reader should leave feeling they witnessed a thing radiating, not a product being sold. - **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, card grids, glassmorphic panels, symmetric hero splits, centered everything, button-stacked footers. If the layout looks balanced, it is wrong. ## Uniqueness Notes Differentiators from the other designs in the registry, and from corpus defaults: 1. **Radial coordinate layout, not a grid.** The 364-file corpus is 89% full-bleed + 89% card-grid + 85% centered. monopole.ai positions structure by *angle and radius from a single off-center anchor* — `organic-flow` (5% in corpus) interpreted literally as a physics field, with curved text columns and an orbiting nav ring. No card grid appears anywhere. 2. **Generative-art as the only imagery.** 98% of corpus designs use photography; monopole.ai uses essentially none — the visual content is a computed magnetic-field-line system plus an iron-filings particle simulation. `generative-art` imagery (6%) and `generative` aesthetic (12%) are taken at the rare end and made load-bearing. 3. **The "no line returns" constraint.** The defining design rule is semantic: nothing is mirrored, nothing centered, every animated line that leaves the frame never comes back — a direct visual translation of magnetic-monopole asymmetry. No other registry design constrains its entire composition to a single physics axiom. 4. **A near-empty movement on purpose.** Movement 4 is 80vh of near-black with one sentence — a deliberate vacuum in a corpus full of dense dopamine layouts. 5. **The single anomaly color.** Cabrera Amber appears exactly once, on one historical node, in an otherwise rigorously cold midnight-blue/chrome palette — the visual equivalent of a single unexplained event in a clean dataset. Document chosen seed/style: **aesthetic: generative, layout: organic-flow, typography: futura-geometric, palette: midnight-blue, patterns: path-draw-svg, imagery: generative-art, motifs: particle-effects, tone: mysterious-moody.** Every axis is taken at the underused end of the registry distribution (generative 12%, organic-flow 5%, futura-geometric 3%, midnight-blue 5%, path-draw-svg 34%, generative-art 6%, particle-effects 1%, mysterious-moody 6%) and fused into one coherent object: *a theoretical-physics field study where a single off-center pole radiates animated field lines that never close, iron filings drift under the cursor, and one amber anomaly burns in a cold indigo vacuum.* Avoided overused patterns from the frequency analysis: hand-drawn (96%), glassmorphism (76%), photography (98%), card-grid (89%), centered (85%), warm palette (98%), cursor-follow-everywhere (89%), spring/magnetic ubiquity, mono-as-default-bodyfont (94% — here mono is reserved for coordinates only).