# Design Language for monopole.style ## Aesthetics and Tone monopole.style is the imagined atelier of a magnetic-field couturier — a place where the physics of monopoles (theorized particles with a single magnetic pole, no north-without-south) becomes the organizing metaphor for fashion that refuses to be pinned down. The visual language fuses **art-deco geometry** — the jeweled ornament, the chevron, the sunburst fan — with the precision of a particle physicist's notebook: field-line diagrams drawn at 0.4px stroke, compass-rose axes, and the cool authority of instrument panels. The tone is **professional without being corporate**. This is the editorial voice of a luxury atelier that publishes its own quarterly journal. It does not shout. It presents. Every typographic decision, every spatial ratio, every color has been made with the deliberateness of someone typesetting a first edition. The aesthetic keystone is **controlled tension**: art-deco ornamentation held inside a grid so precise it reads as scientific instrument rather than wallpaper. The page feels inevitable, as if the composition could not be otherwise — the way a crystal structure could not be otherwise. Mood references: Tamara de Lempicka painting beside an oscilloscope readout; a 1930s Lalique perfume flask photographed with a ring-light positioned for maximum lens-flare corona; a Vogue Paris cover from 1928 typeset in wire-service teletype. ## Layout Motifs and Structure The core structural metaphor is **the editorial spread as field diagram**: a double-page layout from a fashion journal in which the photograph occupies a full bleed left-page and the text occupies a rigorously columned right-page — but the boundary between them is not a gutter; it is a **magnetic field-line**: a series of arcing 0.6px curves that sweep from upper-left to lower-right, acting simultaneously as a decorative art-deco divider and a physics diagram. **Grid:** 12-column at 1440px reference. On desktop, content respects a 7-column/5-column split (editorial body left, caption/marginalia right). The 7-column body has a 680px measure; the 5-column marginalia has a 340px measure. Column gap is 48px. Outer margins are 80px. This creates a **strongly asymmetric** reading rhythm — not the symmetrical balance of 91%-frequency editorial layouts, but the pulled-left tension of a fashion spread waiting to be turned. **Scroll behavior:** The page is a **vertical editorial flow** — a single uninterrupted scroll of five chapters. No horizontal scroll. No tabs. No modal overlays. Chapters are delineated by: 1. A full-bleed chapter opener: one lens-flare photograph, width 100vw, height 100vh, with the chapter number in a Playfair Display Italic numeral at 14vw, set in `#E8D5B7` (warm champagne), positioned at grid-column 1 / bottom 20%. 2. A transition ornament: a centered art-deco fan composed of 24 SVG arcs radiating from a single focal point, each arc 0.5px stroke in `#B8A88A` (bronze), animating in via `elastic` spring (stiffness 60, damping 8) as the viewport enters. 3. The body text chapter: the 7/5 asymmetric grid, reading at comfortable 1.7 line-height. **Floating elements:** Throughout the scroll, six **floating art-deco ornamental chips** drift in parallax at rates 0.3–0.8× scroll speed. These are not random — they are the six vertices of a regular hexagon projected onto the viewport at fixed logical positions, so that at any scroll depth, the visible chips feel like the corners of an invisible geometric form hovering in front of the page. **No** pricing blocks. **No** stat grids. **No** CTA buttons above the fold. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display numerals and pull-quotes — `Playfair Display`** (wght 400 italic, wght 700 roman). Art-deco typography favored high-contrast serifs with sharp ball terminals; Playfair Display is the closest Google Fonts equivalent to Bodoni condensed or the lettering on a 1928 French perfumier label. Chapter numerals: 14vw, italic, tracking -0.02em. Pull-quotes: 2.4rem, italic, `#E8D5B7`. - **Headlines — `Josefin Sans`** (wght 300, wght 600, all-caps). Art-deco sans — geometric, even-stroked, squared terminals — is exactly Josefin Sans's lineage. Section titles: 1.1rem, letter-spacing 0.28em, uppercase, `#2C2416` (dark espresso). The extreme tracking is the art-deco signature: words spaced to read as visual pattern before linguistic content. - **Body / running text — `Share Tech Mono`** (wght 400). The tech-mono seed. Body text in monospace is unusual — the frequency report shows tech-mono at only 5%, and never in an editorial context. Here it works because the column measure is deliberately set at 72 characters so the monospace grid gives a **teletype-printout authority**: the fashion text reads as if it were a wire-service dispatch from a Paris bureau. Size: 0.95rem, line-height 1.85, color `#2C2416` at 88% opacity. - **Captions and marginalia — `Josefin Sans`** (wght 300, 0.75rem, tracking 0.15em, uppercase). These run in the 5-column right rail, rotated 90° on desktop (reading upward), printed in `#B8A88A` (bronze). The rotation is deliberate counter-programming against 100% of other designs that keep marginalia horizontal. **Palette:** | Token | Hex | Role | |---|---|---| | `--champagne` | `#E8D5B7` | Primary light / display type on dark | | `--blush` | `#E8C5C0` | Pastel accent / hover states | | `--celadon` | `#C5D8C8` | Pastel second accent / ornament fills | | `--lavender-dust` | `#D4C8E0` | Pastel third accent / field-line overlays | | `--espresso` | `#2C2416` | Body text / dark backgrounds | | `--bronze` | `#B8A88A` | Art-deco gold / ornament strokes | | `--ivory` | `#F5F0E8` | Page ground / section backgrounds | | `--field-silver` | `#D8DCE0` | Magnetic field-line diagrams | The pastel palette (`--blush`, `--celadon`, `--lavender-dust`) is deployed as **translucent washes** (opacity 0.18–0.35) over the `--ivory` ground — creating the powdery iridescence of art-deco enamel rather than the flat pastel of a tech startup. No pastel is ever used at full opacity in a large area. ## Imagery and Motifs **Photography — lens-flare as primary motif.** Every photographic plate deploys a deliberately visible ring-light or sun-flare corona. This is not a post-processing filter but a compositional choice: the lens-flare halo becomes the site's visual signature, the way a sunburst motif functions in a 1925 decorative-arts panel. Four plates total: 1. **Chapter 1 opener:** A single perfume bottle in black Perspex, photographed front-on with a ring-light. The ring-light reflection occupies the bottle's shoulder as a perfect circle of `#E8D5B7` light. The background is `#2C2416`. The corona bleeds to a 12-ray starburst — art-deco meets optical physics. 2. **Chapter 3 opener:** Textile — silk charmeuse draped over a curved plexiglass form, lit from behind so the weave becomes a lens-flare fabric. Two subsidiary flare artifacts at upper-right in `#D4C8E0` lavender-dust. 3. **Chapter 5 opener:** Portrait — one-third of a face, extreme close-up, cheekbone at the vertical center. A prism lens-flare splits the image horizontally: above the cheekbone is warm champagne light; below is cool celadon shadow. The prism split line aligns exactly with the magnetic field-line ornament from the chapter transition. 4. **Float image (non-full-bleed):** A compass rose from a 1920s navigational instrument, photographed on cream paper, lens-flare from a single point source catching the gilded needle. Used in Chapter 2 marginalia at 200×200px. **Art-deco ornament system:** A reusable SVG vocabulary of six motifs, each drawn at 1px reference and scaled freely: - `ornament-fan`: 24 arcs from a focal point, spacing 7.5° each - `ornament-chevron`: 5 nested V-shapes, 3px separation, 1:√2 proportions - `ornament-sunburst`: 16 rays alternating long/short, ratio 2:1 - `ornament-lozenge`: 4-point diamond, inner stroke offset 4px - `ornament-bracket`: symmetrical stepped bracket (like a 1928 theater proscenium) - `ornament-field-line`: bezier arc family, 5 curves with 12px lateral spacing **Floating elements behavior:** The six floating chips each carry one ornament motif, rendered as an SVG `use` at 48×48px inside a `backdrop-filter: blur(8px)` frosted panel, `background: rgba(232, 213, 183, 0.12)`, `border: 0.5px solid rgba(184, 168, 138, 0.4)`, `border-radius: 4px`. They float via a CSS `@keyframes drift-N` unique to each chip: a Lissajous-like path with x-amplitude 6px, y-amplitude 9px, period 8–14s, each starting at a different phase offset. On scroll, a `transform: translateY(calc(var(--scroll-progress) * var(--parallax-rate)))` displaces them at rates 0.3×, 0.45×, 0.55×, 0.65×, 0.72×, 0.8×. **Magnetic field-line diagrams:** In Chapter 4, the full-width background behind the body text is a CSS-generated field diagram: 18 bezier curves computed from a single source point (a theoretical monopole at center-left) arcing outward. Strokes are `--field-silver` at 0.4px, opacity 0.22. As the user scrolls this section into view, each curve path is drawn sequentially via `stroke-dashoffset` animation, 80ms stagger, 600ms duration per path, `easing: ease-out`. This is a `path-draw-svg` pattern deployed in the context of editorial fashion — which the frequency report shows has never been done. ## Prompts for Implementation Build monopole.style as a **single vertical editorial scroll in five chapters**, structured exactly like a luxury fashion journal: each chapter opens with full-bleed photography, transitions through an animated art-deco ornament, and reads through the asymmetric 7/5 grid. There is no navigation. There is no menu. There is a **fixed-position chapter indicator** at the right edge of the viewport — a vertical `Josefin Sans` 0.7rem uppercase list of five chapter names, current chapter highlighted in `--champagne`, others in `--bronze` at 50% opacity. This indicator has no pointer events and is purely informational. **Chapter structure:** ``` [Chapter 1] Full-bleed perfume-bottle lens-flare plate → fan ornament transition → body text (editorial voice, ~300 words, 7/5 grid) → chevron separator [Chapter 2] Body text continues with compass-rose marginalia image → lozenge ornament → pull-quote (Playfair italic, 2.4rem) → sunburst separator [Chapter 3] Full-bleed silk-charmeuse plate → bracket ornament → body text → field-line separator [Chapter 4] Body text over field-diagram background → path-draw-svg animation → sunburst ornament → pull-quote [Chapter 5] Full-bleed portrait plate → fan ornament → closing body text (~200 words) → field-line ornament (final, centered) ``` **Animation specifications:** 1. **Ornament transitions** use an `elastic` spring: CSS `transition: transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1)` (approximating spring stiffness 60, damping 8). Each arc of `ornament-fan` fans out from the focal point — `transform-origin: center bottom`, `scaleY` from 0 to 1, with a 15ms stagger per arc (24 arcs × 15ms = 360ms total fan). This is the only animation on the full-bleed plates; plates themselves appear via a gentle `opacity: 0 → 1` over 400ms on IntersectionObserver entry, no scale or translate (avoids the overused parallax-hero pattern at 78%). 2. **Floating chip drift** runs via `requestAnimationFrame` loop that updates `--chip-x` and `--chip-y` custom properties per chip using a sin/cos function with individual frequency offsets. The chips do NOT respond to mouse cursor (cursor-follow is at 9% frequency and is used in a6c.dev; no duplication). They drift autonomously. 3. **Rotated marginalia** use `writing-mode: vertical-rl; transform: rotate(180deg)` so text reads upward. On mobile (<768px), the 5-column rail collapses and marginalia revert to horizontal captions below their associated body paragraphs. 4. **Magnetic field-line drawing** (Chapter 4): Use an IntersectionObserver with `threshold: 0.15`. When triggered, run a `for` loop from `i=0` to `17`, each iteration calling `gsap.to(path, { strokeDashoffset: 0, duration: 0.6, delay: i * 0.08, ease: "power2.out" })`. If GSAP is not available, replicate with a plain JS `setTimeout` + CSS transition on `stroke-dashoffset`. 5. **Chapter numeral** (14vw Playfair italic): positioned `position: absolute; bottom: 20%; left: calc(var(--outer-margin) + 8px)` within the chapter-opener wrapper. On mobile it scales to `8vw`. The numeral arrives via `opacity: 0 → 1` and `translateY(20px → 0)` over 700ms, 200ms after the plate appears. **CSS custom properties to define at `:root`:** ```css --champagne: #E8D5B7; --blush: #E8C5C0; --celadon: #C5D8C8; --lavender-dust: #D4C8E0; --espresso: #2C2416; --bronze: #B8A88A; --ivory: #F5F0E8; --field-silver: #D8DCE0; --outer-margin: 80px; --body-col: 7; --margin-col: 5; --col-gap: 48px; --measure: 680px; ``` **Avoid:** - Sticky navigation bars - Hero sections with headline + subheading + CTA button - Card grids - Pricing tables - Testimonial carousels - Any layout from the 91%-frequency `gradient` palette corpus - `parallax` on full-bleed plates (78% frequency — already everywhere) ## Uniqueness Notes **Chosen seed:** aesthetic: art-deco | layout: editorial-flow | typography: tech-mono | palette: pastel | patterns: elastic | imagery: lens-flare | motifs: floating-elements | tone: professional **Differentiators from the existing design corpus:** 1. **Monospace body type in a fashion editorial context.** `tech-mono` is at 5% frequency and has never been paired with `art-deco` aesthetic or `editorial-flow` layout. The corpus's art-deco designs (6%) all use high-contrast display serifs or geometric sans for body text. Using `Share Tech Mono` for running editorial prose creates a **deliberate anachronism**: teletype-dispatch authority inside a couture atelier — the same productive dissonance as a 1928 Vogue cover printed on punched ticker tape. 2. **Vertical-writing-mode rotated marginalia.** The frequency report shows 100% of designs keep all text horizontal. monopole.style rotates the 5-column marginalia rail 90°, reading upward. This is structurally identical to how Japanese type composition handles furigana annotations, but applied to a Western editorial grid. The result is a columnar border that reads as both text and decorative rule simultaneously. 3. **Lens-flare as structural ornament, not photographic accident.** Lens-flare is at 2% frequency and in all existing uses functions as a vibe filter. Here it is a **compositional logic**: the flare corona serves the same visual role as the sunburst medallion in 1920s decorative arts — a literal radiant focal point that anchors each chapter opener. The prism split in the Chapter 5 portrait aligns geometrically with the field-line ornament, making the flare a load-bearing design element rather than decoration. 4. **Magnetic monopole physics as site metaphor.** No existing design uses theoretical physics as its organizing concept. The field-line diagrams, the compass-rose imagery, the "monopole" name — these form a coherent conceptual layer beneath the art-deco surface. The site is simultaneously a fashion atelier and an argument that monopole symmetry (one pole, self-contained, not defined by its opposite) is a legitimate aesthetic philosophy. 5. **Elastic spring on art-deco fan ornaments, not on hero typography.** The frequency report shows `elastic` at 6%, and in all known uses it fires on hero text or card hovers. monopole.style fires elastic spring on SVG arc fans — 24 arcs fanning from a single focal point, each with a 15ms stagger. This makes the ornament **unfold** like a physical fan snapping open, which is historically accurate (art-deco fans *did* snap) and mechanically satisfying in a way that elastic-on-text never achieves. **Patterns avoided from frequency analysis:** - `parallax` (78%) — avoided entirely; plates fade in instead - `stagger` on text (54%) — stagger is used only on SVG ornament arcs - `gradient` palette (91%) — no gradients in the palette; washes are flat-opacity pastels - `editorial` layout (52%) — editorial-flow used but not the symmetrical double-column variant; asymmetric 7/5 split is distinct - `professional` tone (15%) — present but filtered through couture-atelier voice, not consultancy-grid voice