# Design Language for voting.wiki ## Aesthetics and Tone voting.wiki is a living reference for how humanity makes collective decisions — ranked-choice, approval, Condorcet, sortition, quadratic voting, the whole strange zoo of mechanisms. The design treats this as **civic cartography**: less encyclopedia, more election-night situation room rendered with the restraint of a Swiss railway timetable. The mood is *clear, exacting, quietly serious* — the visual equivalent of a returning officer's calm voice reading results at 3 a.m. We reject the warm, gradient-soaked, hand-drawn norm entirely. This is cool, ink-on-newsprint, high-contrast, almost forensic. Think the International Typographic Style crossed with a polling-place: gridded ballot papers, tally marks, the rigid geometry of voting booths, the procedural beauty of a count being audited. Color is used the way a ballot uses it — sparingly, functionally, to mark and to mean. Whitespace is not "airy"; it is *negative tabulation space*, the empty cells of a results matrix waiting to be filled. The tone is scholarly-intellectual but never stuffy: footnoted, cross-referenced, with the dry wit of a psephologist who has seen every way an election can go wrong. Authoritative without being corporate — this is a commons, not a product. ## Layout Motifs and Structure **The Ballot Grid** — a strict 12-column modular grid where columns are visibly delineated by thin hairlines (1px, #C7C9CE), like the ruled boxes on a paper ballot. Content blocks snap to these columns with no rounded corners anywhere. The grid is *shown*, not hidden — column rules bleed faintly into the margins. **Tabulation rows** — major sections are structured as horizontal "rows of a count": a left rail with a method name set in mono, a wide central column of explanation, and a right rail of metadata (year proposed, jurisdictions using it, related methods) set as a tidy definition list. Reading the page feels like scanning down a results sheet. **The Tally Margin** — a persistent left margin (≈64px on desktop) that accumulates tally marks (⊦⊦⊦⊦) as the reader scrolls, a literal progress meter drawn in the gutter. On section anchors it resolves into a Roman-numeral chapter marker. **Single-column long-form core, matrix asides** — body text holds a disciplined ~62ch measure. Comparison data appears as genuine bordered tables (the "pairwise matrix" motif): square cells, mono figures, diagonal hatching on the self-comparison cells. **No hero-dominant splash.** The landing opens on a full-bleed *animated tally board* — a split-flap / vestaboard-style departures display where the "destinations" are voting methods and the "times" are one-line definitions, flipping into place. Below it, the grid begins immediately. No CTA band, no pricing, no stat-grid of vanity numbers. Footer is a literal *colophon block* — set like the legal boilerplate at the bottom of an official ballot: ruled box, justified mono, revision date, license, "this article last counted on…". ## Typography and Palette **Typefaces (all Google Fonts):** - **Headings & method names:** `Archivo` — a grotesque with industrial, almost stencilled bones; used in its heavier weights, tight tracking, occasionally in `Archivo Expanded` feeling via letter-spacing for section titles. Reads like signage in a counting hall. - **Body & long-form:** `Source Serif 4` — a sturdy, screen-tuned text serif with the bookish authority of a reference work; generous x-height keeps the dense psephology readable. - **Data, code, tally marks, ballot numbers, metadata rails:** `IBM Plex Mono` — the official, unromantic typeface of tabulation. All vote counts, percentages, formulas, and the tally-margin marks are set in it. - **Optional accent for pull-quotes / epigraphs:** `Spectral` italic — for the occasional cited line from Arrow, Condorcet, or a wry election anecdote. **Palette — "Ballot & Ink":** - `#13161B` — *Ballot Ink* (near-black, primary text, rules at full weight) - `#F4F2EC` — *Newsprint* (primary background, the warm-cool paper of an official document) - `#FFFFFF` — *Tally Card* (raised surfaces: the split-flap board, table cells, the colophon) - `#C7C9CE` — *Hairline Grey* (the visible grid rules, dividers, the empty-cell state) - `#1F4FD8` — *Returning-Officer Blue* (the single "marked" accent — current section, active links, the X in a checkbox, winning rows). Used like a marking pen: small, decisive, never as a fill across large areas. - `#B4341C` — *Spoilt-Ballot Red* (reserved strictly for "this method has a known pathology" callouts, eliminated candidates in walkthroughs, errata). Rare and meaningful. - `#5C6066` — *Margin Grey* (metadata, captions, the tally marks before they're "counted") Dark counterpart available as an *audit mode* toggle: `#0C0E12` ground, `#E6E4DD` ink, blue lifts to `#5B82FF`. ## Imagery and Motifs - **No photography. No stock images.** Everything is drawn from the grammar of voting paper. - **The checkbox** — an outlined square that the cursor can "mark" with a hand-drawn-feeling blue X (the only place a slightly imperfect line is allowed). Used as the link/hover indicator and the bullet for lists. - **Pairwise matrices** — rendered as real grids with diagonal hatch fill on the identity cells; the central recurring diagram motif. - **Split-flap board** — the homepage centrepiece; also reused small as a "did you know" rotator in the margin. - **Tally marks (⊦⊦⊦⊦ ⁄)** — accumulate in the gutter; a five-bar gate completes each major section. - **Sankey-thin flow lines** — for explaining ranked-choice elimination rounds: votes "transfer" along hairline blue paths between candidate boxes. Drawn with SVG, animated as a slow redistribution. - **Ballot serial numbers & perforations** — decorative micro-detail: section IDs styled like ballot stub numbers (`No. 0042-RCV`), occasional dashed "tear-here" perforation lines as section separators. - **The voting booth** — an abstract three-sided modesty-screen icon for "drafts / under discussion" content. - **Roman numerals & legend keys** — chapter markers and a persistent tiny "key" (like a map legend) explaining what blue, red, and hatching mean. - **Marginalia hands (☞)** — old printer's index symbols pointing to cross-references, set in Margin Grey. ## Prompts for Implementation - **Build the homepage as a narrative count, not a sales page.** Full-viewport split-flap "tally board": a grid of rows, each row a `
` of flap-segments that animate (CSS `transform: rotateX`, staggered per character, ~30ms steps) to spell out a voting method and its one-line gloss. On load, the board "tabulates" itself row by row. Hovering a row gently highlights it in Returning-Officer Blue and reveals a "→ read the count" marginalia hand. Respect a single, restrained reveal — no parallax circus. - **Make the grid visible.** Render the 12 hairline column rules as a fixed background layer (`#C7C9CE`, 1px, very low opacity in body regions, full opacity in the margins). Everything aligns to it. Zero `border-radius` site-wide — squareness is the brand. - **The tally gutter is a scroll component.** A fixed left strip; as the reader passes section boundaries, append an animated tally stroke (SVG path draw, ~250ms) until a five-bar gate completes, then it "resets" with the new Roman numeral fading in. This is the only scroll-progress affordance — no top bar. - **Ranked-choice walkthrough = the signature interaction.** An interactive module: candidate boxes in a column, hairline blue Sankey paths between rounds. A "Run the count" control steps through eliminations: the lowest box dims to Spoilt-Ballot Red, its inbound votes visibly *flow* along the paths to survivors (animate `stroke-dashoffset` + a small travelling dot), counters in IBM Plex Mono tick up (`requestAnimationFrame` count-up). Let the user scrub rounds back and forth. - **Pairwise matrix component.** A true `` styled with square `#C7C9CE` borders, mono figures, `::before` diagonal-hatch (repeating-linear-gradient) on identity cells, winning cells marked with a small blue ✓. Hovering a cell cross-highlights its row and column header in blue — like running a finger across a results sheet. - **Links behave like marking a ballot.** Inline links are underlined with a `#C7C9CE` rule that, on hover, gets a hand-drawn blue X stroked over a tiny checkbox glyph appended after the word (inline SVG, `stroke-dasharray` draw-in). Visited links keep a faint blue tick. - **Audit mode toggle** — a single discreet switch in the colophon that swaps to the dark `#0C0E12` palette; persist in `localStorage`. Frame it as "view the audit copy," not "dark mode." - **Typography discipline:** body in `Source Serif 4` at ~19px / 1.65, max ~62ch; all numerics, formulas, counts, IDs, and gutter marks in `IBM Plex Mono`; headings in `Archivo` 600–700 with tight tracking; section titles letter-spaced wide and uppercase. Footnotes are real footnotes — superscript blue numbers that smooth-scroll to a ruled notes block, with a return ☞ hand. - **Motion principle:** everything moves the way a count moves — *deliberate, tabular, verifiable*. Linear or gentle ease, 200–400ms, staggered in reading order. No bounce, no elastic, no magnetic cursor blobs, no tilt-3D. The split-flap and the vote-transfer flows are the *only* showy moments and they earn it by being literal. - **AVOID:** CTA-heavy layouts, pricing blocks, vanity stat-grids, glassmorphism, gradients-as-decoration, warm sunset palettes, hero with a giant headline + button, rounded cards, drop-shadow soup, cursor-follow particles, parallax storytelling scenery. ## Uniqueness Notes - **Differentiator 1 — Cool, square, ink-on-newsprint Swiss procedural look** in a corpus where 98% of palettes are "warm," 93% use decorative gradients, 94% lean hand-drawn, and 85% reach for glassmorphism. Zero border-radius, visible grid hairlines, no photography — a deliberate counter-current. - **Differentiator 2 — The split-flap "tally board" homepage** instead of a hero-with-CTA: a literal departures-board of voting methods that tabulates itself on load. No other site uses an animated vestaboard as its primary surface, and it ties form to subject perfectly. - **Differentiator 3 — The scroll-driven tally gutter** (accumulating five-bar gates + Roman numerals) replacing the usual top progress bar — a navigation affordance drawn from the literal act of counting votes. - **Differentiator 4 — The interactive ranked-choice / Sankey vote-transfer walkthrough and the diagonal-hatched pairwise matrix** as the recurring signature components: real tables and real flow diagrams, not stat-grids or bento boxes (bento is 17%, card-grid 93% — we use neither). - **Differentiator 5 — Links as ballot-marking** (checkbox + hand-drawn blue X) and "audit mode" framing for dark theme: subject-matter metaphor pushed into every micro-interaction rather than generic hover-lift (we avoid the 89% cursor-follow, 87% parallax, 83% spring, 77% magnetic patterns from the frequency analysis). - **Chosen seed/style:** `swiss typography clean` (from seeds.json) — reinterpreted as electoral/civic procedural design; "swiss" appears in only ~6% of designs, here pushed hard with visible grids, IBM Plex Mono tabulation, and a strict modular structure rather than the usual soft-minimalist take.