# Design Language for monopole.wiki ## Aesthetics and Tone monopole.wiki is an encyclopedia of one — a wiki that exists as if edited by a single obsessive intelligence that cannot stop adding layers. The aesthetic is **maximalist-electric**: every visible surface hums with information density, high-voltage color, and the kinetic restlessness of a live circuit board. The mood sits between a retrofuturist research terminal and a zine published by someone who owns too many neon markers. Typography is stacked, oversized, and occasionally tilted. Borders glow. Grid lines pulse faintly. The page never looks unfinished — it looks *over-finished*, deliberately, with purpose. Tone is **playful-authoritative**: the site knows everything about its subject and is delighted to tell you all of it at once. Wikipedia's density without Wikipedia's beige. Think: a particle physics lab decorated by a graphic designer who mainlined early-2000s Wipeout packaging and a week of late-night energy drinks. Mood board reference points: - Wipeout XL / Wipeout 2097 UI skins — neon on dark, razor-sharp Futura - Circuit-board close-up photography — trace routes as decorative geometry - Rave flyer typography of 1993 — information hierarchy through chaos - CERN data-visualization posters — beauty in scientific density - Hyperdub Records sleeve art — modular blocks arranged at tension ## Layout Motifs and Structure Layout is **modular-blocks**: the page is divided into a non-uniform grid of distinct content tiles, each with its own internal logic. Tiles do NOT all share the same width or height — some are wide 3-column anchors, some are narrow 1-column factoids, some are tall vertical runners. The grid is 12-column under the hood but the eye reads it as freeform. Gutters are tight: 8px between tiles, never more than 16px. Block corners are sharp (0px border-radius on all containers). Key layout structures: 1. **Command bar** — a sticky 40px top strip carrying the domain name left-aligned in 11px Barlow Condensed caps, a pulse-dot status indicator (green, animated), and a sparse breadcrumb right-aligned. No hamburger menus. No hero images. 2. **Index matrix** — the page hero is NOT an image — it is a dense 8-column × N-row table of linked topics, each cell 120×48px, color-coded by category using one of five accent neons. On hover the cell inverts and a single-pixel trace-route path animates from it to its related cells. This is the main navigation. 3. **Content tiles** — below the matrix, modular blocks render article excerpts. Three canonical tile shapes: Wide (spans 8 cols, 240px tall), Medium (spans 4 cols, 180px tall), Slim (spans 4 cols, 80px tall for single-fact entries). Each tile has a header bar in one accent color, body text in near-white on dark, and a bottom-right corner glyph (a 16×16px circuit node icon). 4. **Sidebar runner** — a fixed 240px right column carries live metadata: last-edited timestamp in mono, a sparkline of "edit activity" (canvas-drawn, 5-column bar chart), and a hierarchical tag cloud where tag font-size maps to topic frequency. The sidebar has a 1px left border in #00FF41 (matrix green). 5. **Deep-link anchors** — each section heading is preceded by a 4px × 16px accent bar and a 2px animated underline that sweeps in on scroll-entrance. Spatial rhythm: information packs tight vertically. No decorative whitespace. Padding inside tiles: 16px top/bottom, 20px left/right. ## Typography and Palette **Primary typeface:** Barlow Condensed — weight 700 for all headings (H1 at 72px, H2 at 36px, H3 at 22px). Condensed grotesque at maximum weight creates the electric tension without serif nostalgia. **Body typeface:** Space Grotesk — weight 400/500 at 15px/1.6 line-height. Slightly geometric, maintains legibility at high density. **Accent / label typeface:** Space Mono — weight 400 at 11px for timestamps, coordinates, metadata micro-labels, and the sidebar runner. Mono enforces the terminal-instrument character. **All fonts available on Google Fonts.** **Palette — Neon Electric on Deep Void:** | Role | Name | Hex | |---|---|---| | Background (void) | Pitch | #0A0A0F | | Background (tile) | Carbon | #111118 | | Background (tile alt) | Graphite | #16161F | | Border / grid | Dark wire | #1E1E2E | | Primary neon | Matrix green | #00FF41 | | Accent neon A | Electric cyan | #00CFFF | | Accent neon B | Voltage violet | #B400FF | | Accent neon C | Plasma pink | #FF0090 | | Accent neon D | Solar amber | #FFB800 | | Body text | Near-white | #E8E8F0 | | Muted text | Steel | #7A7A9A | | Highlight | White | #FFFFFF | Color assignment is systematic: categories of content receive a fixed neon (e.g., physics topics → #00CFFF, historical entries → #FFB800, theoretical entries → #B400FF). The system is documented in a visible legend tile in the index matrix. ## Imagery and Motifs **No photography.** The visual language is entirely constructed from geometry and code. **Core motif: circuit traces.** A full-viewport SVG layer sits at `position: fixed`, `z-index: 0`, `opacity: 0.04`. It renders a PCB-style diagram — horizontal and vertical traces at 1px stroke in #00FF41, with T-junctions, right-angle bends, and circular via-pads at node intersections. The trace topology mirrors the site's actual topic graph (same adjacency as the index matrix). As the user scrolls, the trace layer very slowly drifts (translateY at 0.05× scroll speed), giving a parallax depth without motion sickness. **Ripple pattern:** Every interactive element (tile hover, link click, nav item focus) emits a circular CSS ripple: a pseudo-element expands from 0px to 120px radius at 600ms, color-matched to the tile's accent neon, opacity starting at 0.35 and ending at 0. Ripples are NOT button-style Material ripples — they spread from the element's center regardless of click position, and they can stack (three simultaneous ripples visible at once). **Geometric-abstract tile headers:** Each Wide tile has a 40px header bar. Inside the header, an inline SVG renders a procedurally-varied geometric strip: a sequence of 8–12 shapes (rectangles, right triangles, thin diamonds) packed horizontally, each 8–30px wide, in the tile's accent color at varying opacities (0.3–1.0). No two tiles share the same strip pattern. These are generated at build time as inline SVG strings. **Circuit node glyph:** Bottom-right of every tile — a 16×16px SVG: a 6px circle (stroke only, 1.5px, accent color), with four 4px stubs extending at 90° intervals (circuit via symbol). On hover the glyph rotates 90° at 300ms ease-out. **Pulse dot:** The command bar status indicator — a 6px circle in #00FF41 that cycles through: solid fill → 10px glow ring → 16px faint outer ring → back to solid, at 2s repeat. Pure CSS animation, `box-shadow` driven. **Sparkline:** The sidebar edit-activity bar chart is a `` element, 200×32px, redrawn on page load. 20 bars, heights randomized in a bounded random walk (±3px from previous), colored in a gradient from #1E1E2E (low) to #00FF41 (high). ## Prompts for Implementation Build monopole.wiki as **a living research instrument**, not a document. The mental model for the implementer: you are building the read-only terminal of an obsessive researcher's private knowledge base. Every visual decision should reinforce that this is dense, alive, and authoritative. **Structural implementation:** The page has three fixed-position anchor elements: 1. `#command-bar` — `position: sticky; top: 0; height: 40px; z-index: 100; background: #0A0A0F; border-bottom: 1px solid #1E1E2E` 2. `#circuit-bg` — `position: fixed; inset: 0; z-index: 0; pointer-events: none` — contains the SVG trace layer 3. `#sidebar` — `position: sticky; top: 48px; width: 240px; height: calc(100vh - 48px); overflow-y: auto; border-left: 1px solid #00FF41` Main content: a CSS Grid container, 12 columns, `gap: 8px`, with tile children assigned `grid-column: span N` per tile type. **The index matrix (hero):** Render as a CSS Grid of 8 columns × variable rows. Each cell: `120px` wide (fixed), `48px` tall, `background: #111118`, `border: 1px solid #1E1E2E`, `font: 700 11px/1 Barlow Condensed`, `letter-spacing: 0.08em`, `text-transform: uppercase`. On hover: `background: `, `color: #0A0A0F`, transition 80ms. Each cell carries a `data-category` attribute; JS reads these to draw SVG connector lines (position:absolute overlay) between hovered cell and all same-category cells. **Ripple system:** Attach a single `ripple(el, color)` function. On tile `mouseenter`: call `ripple(tile, tileAccentColor)`. Implementation: append a `` child, set diameter to `120px`, center it via `left: 50%; top: 50%; transform: translate(-50%,-50%)`, animate with a CSS keyframe (`scale(0)→scale(1)`, `opacity(0.35)→opacity(0)`), remove on `animationend`. Maximum 3 live ripples per tile (FIFO removal). **Typography scale in CSS:** ``` --font-heading: 'Barlow Condensed', sans-serif; --font-body: 'Space Grotesk', sans-serif; --font-mono: 'Space Mono', monospace; --size-h1: clamp(48px, 8vw, 72px); --size-h2: 36px; --size-h3: 22px; --size-body: 15px; --size-label: 11px; ``` **Circuit trace SVG:** Generate programmatically: start from a 40×30 logical grid. Place nodes at random grid intersections (density: ~30%). For each pair of adjacent nodes (horizontal or vertical), draw a trace. Render as `` elements with `stroke="#00FF41"` `stroke-width="1"` `opacity="0.04"`. Via pads: `` at each node. Total SVG size: viewport units (100vw × 100vh). **Scroll entrance animations:** Each tile uses `IntersectionObserver`. On first intersection: tile slides up 20px and fades in over 400ms (`transform: translateY(20px)→translateY(0)`, `opacity: 0→1`). Stagger: each tile in a row fires 60ms after the previous. After animation: remove observer (fires once only). **Color-by-category system:** Define a JS constant: `CATEGORY_COLORS = { physics: '#00CFFF', theory: '#B400FF', history: '#FFB800', application: '#FF0090', reference: '#00FF41' }`. Every tile reads `data-category` from its root element and applies the matching neon as CSS custom property `--tile-accent`. All accent-dependent styles (header bar background, border-top, circuit node stroke, ripple color) reference `var(--tile-accent)`. **Avoid:** hero images, stock photography, rounded corners anywhere, gradient backgrounds (solid fills only), CTA buttons, pricing blocks, testimonial cards, stat counter animations, parallax image layers, decorative blobs or organic shapes. **Lean into:** information overload as aesthetic, the pleasure of a fully-populated grid, the authority of monospace metadata, the beauty of a system that is consistent down to the pixel. ## Uniqueness Notes **Chosen seed:** aesthetic: maximalist, layout: modular-blocks, typography: grotesque-neo, palette: neon-electric, patterns: ripple, imagery: geometric-abstract, motifs: circuit, tone: playful **Differentiators from the existing corpus:** 1. **Topic-graph-driven decorative SVG.** The background circuit trace is not random noise — its node topology is isomorphic with the site's actual topic adjacency graph. The decoration IS the data structure. No other design in the corpus encodes site architecture into its background layer. 2. **Index matrix as primary navigation.** Instead of a navbar, hero section, or card grid, the page opens with a dense 8×N color-coded topic matrix that IS the navigation. Hover interactions draw SVG connector lines between related entries. This is a spatial hypertext browser, not a landing page. 3. **Systematic neon-by-category color logic.** Five accent neons are each locked to a semantic content category, documented in a visible legend tile. Color is not decorative — it is taxonomic. The corpus has neon palettes but none that encode domain classification this explicitly. 4. **FIFO ripple stack.** The ripple pattern (at 10% corpus frequency) is reimplemented as a stacking system with a maximum depth of 3, giving the page a sense of responsive aliveness that single-ripple implementations lack. Ripples center on the element, not the click point, reinforcing the "field effect" rather than a tactile click metaphor. 5. **Modular-blocks at 3% corpus frequency** — deliberately chosen as an underused layout. Combined with maximalist content density and tight 8px gutters, this produces a visual register that no existing design occupies: not a card grid (too spacious), not a full-bleed magazine (too editorial), but something closer to a live dashboard where every block carries weight. **Avoided overused patterns:** photography (90% corpus — zero photography here), full-bleed (70% corpus — no full-bleed backgrounds), minimal (41% corpus — explicitly anti-minimal).