# Design Language for political.wiki ## Aesthetics and Tone political.wiki channels a minimalist aesthetic — radical visual reduction to essentials, applied to a political knowledge wiki and reference platform. The site clarifies — stripping away everything that isn't knowledge, leaving only the precise, well-organized information that citizens need. Every element earns its place through function alone, and the beauty emerges from the clarity of organization. Inspiration draws from the clean efficiency of Wikipedia's information architecture, the typographic precision of the Swiss International Style, the focused clarity of government.uk's design system, and the editorial restraint of The Economist's digital edition. The tone is dreamy-ethereal — surprisingly soft, floating language that treats political knowledge as a gentle, accessible resource rather than a dry reference. ## Layout Motifs and Structure The layout uses an **editorial-flow** architecture — content organized in a flowing editorial column that presents political knowledge with the considered pacing of a well-edited encyclopedia. **Editorial Flow Architecture:** - Single editorial column: max-width: 720px centered - Sidebar table of contents: 220px on desktop, collapsed on mobile - Feature definitions: full-width pullout blocks within the flow - Generous paragraph spacing for comfortable reference reading - Container: max-width: 720px main content with sidebar - The editorial flow creates the reference-quality reading experience **Section Sequence:** 1. **Index:** Hero with commissioner-versatile title on dark-neon minimal gradient, photography documentary-style political photography, particle-effects ambient knowledge particles 2. **Definitions:** Core political terms in editorial flow — glitch interactive term exploration animations with photography reference images 3. **Systems:** Political systems explained in expanded editorial with particle-effects analytical atmosphere and photography systemic illustration 4. **History:** Historical context in flowing editorial with photography archival treatments 5. **Colophon:** Footer as editorial colophon — dreamy-ethereal closing with particle-effects settled knowledge and wiki attribution ## Typography and Palette **Typography:** - **Headlines:** "Commissioner" (Google Fonts) — versatile variable serif at 2rem-2.8rem, weight 700. Its adjustable flair creates the range between formal definition headings and softer descriptive titles. - **Body Text:** "Inter" (Google Fonts) — precise sans at 0.9rem, weight 400, line height 1.8 for comfortable reference reading. - **Accent:** "Commissioner" at 1rem, weight 500 for term definitions and cross-references. - **Labels:** "Inter" at 0.65rem, weight 600, uppercase, letter-spacing 0.08em. **Color Palette:** - **Void Dark:** #0c0c10 — deep void for dark backgrounds - **Panel Night:** #161620 — dark panel for cards - **Neon Cyan:** #30c8d0 — vivid neon cyan for primary accent - **Neon Violet:** #8848c0 — neon violet for secondary accent - **Neon White:** #e8e8f0 — bright neon white for text - **Dim Grid:** #404050 — dim grid for secondary text - **Shadow Void:** #202028 — void shadow for borders - **Border Neon:** rgba(48,200,208,0.1) — neon cyan border ## Imagery and Motifs **Photography Documentary Style:** Political concepts accompanied by documentary-style photography treatments — CSS filter: grayscale(0.7) contrast(1.1) brightness(0.9) for the desaturated documentary quality. Images with thin neon border accents (1px, Border Neon) and subtle glow (box-shadow: 0 0 20px rgba(48,200,208,0.04)). The treatment gives political imagery the objective, documentary quality of archival reference. **Glitch Knowledge Exploration:** Political terms feature subtle glitch on interaction — text-shadow: 1px 0 rgba(48,200,208,0.3), -1px 0 rgba(136,72,192,0.3) on hover, with clip-path slice micro-animation. The glitch suggests knowledge being decoded and examined — political terms momentarily deconstructed for deeper understanding. **Particle-Effects Knowledge Atmosphere:** Tiny particles (2-3px) in Neon Cyan and Neon Violet at 0.03-0.05 opacity floating in the background. Static placement, no animation — positioned as if suspended in a knowledge field. The particles create the atmospheric quality of information floating in a vast digital reference space. **Dark-Neon Minimal Contrast:** Deep void backgrounds with precise neon highlights — Neon Cyan for links and interactive elements, Neon Violet for secondary highlights. The contrast between near-black and neon creates focused attention on the information that matters. **Wiki Cross-Reference Links:** Internal references styled distinctly — color: Neon Cyan with subtle underline (border-bottom: 1px solid rgba(48,200,208,0.3)), transitioning to solid on hover. The link treatment creates the interconnected quality of wiki knowledge where every term connects to deeper information. ## Prompts for Implementation Build the page as a minimalist political wiki. Editorial: .wiki-content { max-width: 720px; margin: 0 auto; padding: 60px 24px; } .wiki-sidebar { width: 220px; position: sticky; top: 40px; } .wiki-layout { display: flex; gap: 40px; max-width: 1000px; margin: 0 auto; } Glitch: .term-link:hover { text-shadow: 1px 0 rgba(48,200,208,0.3), -1px 0 rgba(136,72,192,0.3); } Documentary photo: .doc-photo { filter: grayscale(0.7) contrast(1.1) brightness(0.9); border: 1px solid rgba(48,200,208,0.1); box-shadow: 0 0 20px rgba(48,200,208,0.04); } Knowledge particles: .knowledge-particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: var(--particle-color, rgba(48,200,208,0.04)); } Cross-references: .wiki-link { color: #30c8d0; text-decoration: none; border-bottom: 1px solid rgba(48,200,208,0.3); transition: border-color 200ms; } .wiki-link:hover { border-color: #30c8d0; } AVOID: Dense wikipedia clones, corporate knowledge bases, and partisan political databases. Let minimalist clarity and dreamy-ethereal language create a political wiki where knowledge feels like floating through a luminous reference space. ## Uniqueness Notes 1. **Minimalist for political wiki:** Radical reduction makes complex political knowledge feel clear and navigable rather than overwhelming. 2. **Editorial-flow as encyclopedia:** Flowing editorial column creates the considered pacing of a well-edited reference work. 3. **Glitch as knowledge decoding:** Subtle glitch effects visualize the process of examining and deconstructing political terms for deeper understanding. 4. **Dark-neon as focused attention:** High-contrast palette directs attention precisely to the information that matters. 5. **Photography as documentary evidence:** Desaturated documentary-style images give political concepts the objective quality of archival reference. **Seed/Style:** aesthetic: minimalist, layout: editorial-flow, typography: commissioner-versatile, palette: dark-neon, patterns: glitch, imagery: photography, motifs: particle-effects, tone: dreamy-ethereal **Avoided Overused Patterns:** corporate aesthetic (84%), parallax patterns (90%), asymmetric layout (88%), mono typography (91%), warm palette (93%), friendly tone (84%), minimal imagery (89%). This design uses minimalist aesthetic, editorial-flow layout, dark-neon palette, photography imagery, and dreamy-ethereal tone.