# Design Language for monopole.city ## Aesthetics and Tone monopole.city is presented as a working **isometric survey of an imaginary metropolis built entirely from single poles** — telecom monopoles, lamp standards, flagpoles, sundial gnomons, weather masts, the lone vertical line of a magnetic monopole on a physicist's whiteboard. The entire site behaves like an interactive technical-documentation appendix: a draftsman's plate set, annotated, dimensioned, callout-leadered, with the tone of a patient field engineer walking you through the city's "pole atlas." The mood is **cool, precise, quietly obsessive** — the pleasure of a well-labelled exploded diagram, the hush of a planning office at 7 a.m., graph paper still warm from the plotter. There is no marketing voice here. Copy reads like spec annotations: "Fig. 4 — Lattice-to-tube transition, 1:50", "Note: cable bend radius ≥ 12d", "Monopole, n. a hypothetical particle carrying a single magnetic charge — and the only building this city knows how to make." Everything is dry, exact, and faintly affectionate toward its subject. The visual register is **blueprint-meets-axonometric-isometric-render**: thin keylines, 30° projection, dimension arrows, hatched ground planes, and a restrained two-ink press feel rather than glossy 3D. Warmth, if any, comes only from a single accent ink — never from gradients-as-decoration, never from photography. ## Layout Motifs and Structure The page is one long **immersive vertical scroll through twelve numbered "plates"**, each plate a full-viewport drafting sheet with a title block in the lower-right corner (sheet no., scale, "rev. A", a tiny city seal). Plates do not stack as cards; they *transition* — the isometric ground grid is continuous from plate to plate, so scrolling feels like panning a camera across one enormous axonometric model rather than flipping pages. A persistent **left margin rail** holds the running sheet index (01–12) as a column of tick marks with hairline leader lines; the active plate's tick extends a thin rule across the gutter and pins a two-word label. Composition rules: - **30° isometric projection everywhere** — every pole, plinth, cable tray, manhole, and callout box sits on the same projected grid. No flat web-rectangles; even text panels are drawn as slightly-tilted "drawing notes" pinned to the sheet with corner ticks. - **Callout-leader system as the layout grammar**: information is never centered in a hero block — it hangs off the diagram on dimension lines and balloon leaders, the way a real plate annotates a part. - **Asymmetric weighting**: the pole-of-the-plate occupies one third (usually left-of-center), annotations spill into the remaining negative space, title block anchors lower-right. Generous **ma / negative space** of bare graph field around each subject. - A thin **section-cut band** (a horizontal hatched stripe with a cutting-plane symbol) divides "above-grade" content from "below-grade" content on plates that have foundations to show. - No top navigation bar in the conventional sense — the only nav is the sheet-index rail and a small "north arrow" compass in the corner that doubles as a back-to-top control. ## Typography and Palette **Typefaces (Google Fonts only):** - **`Space Mono`** — primary face for all annotations, dimension text, sheet numbers, and body notes. Its slab-serifed monospace gives the exact "produced on a drafting plotter / engineering label" voice; tracked `+0.04em` at small sizes, used in ALL-CAPS for plate titles and section labels. - **`IBM Plex Sans Condensed`** — secondary face for slightly longer prose passages (the introductory paragraph on each plate, the about-the-city note), chosen because it reads like the printed-form text on government engineering documents: humanist, narrow, businesslike. Weights 400 and 600 only. - **`Major Mono Display`** — reserved exclusively for the giant plate numbers ("01"…"12") set ghosted into the graph field at ~22vw; its monospaced display geometry looks like stenciled survey numerals. **Palette — a strict two-ink-plus-paper press, with a single warning accent:** - `#EBE7DC` — *Plotter Paper*: warm off-white drafting sheet, the page base. - `#11212C` — *Indigo Ink*: near-black blue-charcoal for all primary linework, type, and the darkest hatch. - `#3B5F73` — *Survey Blue*: mid blue-grey for the isometric grid lines, secondary keylines, and dimension witness lines. - `#C8C2AE` — *Pencil Grey*: muted greenish stone for construction lines, faint underlays, ghosted plate numbers. - `#D6502B` — *Vermilion Warning*: the lone hot accent, used only for active leaders, the north arrow, the cutting-plane symbol, and one highlighted detail per plate. Never as a fill larger than a callout balloon. - `#1C3540` (derived deep tint of Indigo Ink) — for the "below-grade" band's solid earth fill and footer title blocks. High-contrast, near-monochrome duotone discipline: ink on paper, with vermilion as the single permitted shout. Absolutely no decorative gradients, no glassmorphism, no drop-shadow soup. ## Imagery and Motifs Every visual is **drawn as SVG line-art in isometric projection** — there is no photography anywhere on the site. - **The twelve poles** (one per plate), each a different real or conceptual monopole, rendered as a clean axonometric line drawing with a few cross-section insets: 1. Cellular monopole tower with stacked antenna platforms (the "default" city building). 2. Cast-iron Victorian street lamp standard, fluted shaft. 3. Maritime signal mast with yardarm and flag halyards. 4. A surveyor's plumb-bob suspended from a tripod head — the city's "founding instrument." 5. Gnomon of a horizontal sundial, with the hour-line fan hatched on the ground plane. 6. Wind-measurement mast bristling with anemometer cups and a wind vane. 7. Single-pile marine dolphin (mooring pile) ringed with a rubbing strake, water surface drawn as ruled wave-hatching. 8. Trolley/tram catenary pole with bracket arm and span wire. 9. The "magnetic monopole": a whiteboard schematic — a lone field-line porcupine, Dirac-string dashed downward, equations leadered in. 10. Maypole with ribbons drawn as helical guide-lines (the city's only festival). 11. Borehole / monitoring well standpipe with the section-cut showing aquifer hatching below grade. 12. A radio broadcast mast guyed at three levels — final plate, pulled back to show the whole isometric city skyline of poles receding to a vanishing tick on the horizon. - **Recurring drafting motifs**: 30° isometric ground grid; dimension arrows with witness lines and dimension values; balloon callouts (circle + leader) numbering parts; cutting-plane lines with hatched section symbols; a north-arrow compass rose; revision triangles ("△ A"); a title block in every lower-right corner; ruled hatch fills (steel 45° lines, earth dots-and-dashes, water horizontal rules, concrete stipple); faint construction lines extending past intersections; a city seal (a circle enclosing a single vertical line and the motto "VNVS PALVS" — "one pole/stake"). - **Texture**: a barely-there paper tooth (1–2% noise) on the base; otherwise crisp vector. Lines have honest, consistent weights (0.5pt construction, 1pt keyline, 1.75pt cut line). ## Prompts for Implementation Build monopole.city as a **single long-scroll HTML page**, one CSS file, one ES module — no framework, no build step. Treat it as **a guided walk through twelve drafting plates of an isometric pole-city**, not a product page. - **No CTA buttons, no pricing tables, no stat-grids, no testimonials, no email capture, no logo wall, no FAQ accordion, no newsletter, no chatbot, no cookie banner.** The only interactive controls are the sheet-index rail (jump to a plate) and the north-arrow / compass (return to plate 01). - **Continuous isometric ground grid**: render one wide SVG (or CSS background) of a 30° projected grid that scrolls with the page so the twelve plates feel like a single panned model. Each plate's pole is an inline SVG group placed onto that grid. - **Scroll-triggered drafting reveals** (use IntersectionObserver, prefers-reduced-motion respected): as a plate enters view, its linework should **"draw on"** via `stroke-dashoffset` animation (`path-draw-svg`) — first the pole's primary outline, then dimension lines unrolling along their length, then the balloon callouts popping in sequence (`stagger`), then the title block sliding into the corner. Vermilion accents fade in last, like a reviewer's red pen. - **Camera-pan parallax**: the ground grid and far horizon move slightly slower than the foreground pole and its annotations, reinforcing the axonometric depth without ever breaking the flat-ink look. Subtle only. - **Hover behavior**: hovering a balloon callout extends its leader, brightens it to vermilion, and reveals the corresponding spec note as a tilted "drawing note" card pinned with corner ticks. Hovering the pole itself triggers a faint construction-line overlay (the underlay grid the draftsman "used"). - **Section-cut interaction**: on plates with below-grade content, scrolling past the section-cut band wipes the hatched earth fill upward to reveal foundations/aquifers — a clip-path reveal keyed to scroll progress. - **Plate numbers**: the giant `Major Mono Display` numeral sits ghosted in `Pencil Grey` behind each plate, very slightly counter-parallaxing. - **Typography in motion**: dimension values can do a quick `counter-animate` from 0 to their real measurement as the dimension line draws. Plate titles set in tracked `Space Mono` caps, underlined by a hairline rule that draws left-to-right. - **Tone of all copy**: terse engineering annotation. Section labels like "ABOVE GRADE / BELOW GRADE", "SCALE 1:50", "REV. A", "SEE DETAIL 7". One small intro paragraph in `IBM Plex Sans Condensed` framing the conceit ("This is a city that only knows how to build one thing: a pole. Twelve plates follow."). Footer title block: project = "monopole.city", drawn by = "—", sheet = "12 of 12". - Performance/accessibility concerns are out of scope for this brief; focus on the immersive drafting-plate narrative and the precision of the line. ## Uniqueness Notes Differentiators from other designs in this set: 1. **No photography and no glassmorphism at all** — the entire visual language is hand-built isometric SVG line-art with drafting conventions (dimension arrows, balloon callouts, cutting-plane symbols, title blocks), which the frequency analysis shows are essentially absent (photography 98%, glassmorphism 76%, hand-drawn 96% — this is none of those; it is *technical-drafting* line-art, not whimsical hand-drawn). 2. **Layout grammar is the callout-leader system, not card-grids or hero blocks** — information hangs off diagrams on leader lines instead of sitting in centered cards (card-grid 89%, centered 85%, hero-dominant 11% — deliberately avoided in favor of `immersive-scroll` + `ma-negative-space` + asymmetric drafting composition). 3. **Strict two-ink press palette with one vermilion accent** — no warm gradient washes (warm 98%, gradient 96% — explicitly rejected here for a `duotone` / `high-contrast` ink-on-plotter-paper discipline). 4. **A single unifying conceit** — every page element, motif, and word treats the site as the technical appendix of a city built only from single poles (magnetic monopole ⇄ monopole tower ⇄ lamp standard ⇄ gnomon), giving it an obsessive thematic cohesion most sites lack. 5. **Motion is "drafting reveal" choreography** — `path-draw-svg` linework draw-on, dimension-line unrolling, balloon `stagger`, section-cut clip wipes — chosen over the near-ubiquitous `cursor-follow` (89%) / `magnetic` (79%) / `spring` (86%) interaction stack. Chosen seed / style: **"isometric technical docs"** — aesthetic: isometric; layout: immersive-scroll + ma-negative-space; typography: tech-mono; palette: duotone / high-contrast; patterns: path-draw-svg + stagger + scroll-triggered; imagery: isometric-icons / line-illustration; motifs: city-urban + grid-lines + sharp-angles; tone: tech-tutorial. Avoided patterns from frequency analysis: hand-drawn (96%), glassmorphism (76%), photography (98%), warm palette (98%), gradient (96%), card-grid (89%), centered (85%), parallax-as-default + cursor-follow (89%) + magnetic (79%) used only minimally and re-themed as a draftsman's camera pan.