# Design Language for monopole.design ## Aesthetics and Tone monopole.design is the field-station of a single-minded design practice — a studio that believes a piece of work, like a magnetic monopole, can carry only one polarity at a time: it either *pulls* or it doesn't, and there is no neutral middle. The site is built as a **magnetics laboratory rendered in the language of Swiss-rationalist diagram-making**: white paper, hairline rules, a small alphabet of black marks, and a field of iron-filing dust that arranges itself around whatever the cursor becomes. The tone is **bold-confident, declarative, almost terse** — the voice of a physicist writing captions for an instrument plate, not a marketer selling a service. Sentences are short. Claims are absolute. The studio does not say "we help brands tell their story"; it says "**One pole. One pull. No hedging.**" The mood sits at the intersection of a 1960s Hochschule für Gestaltung Ulm wall chart, a particle-physics chalkboard, and a contemporary avant-garde type specimen — disciplined geometry holding a single eccentric idea in tension. Nothing decorative survives unless it is also a measurement. The emotional arc for a visitor: *you arrive in a calm, empty white field → you discover the field is alive and responds to you → you realize every section is one statement of polarity → you leave magnetized toward the studio's way of thinking.* Quiet, then magnetic, then unforgettable. ## Layout Motifs and Structure The page is **one continuous vertical "field plot"** — a single column of full-bleed acts, each act a **broken-grid composition** that deliberately fractures the strict baseline grid it is built on. A 12-column modular grid is *visible* as faint cyan registration ticks at the top and bottom margins; the content then violates it on purpose — a headline slides 1.5 columns past the gutter, a caption hangs off the left edge into the margin, a diagram straddles the page break between two acts. Order announced, order broken — that is the monopole gesture. Structural acts (each one screen-height or taller, no card-grid anywhere): 1. **THE PLATE** — opening. A vast white field. Centered, very small, a single black filled circle (the monopole) with a 0.5px label rule pointing to the word `monopole.design`. Iron-filing dust (thousands of 1px particles) sits dormant. As the cursor enters, the dust forms field lines that emanate radially from *one point only* — never the dipole's two lobes. The wordmark is the only large type, set in a wide grotesk, tracked open like an instrument legend. 2. **ONE STATEMENT** — the manifesto act. Five lines of huge type, each line a single polarity claim, each pinned to a different broken-grid position so the eye zig-zags down. Between lines, hairline "field arcs" connect the end of one line to the start of the next, drawn as you scroll. 3. **THE INSTRUMENT** — what the studio does, presented as a **labeled apparatus diagram**: a central form with leader lines fanning out to short captions ("identity systems", "editorial systems", "interface systems"), each leader line terminating in a tiny crosshair. No icons. No cards. Just the schematic. 4. **THE FIELD LOG** — selected work, shown as a **horizontal filmstrip of "exposure plates"** inside this vertical act: each project is one monochrome plate (a single dominant image flattened to high-contrast duotone) with a typeset caption block hanging below the plate's left edge, intruding into the margin. Plates scroll sideways while the act is pinned. 5. **POLARITY TEST** — an interactive act: a draggable black dot the visitor can flick across the field; the dust reorganizes around wherever it lands, and a live caption reads out the "field strength" as a made-up but plausible figure. This is the page's one playful instrument. 6. **THE COLOPHON** — closing plate. Studio name re-set, a single contact line, the grid ticks one last time, the dust settles back to dormant. No CTA banner, no pricing, no testimonials, no stats grid, no newsletter, no logo wall. A persistent **left-margin "field gauge"** runs the full height: a thin vertical rule with six notches, one per act, and a small filled tick that slides as you scroll — the only navigation. There is no top nav bar, no hamburger, no footer menu. ## Typography and Palette **Type system — Google Fonts only:** - **Display / wordmark / manifesto:** `Archivo Expanded` — the widest cut of the Archivo superfamily. A grotesque with squared terminals and generous width that reads exactly like a mid-century instrument legend or a Swiss exhibition poster headline. Used at very large sizes for the five polarity statements, tracked `+0.04em` at the wordmark, `0` at headlines. - **Working grotesk / body / leader-line captions:** `Archivo` (regular width, variable 400–600). The same family's normal cut keeps the system coherent — captions read as the small print on the same instrument plate. Set at `-0.005em`, line-height `1.5`. - **Numerals, gauges, field readouts, registration labels:** `Spline Sans Mono` — a clean monospace for every measurement, act number, "field strength" readout, and the cyan registration tick labels (`R1`, `R2`, …). Tabular figures so the live readout never jitters. Pairing logic: one superfamily for everything human-readable (Archivo / Archivo Expanded), one monospace for everything machine-measured. Two voices, exactly like an instrument: the legend and the dial. **Palette — monochrome with a single signal hue:** - `#F4F3F0` — Plate White. The paper. Slightly warm so it reads as cartridge stock, not screen white. - `#0B0B0C` — Iron Black. All primary type, the monopole dot, the dust particles, the apparatus lines. - `#5B5B5E` — Filing Gray. Secondary captions, dormant dust, dimmed gauge notches. - `#C9C7C0` — Hairline. The 0.5px rules, the grid lines, the leader lines at rest. - `#1F6FEB` — Registration Cyan. The *only* color. Used at hairline weight for grid ticks, active field lines, the moving gauge tick, and the live readout digits. Never fills a shape larger than a few pixels — it exists to mark, not to decorate. - `#0A2540` — Deep Field (used only inside the duotone work plates, as the dark end of the high-contrast image treatment paired with Plate White). The discipline: 95% of the page is Plate White and Iron Black. Cyan appears in flickers. The work plates are the only place a near-black blue is allowed, and only as photographic duotone. ## Imagery and Motifs - **Iron-filing dust field** — the signature. A canvas layer of 1,500–3,000 single-pixel particles. At rest they form a faint, even Filing Gray haze. Near any "pole" (cursor in Act 1, draggable dot in Act 5) they snap onto **radial field lines from one source point** — the monopole's defining behavior — flickering Registration Cyan along the lines closest to the pole, fading to Iron Black further out. - **Apparatus diagrams** — every "explanatory" moment is drawn as an instrument plate: a central object, leader lines with crosshair terminals, monospace labels. Hand-drafted feel via slightly-uneven stroke ends, but ruler-straight. - **Registration ticks** — small cyan `+` crosses and `R1…R6` labels in the top and bottom page margins, like print registration marks. They imply the grid that the content then violates. - **Field arcs** — thin curved hairlines that connect one element to the next during scroll, drawn with SVG path-draw. They suggest lines of force tying the composition together. - **Exposure plates** — work imagery rendered as high-contrast duotone (Plate White ↔ Deep Field), grainy, like a contact sheet from an old enlarger. Each plate gets one corner crop mark. - **The single dot** — the monopole itself: a small, perfect, filled black circle that appears once per act, always alone, never paired. It is the studio's logo, its punctuation, and its thesis. - Strictly no stock photography of people, no 3D blobs, no gradient meshes, no glassmorphic panels. ## Prompts for Implementation Build monopole.design as **one HTML document, one CSS file, one ES module, one `` for the dust** — no framework, no build step. The page is a ~90-second walk through six instrument plates. **No CTA blocks, no pricing tables, no stat grids, no testimonials, no feature-card rows, no newsletter capture, no logo wall, no cookie banner, no chatbot** — only the contact line in the colophon. Storytelling and motion: 1. **Act 1 — THE PLATE.** Open near-empty: Plate White field, the single Iron Black dot dead-center, a 0.5px Hairline leader line to `monopole.design` in `Archivo Expanded`, plus the `R1…R6` cyan registration ticks in the margins. Initialize the canvas dust as a calm gray haze. On `pointermove`, compute each particle's vector toward the cursor and nudge it along a *radial* line from a single virtual pole (clamp so it never resolves into two dipole lobes); particles within ~120px of the cursor flicker `#1F6FEB`, the rest tend toward `#0B0B0C`. On `pointerleave`, particles drift back to the resting haze over ~1.2s with eased decay. Respect `prefers-reduced-motion`: render one static frame of gentle field lines, no continuous animation. 2. **Act 2 — ONE STATEMENT.** Five oversized `Archivo Expanded` lines, each absolutely positioned at a different broken-grid offset so the reading path zig-zags. As each line scrolls into view, fade-reveal it (opacity + 8px rise, spring easing), then path-draw a thin cyan field arc from the previous line's end to this line's start. 3. **Act 3 — THE INSTRUMENT.** Pin the act; draw the central apparatus form, then animate leader lines fanning outward one by one (SVG stroke-dashoffset), each ending in a small crosshair and a `Spline Sans Mono` label. No icons. 4. **Act 4 — THE FIELD LOG.** Pin and convert vertical scroll to horizontal travel across the exposure-plate filmstrip. Each plate is a duotone image (CSS `filter` / blend or a pre-treated asset), with its caption block in `Archivo` hanging off the plate's lower-left, deliberately overhanging into the margin. Add one corner crop mark per plate. 5. **Act 5 — POLARITY TEST.** A draggable Iron Black dot the visitor flicks across the field with momentum (simple velocity + friction). Wherever it comes to rest becomes the new pole for the dust. A fixed `Spline Sans Mono` readout shows a live "FIELD STRENGTH" figure derived from the dot's velocity and position — tabular figures, cyan digits, plausible-sounding units. This is the page's single moment of play; keep it physical, not gamified. 6. **Act 6 — THE COLOPHON.** Re-set the wordmark, one contact line, the registration ticks flash once, the dust settles to dormant haze, the left-margin field gauge tick lands on notch 6. End on white. Global behaviors: the **left-margin field gauge** (thin rule, six notches, sliding cyan tick) is the only nav and updates from scroll position. Keep the visible 12-column grid as faint cyan margin ticks; let content cross the gutters on purpose. Everything that explains something must look like it was drafted with a ruler and labeled in monospace. Animation budget: dust canvas + a handful of SVG path-draws + spring text reveals — nothing heavier. ## Uniqueness Notes Differentiators from other designs in this codebase: 1. **A literal physics metaphor that drives the actual interaction model.** The 79%-common "magnetic" pattern in the corpus is almost always a generic cursor-attraction micro-effect on buttons. Here magnetism *is the site*: a full-canvas iron-filing field that obeys the monopole's single-pole rule, a draggable pole in Act 5, and field-arc connectors between sections. The gimmick everyone uses decoratively is promoted to the structural concept. 2. **Swiss/avant-garde "broken-grid" rigor instead of the corpus defaults.** Against a field dominated by hand-drawn (96%), glassmorphism (76%), card-grid (89%), warm gradient palettes (98%/96%), and pastoral-romantic tone (34%), this site is monochrome cartridge-white + Iron Black + a single hairline cyan, no cards anywhere, no gradients, no hand-drawn texture, and a deliberately fractured modular grid — squarely in the underused swiss (4%) / broken-grid (5%) / bold-confident (5%) / high-contrast (20%) territory with an experimental-type-layout edge. 3. **Instrument-plate information design.** Every "what we do" / "selected work" moment is rendered as a labeled scientific apparatus diagram or a duotone contact-sheet exposure plate with crop marks and monospace readouts — not feature cards, not icon grids, not stat counters. The page reads like an instrument manual for a design practice. 4. **Single-superfamily + single-monospace type system, single signal hue.** One voice for humans (Archivo / Archivo Expanded), one voice for measurements (Spline Sans Mono), and exactly one color (Registration Cyan) used only as a mark and never as a fill — an unusually austere system in a corpus where mono (94%) is common but almost always paired with warm gradients and busy palettes. Chosen seed / style: **swiss typography clean** — extended toward an avant-garde "experimental type layout / broken-grid" reading (aesthetic: swiss with bauhaus rigor; layout: broken-grid + immersive-scroll; typography: grotesque-neo; palette: monochrome + high-contrast with one cyan signal; patterns: magnetic + path-draw-svg + spring + scroll-triggered; imagery: line-illustration + generative-art + duotone-photo; motifs: grid-lines + sharp-angles + particle-effects; tone: bold-confident). Avoided patterns from the frequency analysis: hand-drawn aesthetic (96%), glassmorphism (76%), warm palette (98%), gradient palette (96%), photography of people (98%), card-grid (89%), centered-everything (85%), pastoral-romantic tone (34%), cursor-follow-as-decoration, tilt-3d, counter-animated stat grids, CTA/pricing/testimonial/logo-wall blocks.