# Design Language for monopole.boo ## Aesthetics and Tone **Frutiger Aero meets Art Deco HUD** — a glossy, oxygen-rich interface that looks like it was designed in 2007 for a physics research station orbiting Earth. The aesthetic sits at the intersection of early-2000s Microsoft Sidebar widgets (glass, bloom, soft reflections), Art Deco geometric ornament (chevrons, sunburst rays, stepped keystones), and dopamine-saturated neon signal colors. The overall mood is: *a tutorial screen from a game where you are learning to bend electromagnetic fields with your hands*. Frutiger Aero's core vocabulary — aqua gradients, glassy surfaces, soft lens bloom, clean white highlights — is the structural grammar of every surface. Art Deco geometry (symmetry, radial rays, angular chevrons, stacked rectangles with chamfered corners) overlays that grammar as decorative punctuation. The result is not "retro" and not "futuristic" — it is a specific lost timeline where the future looked clean, optimistic, and glossy. **Tone:** tech-tutorial. The voice of the page is a confident, knowledgeable instructor demonstrating something impressive with calm authority. No hype copy. No marketing superlatives. Instead: numbered steps, labeled diagrams, annotated callouts, terminology defined inline. The page teaches *monopole physics* (or the metaphor of it) to a curious reader who arrived ready to learn. Color temperature: cool (blue-dominant), with neon punctuation that signals "live" data. No warmth. No earth tones. Every surface should feel like it emits slight photons. ## Layout Motifs and Structure **HUD-Overlay over a deep-space viewport.** The composition is built in layers: 1. **Background layer** — an animated deep-space field: slow-drifting star particles on near-black (`#020a14`), with two faint radial gradient halos (electric teal at center-left, violet at center-right) that pulse very slowly like distant nebulae. This is the "world behind the glass." 2. **Glass plate layer** — the main content area is a frosted-glass panel (`rgba(6, 28, 52, 0.72)`) with a 1px border at `rgba(0, 220, 255, 0.25)` and a subtle inner-edge highlight at the top (`rgba(255,255,255,0.08)` gradient). This panel floats centered, max-width 880px, with 48px top/bottom padding and 40px left/right. It does not span full-screen — it reads as a mounted instrument panel. 3. **HUD chrome layer** — decorative SVG overlays in each corner: Art Deco bracket frames (L-shaped chamfered chrome lines, 2px, color `#00dcff`), scan-line indicators (thin horizontal rules with tick marks), and a "signal strength" readout in the top-right corner that animates its bars. 4. **Content column** — single-column inside the glass panel. Sections are separated by a thin horizontal rule: `1px solid rgba(0,220,255,0.15)` with a centered diamond pip `◆` in `#ff2d87`. Each section header is preceded by a small Art Deco sunburst ornament (SVG, 3 rays, 20px, `#ffd700`). 5. **Icon-card row** — one horizontal strip of 4–6 icon-flip cards (described below) sits mid-page as the primary interactive module. These are NOT a CTA grid — they are a "properties panel" showing the physical parameters of a magnetic monopole. Each card flips to reveal a brief definition. No navigation bar. No hamburger menu. No footer links. The page has one scroll axis and ends at a terminal-style sign-off panel. ## Typography and Palette **Primary Display: Cinzel** (Google Fonts) — All-caps, wide letter-spacing (0.12em), used for section headers and the hero wordmark. Cinzel's Roman-inscription geometry pairs with Art Deco symmetry naturally. Weight 700, color `#ffd700` (gold) for the main title; color `#00dcff` (cyan) for sub-headers. **Secondary Body: Exo 2** (Google Fonts) — the Frutiger-clean workhorse. Used for all body copy, card text, callouts, and code-style labels. Weight 300 for body paragraphs, weight 600 for inline labels and key terms. Color `#c8e8f5` on dark backgrounds. **Monospace/Data: Space Mono** (Google Fonts) — used exclusively for numeric readouts, HUD status values, coordinate displays, and terminal-style annotations. Color `#39ff14` (neon green) — signals "live instrument output." **Palette:** - `#020a14` — near-black deep space (primary background) - `#061c34` — deep navy glass base - `#00dcff` — electric cyan (primary HUD chrome, borders, highlights) - `#ff2d87` — hot magenta (accent pips, active states, card-flip face reveal) - `#ffd700` — Art Deco gold (wordmark, section ornaments, starred items) - `#39ff14` — neon chartreuse (data readout text, "live" values in Space Mono) - `#7b2fff` — electric violet (secondary gradient halo, deepens backgrounds) - `#c8e8f5` — pale ice blue (body text, supporting copy) - `rgba(0,220,255,0.08)` — glass sheen (frosted panel overlays) **Dopamine neon logic:** The four neons (`#00dcff`, `#ff2d87`, `#39ff14`, `#7b2fff`) are NEVER used together at full saturation simultaneously. At any given moment, only ONE neon is at 100% opacity; the others drop to 30–50%. This creates a "signal dominance" rhythm as the user scrolls — the active neon shifts by section. ## Imagery and Motifs **Icon-heavy, but Art Deco encoded.** Every icon is a custom SVG drawn to Art Deco geometric principles: bilateral symmetry, stepped outlines, chevron details, no rounded corners. Icons represent physics concepts: magnetic field lines, flux arrows, pole indicators (N/S), energy rings, wave propagation spirals. Icon size: 48×48px at rest, 64×64px on card-flip reveal. **Card-flip — used as a "properties panel," not a feature showcase.** The 5 flip cards represent the 5 defining properties of a monopole: - Front face: Art Deco icon + single term (e.g., "DIRAC CHARGE") on `rgba(0,220,255,0.12)` background - Back face: `rgba(255,45,135,0.15)` background + 3-line definition in Exo 2 weight 300 + a Space Mono value readout (e.g., `g = 68.5e`) - Flip trigger: hover (desktop) or tap (mobile) - Flip animation: 0.55s cubic-bezier(0.4, 0, 0.2, 1) rotateY, NOT rotateX — vertical axis feels more like a physical panel rotating **Abstract-tech motifs:** - **Radial field-line diagram** — a large SVG behind the hero title (not the background layer — it lives in the content layer, at 12% opacity): concentric dashed arcs radiating from a central point, representing the magnetic monopole's field. Arcs are `#00dcff`, dashes 4px on 4px off. The diagram slowly rotates (90° per 60 seconds) around its center. - **Scan-line sweep** — every 8 seconds a 2px horizontal cyan line sweeps top-to-bottom across the glass panel in 1.2s, then fades. This reads as an instrument scan, not a loading indicator. - **Corner bracket ornaments** — four SVG Art Deco L-brackets in the corners of the glass panel. Each bracket is a 32×32px L-shape with chamfered inner corner and a tick mark at midpoint. Color `#00dcff` at 60% opacity. - **Particle field** — 80–120 tiny dots (1–2px, `#c8e8f5` at 20–40% opacity) drifting on the background canvas using `requestAnimationFrame`, each with a slight sinusoidal vertical drift. No WebGL — pure canvas 2D. **No photography.** No stock images. No raster assets of any kind. Every visual element is SVG or canvas. ## Prompts for Implementation **The story to tell:** A researcher opens a terminal interface to review the theoretical parameters of a magnetic monopole — a particle that has never been observed but is predicted by Dirac's quantization condition. The page is their instrument panel. It does not sell anything. It teaches. Every section is a labeled readout on this instrument. The researcher scrolls through five sections, each illuminated by a different dominant neon as if scanning through frequencies. They flip the property cards to read definitions, watch the field-line diagram rotate slowly, see the scan-line sweep across the glass. At the bottom they find a terminal-style sign-off: `> session_end: monopole.boo | all parameters nominal`. **Hero section:** - Full-width glass panel, vertically centered in viewport - Background: animated particle field + dual radial halos - Centered: Art Deco sunburst SVG (24 rays, 80px diameter, `#ffd700`) above the wordmark - Wordmark: "MONOPOLE" in Cinzel 700, 5rem, letter-spacing 0.15em, color `#ffd700` - Subtitle: ".boo" in Space Mono, 1.2rem, `#39ff14`, positioned as a superscript-style suffix - Below wordmark: a single line in Exo 2 weight 300, `#c8e8f5`, 1rem: *"A theoretical magnetic particle of unit charge — Dirac, 1931"* - HUD corner brackets animate in on load: each bracket slides inward from its corner by 12px over 0.6s ease-out, starting at 0 opacity **Properties panel (card-flip section):** - Label above: "PHYSICAL PARAMETERS" in Cinzel weight 600, 0.75rem, letter-spacing 0.2em, `#00dcff` - 5 cards in a flex row, each 140×180px, 16px gap - Card border: 1px `#00dcff` at 40% - Card front background: `rgba(0,220,255,0.06)` - Card back background: `rgba(255,45,135,0.10)` - On flip: the back face dominant neon shifts to magenta (`#ff2d87`) for that card's section — this is the "signal dominance" shift - The five properties: DIRAC CHARGE / MAGNETIC FLUX / FIELD SYMMETRY / STABILITY INDEX / DETECTION THRESHOLD **Scroll behavior:** - Use `IntersectionObserver` for section reveals: each section fades in with `opacity: 0 → 1` and `translateY(20px → 0)` over 0.5s - As each section enters viewport, the active neon shifts (cyan → magenta → gold → green → violet in sequence) - The neon shift is implemented via CSS custom properties (`--neon-active`) that drive border colors, icon fills, and text accents **Scan-line implementation:** ```css .scan-line { position: absolute; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #00dcff, transparent); animation: scan 8s infinite; opacity: 0; } @keyframes scan { 0% { top: 0; opacity: 0; } 5% { opacity: 0.7; } 95% { opacity: 0.7; } 100% { top: 100%; opacity: 0; } } ``` **Terminal sign-off:** - Last section: `rgba(0,0,0,0.4)` inset panel, 2px border `#39ff14` at 40% - Three lines typed out with typewriter effect in Space Mono `#39ff14`: ``` > initializing_session: monopole.boo > field_parameters: NOMINAL > session_end: all readings archived ``` - Cursor blink (block cursor `█`) persists after typing completes **DO NOT build:** hero CTAs, "Get Started" buttons, pricing tables, feature grids, testimonials, social proof sections, logo bars, comparison tables, sticky navigation, hamburger menus, footer link columns, stat counters, newsletter signups. **DO build:** a single-column immersive instrument panel that teaches the reader one concept through five labeled sections, with ambient motion (particles, scan-line, field rotation) that never distracts from reading. ## Uniqueness Notes **Differentiators from every other design in the registry:** 1. **Frutiger Aero + Art Deco is an unprecedented fusion.** The frequency report shows `frutiger-aero` at only 2% in the registry, and Art Deco typography has not been paired with it before. Frutiger Aero is typically paired with clean sans-serif (see its canonical 2007 Vista/Zune form). Pairing it instead with Cinzel's Roman-geometric letterforms — and overlaying Art Deco ornament (sunbursts, chevrons, stepped keystones) onto the glassy Aero surfaces — creates a collision between two optimistic futures: the early-2000s tech-optimism of Aero and the 1930s machine-age optimism of Deco. No other registry entry does this. 2. **Card-flip used as a physics properties panel, not a feature showcase.** The frequency report shows `card-flip` at 5% (overused). Every prior use treats flip cards as a marketing device (feature front / benefit back). This design repurposes the flip interaction as a scientific instrument: the front is a labeled parameter, the back is its measured value and definition. The flip reveals *data*, not copy. This is card-flip as HUD module, not card-flip as feature grid. 3. **"Signal dominance" neon shifting across sections.** Most dopamine-neon designs apply all neons simultaneously at full saturation, creating visual noise. This design assigns ONE dominant neon per scroll section and suppresses the others — the effect is that the page changes "frequency" as you scroll, like tuning a radio through channels. This technique is not present in any other registry entry. 4. **Icon-heavy encoded in Art Deco geometry.** The frequency report shows `icon-heavy` at 5% (overused). Prior uses are typically emoji-adjacent rounded icons or flat Material-style icons. This design constrains every icon to Art Deco bilateral symmetry with chamfered stepped outlines — no curves, no rounded corners. Icons read as instrument glyphs from a 1930s control panel. The Art Deco encoding makes icon-heavy feel architectural rather than decorative. 5. **Tech-tutorial tone delivered as a single instrument panel, not a documentation page.** Most tech-tutorial designs use multi-column layouts with sidebars, code blocks, step numbering, and navigation. This design delivers the tutorial as a single continuous cinematic scroll through a fictional instrument interface — the tutorial structure (numbered concepts, definitions, measurements) exists within the HUD fiction rather than as a conventional doc layout. **Chosen seed:** aesthetic: frutiger-aero, layout: hud-overlay, typography: art-deco-display, palette: dopamine-neon, patterns: card-flip, imagery: icon-heavy, motifs: abstract-tech, tone: tech-tutorial **Avoided overused patterns:** `card-flip` differentiated as physics properties panel (not feature grid); `icon-heavy` differentiated as Art Deco instrument glyphs (not rounded flat icons); `counter-animate` and `underline-draw` deliberately excluded.