# Design Language for monopole.wiki ## Aesthetics and Tone monopole.wiki (Monopole — magnetic monopole, a theoretical physics concept) channels a corporate aesthetic — systematic design, professional structure, and the institutional authority of enterprise-grade presentation applied to a comprehensive encyclopedia of magnetic monopole physics. The site is the definitive reference — organized with the rigor of a corporate knowledge base, where every article is reviewed, every citation verified, and every diagram approved. Inspiration draws from Wikipedia's information architecture, IBM's corporate design system, Britannica's editorial authority, and the clean documentation of Stripe and Twilio developer portals. The tone is warm-inviting — despite corporate structure, the voice is welcoming and encouraging, making dense physics accessible. ## Layout Motifs and Structure The layout uses a **full-bleed** architecture — sections spanning the entire viewport width, creating an immersive, boundary-less encyclopedia experience. **Full-Bleed Architecture:** - Sections span 100vw with no side margins - Content within sections: max-width: 900px centered - Alternating dark/light section backgrounds for visual rhythm - Full-width gradient transitions between sections - Layered-depth elements creating dimensional interest within flat sections **Section Sequence:** 1. **Index:** Hero with garamond-classic title on navy-metallic gradient, geometric-abstract monopole emblem, layered-depth floating accents 2. **Articles:** Encyclopedia entries in full-bleed alternating sections with hover-lift interactive cards and geometric-abstract illustrations 3. **Taxonomy:** Category tree visualized with layered-depth overlapping panels showing knowledge hierarchy 4. **Contributors:** Community contributor profiles in clean cards with hover-lift interaction 5. **References:** Footer as comprehensive bibliography — minimal, organized, authoritative ## Typography and Palette **Typography:** - **Headlines:** "EB Garamond" (Google Fonts) — classic Garamond at 2.5rem-3.5rem, weight 700. Its centuries of scholarly authority create the encyclopedic gravitas this wiki demands. - **Body Text:** "EB Garamond" at 1rem, weight 400, line height 1.8. Full serif for long-form encyclopedia reading. - **Code/Data:** "Fira Code" (Google Fonts) — monospace at 0.85rem for equations and data. - **Navigation:** "Source Sans 3" (Google Fonts) — clean sans at 0.85rem, weight 500 for navigation and UI elements. **Color Palette:** - **Navy Deep:** #0a1020 — deep navy for primary dark backgrounds - **Metallic Blue:** #2040608 — medium navy-metallic for secondary backgrounds - **Steel Silver:** #a0b0c0 — metallic silver-blue for accents - **Copper Warm:** #c08050 — warm copper for secondary accents - **Paper Light:** #f4f0e8 — warm paper for light sections - **Ink Navy:** #1a2030 — dark navy for text on light backgrounds - **Glass Blue:** #e0e8f0 — pale blue for card backgrounds - **Border Metal:** #4060808 — medium metallic for borders ## Imagery and Motifs **Geometric-Abstract Monopole Diagrams:** Physics concepts illustrated as clean geometric abstractions — SVG compositions combining circles (monopole particles), radiating lines (field lines), and polygons (detector geometries) in Steel Silver and Copper Warm at 0.7 opacity on dark, 0.3 on light. Each article illustration unique but sharing geometric vocabulary. **Layered-Depth Dimensional Elements:** Content sections feature overlapping panels at different z-depths — a background panel, content at standard depth, and decorative elements at foreground depth with subtle box-shadow separation (0 4px 16px rgba(0,0,0,0.08)). Creates the physical dimensionality of a layered reference book. **Hover-Lift Article Cards:** Encyclopedia article cards lift on hover — transform: translateY(-4px), box-shadow deepening from 0 2px 4px rgba(0,0,0,0.05) to 0 6px 16px rgba(0,0,0,0.1). Border-top: 3px solid Steel Silver appears on hover. Transition: 200ms ease. **Navy-Metallic Gradient Sections:** Dark sections use metallic-quality gradients — linear-gradient(135deg, #0a1020, #182840) with subtle radial-gradient highlights (rgba(160,176,192,0.03)) suggesting polished metal surfaces. The metallic quality conveys institutional permanence. **Encyclopedic Cross-Reference Links:** Internal article links styled distinctively — border-bottom: 1px dashed Steel Silver at 0.3 opacity, transitioning to solid Copper Warm on hover. A small arrow icon (→) appears on hover via ::after pseudo-element, suggesting navigation depth. ## Prompts for Implementation Build the page as a corporate physics encyclopedia. Full-bleed: sections { width: 100vw; } .inner { max-width: 900px; margin: 0 auto; padding: 60px 24px; } Hover-lift: .article-card { transition: transform 200ms, box-shadow 200ms; border-top: 3px solid transparent; } .article-card:hover { transform: translateY(-4px); box-shadow: 0 6px 16px rgba(0,0,0,0.1); border-top-color: #a0b0c0; } Layered depth: .layer-bg { z-index: 0; } .layer-content { z-index: 1; position: relative; } .layer-accent { z-index: 2; position: absolute; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } Navy-metallic: .dark-section { background: linear-gradient(135deg, #0a1020, #182840); } .dark-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(at 30% 40%, rgba(160,176,192,0.03), transparent 50%); } Cross-reference: a.wiki-link { border-bottom: 1px dashed rgba(160,176,192,0.3); text-decoration: none; transition: border-color 200ms; } a.wiki-link:hover { border-bottom-color: #c08050; border-bottom-style: solid; } a.wiki-link:hover::after { content: ' →'; color: #c08050; } AVOID: Casual wiki layouts, minimal documentation styles, and playful science communication. Let corporate authority and warm-inviting accessibility create a definitive, welcoming physics encyclopedia. ## Uniqueness Notes 1. **Corporate aesthetic for physics encyclopedia:** Institutional design creates the definitive authority needed for a comprehensive reference. 2. **Full-bleed as immersive knowledge:** Edge-to-edge sections create an encompassing, boundary-less knowledge experience. 3. **Navy-metallic as institutional permanence:** Metallic gradients convey the lasting, authoritative quality of encyclopedia content. 4. **Layered-depth as reference book dimensionality:** Overlapping panels recreate the physical layers of consulting a deep reference volume. 5. **Warm-inviting tone within corporate structure:** Friendly voice within institutional design makes dense physics genuinely accessible. **Seed/Style:** aesthetic: corporate, layout: full-bleed, typography: garamond-classic, palette: navy-metallic, patterns: hover-lift, imagery: geometric-abstract, motifs: layered-depth, tone: warm-inviting **Avoided Overused Patterns:** parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette (89%), friendly tone (76%), minimal imagery (84%). This design uses corporate aesthetic, full-bleed layout, navy-metallic palette, geometric-abstract imagery, and warm-inviting tone.