# Design Language for monopoleai.com ## Aesthetics and Tone MonopoleAI occupies the visual territory of **retro-futurist machine intelligence** — the design recalls the warmth of 1970s scientific instruments and early vector-display terminals, then tilts them forward through a crisp metallic lens. Think oscilloscope green lines burning against navy phosphor, wrapped in the structural confidence of a Letraset catalog page from 1979. The overall mood is **knowingly retrofuturist but approachable and friendly**: not cold Kubrickian chrome, not nostalgic kitsch, but the feeling of a brilliant engineer who keeps a vintage Apple IIe on their desk next to a quantum computing cluster. Palette source: deep-space navy meets burnished steel and warm amber cathode glow. The tone avoids corporate sterility — it speaks like a clever colleague, not a press release. Subtle imperfections from the retro register (slight scan-line texture, ink-trapping at corners, imprecise grid slippage) coexist with precision metallic rendering. ## Layout Motifs and Structure **Broken-grid construction** is the structural core: a 12-column CSS grid where intentional violations — elements punching across column boundaries, text blocks rotated 2–4 degrees, cards offset by half a baseline — communicate the productive chaos of AI reasoning. No section is centered in the expected way; everything is in deliberate near-alignment tension. Key spatial relationships: - A dominant **57vw hero panel** floats left, its right edge cutting diagonally (clip-path polygon) into a 43vw crystalline wireframe space. - Section dividers are not horizontal rules but **angled phosphor-line segments at −3° to +5°**, rendered as SVG polylines in the metallic accent color. - Content modules are **card-fragments**: incomplete rectangles where one or two sides are absent, replaced by a faint metallic border-gradient that fades to transparent, suggesting the cards are still being "drawn" by the AI. - Vertical rhythm is built from a 6px baseline grid; intentional half-step breaks (9px, 15px gaps) create a controlled stutter that feels like a terminal cursor hesitation. - Section labels run **vertically up the left margin** at 11px in a monospace font, rotated 90° — a nod to technical schematic annotation. ## Typography and Palette **Fonts:** - Headlines: **"Space Grotesk"** (Google Fonts) — weight 700, letter-spacing −0.03em, used at large sizes (clamp 48px–120px). Its slightly quirky geometric construction evokes both a type catalog from 1978 and contemporary AI product branding. - Subheadings and UI labels: **"IBM Plex Mono"** (Google Fonts) — weight 500, all-caps at 11–13px with 0.15em letter-spacing. References terminal readouts and instrument panels. - Body and narrative text: **"DM Sans"** (Google Fonts) — weight 400/300, 17px/1.7 line-height, max-width 62ch. Friendly readability that tempers the retro technical edge. - Accent/kinetic display: **"Bebas Neue"** (Google Fonts) — used only for large single-word kinetic moments (numbers counting up, rotating labels), weight 400 at 80–200px. **Palette:** - `#0A0F2C` — Abyssal Navy: deepest background, space between stars - `#10184A` — Deep Indigo: secondary background panels and card fills - `#1E3A8A` — Electric Navy: primary interactive mid-tone, hover states - `#8BAFD4` — Polar Steel: body text on dark backgrounds, secondary labels - `#C8D8E8` — Ice Metal: headlines, card borders, light-mode body text equivalent in dark mode - `#E8F0F8` — Arctic White: pure text on dark for max contrast headlines - `#B8C8D8` — Brushed Steel: metallic accent borders, the "frame" color - `#D4A843` — Amber Cathode: warm accent for CTAs, glow halos, highlight states — references the warm amber of vintage CRT phosphors - `#6B7FA3` — Storm Grey: muted UI elements, disabled states, schematic annotation lines - `#2A4A7F` — Cobalt Depth: gradient mid-stop, card hover fills ## Imagery and Motifs **Visual Elements — NO photography. All imagery is constructed as inline SVG vector-art.** 1. **Crystalline Wireframe Polyhedra:** Three-to-five icosahedra and octahedra rendered as pure SVG stroke paths in `#B8C8D8` at 0.6px stroke width, with faces selectively filled at 4–8% opacity in `#1E3A8A`. These rotate on a continuous 40s CSS animation, `transform-origin: center`, with a subtle `perspective(900px) rotateX(12deg) rotateY(var(--t))`. They are NOT decorative backgrounds — they are the primary "image" of the hero. 2. **Tilt-3D Card Surfaces:** Every feature card has a CSS `transform: perspective(1000px) rotateX(var(--rx)) rotateY(var(--ry))` tied to `mousemove` via a JavaScript listener. At rest, cards sit at a static `rotateX(3deg) rotateY(-5deg)` preset tilt. The card "face" contains an SVG schematic drawing — circuit traces, coordinate axes, signal waveforms — at very low opacity (7–12%) as a background texture. 3. **Phosphor Scan-Lines Overlay:** A full-viewport SVG `` element with `patternUnits="userSpaceOnUse"`, repeating a 2px-high horizontal stripe: 1px fully transparent, 1px at `fill: #0A0F2C` opacity 0.18. Applied as a fixed `position: fixed` overlay at `pointer-events: none` across the entire page. 4. **Kinetic Type Moments:** Three moments of animated typography: - Hero wordmark "MONOPOLE" renders character-by-character with a 60ms stagger, each letter entering with `translateY(−30px) opacity(0) → translateY(0) opacity(1)` over 400ms cubic-bezier(0.16, 1, 0.3, 1). - A counter module: two 3-digit numbers count from 000 to their final value over 2s on scroll-enter, rendered in Bebas Neue at 96px in `#D4A843`. - A rotating label ring: a short horizontal strip of IBM Plex Mono text that rotates on its Y axis (CSS `rotateY` 0→360deg, 8s infinite linear) creating a "slot-machine" flip effect revealing key product descriptors. 5. **Grid Interrupt Lines:** At three points in the page scroll, a full-width SVG `` element at `stroke: #D4A843` stroke-width 1 and `stroke-dasharray: 4 8` runs at a slight angle (−1.5deg via `transform: rotate(−1.5deg)`) as a visual chapter break. 6. **Corner-bracket Motifs:** SVG `` elements forming only the four corners of a rectangle (L-shaped, 16px arms, 1.5px stroke in `#B8C8D8`) appear at card corners and section entry points — a schematic/blueprint reference that never closes into a full border. ## Prompts for Implementation Build monopoleai.com as a **single vertical narrative scroll** — no separate pages, no tabbed navigation, no modal flows. The user descends through a story about machine intelligence told through the visual language of scientific instruments and broken-grid composition. **Scroll Act Structure:** **Act I — Ignition (0–100vh):** Full-height hero. Left 57%: kinetic wordmark "MONOPOLE" with character-stagger animation, then a 2-line subtitle in DM Sans 300 weight. Below the subtitle, one solitary `` in Bebas Neue styled as a phosphor-lit button (border: 1px solid #D4A843, text: #D4A843, padding: 12px 32px, no background fill, hover: fill #D4A843 text #0A0F2C). Right 43%: three crystalline wireframe polyhedra at different scales, continuously rotating at different speeds (29s, 41s, 67s), clipped by a polygon that matches the hero diagonal cut. The entire hero sits on `#0A0F2C`, with a radial-gradient glow at center-right: `radial-gradient(ellipse 60% 80% at 75% 50%, #1E3A8A44 0%, transparent 70%)`. **Act II — The Signal (100–250vh):** Broken-grid feature section. Five feature cards, arranged NOT in a clean grid: cards 1 and 2 share a row at 55%/38% width with a 7% gap; card 3 is full-width but only 220px tall, stretched horizontally; cards 4 and 5 sit in a row but card 4 is offset 60px upward via `margin-top: -60px`. Each card has: tilt-3D perspective effect, corner-bracket SVG motifs, a schematic SVG background at 9% opacity, a vertical IBM Plex Mono label on its left edge, a Bebas Neue accent number at top-right. Section header runs vertically on the left margin in IBM Plex Mono 11px. **Act III — The Count (250–350vh):** Dark counter section on `#10184A`. Three Bebas Neue 96px numbers in `#D4A843` count up on scroll-enter (IntersectionObserver, 2s duration, easing out-cubic). Each has a 2-line DM Sans caption below. A diagonal dashed phosphor line bisects this section at −1.5deg. Behind the numbers, a very large (400px) partially-visible crystalline octahedron at 8% opacity acts as a ghost watermark. **Act IV — The Architecture (350–500vh):** Full-bleed section with a single large SVG diagram — a stylized "monopole field" visualization: concentric polyline arcs emanating from a central point, rendered in IBM Plex Mono-sized strokes at varying opacities (outermost at 15%, innermost at 70%), colors transitioning from `#1E3A8A` to `#D4A843`. The narrative text appears in DM Sans alongside the diagram in a two-column broken layout (diagram takes 62%, text takes 31%, with 7% acting as a gap that a section label bleeds into). **Act V — Proximity (500–600vh):** Contact/closing section. Background `#0A0F2C`. One headline in Space Grotesk 700 at clamp(40px, 7vw, 96px). One email input and submit — styled as a terminal command line: input has `background: transparent; border: none; border-bottom: 1px solid #6B7FA3; color: #E8F0F8; font-family: IBM Plex Mono` with a blinking cursor `::after` pseudo-element. The rotating slot-machine label ring spins here, cycling: "RESONANT · PRECISE · ADAPTIVE · INTELLIGENT · GROUNDED". **Technical Directives:** - Use CSS custom properties `--rx`, `--ry` updated by a global `mousemove` handler for all tilt-3D effects; clamp to ±8deg. - All SVG polyhedra wireframes: compute vertices in JavaScript for icosahedra/octahedra, project with simple perspective divide, render as SVG `` elements, animate with `requestAnimationFrame` updating a rotation matrix. - Scan-line overlay: `position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999`. - Use `IntersectionObserver` with `threshold: 0.15` for all scroll-triggered animations. - NO sticky headers. NO hamburger menus. NO pricing tables. NO testimonial carousels. NO stat grids. - The phosphor button hover transition: `transition: background 0.25s, color 0.25s` — fast and crisp. ## Uniqueness Notes **Differentiators from the existing design corpus:** 1. **Broken-grid + retro-scientific synthesis:** The corpus shows broken-grid at 5% frequency but always paired with brutalist or maximalist aesthetics. monopoleai.com pairs it instead with precision scientific instrument aesthetics (oscilloscope, schematic annotation, terminal readout) — a combination not present in the catalogued designs. 2. **Crystalline wireframe as primary hero image:** Vector-art imagery is at 3% frequency in the corpus and never used as the dominant hero visual element. Here, rotating 3D wireframe polyhedra computed and projected in real-time JavaScript ARE the hero image — no photography (corpus shows photography at 90%), no gradients as the primary visual, no illustrations. 3. **Tilt-3D with schematic card interiors:** Tilt-3D appears at 8% frequency in the corpus but always on photograph or gradient card faces. Here every tilt card face is a low-opacity SVG circuit/schematic drawing — an engineering blueprint interior to a perspective-tilted card surface. 4. **Kinetic-animated typography at three distinct registers simultaneously:** While kinetic typography appears at 3% frequency, this design uses three concurrent kinetic systems (character-stagger entry, counting numbers, slot-machine rotation) each in different font families and sizes — creating a layered kinetic language rather than a single effect. 5. **Navy-metallic palette with amber cathode accent:** Navy-metallic is at 3% corpus frequency. The addition of `#D4A843` amber as the sole warm accent (referencing vintage CRT phosphor glow) is unprecedented in the corpus — no other design combines navy/steel/metallic with warm amber in this way. **Chosen seed:** aesthetic: retro, layout: broken-grid, typography: kinetic-animated, palette: navy-metallic, patterns: tilt-3d, imagery: vector-art, motifs: crystalline, tone: friendly **Avoided patterns from frequency analysis:** - Photography (90% corpus frequency — completely absent here) - Generic centered layouts (avoided via intentional broken-grid asymmetry) - Minimal imagery (41% — opposite approach taken with rich SVG visual world) - Friendly tone without visual substance (18% friendly in corpus — here friendliness is embedded in the amber warmth and DM Sans body type, not in rounded corners or pastel colors)