# Design Language for monopole.wiki ## Aesthetics and Tone monopole.wiki channels the visual language of a marine biologist's field journal from the year 2087 -- pages of hand-drawn diagrams of impossible deep-sea organisms rendered in ink that glows with bioluminescent blue-green, annotated with scrawled observations about magnetic monopoles as if they were newly discovered species found at hydrothermal vents on the ocean floor. The aesthetic is **hand-drawn futurism submerged in abyssal ocean** -- the collision of trembling, human pen strokes with the alien precision of organisms that have evolved in crushing pressure and total darkness. Every element on the page feels like it was sketched by a scientist who discovered something unprecedented at 11,000 meters depth and couldn't stop drawing it fast enough. The tone is **futuristic-cutting-edge** but filtered through the intimacy of handwritten notation. This is not the cold chrome futurism of corporate tech decks -- it is the breathless, ink-smeared futurism of a researcher who has found the theoretical particle that physics has hunted for a century, and it turned out to be alive, pulsing in the hadal zone. There is wonder here, but also rigor. The hand-drawn quality communicates that this knowledge is still being discovered, still being mapped, still wet with ocean water. Nothing is finalized. Everything is frontier. The mood evokes the bioluminescent galleries of the Monterey Bay Aquarium's deep-sea exhibits crossed with the sketchbook pages of Santiago Ramon y Cajal -- those gorgeous hand-drawn neurons that look like undersea creatures. monopole.wiki treats the magnetic monopole as both a physics concept and an organism: something that can be diagrammed, annotated, studied, and marveled at. ## Layout Motifs and Structure The layout is **centered** but not in the conventional symmetric-container sense. Think of it as **axial depth** -- a single vertical axis running down the center of the viewport, like a deep-ocean bathymetric column, with content arranged at various "depth levels" along this axis. The center line is not a static alignment guide but a living column of water through which content descends. **Structural Principles:** - **The Bathymetric Column:** The entire page is structured as a vertical descent. The viewport represents a cross-section of ocean, and scrolling is equivalent to descending deeper. Content emerges from the center axis as the user scrolls "downward," with each section representing a distinct depth zone (epipelagic, mesopelagic, bathypelagic, abyssopelagic, hadal). The background subtly shifts in color temperature and darkness as the user descends, from dark teal at the surface to near-black at the abyss. - **Centered Emergence:** All primary content blocks are centered on the vertical axis, but they do not simply stack. They emerge -- sliding in from slight horizontal offsets of 20-40px, rotating in by 1-3 degrees, scaling up from 0.85 to 1.0 -- as if being illuminated by a submersible's spotlight sweeping the center column. Each block feels discovered rather than placed. - **Annotation Margins:** On either side of the centered content, at approximately 15% from each viewport edge, hand-drawn annotation lines extend horizontally from the content blocks to marginal notes. These are literal SVG lines drawn with a wobbly, hand-drawn stroke (using `stroke-dasharray` variations and slight randomized path deviations) that connect main content to parenthetical observations, citations, and taxonomic labels. The annotations mimic the margin notes of a field journal. - **Depth Gauge:** A thin vertical line on the far left (3% from viewport edge) acts as a depth gauge -- a hand-drawn scale with tick marks and depth labels in meters. As the user scrolls, a small indicator (a hand-drawn circle with a dot) moves along this gauge, showing current "depth." This is both navigation and storytelling device. - **Blob Containment:** Content blocks are not contained in rectangles but in organic blob shapes -- irregular, amoeba-like SVG clip-paths that suggest the body outlines of deep-sea organisms. Each section's container has a slightly different blob silhouette. The blobs have soft, undulating edges with subtle CSS animation (2-4px of wobble over a 6-second cycle) that makes them appear to breathe like living organisms. - **Maximum content width:** 720px for text blocks, 960px for diagrams and visual elements, centered within a 100vw frame. Vertical spacing between sections: 20vh minimum, creating the sensation of vast vertical emptiness between discovery points -- the way deep-sea creatures are separated by hundreds of meters of nothing. ## Typography and Palette **Typography:** - **Primary Display / Headlines:** "Caveat" (Google Fonts) -- a handwriting font with genuine pen-stroke character, irregular baselines, and natural stroke variation that evokes field-journal notation. Weight: 700 (Bold) for section titles at 3.5rem-6rem. The deliberate imperfection of the letterforms grounds the futuristic content in human observation. Letter-spacing: 0.01em. Line-height: 1.2. Used for all major headings and the site title. - **Secondary / Body Text:** "Lexend" (Google Fonts) -- a modern, highly legible sans-serif designed for reading comfort, with generous counter spaces and even rhythm. Weight: 400 (Regular) for body text at 1.125rem (18px), Weight: 600 (SemiBold) for subheadings and emphasized passages. Its clean geometry contrasts with Caveat's organic handwriting, creating the tension between scientific precision and field observation. Line-height: 1.75 for body text (generous, like double-spaced lab notes). Letter-spacing: 0.005em. - **Tertiary / Annotations & Labels:** "Kalam" (Google Fonts) -- a handwriting font with a more casual, sketchy quality than Caveat, used exclusively for marginal annotations, figure labels, depth-gauge markings, and parenthetical asides. Weight: 400 at 0.875rem (14px). This creates a hierarchy of handwriting: Caveat for formal headings (the title on the cover of the field journal), Kalam for scribbled notes in the margins. Color: always rendered in Bioluminescent Teal (#00E5C8) at 70% opacity, giving annotations a glowing, ethereal quality against dark backgrounds. - **Monospace / Data:** "JetBrains Mono" (Google Fonts) -- used sparingly for any numerical data, coordinates, measurements, or code-like content. Weight: 400 at 0.8125rem (13px). Styled with a slight blue tint (#7BB8D4) and 85% opacity. Represents the digital readout of instruments aboard the submersible. **Palette:** The palette is **ocean-deep** -- drawn from the actual color spectrum of the deep ocean as light is progressively absorbed at depth. Every color has a real-world referent in marine science. | Name | Hex | Usage | Referent | |------|-----|-------|----------| | Hadal Black | #0A0E17 | Primary background, deepest sections | The absolute darkness of the hadal zone below 6000m | | Abyssal Navy | #0D1B2A | Secondary background, mid-depth sections | The near-black of the abyssopelagic zone | | Bathyal Indigo | #1B2838 | Tertiary background, card/blob interiors | The deep blue-black of the bathypelagic zone | | Bioluminescent Teal | #00E5C8 | Primary accent, links, highlights, annotations | The blue-green light produced by 90% of deep-sea organisms | | Phosphor Cyan | #00B4D8 | Secondary accent, interactive states, borders | The cyan flash of disturbed dinoflagellates | | Abyssal White | #C8DDE6 | Body text on dark backgrounds | The pale, translucent tissue of deep-sea jellyfish | | Thermal Amber | #E8A44A | Warning states, emphasis, rare highlights | The orange glow of hydrothermal vents at 400 degrees C | | Specimen Cream | #F0E6D3 | Annotation text on rare light surfaces, hover states | The aged paper of specimen labels in natural history museums | Gradient usage: sections transition vertically through `Hadal Black -> Abyssal Navy -> Bathyal Indigo` as the user scrolls upward from the deepest content, creating the sensation of ascending through water column layers. Bioluminescent Teal is used exclusively as a point-light accent -- never as a background fill -- to preserve its impact as biological light in darkness. ## Imagery and Motifs **Organic Blob Organisms:** The primary visual motif is organic blobs that serve simultaneously as content containers and as illustrations of imagined deep-sea organisms. These are not generic amoeba shapes but specifically designed SVG blob forms inspired by actual deep-sea fauna: 1. **Ctenophore Blobs:** Elongated, vertically oriented blobs with visible internal ribbing (thin SVG lines running vertically within the blob shape, like the comb rows of ctenophores). Used for primary content sections. The internal rib lines pulse with Bioluminescent Teal (#00E5C8) in a wave pattern -- each rib illuminating sequentially from top to bottom over 3 seconds, creating the rainbow-wave locomotion effect of real comb jellies. 2. **Radiolarian Frames:** Circular blob shapes with intricate geometric internal scaffolding -- hexagonal and triangular tessellations rendered in thin Phosphor Cyan (#00B4D8) lines at 30% opacity. Used for data displays, statistics, and key metrics. Inspired by the silica skeletons of actual radiolarians, which are among the most geometrically complex structures in nature. 3. **Siphonophore Chains:** For sequential or list content, blob shapes are connected by thin tentacle-like SVG paths, forming chain structures that recall colonial siphonophores (like the Portuguese man-of-war). Each blob in the chain is a slightly different shape and size, connected by curves that have gentle sinusoidal animation (1-2px of horizontal drift over 4 seconds). 4. **Medusa Bells:** For navigation elements and interactive buttons, inverted dome shapes with trailing tentacle lines extending downward. On hover, the tentacle lines extend and the bell shape contracts slightly (scale 0.97), mimicking the jet-propulsion swimming of jellyfish. **Hand-Drawn Diagram System:** Key concepts are explained through hand-drawn scientific diagrams rendered as inline SVGs with wobbly stroke paths. Every diagram has: - A title in Caveat 700 with an underline drawn as a wobbly SVG path - Labeled parts with Kalam annotation text connected by hand-drawn leader lines - A figure number in JetBrains Mono (e.g., "Fig. 07") positioned bottom-left - A subtle animated glow on key features using `filter: drop-shadow(0 0 8px #00E5C8)` Specific diagrams include: - A cross-section of a magnetic monopole rendered as a radial field-line diagram with hand-drawn arrows showing flux emanating from a single pole - A "taxonomy chart" that classifies monopoles as if they were biological species, with phylum, class, order, family, genus, species -- all drawn in the style of a Victorian naturalist's classification tree but with futuristic nomenclature - Depth-zone ecology diagrams showing which "species" of information lives at which depth of the page **Futuristic Motifs:** Layered beneath the hand-drawn surface are subtle technological motifs that establish the futuristic timeframe: - Thin grid lines at 40px intervals covering the entire background at 3% opacity in Phosphor Cyan, suggesting a holographic coordinate system projected onto the ocean - Occasional scan-line artifacts -- single horizontal lines of Bioluminescent Teal that sweep vertically across a section over 8 seconds, as if a sonar pulse is mapping the page - Data readout overlays in JetBrains Mono at the bottom-right corner of each section showing "depth," "pressure," "temperature" values that change as the user scrolls -- purely decorative telemetry ## Prompts for Implementation **Full-Screen Narrative Experience:** The site opens to a full-viewport canvas of Hadal Black (#0A0E17). For 1.2 seconds, nothing is visible -- absolute deep-ocean darkness. Then, from the exact center of the viewport, a single point of Bioluminescent Teal (#00E5C8) light appears as a `radial-gradient` expanding from 0px to 200px radius over 0.8 seconds, with a soft blur edge (feathered 100px). This is the submersible's forward lamp switching on. As the light expands, it reveals the site title "monopole.wiki" rendered in Caveat 700 at approximately 7vw font-size, centered in the viewport. The title does not simply appear -- it is "drawn" using SVG text with `stroke-dasharray` and `stroke-dashoffset` animation, each letter's outline tracing itself over 1.5 seconds with a 0.05s stagger between characters. The stroke color is Bioluminescent Teal; the fill fades in 0.3 seconds after the stroke completes, filling with Abyssal White (#C8DDE6). Below the title, a subtitle in Kalam 400 fades in at 40% opacity: "field notes from the deep" -- appearing as if scribbled as an afterthought, with a slight 2-degree rotation. A hand-drawn downward arrow (SVG path with wobbly stroke) appears below the subtitle, bobbing gently up and down (8px amplitude, 2-second cycle, ease-in-out). This is the invitation to begin descending. **Progressive Disclosure Mechanics:** Content sections are initially invisible (opacity: 0, transform: translateY(40px)). As the user scrolls, an Intersection Observer triggers each section when it enters the bottom 30% of the viewport. The reveal sequence for each section: 1. The blob container shape draws its outline first (SVG stroke animation, 0.8s duration, Bioluminescent Teal stroke at 40% opacity) 2. The blob fills with Bathyal Indigo (#1B2838) at 85% opacity over 0.4s 3. Content within the blob fades in with a 0.3s delay: headline first (Caveat, slides in from 20px left offset), then body text (Lexend, fades from 0 to 1 opacity over 0.6s), then annotations extend their hand-drawn connector lines outward to the margins (SVG path draw, 0.5s) 4. The ctenophore rib-pulse animation or radiolarian scaffold glow begins only after content is fully visible This progressive disclosure creates the sensation of each piece of content being "discovered" by the submersible's spotlight as it descends -- nothing exists until you illuminate it. **Scroll-Driven Depth System:** Using CSS `scroll-timeline` (with JavaScript fallback for unsupported browsers), the page background transitions through depth-zone colors as the user scrolls: - 0-20% scroll: Hadal Black (#0A0E17) - 20-40% scroll: Blend toward Abyssal Navy (#0D1B2A) - 40-60% scroll: Blend toward Bathyal Indigo (#1B2838) - 60-80% scroll: Return toward Abyssal Navy - 80-100% scroll: Return to Hadal Black This creates an arc -- the user descends into slightly lighter depths at the middle of the page, then sinks back into darkness at the bottom, as if the page represents a complete dive profile. The depth gauge on the left updates its indicator position via `scroll-event` tracking, and the telemetry readouts (depth, pressure, temperature) update their JetBrains Mono values using a simple linear interpolation tied to scroll percentage. **Interaction Details:** - **Links:** Styled as Bioluminescent Teal text with no underline by default. On hover, a hand-drawn underline animates in via SVG path draw (0.3s duration), with a soft glow (`text-shadow: 0 0 12px rgba(0, 229, 200, 0.4)`). The underline path is slightly wobbly, not straight. - **Blob Hover:** When the user hovers over a blob container, its edge stroke brightens from 40% to 80% opacity and the internal rib/scaffold elements increase their glow intensity. The blob shape subtly "breathes" -- a 2% scale pulse over 1 second. - **Navigation:** Minimal. A small hand-drawn compass rose in the top-right corner (SVG, always visible at 50% opacity, brightens to 100% on hover) expands into a depth-zone navigation overlay when clicked -- showing the major sections as depth markers on a vertical scale, each clickable to smooth-scroll to that section. - **Mobile:** On viewports below 768px, annotation margins collapse into inline expandable blocks (tap to reveal annotation). The depth gauge becomes a thin progress bar at the top of the viewport. Blob shapes simplify their internal animations to preserve performance. **AVOID:** CTA-heavy layouts (no "Sign Up Now" buttons -- this is an exploratory field journal, not a conversion funnel). Pricing blocks (irrelevant to the wiki nature of the content). Stat-grids (statistics are embedded within radiolarian blob shapes organically, not in rigid metric dashboards). Hero image carousels (the opening sequence IS the hero, and it is unique). Cookie banners that break immersion (implement consent without modal overlay if legally required). **Storytelling Emphasis:** Every scroll interaction should feel like turning a page in a waterlogged field journal or adjusting the angle of a deep-sea submersible's lamp. Content does not "load" -- it is "discovered." The user is not a visitor -- they are a researcher descending into unknown waters. The narrative arc of the page mirrors the narrative arc of a dive: preparation at the surface, descent into darkness, moments of wonder as bioluminescent organisms appear, the deepest revelation at the bottom, and a contemplative ascent. ## Uniqueness Notes **Differentiators from other designs:** 1. **Bathymetric Scroll Narrative:** No other design in the portfolio uses scroll position as a literal depth metaphor, with the background color shifting through ocean depth zones and a functional depth gauge tracking progress. This transforms scrolling from a navigational necessity into a storytelling mechanic -- the user experiences the page as a physical descent. The scroll-driven depth system with telemetry readouts is entirely unique. 2. **Dual-Register Handwriting Hierarchy:** While hand-drawn aesthetics appear at 23% frequency, no other design employs two distinct handwriting fonts in a deliberate hierarchy (Caveat for formal headings, Kalam for marginal annotations), paired with a high-legibility modern sans (Lexend) for body text. This three-tier typographic system replicates the actual information hierarchy found in real scientific field journals -- title, body, scribbled note -- rather than using handwriting as a mere decorative overlay. 3. **Bioluminescent Organisms as Content Containers:** The use of animated SVG blob shapes that simultaneously serve as content containers AND as illustrations of specific deep-sea organisms (ctenophores, radiolarians, siphonophores, medusae) is wholly absent from the portfolio. Other designs use blobs decoratively; monopole.wiki makes each blob a character in the page's ecosystem, with taxonomically specific animations (comb-row pulse, skeletal scaffold glow, tentacle drift, bell contraction). 4. **Ocean-Deep Palette at 1% Frequency:** The ocean-deep palette is nearly unused in existing designs. monopole.wiki's color system is derived from actual marine science -- each hex value corresponds to a real phenomenon (hadal darkness, bioluminescence wavelengths, hydrothermal vent glow, dinoflagellate flash). This scientific grounding gives the palette a coherence and narrative justification absent from arbitrary color choices. 5. **Progressive Disclosure as Submersible Discovery:** While progressive-disclosure appears at 6% frequency, no design frames it as the literal mechanics of a deep-sea submersible's spotlight revealing content in darkness. The specific reveal sequence (blob outline draws, blob fills, content fades in, annotations extend) creates a consistent physical metaphor that makes progressive disclosure feel earned rather than decorative. **Chosen Seed/Style:** aesthetic: hand-drawn, layout: centered, typography: display-bold, palette: ocean-deep, patterns: progressive-disclosure, imagery: organic-blobs, motifs: futuristic, tone: futuristic-cutting-edge **Avoided Overused Patterns:** - Playful aesthetic (95%) -- replaced with scientific wonder - Minimal imagery (94%) -- replaced with rich organic-blob illustrations - Scroll-triggered patterns (97%) -- while scroll events are used for the depth system, the primary interaction pattern is progressive-disclosure (6%), not generic scroll-triggered animations - Warm palette (100%) -- replaced with ocean-deep cool palette (1%) - Friendly tone (98%) -- replaced with futuristic-cutting-edge (2%) - Mono typography (99%) -- while JetBrains Mono appears as a tertiary font, the primary typographic identity is display-bold through Caveat 700, which is at 9% frequency - Vintage motifs (83%) -- replaced with futuristic motifs (10%)