# Design Language for monopole.city ## Aesthetics and Tone monopole.city (Monopole — magnetic monopole, a theoretical physics concept) channels an editorial aesthetic — clean typographic hierarchy, generous whitespace, and the authoritative presentation of a quality newspaper or magazine applied to a city-scale mapping and visualization of monopole physics research locations worldwide. The site is a physics atlas — research institutions, experiments, and theoretical breakthroughs mapped and documented with the journalistic clarity of a well-edited broadsheet. Each city becomes a chapter in the ongoing story of humanity's search for the magnetic monopole. Inspiration draws from The New York Times editorial design, Monocle magazine's city guides, the clean cartography of Dieter Rams-era Braun world clocks, and the elegant data journalism of The Pudding. The tone is minimal — content speaks for itself through precise typography and clean structure, without decorative excess. ## Layout Motifs and Structure The layout uses a **minimal-navigation** architecture — navigation reduced to the absolute essential, with content taking center stage and wayfinding achieved through typographic hierarchy and scroll position rather than persistent menus. **Minimal Navigation Architecture:** - No persistent top nav bar — a small, discreet hamburger or text link at top-left - Content-based navigation: section titles serve as landmarks - Scroll progress: thin (1px) line at top of viewport indicating position - Internal links within content body rather than in chrome - Max-width: 720px for editorial reading column **Section Sequence:** 1. **Masthead:** Hero with clean serif-revival title, sunset-warm gradient horizon line, custom-illustration city silhouette, and minimal dateline 2. **The Map:** Featured research cities with editorial profiles — each city a mini-article with slide-reveal entrance and wave-form decorative accents 3. **Dispatches:** News from research centers around the world in clean editorial blocks with custom-illustration location markers 4. **Data Bureau:** Research statistics and timelines presented as editorial infographics with wave-form decorative borders 5. **Index:** Footer as newspaper index — minimal column of links, publication date, and editorial credits ## Typography and Palette **Typography:** - **Headlines:** "Libre Baskerville" (Google Fonts) — serif revival at 2rem-3rem, weight 700. Its faithful Baskerville revival creates the authoritative broadsheet headline quality. - **Body Text:** "Libre Baskerville" at 0.95rem, weight 400, line height 1.8. Full serif consistency for editorial depth. - **Datelines:** "Source Sans 3" (Google Fonts) — clean sans at 0.8rem, weight 400, uppercase, letter-spacing 0.06em for dates and location tags. - **Captions:** "Source Sans 3" at 0.75rem, weight 400 for image captions. **Color Palette:** - **Sunset Orange:** #d07030 — warm sunset orange for primary accents - **Sunset Gold:** #c0a040 — warm gold for secondary accents - **Paper White:** #faf8f4 — clean warm white for page background - **Ink Black:** #1a1818 — near-black for primary text - **Rule Gray:** #c0b8b0 — warm gray for rules, borders, and secondary text - **Dusk Blue:** #3050708 — muted blue for links - **Horizon Pink:** #e0a088 — soft warm pink for decorative elements - **Column Gray:** #f0ece4 — light warm gray for sidebar backgrounds ## Imagery and Motifs **Custom-Illustration City Markers:** Research cities marked with simple, stylized SVG illustrations — iconic building silhouettes (3-4 buildings per city, 40-60px tall) in Ink Black at 0.7 opacity, rendered as minimal geometric shapes. Each city illustration is unique but shares the same minimalist stroke style, creating a cohesive visual vocabulary. **Wave-Form Decorative Borders:** Section transitions and card borders feature subtle wave-form patterns — SVG sine-wave paths (amplitude 4px, wavelength 40px) in Rule Gray at 0.15 opacity, running horizontally as section dividers. The wave forms suggest electromagnetic waves and the physics connection. **Slide-Reveal Editorial Entrances:** City profile articles enter with a slide-reveal — a solid Paper White block slides from left, revealing the content over 500ms ease-out. Creates the feeling of a newspaper page turning to reveal the next story. **Editorial Pull-Quotes:** Key research findings and city descriptions highlighted as typographic pull-quotes — text in Libre Baskerville at 1.5rem, weight 400, italic, with thin Sunset Orange vertical rules (2px) at the left edge (border-left). Centered in the reading column for dramatic effect. **Minimal Scroll Progress:** A 1px line at the top of the viewport in Sunset Orange, width calculated from scroll position (width: calc(var(--scroll-progress) * 100%)). The only persistent UI chrome, maintaining minimal-navigation discipline. ## Prompts for Implementation Build the page as an editorial physics atlas. Content column: max-width: 720px, margin: 0 auto, padding: 0 24px. No persistent navigation — only a small hamburger at top-left with position: fixed. Slide-reveal: .article { overflow: hidden; position: relative; } .article::after { content: ''; position: absolute; inset: 0; background: #faf8f4; transform: translateX(0); } .article.visible::after { animation: slideReveal 500ms ease-out forwards; } @keyframes slideReveal { to { transform: translateX(100%); } } Wave-form dividers: SVG path with d="M0,4 Q10,0 20,4 Q30,8 40,4 Q50,0 60,4..." repeating. Stroke: #c0b8b0, stroke-width: 1, opacity: 0.15. Width: 100%. City illustrations: SVG groups of 3-4 rect elements with varying heights, minimal geometric shapes. viewBox standardized, fill: #1a1818 at 0.7 opacity. Pull-quotes: blockquote { font-size: 1.5rem; font-style: italic; border-left: 2px solid #d07030; padding-left: 20px; margin: 40px 0; } Scroll progress: position: fixed, top: 0, left: 0, height: 1px, background: #d07030, width: calc(var(--scroll-progress) * 100%), z-index: 9999. JavaScript: document.documentElement.style.setProperty('--scroll-progress', scrollY / (docHeight - winHeight)). AVOID: Interactive map applications, dense geographic information systems, and cluttered city-guide interfaces. Let the editorial clarity and minimal tone create a sophisticated reading experience for exploring the world of monopole research. ## Uniqueness Notes 1. **Editorial aesthetic for physics geography:** Newspaper design language transforms research mapping into authoritative, readable journalism. 2. **Minimal-navigation as editorial confidence:** Removing persistent navigation trusts the content and typography to guide readers. 3. **Custom city illustrations as visual vocabulary:** Unique but stylistically consistent building silhouettes create a cartographic illustration system. 4. **Wave-form dividers as physics signature:** Electromagnetic wave patterns subtly embed the physics context into decorative elements. 5. **Sunset-warm palette for scientific storytelling:** Warm tones humanize the global physics narrative, making it feel like a travel story through the world of science. **Seed/Style:** aesthetic: editorial, layout: minimal-navigation, typography: serif-revival, palette: sunset-warm, patterns: slide-reveal, imagery: custom-illustration, motifs: wave-forms, tone: minimal **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses editorial aesthetic, minimal-navigation layout, sunset-warm palette, custom-illustration imagery, and minimal tone.