# Design Language for monopole.news ## Aesthetics and Tone monopole.news is the visual equivalent of a broadcast tower that has swallowed a cathedral — massive, singular, transmitting from a place of dark certainty. The name *monopole* carries two meanings: the physics object (a single magnetic pole that shouldn't exist but does) and the market condition (one force dominating a field). The site exploits both. It presents itself as the *only source* — not arrogantly, but the way a lighthouse presents itself as the only light in a storm. The aesthetic is **dark-mode editorial with monumental weight**. Think: the editorial pages of a broadsheet newspaper if the paper had been printed on black marble and the ink were molten copper. The color palette is built entirely from **burnt-orange fire** against **near-black obsidian** with veins of **cold off-white** for text. Nothing bright, nothing frivolous. Every element earns its place by being either load-bearing (content) or architecturally necessary (structure). The tone is **conversational but authoritative** — not the performative casualness of a Substack, and not the stiff gravity of a white-paper. It reads the way a knowledgeable friend talks when they've done the reading and want to tell you what actually matters. Short sentences. Active verbs. No jargon left unexplained. The site never whispers, and it never shouts. Mood references: the newsroom scene from *Zodiac* (fluorescent-lit urgency in the dark), the texture of polished black granite in a brutalist public building, the copper-orange glow of a control-room CRT at 3 a.m. ## Layout Motifs and Structure The layout metaphor is a **portfolio-grid of stories**, each one a slab — a rectangular monolith you can touch with your eyes. Not a card-grid with rounded corners and drop shadows. Slabs: flat, mineral, slightly imposing. The grid operates on a **12-column base, collapsed into 3 equal columns on desktop, 2 on tablet, 1 on mobile**, with a deliberate asymmetry: one slab per row is always 2 columns wide (the "anchor piece"), the others are 1 column. The anchor rotates through the grid so no row feels the same. **Grid-lines are structural, not decorative.** Thin 1px lines in `#3a2e24` (a burnt-umber that is darker than background) divide the grid's columns and rows as if the page is a ruled ledger. These lines do not disappear — they persist through the marble texture layer as a barely-visible register, like ruled lines seen through translucent paper. On hover, the line bordering the hovered slab brightens to `#c45a1a` (the orange accent) and the slab surface lifts 2px via `transform: translateY(-2px)`. **The hero area** is not a full-bleed image — it is a single large slab that spans the full grid width, containing a headline in display-bold type, a one-sentence standfirst, and an animated counter in the bottom-right corner (article count, reader count, or a live timestamp). This counter ticks upward using CSS keyframe animation with a number-roll effect (digit columns cycling vertically). **Navigation** is a horizontal strip pinned to the top of the viewport — minimal, left-aligned wordmark in display-bold, right-aligned section labels in a monospace secondary font. No hamburger menu. The strip is `#0d0d0d` with a 1px bottom border in `#3a2e24`. It does not transform on scroll. **Footer** is a single slab — full width, `#111` background, the monopole wordmark large and centered, social handles and legal text in small mono type beneath. ## Typography and Palette **Color System:** - `#0d0d0d` — Obsidian: page background, the void the content floats in - `#1a1310` — Deep Ember: slab surface color, slightly warm brown-black - `#c45a1a` — Burnt Orange: primary accent, headlines on dark slabs, hover states, counter digits, grid-line hover - `#e87a3a` — Ember Glow: secondary orange, used for sub-headlines, captions, and the animated counter's running digit - `#f0e8df` — Warm Vellum: body text, the readable neutral against dark slabs - `#3a2e24` — Charcoal Umber: grid-lines, borders, dividers — dark enough to read as structure, not noise - `#8a7a6e` — Ash Taupe: secondary text, timestamps, bylines, metadata - `#2a1f18` — Near-Black Mahogany: marble texture base layer, slightly warmer than obsidian **Fonts:** - **Display (hero headlines, section anchors, wordmark):** [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue) — all-caps, extreme tracking at `0.04em`, weight 400 (it only has one weight), size 72–120px for hero, 36–48px for slab titles. The condensed geometry reads as a broadcast headline carved in stone. - **Body / Editorial (article summaries, standfirsts, nav labels):** [DM Sans](https://fonts.google.com/specimen/DM+Sans) — variable font, weights 300–500, size 15–18px, line-height 1.65. DM Sans has a slightly geometric warmth that pairs with Bebas's severity without being frictionless. - **Mono / Metadata (timestamps, counters, bylines, grid coordinates):** [JetBrains Mono](https://fonts.google.com/specimen/JetBrains+Mono) — weight 400, size 11–13px, letter-spacing `0.08em`. Used exclusively for data, never for prose. Lends a control-room readout aesthetic to timestamps and live counters. **Typographic rules:** Headlines never hyphenate. Body text is left-aligned, never justified. All-caps reserved for Bebas Neue only — DM Sans and JetBrains Mono always use sentence case or lower-case. ## Imagery and Motifs **Marble texture as a material layer, not a background.** Each slab surfaces with an SVG or CSS-generated marble-vein texture — thin irregular lines in `#2a3028` (cool dark grey-green) running diagonally at roughly 15° across the `#1a1310` slab surface. The veins are generated via an SVG `` filter with `baseFrequency="0.018 0.025"` and `numOctaves="5"`, colored via `feColorMatrix` to produce only dark warm-to-cool vein tones with no brightness above 30%. The marble is *barely there* — visible when staring at a slab, invisible at a glance. **Grid-lines as motif.** Beyond the structural column dividers, a second layer of motif grid-lines appears in the hero slab: a faint `#3a2e24` orthogonal grid at 40px intervals, `opacity: 0.4`, giving the impression of a cartographic or broadcast-engineering reference grid behind the headline. This grid fades out below the hero using a CSS gradient mask. **Counter animation as live artifact.** Each anchor slab (the 2-column-wide ones) carries a counter in the bottom-right corner: a JetBrains Mono number display that counts up from zero to its final value on scroll-entry using a CSS `@counter` keyframe on `--count-end`, with individual digit columns cycling via `translateY` animation staggered by digit index. The counters are always factual (article count, days since publication, word count), never fabricated social proof. They animate in burnt-orange `#c45a1a` with a pale `#8a7a6e` label. **No photography in slabs.** The slab grid contains no photographs — only text, marble texture, grid-line motifs, and counters. Photographs, if any, are used exclusively in the hero slab as a single full-slab background image with a heavy dark overlay (`rgba(13,13,13,0.75)`) so the text always dominates. Article page designs (not this index) may use full-bleed imagery, but the index is deliberately photographic-free to maximize the mineral gravity of the marble-and-orange system. **Decorative element:** A single horizontal rule appearing between the hero slab and the grid uses three thin lines: 1px `#c45a1a`, 4px gap, 1px `#3a2e24`, 4px gap, 1px `#c45a1a` — a broadcast-tower antenna silhouette simplified to three horizontals. ## Prompts for Implementation Build monopole.news as a **single-page editorial index** — no routing, no page transitions, no JavaScript framework required. One HTML file, one CSS file, one lightweight JS file for scroll-triggered counter animation and grid-line hover. **Structure (top to bottom):** 1. `
` — sticky nav strip: `#0d0d0d`, Bebas Neue wordmark left, JetBrains Mono section labels right. Height 48px. No JS needed. Border-bottom `1px solid #3a2e24`. 2. `
` — full-width slab, height `min(70vh, 720px)`. Bebas Neue headline 96px. DM Sans standfirst 18px. Counter in bottom-right corner using `data-count-end` attribute driven by JS. Background: marble SVG filter over `#1a1310`. Grid motif overlay via CSS `background-image: repeating-linear-gradient(...)` at `opacity: 0.4`. Antenna-rule divider below. 3. `
` — CSS grid, `grid-template-columns: repeat(12, 1fr)`, slabs use `grid-column: span 4` (1-column = 4 units) or `grid-column: span 8` (anchor = 8 units). `gap: 1px` — the gap IS the grid-line, filled by the parent's `#3a2e24` background. Each slab is a `
` with `background: #1a1310`, marble SVG filter, padding `2rem`, and a `transition: transform 0.18s ease, border-color 0.18s ease`. 4. `