# Design Language for monopole.ai ## Aesthetics and Tone monopole.ai inhabits a rare intersection: the cold precision of Art Deco geometry softened by pastoral-romantic longing. Imagine a 1920s Parisian salon where a botanist has pinned hand-drawn floral studies to the walls — chrysanthemums and wisteria rendered in India ink pressed against lacquered geometric panels, neon light spilling through leaded glass windows in acid gold and electric violet. The site feels like an artifact from an alternate history where the machine age fell in love with the meadow. The tone is quietly seductive — not urgent, not performative. It carries the unhurried confidence of a collector who knows the value of what they hold. Visitors should sense a private world being opened, a garden that operates by rules more ancient than technology. The AI layer (the "monopole" — a singular magnetic pole, a thing that shouldn't exist but does) is framed as a natural force: invisible, present, inevitable like pollen in the air. Darkness is the foundation. Deep charcoal-black backgrounds let hand-drawn botanical silhouettes glow as if backlit by bioluminescence. Neon accents — acid chartreuse, electric indigo, molten gold — pulse at the edges of Art Deco borders like trapped electricity. Every surface carries the faint ghost of a pattern: a chevron, a sunburst, a lattice of vines. ## Layout Motifs and Structure **Centered Monolithic Columns** The layout is built on a single centered column, 720px maximum width, with generous lateral negative space. This column is treated as a stele — an upright stone bearing inscription — rather than a container. Content stacks vertically with deliberate rhythm: wide gaps between sections create breathing pauses like rests in music. **Art Deco Frame System** Each section is enclosed in a border apparatus: double-rule frames with corner ornaments (small sunburst or lotus motifs at each corner). These borders animate on entry — drawing themselves line by line via SVG stroke-dashoffset animation, as if an invisible draftsman is sketching them in real time. The outermost border of the entire page has a continuous animated glow that shifts from gold to indigo over a slow 8-second cycle. **Radial Hero Architecture** The hero section uses a large circular or octagonal SVG frame centered in the viewport. Inside it, the primary logotype is set in stacked geometric letterforms. Around the perimeter, hand-drawn botanical elements (stylized lily-of-the-valley, fern fronds, poppy capsules) orbit the circle, drawn via SVG path animation — appearing stroke by stroke over 3 seconds on page load. **Vertical Breathing Rhythm** Section spacing uses a 5-level scale: 24px / 48px / 96px / 144px / 240px. The hero top padding is 240px; section separators use 96px. This prevents the page from feeling compressed. Horizontal rules between sections are double-line Art Deco dividers with a centered diamond or lotus ornament. **No Grid Chaos** There are no multi-column content grids. Information is presented in single-file vertical flow: a pull quote, then a paragraph, then a bordered callout, then another pause. Any featured items are stacked vertically as full-width card-strips with left-aligned text and right-aligned botanical illustration. ## Typography and Palette **Primary Typeface: Josefin Sans** Google Fonts. All-caps, wide tracking (0.25em to 0.4em). Used for headlines, section labels, and the logotype. Josefin Sans carries the geometric rigor of 1920s Futura-era lettering — flat tops, uniform stroke weight, mathematically spaced. Set at 72px for the hero headline, 32px for section titles, 13px for labels in ALL CAPS with maximum tracking. **Secondary Typeface: IM Fell English** Google Fonts. Used for body copy and pull quotes. IM Fell English brings an antiquarian warmth — based on 17th-century typefaces with slightly irregular baselines and ink-trap details that read as hand-pressed. Body text at 18px / 1.9 line-height. Pull quotes at 26px italic. **Accent Typeface: Playfair Display** Google Fonts. Used sparingly for large decorative drop caps, botanical caption labels, and the tagline beneath the logotype. Playfair's high contrast (thick/thin strokes) bridges the geometric headline and the romantic body copy. **Color Palette:** - `#0a0a0f` — Absolute Abyss (page background, the void from which forms emerge) - `#111118` — Midnight Lacquer (card backgrounds, inner panel fills) - `#1c1c2e` — Deep Indigo Slate (section backgrounds, alternating) - `#c9f23a` — Acid Chartreuse (primary neon accent — border glow, active states, hover) - `#7b5ea7` — Electric Violet (secondary accent — secondary borders, links) - `#f0c040` — Molten Gold (tertiary accent — corner ornaments, divider diamonds, logotype highlight) - `#e8e0d0` — Aged Vellum (body text color — warm off-white, reads like ink on old paper) - `#4a3f5c` — Dusk Plum (muted text, captions, subdued labels) - `#2a2030` — Shadow Violet (border colors for un-animated state) **Typography Scale:** - Hero logotype: Josefin Sans 72px, ALL CAPS, tracking 0.35em, color #f0c040 - Hero tagline: Playfair Display 22px italic, color #e8e0d0 - Section titles: Josefin Sans 32px, ALL CAPS, tracking 0.25em, color #c9f23a - Body: IM Fell English 18px, color #e8e0d0, line-height 1.9 - Labels/captions: Josefin Sans 11px, ALL CAPS, tracking 0.45em, color #4a3f5c - Pull quotes: IM Fell English 26px italic, color #7b5ea7, left-border accent in #c9f23a ## Imagery and Motifs **Hand-Drawn Botanical SVG Library** All decorative imagery is rendered as inline SVG paths that simulate hand-drawn linework: variable stroke width (1px to 3px), slight path irregularities, no fills (outlines only). The botanical vocabulary includes: - Poppy seed heads on curved stems (section dividers) - Wisteria vine clusters (hero circle perimeter) - Fern frond spirals (corner ornaments within frames) - Chrysanthemum cross-sections (divider centerpieces) - Lily-of-the-valley bell chains (footer garland) - Dandelion clocks mid-release (scattered across hero background at low opacity) All botanicals are stroked in `#4a3f5c` (Shadow Violet base) with a secondary SVG filter that adds a faint neon glow — chartreuse for foreground plants, gold for mid-ground, violet for background. This layering creates depth without photography. **Art Deco Geometric Overlay System** Beneath the botanicals, a subtle geometric field: interlocking chevron strips at 8% opacity, fanning sunburst lines radiating from the hero center at 4% opacity, a fine diamond-lattice grid at 3% opacity. These are all SVG patterns defined in `` and applied as fills to background rectangles — they read as texture, not shape. **Border Animation Apparatus** The defining visual signature: every bordered element draws itself in on page load or scroll entry. Implementation via SVG `` or `` with stroke-dasharray / stroke-dashoffset animated to 0 over 1.2s ease-in-out. Corner ornaments (small sunbursts, 4-petal lotus) fade in at 0.6s delay after the border draws. The outermost page border pulses with a continuous `filter: drop-shadow()` cycling through `#c9f23a`, `#7b5ea7`, and `#f0c040` on an 8-second keyframe loop. **Magnetic Pole Iconography** The "monopole" concept is visualized as a single north-pole magnetic field diagram — concentric semi-circular field lines emanating upward from a point, hand-drawn style, used as the favicon, as a watermark behind the hero text at 6% opacity, and as a decorative mark above section headings. **Particle / Spore Field (JS)** A canvas layer behind the hero renders slow-drifting particles (dandelion spores, 40–60 points) moving upward at 0.2–0.4px/frame, randomly repositioning at viewport top. Particles are tiny filled circles (r: 1.5–3px) in `#c9f23a` and `#f0c040` at 30–60% opacity. This creates the sense of the monopole field releasing energy upward — invisible until you notice it. ## Prompts for Implementation **HTML Structure** Single `index.html` with semantic sectioning. The page is wrapped in a `
` which carries the outermost animated border and the global neon pulse. Inside: `
` (hero), `
` (content sections), `