# Design Language for voting.wiki ## Aesthetics and Tone voting.wiki channels dopamine design principles into a civic knowledge repository -- the addictive, reward-driven visual language of gamified apps applied to the serious business of democratic participation. Chrome-metallic surfaces shimmer with achievement, slide-reveal animations create the satisfaction of unlocking new information, and the leather-texture backgrounds ground the digital experience in the gravitas of historical voting chambers. The tone is raw and authentic -- unvarnished truth about voting systems delivered through an interface that makes learning genuinely exciting. Think of Duolingo's dopamine loops applied to a Congressional Research Service report. Inspiration from slot machine interfaces (the mechanics of engagement), vintage leather-bound parliamentary records, and the metallic sheen of ballot boxes. ## Layout Motifs and Structure A **minimal-navigation** layout that reduces chrome to near-zero, letting content fill the viewport with maximum impact -- because in voting, every choice should command full attention. **Primary structure:** - **Ballot box hero (100vh):** A chrome-metallic gradient background (linear-gradient: #2a2a30, #3a3a44, #2a2a30) with a centered leather-textured panel (CSS noise pattern in brown tones). Inside: "VOTING.WIKI" in garamond-classic type, with a thin metallic border. Below: a slide-reveal animation introduces the subtitle: "Everything you need to know about how we choose." - **Knowledge slides:** Content organized as full-width sections that reveal via horizontal slide-in (translateX(100%) to translateX(0)) as the user scrolls. Each section covers a voting topic. Left edge: a thin chrome stripe (4px, metallic gradient). Right edge: a leather-textured sidebar (60px wide, decorative only). - **Sharp-angle section transitions:** Sections are separated by diagonal CSS clip-paths (polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%)) creating sharp angular transitions between topics. - **Achievement footer:** A horizontal strip of circular metallic badges (chrome gradient fills) representing topics the user has scrolled through -- visual "achievements" for learning. **Spatial relationships:** Content sections are full-width with internal padding of clamp(32px, 6vw, 80px). Text columns max-width: 720px, left-aligned within the padded space. The leather sidebar and chrome stripe frame the content like a book binding. ## Typography and Palette **Fonts:** - **Display/Headlines:** "EB Garamond" (Google Fonts) -- a refined Garamond revival with crisp rendering, used at clamp(32px, 5vw, 64px). Weight 700. The classical authority of Garamond-style type conveys democratic tradition and institutional weight. - **Body text:** "Lato" (Google Fonts) -- a warm humanist sans-serif at 17px/1.75 line-height. Weight 400 for body, 700 for emphasis. The warmth of Lato makes dense civic content approachable. - **Data/Labels:** "Noto Sans Mono" (Google Fonts) -- monospace for statistics, voting tallies, and data labels at 14px. Weight 400. Clean numeral rendering is critical for voting data accuracy. **Color Palette:** - **Chrome dark:** #2a2a30 (metallic dark gray) - **Chrome mid:** #4a4a54 (medium metallic for surfaces) - **Chrome highlight:** #8a8a98 (light metallic for borders, accents) - **Chrome bright:** #c0c0cc (bright metallic for hover states) - **Leather brown:** #5a4030 (warm brown for leather textures) - **Leather light:** #8a7060 (lighter leather for backgrounds) - **Text white:** #eeeef0 (cool white for text on dark) - **Dopamine gold:** #d4a830 (achievement gold for badges, highlights) ## Imagery and Motifs **Core visual motifs:** - **Leather texture backgrounds:** CSS-generated leather texture using layered noise (SVG feTurbulence filter with baseFrequency="0.65" numOctaves="3") in brown tones, applied to decorative sidebar and certain section backgrounds. Creates tactile, parliamentary gravitas. - **Sharp-angle transitions:** Diagonal clip-paths on section boundaries create dynamic, forward-moving transitions. The angles (consistently 5-8 degrees from horizontal) suggest progress and direction -- appropriate for a voting context. - **Slide-reveal content animations:** Content sections enter from the right (translateX: 100% to 0) over 600ms with ease-out timing. Triggered by Intersection Observer. The slide direction is always left-to-right, suggesting forward progress through knowledge. - **Chrome metallic badges:** Small circular elements (40px diameter) with radial-gradient (white highlight at 30% 30%, chrome gradient body) creating a metallic badge effect. Used in footer as "achievement" indicators and inline as decorative elements. ## Prompts for Implementation **Dopamine-driven civic knowledge:** The site should make learning about voting addictive. Every scroll should feel like an achievement. The chrome and leather surfaces should feel substantial and valuable -- like handling a well-made ballot box. **Slide-reveal implementation:** - Sections start with opacity: 0; transform: translateX(100px); - Intersection Observer triggers: opacity: 1; transform: translateX(0); transition: 600ms ease-out; - Sequential sections have 100ms stagger delay. **Leather texture CSS:** - Apply via SVG filter: - Apply as background-image: url("data:image/svg+xml,...") with background-blend-mode: multiply over base leather-brown. **Chrome gradient badges:** - background: radial-gradient(circle at 35% 35%, #e0e0ea, #8a8a98 40%, #5a5a64 80%); - border-radius: 50%; width: 40px; height: 40px; **Sharp-angle clip-path:** - clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%); - Next section: clip-path: polygon(0 40px, 100% 0, 100% 100%, 0 100%) to interlock. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids (ironic for voting data, but present data narratively instead), generic card layouts. ## Uniqueness Notes **Differentiators from other designs:** 1. **Dopamine-gamification applied to civic education:** No other design uses achievement badges, slide-reveal "unlocks," and metallic reward aesthetics specifically for educational content about democratic processes. 2. **Leather + chrome dual-material aesthetic:** The combination of warm leather textures (parliamentary gravitas) with cold chrome metallics (modern precision) creates a material duality unique among all designs. 3. **Sharp-angle interlocking section transitions:** Diagonal clip-paths that interlock between adjacent sections (one section's bottom angle matching the next section's top angle) create a seamless, aggressive visual flow not replicated elsewhere. **Chosen seed/style:** aesthetic: dopamine, layout: minimal-navigation, typography: garamond-classic, palette: chrome-metallic, patterns: slide-reveal, imagery: leather-texture, motifs: sharp-angles, tone: raw-authentic **Avoided overused patterns:** photography imagery (90%), centered layout (98%), card-grid layout (96%), warm palette (94%), parallax patterns (99%), mono typography (81%), mysterious-moody tone (70%).