# Design Language for monopole.tech ## Aesthetics and Tone A magnetic monopole — the single north pole without a south, the theoretical particle physicists have chased since Dirac scrawled it on a napkin in 1931 — is the organizing metaphor. It does not exist by conventional rules. It breaks symmetry. It stands alone at the summit of the possible. monopole.tech wears that impossibility like a coat: a site that radiates outward from a single center point, as if the page itself were a field emanating from one fixed source. The aesthetic is **holographic mountain landscape** — the kind of terrain you see when you look at a physical diffraction grating tilted at 5° and suddenly the spectral ghost of a ridge line appears. Colors shift with scroll position. The mountain silhouette exists as a vector construction — flat paths folded into dimensionality purely through gradient and hue rotation — never a photograph, never a texture bitmapped in. The palette is an **analogous sweep** running from deep electromagnetic violet (#2D0057) through iris blue (#5B2D9A) into cold cobalt (#1B6CDE) and finally polar cyan (#00D4CC), with the whole range treated as if projected through a prism: the hues are adjacent on the wheel but the saturation is cranked to prismatic intensity. Tone is **conversational** — not casual, but direct the way a physicist is direct when they finally explain a beautiful thing they've been sitting with for years. The copy sounds like the founder talking to you across a coffee table, not pitching from a stage. Sentences can start with "Here's the thing." The writing trusts the reader. There are no hero cards, no pricing blocks, no testimonial rails. The page is one long field emanating outward. ## Layout Motifs and Structure The layout is **centered** — but not generically so. "Centered" here is interpreted as a *radial field*, not a two-column split. Every content block has a single anchor point at the horizontal and vertical center of the viewport; text and vectors emanate outward from it. The mountain silhouette is centered on the baseline of the viewport, rising from the bottom edge. The site wordmark sits centered at peak altitude — visually perched on the mountain's highest point. **Macro structure (top to bottom, single scroll):** 1. **Field Hero (100svh).** Deep void background (#0A0012). The mountain silhouette — multi-layered vector ridges in four parallax planes — fills the lower 60% of the viewport. The wordmark "monopole" sits centered at the mountain's apex in a condensed, high-contrast variable font. Below it, a single line of conversational subhead. A Lottie animation of a spinning magnetic field diagram (concentric arcs, no arrows) plays at 12% opacity in the background, synchronized to a 6-second loop. 2. **Signal Section (100svh).** White text on an iridescent gradient field. A large vector diagram of field lines radiating from a single point — the monopole — fills the right 40% as a pure SVG illustration, gently rotating at 0.5 rpm via CSS animation. Left side: two or three short paragraphs in conversational voice explaining what monopole.tech is. The vector diagram is not decorative; it is the metaphor made literal. 3. **Spectrum Section (80svh).** A horizontal spectrum bar — the full analogous palette displayed as a diffraction band — stretches across the full viewport width at mid-height. Above it: a single centered heading. Below it: three feature or principle statements in large expressive-variable type, each word optically weighted by its position on the spectrum band (words over violet are heavier, words over cyan are lighter, rendered via `font-weight` mapped to x-position). 4. **Mountain Depth Section (120svh).** The mountain re-emerges, this time as a topographic line map: concentric contour lines in holographic gradient, every 5th contour line thicker. This section scrolls with a mild parallax differential (0.8x on contours, 1.0x on text). Centered text block at vertical midpoint, no more than 120 words, conversational. 5. **Contact / Footer (60svh).** Ultra-minimal. The wordmark again at small scale, centered. A single email address. The magnetic field Lottie plays one more loop and stops. **Spatial system:** 8-column grid (invisible), but all primary content ignores columns and centers to the viewport. Padding: `clamp(2rem, 6vw, 8rem)` on all four sides. Maximum prose width: 68ch. Section breaks are not ruled lines — they are gradient fade dissolves between background colors. ## Typography and Palette **Typography — expressive-variable, all from Google Fonts.** The page uses two variable fonts and nothing else: - **Display:** [Fraunces](https://fonts.google.com/specimen/Fraunces) — an optical-size variable font with a "wonk" axis. Used for the wordmark, section headings, and the spectrum-section statements. At large sizes (10–20vw), `font-variation-settings: 'opsz' 144, 'wght' 900, 'WONK' 1` gives maximum quirkiness and optical drama. At body sizes it normalizes. The italic cut is used sparingly for the conversational subheads — one sentence per section maximum. - **Body:** [Syne](https://fonts.google.com/specimen/Syne) — a geometric sans with a variable weight axis. Used for all running prose, labels, and navigation. Weight ranges from 400 (body) to 800 (pull-quotes). Letter-spacing at body size: `0.01em`. At display pull-quote sizes, tracking opens to `0.08em` for the airy conversational feel. **Palette — analogous violet-to-cyan sweep, holographic:** | Role | Name | Hex | |---|---|---| | Deep void (background) | Magnetic Void | #0A0012 | | Violet anchor | Dirac Violet | #2D0057 | | Iris mid | Monopole Iris | #5B2D9A | | Cobalt signal | Field Cobalt | #1B6CDE | | Polar cyan | Prism Cyan | #00D4CC | | Near-white text | Spectral White | #F0EEFF | | Mid-gray text | Field Gray | #9B93C4 | | Accent gold | Dirac Gold | #E8C84A | Holographic effect is achieved via CSS `background: linear-gradient(135deg, #2D0057, #5B2D9A, #1B6CDE, #00D4CC)` with `background-size: 400% 400%` and a 10-second `@keyframes` hue shift animating `background-position`. Applied to the spectrum bar, the mountain silhouette edges, and inline text highlights. Never applied to primary body text — only structural and decorative elements. ## Imagery and Motifs **Vector-art only. No photographs. No raster textures except the Lottie JSON.** 1. **Layered mountain silhouette.** Four SVG path layers, each representing a ridge at different apparent depth. Front ridge: `#0A0012` (blends with void). Second ridge: `#2D0057`. Third ridge: `#5B2D9A`. Back ridge: `#1B6CDE`. The silhouette is jagged, not smooth — the kind of ridge you'd trace with a finger on a topographic map. On hover / scroll trigger, the ridges shift horizontally by ±8px in a parallax stagger, deepening the sense of depth. 2. **Magnetic field Lottie animation.** A hand-crafted Lottie JSON (described as a design asset, not inline JSON) showing concentric arcs radiating from a center point, collapsing and re-expanding at 6s intervals. Colors: spectrum sweep from `#5B2D9A` to `#00D4CC`. Stroke only, no fills, stroke-width 1.5px at export size. Used at 12% opacity in the hero background and 30% opacity in the contact footer. This is the page's primary kinetic element. 3. **Monopole field-line diagram.** A single SVG illustration of a magnetic monopole: radial lines emanating from a single center point in all directions (not the dipole pair), each line curving gently as it reaches the viewport edge and fading to 0% opacity. Used in the Signal Section as a half-page illustration. The lines are animated to slowly rotate (0.5 rpm, CSS `transform: rotate`). Color: `#E8C84A` gold on void background for the isolated diagram version; spectrum gradient for the spectrum section version. 4. **Topographic contour motif.** Used in the Mountain Depth Section. Pure SVG concentric closed paths, each path slightly irregular (not perfectly elliptical — a randomized bezier contour). Line weight: 0.5px for standard contours, 1.5px for every 5th major contour. Color: holographic gradient stroke via `stroke: url(#holoGrad)` SVG gradient definition. 5. **Typographic motif.** The "wonk" axis of Fraunces at `WONK 1` creates letterforms with personality — the descender of the lowercase "p" swings further than expected, the "o" has a subtle tear-drop asymmetry. These quirks are the page's only figurative decoration in the typography. No icon set. No emoji. No bullet glyphs except `→` in the conversational section for emphasis. ## Prompts for Implementation Build monopole.tech as a **single-scroll field emanation** — the visual experience of standing at a singular magnetic source and watching its influence ripple outward. Every section is a different scale of observation: the mountain (geological scale), the field diagram (physical scale), the spectrum (spectral scale), the contours (cartographic scale). The visitor descends through scales, not through sections. **Implementation priorities:** 1. **Lottie setup.** Use `lottie-web` (CDN, not bundled) for the two Lottie instances. Hero instance: `renderer: 'svg'`, `loop: true`, `autoplay: true`, loaded after the hero text renders (300ms delay). Footer instance: `loop: false`, triggered by IntersectionObserver at 40% threshold, plays once and stops. Both Lottie containers must be `position: absolute`, `z-index: 0`, `pointer-events: none`, and never overlay interactive text. 2. **Holographic gradient animation.** A single CSS custom property `--holo-pos` driven by a `@keyframes` animation from `0% 50%` to `100% 50%` on `background-position` over 10s ease-in-out infinite. Apply to the `::after` pseudo-element of elements needing the holographic treatment so the base background color is preserved in the DOM element itself. This prevents layout repaints. 3. **Variable font axes.** Load Fraunces with axes `opsz`, `wght`, `WONK`. Load Syne with axis `wght` only. Use `@font-face` with `font-display: optional` to prevent layout shift. The spectrum-section weight-mapping effect: measure each word's `offsetLeft`, compute its x-position as a fraction of section width, map linearly to `font-weight` range 300–900, set via inline style on each `` wrapping each word. 4. **SVG parallax.** Four mountain SVG layers each with `data-parallax-speed` attribute (0.2, 0.4, 0.7, 1.0 from front to back). A single `scroll` event listener reads `window.scrollY` and sets `transform: translateX()` on each layer (no translateY — the mountains stay at the bottom). Use `will-change: transform` only on the actively animating layers. 5. **Topographic SVG generation.** The contour map in section 4 should be generated programmatically via a JavaScript function that creates `` elements as closed bezier curves with slight randomized displacement from a perfect ellipse (use seeded random so the shape is stable across renders). Generate 24 contour lines total. Major contours (every 5th) at `stroke-width: 1.5`, others at `0.5`. Apply `stroke: url(#holoGrad)` SVG linearGradient defined in the SVG ``. 6. **No framework required.** Vanilla HTML + CSS + JS. External dependencies: `lottie-web` CDN only. Google Fonts loaded via `` and ``. **Avoid entirely:** sticky headers, modal overlays, horizontal scroll carousels, pricing blocks, feature-grid cards, testimonial sliders, stat counters, social proof rails, newsletter capture forms, cookie banners, cookie consent overlays, floating chat widgets, popups of any kind, CTA buttons with hover fill animations that change background color. The page's one permitted interactive affordance is scroll-driven parallax and the Lottie animations. **Conversational copy guidance:** Write as if the founder discovered something real and wants to tell you about it. Not "We help businesses scale." More like "Here's what we built and why it matters, and we think you'll find it useful if you care about [X]." Active voice. Second person. Specific nouns. Maximum sentence length: 22 words. ## Uniqueness Notes 1. **Magnetic monopole as structural metaphor, not decoration.** No other design in the registry uses a physics concept (the Dirac monopole, the isolated single magnetic pole) as the literal page architecture. The centered layout is not generic centering — it is a *radial field emanation* with every element measured by its distance from a single origin point. The mountain sits at the base; the wordmark at the apex; the field lines radiate from center. This makes "centered" do structural work rather than just aligning divs. 2. **Expressive-variable type with mapped axes.** The frequency report shows `expressive-variable` at 6% — not crowded. But no other design uses the `WONK` axis of Fraunces to carry visual personality. The spectrum-section word-weight-mapping technique (inline `font-weight` set by each word's x-position relative to the spectrum band) is a visual grammar unique to this design — it makes the variable font axis perform as data visualization. 3. **Lottie-animation at sub-opacity as atmosphere, not feature.** The frequency shows `lottie-animation` at 3%. Most uses are likely decorative foreground elements. monopole.tech uses its Lottie instance at 12% opacity in the hero background — it is barely visible, felt more than seen, functioning as kinetic texture rather than illustration. The footer instance plays once and stops, ending the field. This use of Lottie as subliminal atmosphere rather than centerpiece is a differentiator. 4. **Four-layer vector mountain with programmatic topographic contours.** `mountain-landscape` sits at 2% in the registry — extremely underused. The design uses it twice in distinct modes: silhouette (parallax layers in the hero) and topographic (contour-line SVG in section 4). No other design in the registry renders the same motif in two geometric registers within a single page. 5. **Analogous palette as prism physics, not color theory exercise.** The four colors (#2D0057 → #5B2D9A → #1B6CDE → #00D4CC) are the visible-light analog of moving from ultraviolet edge toward cyan — the portion of the spectrum a magnetic monopole might emit if it existed. The palette is motivated by the domain concept, not chosen for contrast ratios. The holographic gradient animates the palette's position, simulating the iridescence of a diffraction grating. **Chosen seed:** `aesthetic: holographic, layout: centered, typography: expressive-variable, palette: analogous, patterns: lottie-animation, imagery: vector-art, motifs: mountain-landscape, tone: conversational` **Avoided from frequency analysis:** `centered` appears at 86% in the registry — this design reinterprets it as radial-field centering rather than column-centering to avoid the generic use. Avoided `circuit` (11%), `nature` (11%), `futuristic` (8%), and `sci-fi-hud` (6%) motifs that dominate the registry. The mountain motif is used at 2% — one of the least-used motifs in the registry — making this one of very few designs to foreground it.