# Design Language for monopole.news ## Aesthetics and Tone monopole.news is **a brutalist physics broadsheet built around a single magnetic pole** — the front page of an imagined research bulletin that only ever reports on things that have one end and no other: the Dirac monopole, the 't Hooft–Polyakov soliton, the lone north of a sheared bar magnet, the unpaired charge. The governing metaphor is **broken symmetry made visible**. A normal magnet, a normal newspaper, a normal landing page — all of them are *dipoles*: a balanced top and bottom, a left column and a right column, a headline answered by a CTA. This site refuses the second pole. Every spread is deliberately *unbalanced* in a way that resolves: heavy mass clamped to one edge, the rest of the canvas left as raw measured field, like iron filings around a stub of lodestone. The tone is **authoritative, dry, slightly austere — a particle-physics preprint server that learned typography**. No warmth, no gradients, no soft glassy panels, no hand-drawn doodles. Surfaces are flat, matte, mostly paper-white and ink-black with a single charged accent. The mood is the inside of a shielded lab at 2 a.m.: fluorescent, exact, faintly humming. Headlines read like detector run logs. Body copy reads like a careful methods section. Nothing apologises for being technical. The aesthetic touchstones: a Swiss railway timetable, a CERN status board, the cover of *Physical Review Letters*, a brutalist concrete stairwell with one red fire-door, and the field-line diagrams in a 1970s electromagnetism textbook redrawn at billboard scale. ## Layout Motifs and Structure The page is an **asymmetric bold grid** — explicitly *not* centred, *not* a symmetric two-column magazine spread, *not* a card-grid feed. The working canvas is **1440 × 2000 effective at 1.0 zoom**, scaling fluidly but always honouring a **13-column modular grid where column 1 is twice the width of columns 2–13**. That fat first column is "the pole": it is pinned to the left edge, runs full bleed top to bottom, and carries the masthead, the running index, and the heaviest type. Everything else — the stories, the field diagrams, the marginalia — lives in the remaining narrow columns and is allowed to be sparse, ragged, and visibly *measured* (faint hairline column rules show through, like graph paper under a transparency). Structural motifs: - **The single anchored mass.** On viewports ≥ 1100px, the heavy left "pole" column is `position: sticky` from the top and stays put while the field of stories scrolls past it — the page literally has one fixed end and one free end. - **Field-line flow lines.** Thin SVG curves emanate from a single point near the top of the pole column and arc rightward across the whole layout, passing *behind* the text. They are the connective tissue of the grid; story blocks snap their top edges to where a field line crosses a column gridline. - **Diagonal section breaks at the dip angle.** Section dividers are not horizontal rules — they are full-width lines tilted at **±11.5°** (a nod to the magnetic dip / declination angle), splitting the page into wedge-shaped registers. - **Marginalia rail in column 13.** The far-right narrow column is a vertical rail of timestamps, run numbers, and one-line "errata" set in mono — the lab-notebook margin. - **No hero image, no nav bar, no footer band.** Navigation is a numbered list inside the pole column. The page ends abruptly, mid-field, the way a monopole's field line just *stops*. On narrow viewports (< 720px) the fat pole column collapses to a full-width black masthead block at the top; the field lines redraw as a single vertical spine down the left margin; story blocks stack single-column but keep their ragged left indents so the asymmetry survives. ## Typography and Palette **Type stack — Google Fonts only, three families, one role each:** - **Archivo Black** — the pole. Used only in the heavy left column and for top-level headlines, set TIGHT (letter-spacing −0.02em, line-height 0.95), all-caps, in sizes that are deliberately too large for their container so they clip the column edge like a magnet sticking out of frame. This is the single dense mass of the page. - **Spectral** — the field. The body serif: a screen-tuned, slightly condensed text serif with crisp bracketed serifs. Body copy at **16.5px / 1.62 / 0.003em**, justified in the wide story columns, ragged-right in the marginalia. Pull-quotes set in Spectral italic at 26px. This carries all the reading. - **IBM Plex Mono** — the instrument readout. Timestamps, run numbers, figure captions, the marginalia rail, axis labels on the field diagrams, the "STATUS:" line. 12.5px, slightly loose tracking (0.04em), uppercase for labels. **Palette — high-contrast monochrome plus one charged pole:** - `#F4F3EE` — *Filings White*. The paper field. Slightly warm-grey, the colour of a well-lit lab bench, never pure #FFF. - `#0B0B0C` — *Lodestone Black*. The ink, and the fill of the heavy pole column. Near-black with a hair of blue so it doesn't go muddy. - `#D4221C` — *North Red*. The single accent — the painted "N" end of a bar magnet. Used with extreme restraint: the masthead's monopole glyph, the active index number, the head of each field line, one rule per section. Never as a background fill larger than a small block. - `#3A3A3C` — *Shield Grey*. Mid-grey for hairline grid rules, secondary mono text, and the field-line curves at low opacity. - `#1430C9` — *South Blue*, used **once and only once on the entire page** (in the colophon, as the "S" that the rest of the site has refused to draw) — a buried payoff for anyone who scrolls to the very end. ## Imagery and Motifs **No photographs. No raster images. No icon fonts. No emoji. No stock illustration.** Every visual is drawn at runtime in SVG so the whole page reads as one continuous technical drawing. The recurring motifs: 1. **The monopole glyph.** A custom mark: a single dot with field lines radiating outward in all directions and *no return loop* — the visual definition of a monopole. It sits in the masthead, half-clipped by the pole column edge. The lines are `#D4221C`, the dot `#0B0B0C`. 2. **Field-line networks.** Bézier curves computed from a single source point, drawn with `vector-effect: non-scaling-stroke` at 1px, `#3A3A3C` at 22% opacity, passing behind all text. They are the page's only "decoration" and they are also its grid. 3. **Iron-filing stipple.** Where a story is "live" / breaking, its block gets a subtle dotted texture — small `#3A3A3C` dots whose density follows the local field-line gradient, like filings clustering near a pole. Pure SVG ``, no images. 4. **Detector-style figure frames.** Diagrams (when an article has one) sit in thin-ruled boxes with mono axis ticks, a tiny scale bar, and a "FIG. n" caption — the look of a PRL figure, never a photo. 5. **The cut edge.** A single jagged/torn vertical line where the pole column meets the field — the place the dipole was sheared in half. Drawn as one SVG polyline, `#0B0B0C`. 6. **Dip-angle hatching.** Section wedges get faint parallel hatching at ±11.5°, `#3A3A3C` at 8%. ## Prompts for Implementation Build monopole.news as **one HTML file, one CSS file, one ES module**. No framework, no router, no build step, no fetch. **Target under 95KB uncompressed.** No raster images, no icon fonts, no Lottie, no canvas — SVG and CSS only. The page is a *story told by an asymmetric layout coming into balance*, not a marketing page: there are **no CTA buttons, no pricing blocks, no stat-grids, no testimonial carousels, no sign-up bands**. It is a front page that the reader scrolls through like a broadsheet. **Page narrative timeline (first paint → steady state):** - **0.00s — first paint.** Filings White fills the viewport. The heavy black pole column slabs in from the left edge at full height. Nothing centred, nothing balanced — the page looks *off*, on purpose. - **0.15s — the pole charges.** The masthead "MONOPOLE.NEWS" sets in Archivo Black inside the column, oversized, clipping the right edge. The North Red monopole glyph fades up over ~400ms next to it. - **0.4s–1.2s — field lines deploy.** The SVG field-line network *draws itself* outward from the source point: `stroke-dashoffset` animation, lines extending one after another in a staggered fan (each ~250ms, 40ms apart), `cubic-bezier(.16,1,.3,1)`. As each line lands, the story block it anchors slides up 24px into place and its text fades in. The page resolves from "unbalanced" to "in equilibrium" — the asymmetry was always going to settle. - **steady state.** The pole column is `sticky`; scrolling moves the field of stories past it. Field lines have a barely-perceptible idle drift (±3px, 8s ease-in-out loop) so the page feels magnetised, not dead. The iron-filing stipple on live blocks shimmers very faintly (opacity 0.18↔0.24, 4s). **Interaction grammar (restrained, physical, no cursor-follow blob, no parallax-on-everything):** - **Hover a story headline** → the field line that anchors that block brightens to `#D4221C` and thickens to 1.6px over 180ms; the headline's left indent snaps tighter by 8px, as if pulled toward the pole. `transform`/`stroke` only. - **Hover the masthead glyph** → the radiating field lines of the glyph itself extend ~12% further outward (scale on the line group, 220ms spring) — the monopole "powering up". No flip, no rotation. - **Scroll-triggered** → each diagonal section divider draws across the page left-to-right at its ±11.5° tilt as it enters the viewport (`path-draw`, 600ms). Numbers in the marginalia rail `counter-animate` (roll up over 400ms) when their row scrolls in. - **Click an index number in the pole column** → smooth-scroll to that section; the clicked number turns North Red and stays charged. - **The colophon, at the very bottom** → here, and nowhere else, a small South Blue "S" finally appears with the line "every monopole is a dipole someone hasn't found the other end of yet." Then the page just stops — no footer, no back-to-top, the field line simply ends. **Implementation notes:** All animation via CSS `transform`/`opacity`/`stroke-*` and `IntersectionObserver`; honour `prefers-reduced-motion` by skipping the line-draw and idle drift. The 13-column grid is CSS Grid with the first column `2fr` and the rest `1fr`. Field lines are generated by the JS module from a seeded list of control points so the same arrangement renders every load. Type loads via `` to Google Fonts with `display=swap`; fall back to `Georgia` (Spectral) / `Arial Black` (Archivo Black) / `ui-monospace` (Plex Mono). Keep the DOM shallow — this is a poster, not an app. ## Uniqueness Notes Distinct departures from the registry and from generic defaults: 1. **The layout *is* the subject.** The single fat sticky left column literally enacts a magnetic monopole — one fixed pole, no second one — and the whole page animates from visual imbalance to equilibrium. No other design in the corpus uses an asymmetric grid as a physical model of its own name. 2. **Brutalist + scientific, not brutalist-as-fashion.** The few brutalist sites in the corpus (≈6%) tend toward raw-edges-as-attitude or anti-design noise. Here brutalism means *instrument exactness*: flat matte surfaces, hairline measured grids, a PRL/CERN-status-board severity — concrete with one red fire-door, not graffiti. 3. **A monochrome palette with a one-use-only fifth colour.** Filings White / Lodestone Black / North Red / Shield Grey carry the entire page; South Blue `#1430C9` appears exactly once, in the colophon, as the "other pole" the site spent the whole scroll refusing to draw — a structural punchline, not a swatch. 4. **Field lines that double as the grid.** SVG Bézier field lines emanating from a single source aren't background texture — story blocks snap to where they cross column rules, so the "decoration" is load-bearing layout. 5. **No hero, no nav bar, no footer, no CTA, no cards, no stats.** Navigation is a numbered list inside the pole column; the page ends mid-field. It reads as a broadsheet front page, not a product site. 6. **Chosen seed/style:** `asymmetric bold grid news` — *aesthetic: brutalist, layout: asymmetric, typography: mono, palette: high-contrast / monochrome, patterns: path-draw-svg + counter-animate, imagery: line-illustration, motifs: grid-lines + sharp-angles, tone: authoritative.* 7. **Avoided patterns from the frequency analysis:** no hand-drawn (96%), no glassmorphism (76%), no warm palette (98%), no gradient (96%), no photography (98%), no parallax (93%), no cursor-follow blob (89%), no spring-everything, no card-grid (89%), no centred layout (85%), no pastoral-romantic tone.