# Design Language for monopoleai.com ## Aesthetics and Tone monopoleai.com is a **surreal dreamscape** about the one particle physics keeps promising and never delivering — the magnetic monopole — reimagined as the dreaming engine of an artificial mind. Where a sibling project might render the monopole as a cold, precise field study, this site does the opposite: it treats the monopole as a *mirage that the AI keeps walking toward*. The mood is the hush of a Magritte canvas crossed with the soft impossible logic of a Tarkovsky long take — clouds that double as floors, a horizon that loops back on itself, a single bright pole hanging in the air casting a shadow with no object above it. The tone is **dreamy-ethereal** and quietly **mysterious-moody**, never bombastic. No exclamation points. The copy speaks the way you describe a recurring dream over breakfast — calm, a little bewildered, certain of details that make no sense. Color is washed and overexposed, like a photograph left in a sunlit window: pale sky-bone, faded rose, a milky teal, and one impossible warm filament — "north-pole gold" — that is the only fully saturated thing on the page, because it is the only thing that does not exist. The whole experience should feel like floating face-up in warm water with your ears submerged: muffled, weightless, slightly unreal. Nothing here behaves like a product page. There are no plans, no metrics, no rows of logos. The visitor wanders through a series of dream-rooms and leaves having met an idea, not having been sold one. ## Layout Motifs and Structure The governing structure is **blobitecture fluid layout** — a corpus rarity (~3%) — meaning *there is no rectangular grid anywhere*. Content lives inside soft, breathing super-ellipse "pools" that overlap and bleed into one another like spilled milk on glass. Each pool has a different organic radius (think `border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%`) and they drift very slowly, ±8px on a 30-second sine, so the page is never quite still — a dream that won't hold its shape. The page is **five dream-rooms** stacked as full-viewport scenes, but transitions between them are not hard cuts: as you scroll, the pool of the room above stretches downward, thins, and the pool of the room below rises to meet it, so for a moment both dreams are bleeding into one frame. Vertical scroll is the *only* navigation. There is no menu bar; a tiny floating "pole" glyph (the gold filament, 6px wide, ~80px tall, gently swaying) is the sole persistent UI, and tapping it drifts you back to the first room. Composition inside each room is **deliberately off-balance and a little wrong**: a headline anchored to the bottom-left while its single supporting line hovers top-right with nothing between them but air; a paragraph wrapped around the inside curve of a pool so it reads on a gentle arc; an image of a "monopole" that casts its shadow *upward*. Whitespace (or rather wash-space) is enormous — 55–70% of every room is empty pale sky. The reader's eye is allowed to wander, get a little lost, and find the next fragment the way you find the next part of a dream: by drifting, not by being pointed. A faint, hand-drawn dashed "field line" travels the entire document top to bottom — but it loops, knots, and occasionally exits one side of the screen and re-enters the other, never reaching a second pole, because there isn't one. ## Typography and Palette **Type stack — Google Fonts only.** - **Fraunces** (variable; opsz 9–144, soft axis high, wonk axis nudged up) — the primary display face for all headlines and the wordmark `monopoleai`. Its slightly melting, soft-serif curves at huge sizes (clamp up to ~9rem) feel like type seen underwater — authoritative and dissolving at once. Set in light/regular weights only; never bold. - **Newsreader** (variable; italic available) — the body face, used at 1.15–1.3rem with generous 1.85 line-height. Its literary, slightly old-fashioned warmth makes the dream-narration feel like a letter someone wrote about a vision. Pull quotes and the most dreamlike sentences are set in Newsreader *italic*. - **Space Mono** — used sparingly and only for "field readings": tiny labels like coordinates, a flicker of pseudo-telemetry on the pole glyph, the footer line. It is the one thread of machine-voice in an otherwise human, drifting document — the AI's instrument talking quietly under the dream. **Palette** — washed, overexposed, one impossible accent: - `#F4EFE6` — **sky-bone**: the dominant page wash, a warm overexposed off-white. - `#E7D7CC` — **faded rose**: secondary pool fill, the color of a dawn that's been left out too long. - `#BCD2CE` — **milk-teal**: tertiary pool fill and the dashed field line; a cool, foggy mint. - `#7C8B9A` — **slate-mist**: muted blue-grey for body text and soft shadows; never pure black. - `#2E3640` — **deep-fathom**: the darkest value on the site, reserved for the wordmark and a few key headlines. - `#E8A33D` — **north-pole gold**: THE accent. The only saturated color. Used exclusively for the floating pole glyph, the impossible upward shadow, link underlines that draw themselves on, and one word per room. Because it's the only vivid thing, the eye treats it as magnetic — which is the joke. Subtle film-grain (2% opacity) and a faint vignette over everything, so the whole site looks slightly developed-by-hand. ## Imagery and Motifs **Imagery is custom generative-art plus surreal photo-collage — no stock, no icons, no UI chrome.** - **The impossible pole**: a single luminous gold vertical filament, rendered as a soft-edged gradient bar with a faint bloom, hanging in mid-air in every room at a different height and tilt. It casts a long, soft *upward* shadow onto the pale sky — the visual signature of the site. (A normal object's shadow falls down; a monopole's field only goes one way.) - **Cloud-floors**: rooms where the "ground" is a bank of soft cumulus that the headline rests on, and the headline's reflection appears *in the cloud*, rippling. - **Looping field lines**: thin (1px) hand-drawn dashed SVG paths that wander the page, knot gently, exit one edge and re-enter the opposite — never closing, never finding a partner pole. - **Iron-filings as starlings**: instead of the textbook iron-filing pattern, a loose flock of ~120 tiny gold dashes drifts across one room like a murmuration, all of them very slowly orienting toward the pole and never arriving. - **Doubled horizons**: a recurring motif of a horizon line that is mirrored above itself, so the room has two skies and no ground — pure Magritte. - **Hand-lettered marginalia**: a few words in a loose handwritten note (e.g. "(it was never there)") tucked into the curve of a pool, as if the dreamer annotated their own dream. ## Prompts for Implementation Build monopoleai.com as **one long semantic HTML document** — five `
` "dream-rooms," vanilla JS, no framework, no router. One full-document `` overlay layer for the looping field line, one `` for the starling-filings flock, and CSS for everything else. - **Blob pools**: each room's content sits in a `
` with an organic `border-radius` and a slow CSS `@keyframes` drift (translate + radius morph, 28–34s, `ease-in-out`, infinite). Pools of adjacent rooms overlap in the scroll seam; use `mix-blend-mode: multiply` on the wash colors so overlaps deepen naturally. - **The pole glyph**: a position-fixed gold gradient bar, ~6×80px, with `filter: blur(0.5px) drop-shadow(0 -40px 30px rgba(232,163,61,.25))` for the *upward* glow, and a gentle ±3deg sway keyframe. Clicking it smooth-scrolls to room one. - **Upward shadows**: every "object" image gets a CSS pseudo-element clone, `transform: scaleY(-1)`, blurred, low-opacity, positioned *above* it — the core surreal gag, applied consistently. - **Field-line engine**: on load, generate one long cubic-bezier path that snakes down the full document height, with 2–3 self-intersecting loops, and animate `stroke-dashoffset` so it draws itself slowly as the user scrolls (`scroll-triggered` `path-draw-svg`). At the bottom it just trails off into the margin — no second pole. - **Starling-filings**: ~120 short line segments on canvas, each easing its angle toward the pole's screen position with heavy damping and a wandering jitter, so the flock is forever *almost* aligned. Pause when off-screen; freeze entirely under `prefers-reduced-motion`. - **Scroll feel**: lightly damped (lerp ~0.08) so motion has the lag of moving through water. Headlines fade-and-rise (`fade-reveal` + 20px translate) as their room enters; the one gold word per room gets a slow `underline-draw` that never quite finishes. - **Reduced motion**: freeze all drift, sway, flock, and parallax; render the field line fully drawn; keep only opacity transitions. - **AVOID**: any CTA cluster, pricing/plan blocks, stat counters, logo walls, card grids, dashboards, hard rectangular sections, or hero-with-two-buttons. This is a place to wander, not a funnel. ## Uniqueness Notes Differentiators from other designs in the registry and from corpus defaults: 1. **Blobitecture, not a grid.** The corpus is 89% card-grid / 89% full-bleed / 85% centered; this site has *zero* rectangles — content lives in slowly-morphing organic pools that bleed into each other at scroll seams. `blobitecture` is ~3% of the corpus and is taken literally here. 2. **Surreal dreamscape, deliberately the opposite of a precise physics-field treatment.** Where a sibling monopole site renders the particle as a cold, exact generative field, monopoleai.com renders it as a Magritte mirage the AI keeps dreaming about — washed/overexposed palette, upward shadows, doubled horizons, cloud-floors. `surreal` is ~3% of the corpus; `dreamy-ethereal`/`mysterious-moody` tones are both rare. 3. **The "everything points at the thing that isn't there" gag, structural not decorative.** The single saturated color, the only vivid glyph, the casts-its-shadow-upward image, the murmuration that never aligns, the field line that loops forever without a second pole — the whole layout is a sustained joke about magnetic asymmetry, not a skin over a template. 4. **No navigation chrome at all** — scroll-only, with one swaying gold filament as the lone persistent UI element. No menu, no CTA stack, no footer links beyond a single mono line. 5. **Type seen underwater.** Fraunces (soft+wonk) at huge light weights for melting display, Newsreader italic for dream-narration, Space Mono only as the faint machine-voice — a pairing tuned for "literary hush," not the corpus-default mono-everything. Chosen seed/style: **surreal dreamscape promo** (from seeds.json). Avoided overused patterns from frequency analysis: hand-drawn (96%), glassmorphism (76%), photography (98%), card-grid (89%), centered (85%), warm-gradient palettes used straight, cursor-follow (89%), magnetic (79%), tilt-3d, dashboard, bento-box, CTA/stat/pricing layouts.