# Design Language for voting.wiki ## Aesthetics and Tone voting.wiki is a **field guide to democracy** — a researcher's cabinet of curiosities where voting systems are catalogued like rare plant specimens: each one pinned, labeled, cross-referenced, and displayed against a stark museum board with hard black borders. The aesthetic is **raw neubrutalism cut through with art-deco ornament**: thick 3px black outlines snap every grid card into a hard-edged frame, but inside each frame a botanical illustration — drawn in the style of a 19th-century naturalist's codex — wraps an electoral system the way a botanical plate wraps a genus. Plurality voting blooms as a sunflower. Ranked-choice voting spirals like a fern crozier. Proportional representation fans out as overlapping leaves. The tone is **rigorously minimal**: no hero copy, no marketing superlatives, no stat-grids, no CTAs. The page reads the way a field guide reads — index, entry, specimen. The visitor is a naturalist cataloguing systems, not a consumer being sold one. Electricity runs through the system as neon accents: `#00FF88` electric green and `#FF0066` hot fuchsia mark active selections, hover states, and the thin skeleton-loader bars that animate while entries load. This neon on black-bordered cream cards creates the visual tension that makes neubrutalism feel alive — a Victorian botanical plate with a live wire running through it. The mood references: the typographic severity of Wim Crouwel's grid systems, the botanical plates of Ernst Haeckel's *Kunstformen der Natur*, and the electric poster work of Toulouse-Lautrec where art-nouveau ornament collides with flat saturated color. ## Layout Motifs and Structure The page is a **portfolio-grid of specimen cards** — a strict 3-column grid on desktop (2 on tablet, 1 on mobile) where each card is one voting system. The grid is **not centered, not full-bleed, not asymmetric**: it is a museum wall of pinned specimens, equally spaced, framed in black, arranged in taxonomic order. **Grid mechanics:** - 3-column CSS grid, `repeat(3, 1fr)`, gap `24px`, max-width `1280px`, left-aligned (not centered), with a deliberate `80px` left margin on desktop that evokes a museum aisle. - Each card: `border: 3px solid #0A0A0A`, `background: #FAFAF0` (aged parchment), `box-shadow: 6px 6px 0 #0A0A0A` (neubrutalist offset drop shadow — no blur, no spread). - Cards do NOT have rounded corners. Zero border-radius. Hard corners only. - On hover: card translates `(-3px, -3px)`, shadow expands to `9px 9px 0 #00FF88`. The neon shadow snaps in — no ease, `transition: all 0.1s steps(1)`. **Page skeleton (top to bottom):** 1. **Masthead strip** (`80px` tall, `border-bottom: 3px solid #0A0A0A`): site name in `Playfair Display` display-xl, all-caps, tracking 0.15em, left-aligned. No hamburger menus. A single horizontal rule ornament (art-deco chevron repeat drawn in SVG, `#00FF88`, 1px) runs the full width below the type. 2. **Taxonomy navigation rail** (`48px` tall, below masthead): horizontal list of system families — PLURALITY · RANKED · PROPORTIONAL · MIXED · APPROVAL · LIQUID. Each label in `Space Mono` 11px all-caps, `letter-spacing: 0.2em`. The active family is marked with a `3px solid #FF0066` underline and the label shifts `#FF0066`. No background pill, no rounded tabs. 3. **Specimen grid**: the card grid. Fills the remaining viewport. Vertically scrollable. 4. **Footer specimen** (`border-top: 3px solid #0A0A0A`): attribution in `Space Mono` 11px, one line, left-aligned. **Card anatomy (each specimen):** - Top 60% of card: the botanical illustration. SVG or inline illustration rendered at `100%` card width, `aspect-ratio: 4/3`, `object-fit: cover`. No photograph. - A `2px solid #0A0A0A` horizontal rule separates illustration from text zone. - System name: `Playfair Display` bold, 22px, `#0A0A0A`, one line. Below it: system family tag in `Space Mono` 10px, `#FF0066`, all-caps. - Three-line description in `Space Grotesk` 13px, `#3D3D2E`, `line-height: 1.6`. - Bottom row: a thin `skeleton-loading` bar (`height: 4px`, `border-radius: 0`, background alternates `#00FF88` and `#0A0A0A` in a CSS animation) that acts as a "detail loading" indicator — it resolves when the card is clicked to expand. The skeleton bar is always visible at rest as a static `#E8E8DC` placeholder; it animates to neon green when hovered. **Floating elements:** - Three detached botanical motifs (`position: fixed`, `pointer-events: none`, `z-index: 0`, `opacity: 0.07`) float behind the entire page: a pressed leaf in the upper-right corner, a small sprig in the lower-left, and a spiraling fern frond center-right. These are SVG line-drawings at `240px` wide, rendered in `#0A0A0A`. They do not scroll — they are fixed to the viewport and act as watermarks, giving the page the quality of old specimen paper printed on botanical stationery. - As the user scrolls, the three floating motifs `translate` very slowly on the Y axis at 20% scroll-parallax rate (`transform: translateY(calc(var(--scroll-y) * 0.2))`), breaking the fixed-plane slightly without dissolving the museum-wall illusion. ## Typography and Palette **Typography — art-deco-display system, all from Google Fonts:** - **Display / Masthead:** [Playfair Display](https://fonts.google.com/specimen/Playfair+Display) — weight 700 for the site name, weight 400 italic for the expanded card heading when clicked. Playfair's high-contrast stroke modulation reads as art-deco at large sizes without needing explicit geometric ornament. Used at 48px (masthead), 22px (card title), 36px (expanded panel heading). - **Mono / Labels / Navigation:** [Space Mono](https://fonts.google.com/specimen/Space+Mono) — weight 400 and 700. All taxonomy labels, card family tags, the skeleton-bar annotation text, and footer. 10–13px. The monospaced rigidity reinforces the field-guide classification register. - **Body / Description:** [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk) — weight 400 and 500. Card description text, expanded panel body copy. 13–15px, `line-height: 1.65`. Chosen because it shares the squared-off geometry of Space Mono but has proportional spacing for comfortable reading. **Palette — neon-electric on parchment, 6 tokens:** | Token | Hex | Use | |---|---|---| | `--ink` | `#0A0A0A` | Borders, card shadows, body text, outlines | | `--parchment` | `#FAFAF0` | Card background, page background | | `--neon-green` | `#00FF88` | Active skeleton-bar, hover shadow, art-deco rule ornament | | `--neon-fuchsia` | `#FF0066` | Active taxonomy tab underline, card family tag | | `--fern` | `#3D6B47` | Botanical illustration primary fill color | | `--ochre` | `#C8920A` | Botanical illustration secondary accent, pressed-flower sepia detail | The palette is intentionally high-contrast and restricted. The two neons `#00FF88` and `#FF0066` are never used simultaneously in the same element — they appear in different zones of the page, preventing visual collision. The `#FAFAF0` parchment ground prevents the neons from reading as garish; they read instead as annotation marks in a field guide, the way a researcher might mark up a specimen entry in highlighter. ## Imagery and Motifs **Imagery is exclusively botanical illustration in the style of 19th-century naturalist codices** — no photography, no icons, no abstract shapes. Every voting system receives one dedicated SVG botanical plate, drawn at `800 × 600` viewBox with: - `stroke: #0A0A0A`, `stroke-width: 1.25`, no fill except `--fern` and `--ochre` for plant bodies. - Cross-hatching technique (thin parallel `` elements at 45°) for shadow zones, referencing copper-plate engraving. - A plate number in the lower-right corner of each illustration in `Space Mono` 9px: `Pl. I`, `Pl. II`, etc. - Each system's botanical metaphor is structurally motivated: - **Plurality / First-Past-the-Post:** A single sunflower, one dominant bloom, smaller flowers behind it all smaller. Metaphor: winner-takes-all. - **Ranked-Choice / IRV:** A fern frond, each pinnule ranked in size top-to-bottom. The elimination of lower-ranked candidates visualized as dried/fallen pinnules. - **Proportional Representation:** A spray of mixed wildflowers, each species proportional in number to a party's vote share. Species variety = representation variety. - **Mixed-Member Proportional:** Two entangled climbing plants, one vigorous (constituency vine) one delicate (list plant), growing together. - **Approval Voting:** A grid of pressed flowers, multiple specimens approved by a single collector's mark (a small `✓` pen mark in `#FF0066` at each approved specimen). - **Liquid Democracy:** A water lily with root tendrils extending from one pad to many others beneath the waterline. Delegation visualized as root-connection. **Decorative motifs and ornament:** - The art-deco rule below the masthead: a repeating SVG chevron `>>>>>` in `#00FF88`, 1px stroke, full width. 12px tall. - Card corner ornaments: in the top-left corner of each card frame, a tiny SVG crosshair `+` at `8px × 8px`, `stroke: #0A0A0A 1px`, referencing botanical specimen pinning. - The taxonomy nav dots: between each taxonomy label, a `·` middle-dot in `Space Mono`, `#C8920A` (ochre), 14px. Mimics museum catalog index punctuation. ## Prompts for Implementation Build voting.wiki as **a single-page specimen catalogue** — one scrollable grid of botanical cards, one expanded card panel (slides in from right as a drawer), no page transitions, no routes. The storytelling is in the illustration-to-system metaphor pairing, not in text hierarchy. **Skeleton loading behavior (the key interaction pattern):** Each card renders its text content instantly but shows the botanical illustration as a `skeleton-loading` state — the illustration area is a `#E8E8DC` rectangle with a shimmering CSS animation (`background: linear-gradient(90deg, #E8E8DC 25%, #D4D4C8 50%, #E8E8DC 75%)`, `background-size: 200% 100%`, `animation: shimmer 1.2s infinite linear`). When the SVG illustration is "loaded" (a short `setTimeout(800)` fake-load or `IntersectionObserver` trigger), the skeleton dissolves with a `clip-path: inset(0 100% 0 0)` wipe from left to right (0.4s ease-in), revealing the botanical plate underneath. This wipe is the page's hero animation — not a splash screen, not a hero video, but 12 small illustrations wiping into view as the user loads and scrolls. **Neon interaction layer:** - `hover` on any card: `transform: translate(-3px, -3px)`, `box-shadow: 9px 9px 0 #00FF88`. Duration `0.1s steps(1)` (snap, not ease). - `active` / `mousedown` on any card: `transform: translate(2px, 2px)`, `box-shadow: 4px 4px 0 #00FF88`. Mimics physical button press. - Skeleton bar at card bottom: on hover, transitions from static `#E8E8DC` to animating neon green shimmer. Visual cue that the card is interactive. **Expanded card drawer:** When a card is clicked, a drawer slides in from the right edge (`transform: translateX(100%)` → `translateX(0)`, `transition: 0.25s ease-out`, `width: 480px`, `border-left: 3px solid #0A0A0A`). The drawer shows: full botanical plate at top (800×600 viewBox scaled to full drawer width), then the system name in `Playfair Display` 36px italic, then 3–5 paragraphs in `Space Grotesk` 15px describing how the system works. A `×` close button in `Space Mono` 24px at the top-right of the drawer, `color: #FF0066`. **Floating botanical watermarks:** - Three SVGs: pressed leaf (upper-right, `240px`), sprig (lower-left, `180px`), fern frond (center-right, `200px`). - `position: fixed`, `opacity: 0.07`, `pointer-events: none`, `z-index: 0`. - Scroll-parallax via `window.addEventListener('scroll', ...)` updating a `--scroll-y` CSS variable. - `transform: translateY(calc(var(--scroll-y) * 0.2))`. **Typography implementation:** - Google Fonts import: `Playfair+Display:ital,wght@0,700;1,400` + `Space+Mono:wght@400;700` + `Space+Grotesk:wght@400;500`. - No variable fonts. Load only the weights actually used. - `font-feature-settings: "liga" 1, "kern" 1` on `Playfair Display` display usage. - `letter-spacing: 0.2em` on all `Space Mono` label usage. **AVOID:** - CTA buttons, pricing, testimonials, signup forms, stat-grids. - Any `border-radius` (zero throughout — neubrutalism demands hard corners). - Centered layout (left-aligned grid with `80px` left margin only). - Gradients in backgrounds (parchment is flat; neon is flat; no gradients outside the skeleton shimmer). - Drop shadows with blur (`box-shadow: Xpx Ypx 0 color` — always zero blur). ## Uniqueness Notes 1. **Neubrutalism at 1% corpus frequency, deliberately applied to an encyclopedic reference genre.** The frequency report shows neubrutalism at 1% — the rarest aesthetic in the corpus. Applying it to a wiki/reference domain (voting systems) creates the specific tension that makes this design legible: the hard borders and offset shadows of neubrutalism function as specimen frames, not as raw-arts-agency bravado. The museum-wall reading defeats the usual neubrutalist "aggressive startup" association. 2. **Botanical illustration as a structural metaphor, not decoration.** The corpus shows `botanical-illustration` at 3% and `floral-botanical` motifs at 4%. voting.wiki uses botanical plates not as surface decoration but as the primary information-carrying device — each electoral system receives a structurally motivated plant metaphor (winner-takes-all = single dominant sunflower; proportional = mixed-species spray; ranked = fern with ranked pinnules). The illustration *is* the explanation, not the background. 3. **Skeleton loading as the hero animation.** The corpus shows `skeleton-loading` at 3% and most implementations use it as a utilitarian state. Here it is the primary animation event: 12 skeleton rectangles wiping from left-to-right via `clip-path` to reveal botanical plates as the page loads and user scrolls. The shimmer→wipe sequence is the most visually dramatic moment on the page, replacing scroll-triggered hero sections or loading spinners. 4. **Neon-electric palette on parchment, not on dark background.** Nearly all neon/electric palette uses in the corpus (neon-glow at 3%, neon-electric at 2%) use neons on dark/black backgrounds. voting.wiki inverts this: `#00FF88` and `#FF0066` against `#FAFAF0` aged parchment, making the neons read as annotation marks (highlighter pen on paper) rather than glowing signs. This creates the field-guide register — a researcher who has marked up a Victorian specimen book with a modern highlighter. 5. **Art-deco-display typography deployed through contrast modulation alone, without geometric ornament.** `art-deco-display` appears at 5% in the corpus. Most implementations add explicit geometric deco ornaments (chevrons, stepped borders, fan shapes). voting.wiki achieves the art-deco register purely through `Playfair Display`'s high-contrast stroke modulation at display size — the thin-to-thick stroke ratio of the letterform does all the art-deco work, with only one geometric ornament (the chevron rule under the masthead) to anchor the reference without overcrowding. **Chosen seed:** aesthetic: neubrutalism, layout: portfolio-grid, typography: art-deco-display, palette: neon-electric, patterns: skeleton-loading, imagery: botanical-illustration, motifs: floating-elements, tone: minimal **Avoided patterns (high frequency):** centered layout (83%), full-bleed (63%), asymmetric (43%), gradient backgrounds (91%), warm palettes (97%).