# Design Language for voting.wiki ## Aesthetics and Tone voting.wiki should feel like a friendly civic mission control room discovered behind an ordinary neighborhood library: midnight glass, soft bokeh light from distant city windows, and a calm sci-fi HUD that explains elections without sounding institutional. The corporate foundation is polished and trustworthy, but never boardroom-stiff; it has the approachable-casual feeling of a patient poll worker guiding someone through a ballot for the first time. The mood is **"democracy at night, made understandable"**. Imagine a single illuminated column floating in a dark-blue civic observatory, where ballots, district lines, eligibility rules, recounts, and turnout stories appear as gentle constellations. The experience should avoid patriotic clichés, red-white-blue overload, eagles, flags, podiums, and campaign imagery. Instead, voting.wiki becomes a neutral knowledge beacon: precise, civic, intimate, and quietly futuristic. Visual references: NASA mission overlays, library microfilm readers, public transit wayfinding, calm election-night control rooms after the noise has faded, and soft-focus streetlights reflected on rainy pavement. The site should communicate that voting is not a shouting match; it is a navigable system. ## Layout Motifs and Structure Use a **single-column narrative corridor** rather than a dashboard, card grid, or marketing landing page. The entire page should feel like moving down one vertical beam of civic light. Content sits inside a central `min(880px, 88vw)` column, but the environment around it remains active: HUD rings, faint district contour lines, and bokeh orbs drift outside the reading lane. Structure the experience as a sequence of full-screen or near-full-screen chapters: 1. **Signal Acquisition:** A 100vh opening scene with the domain name as a luminous civic instrument panel. The title sits in the middle of the column while transparent ballot outlines rotate slowly in the background. Instead of a CTA cluster, include one quiet line: "A field guide to the systems behind the vote." 2. **The Ballot Path:** A vertical illuminated rail runs down the page like a subway map for civic process. Each section attaches to the rail with small HUD brackets: registration, ballot design, counting, verification, representation, reform. 3. **Knowledge Windows:** Explanatory passages appear as long translucent panels, not cards. Panels should feel like archival glass overlays with fine grid ticks and small coordinate labels. 4. **Myth / Mechanism Interludes:** Alternate between short myth-busting fragments and deeper mechanism explanations. Use split micro-compositions within the single column: a large statement, then a small annotated schematic beneath it. 5. **Quiet Landing:** End with a full-screen dark-blue field where the rail resolves into a glowing checkmark-shaped route, suggesting comprehension rather than conversion. Spacing should be cinematic and generous. Sections can breathe with `padding-block: clamp(5rem, 12vh, 10rem)`. Avoid dense horizontal modules. The page should have only one main path: down. ## Typography and Palette **Typography:** - **Display / Chapter Titles:** "Atkinson Hyperlegible" from Google Fonts, weights 700 and 800. Its humanist forms feel civic, readable, and unpretentious while still holding up at large sizes. Use for the hero title and section names with tight but not aggressive tracking: `letter-spacing: -0.035em`. - **Body / Explanatory Text:** "Source Sans 3" from Google Fonts, weights 400, 500, and 600. It has public-information clarity without looking bureaucratic. Use comfortable line-height around `1.65` and a slightly enlarged body size: `clamp(1.05rem, 1.4vw, 1.28rem)`. - **HUD Labels / Coordinates:** "IBM Plex Mono" from Google Fonts, weights 400 and 600. Use sparingly for ballot IDs, process labels, tiny legends, and animated skeleton-loading bars. **Palette — midnight-blue civic glow:** - Deep Polling Place Navy: `#061526` — primary background, nearly black but blue enough to feel expansive. - Midnight Ballot Blue: `#0B2B55` — panel gradients, section shadows, large atmospheric fields. - Civic Cyan: `#4DE3FF` — HUD lines, active route rail, luminous brackets. - Verified Mint: `#7CFFC4` — confirmation glints, resolved states, tiny check accents. - Paper Glow: `#F2F7FF` — primary text on dark fields. - Bokeh Amber: `#FFD166` — soft out-of-focus orbs, warm human notes, hover halos. - Muted Slate: `#8EA4C2` — secondary text, captions, quiet metadata. - Ballot Violet: `#8B7CFF` — rare accent for uncertainty, comparison, and layered overlays. Use gradients as subtle atmospheric washes, not rainbow decoration: `radial-gradient(circle at 25% 10%, rgba(77,227,255,.22), transparent 32%)`, `radial-gradient(circle at 82% 18%, rgba(255,209,102,.18), transparent 28%)`, and a base `linear-gradient(180deg, #061526 0%, #091B34 48%, #030A14 100%)`. ## Imagery and Motifs The primary imagery is **soft bokeh plus precise HUD geometry**: civic warmth and systems clarity in the same frame. No stock photos, no candidate portraits, no handshakes, no flags. Build the world through CSS gradients, SVG lines, and small JS-driven motion. Signature motifs: - **Ballot Constellations:** Tiny rounded rectangles, punch holes, and check marks connected like star maps. They should never become a statistical chart; they are wayfinding artifacts. - **HUD Brackets:** Thin cyan corner brackets around headings and key definitions, with tiny mono labels such as `WARD`, `COUNT`, `VERIFY`, `MAP`, `RULE`. - **Skeleton-Loading Civic Strips:** Use skeleton-loading as an intentional visual pattern: shimmering placeholder ballot rows that gradually resolve into plain-language explanations. This turns "loading" into a metaphor for a complex system becoming legible. - **District Contour Lines:** Abstract map boundaries rendered as faint SVG paths behind the column, slowly drifting by a few pixels. Keep them nonliteral and neutral. - **Bokeh Background:** Large blurred circles in cyan, amber, and violet move slowly at different depths, like election-night lights seen through rain-streaked glass. - **Verification Sparks:** When a section becomes visible, small mint ticks travel along the vertical rail and snap into place beside the heading. Texture should be smooth and luminous, with very faint scanline noise only if it supports the HUD atmosphere. The site should feel digital but not cold. ## Prompts for Implementation Create a single-file immersive `index.html` with embedded CSS and JS. Load Google Fonts for Atkinson Hyperlegible, Source Sans 3, and IBM Plex Mono. Bias the implementation toward a **full-screen narrative experience** rather than a conventional homepage. Implementation guidance: - Start with a 100vh hero where `voting.wiki` appears as a glowing civic coordinate, surrounded by slowly orbiting ballot outlines and blurred bokeh. Use a restrained intro animation: skeleton bars sweep across the title area, then resolve into the final text. - Build one continuous vertical rail through the single column using a pseudo-element or SVG path. Animate mint/cyan light traveling down the rail as chapters enter the viewport. - Use scroll-triggered class changes via IntersectionObserver, but avoid the common parallax-heavy feel. Motion should be subtle: opacity, glow intensity, line drawing, and small coordinate shifts. - Make each chapter feel like a panel of a civic instrument: translucent navy background, 1px cyan border at low opacity, corner brackets, and small mono labels. Use long-form story blocks, not cards. - Add a background layer with 12-18 bokeh orbs generated in CSS/JS. They should drift slowly and blur heavily, staying behind all content. - Include at least one "system resolving" sequence: several animated skeleton-loading ballot rows shimmer, then transform into concise explanatory lines about how a vote moves from mark to count to audit. - Keep interactions contemplative: hover reveals annotations, tiny HUD labels brighten, the central rail pulses. Do not create big button stacks, pricing blocks, testimonial strips, stat grids, or CTA-heavy layouts. - The copy should tell a story of civic comprehension: "what happens before the ballot," "what happens inside the ballot," "what happens after the ballot," and "how trust is maintained." The final page should feel like scrolling through a civic night atlas: calm, luminous, precise, and humane. ## Uniqueness Notes - **Single-column civic observatory:** While card-grid and centered layouts are extremely overused in the frequency analysis, voting.wiki uses one uninterrupted vertical knowledge beam with no grid of offerings. - **Skeleton-loading as metaphor:** The planned skeleton-loading pattern becomes a storytelling device for democratic systems becoming visible, rather than a generic UI placeholder. - **Bokeh plus sci-fi HUD:** Bokeh-background imagery and sci-fi-hud motifs are both underused, and their combination gives the site a rare mix of softness and precision. - **Nonpartisan future-civic language:** The design avoids flags, campaign colors, podiums, stat-grids, and political hero tropes, replacing them with ballot constellations, verification sparks, and district contour ghosts. - **Chosen seed/style:** aesthetic: corporate, layout: single-column, typography: humanist, palette: midnight-blue, patterns: skeleton-loading, imagery: bokeh-background, motifs: sci-fi-hud, tone: approachable-casual. - **Avoided overused patterns from frequency analysis:** Avoid card-grid, centered generic hero composition, warm gradient palettes, photography/minimal stock imagery, heavy parallax, staggered reveal clichés, mono-dominant typography, and authoritative corporate tone.