# Design Language for voting.wiki ## Aesthetics and Tone voting.wiki channels the raw, confrontational energy of urban walls covered in wheat-paste posters and spray-painted slogans about democracy. The graffiti aesthetic is not decorative — it is political. Every surface of this site looks like it was claimed by someone who had something urgent to say about the mechanics of collective decision-making. Concrete textures serve as the canvas: pitted, stained, with visible seams where slabs meet. Over this foundation, content appears as if stenciled, tagged, or slapped up with paste, each section a different voice shouting into the same public square. The tone is bold-confident — not polished corporate confidence, but the swagger of someone who spray-painted "YOUR VOTE IS MATH" on a freeway overpass at 3am. There is zero hedging, zero softness. Statements land like thrown cans of paint. The overall mood sits at the intersection of Banksy's political directness, Jenny Holzer's text installations projected on buildings, and the typographic chaos of 1970s punk zine layouts — but filtered through a digital glitch sensibility that acknowledges how voting systems live in code now, not just paper. Color bleeds at the edges. Text shifts slightly between frames, as if the registration is off. Nothing is pristine — the imperfection is the message. Democracy is messy, contested, alive. ## Layout Motifs and Structure The layout uses a **modular-blocks** system — a grid of irregularly-sized rectangular blocks that tile the viewport like wheat-paste posters plastered over each other on a construction site hoarding. No block aligns perfectly with its neighbor. The grid operates on a 12-column CSS grid with items spanning 3-7 columns and 2-5 rows, with deliberate 2-4px gaps that reveal the concrete texture beneath. **Primary Composition:** - **The Wall (Hero):** Full-viewport concrete texture. The domain "voting.wiki" appears as a massive stencil spray — letters 30vw tall, with paint drip animations running down from the letterforms. Below the stencil, smaller tags accumulate: "ranked choice," "plurality," "approval," "condorcet" — each in a different hand, overlapping, fighting for wall space. Scrolling causes the camera to pan downward along the wall. - **The Blocks Zone:** Content modules appear as rectangular patches — some look like torn paper posters pasted to the wall, others like stenciled rectangles with clean edges. Each block has a slight random rotation (between -1.5deg and +1.5deg via CSS transform) and a subtle drop shadow that gives depth against the wall. Blocks contain voting method explanations, comparison tables rendered as hand-drawn grids, and interactive ballot simulations. - **The Glitch Seams:** Between major sections, horizontal bands of digital glitch artifacts stretch across the viewport — scanlines, color-channel separation, pixel displacement — as if the concrete wall is also a screen that occasionally malfunctions. These seams are 40-80px tall and use CSS `mix-blend-mode: difference` against the background. - **The Stencil Footer:** The bottom of the wall features a long horizontal stencil reading "EVERY SYSTEM HAS A BIAS" in block capitals, partially obscured by newer tags layered on top of it. No traditional navigation bar. Instead, a floating spray-can icon in the top-right corner opens a radial menu of section links, each link styled as a dripping tag. ## Typography and Palette **Typography:** - **Headlines / Stencils:** "Share Tech Mono" (Google Fonts) — a monospace typeface with the mechanical, utilitarian feel of stencil lettering used on military crates and protest signs. Applied at weights 400, with heavy letter-spacing (+0.08em) and sizes from 2rem to 8rem. All headlines are `text-transform: uppercase`. For the hero stencil effect, letters have CSS `clip-path` cuts that simulate stencil bridges (the connecting strips that keep enclosed counter shapes like O, A, D intact). - **Body / Poster Text:** "Space Mono" (Google Fonts) — a monospace face with geometric quirks that reads well at paragraph length. Used at 400 weight, 1rem base size, 1.65 line-height. Body text appears inside the poster-block modules with generous padding (2rem). - **Tags / Annotations:** "Permanent Marker" (Google Fonts) — a hand-drawn marker script that contrasts sharply with the monospace system. Used sparingly for marginal annotations, callouts, and the scattered tag elements on the wall. Sizes 0.875rem to 1.5rem. This is the "human hand" breaking through the mechanical grid. **Palette (Duotone Core):** The site operates on a strict duotone of hot signal red and raw concrete gray, with black for text and white for knock-out areas. | Role | Color | Hex | |------|-------|-----| | Signal Red (primary action, stencils, emphasis) | Hot Red | `#E63946` | | Concrete Dark (background, wall texture) | Charcoal Concrete | `#2B2D31` | | Concrete Light (secondary surfaces, block fills) | Ash Gray | `#8D8D8D` | | Knock-out White (text on dark, poster paper) | Raw White | `#F1F1E6` | | Ink Black (body text, outlines) | Soot Black | `#0D0D0D` | | Glitch Cyan (channel-shift artifact color) | Shift Cyan | `#00F5D4` | The duotone effect is enforced: imagery and decorative elements use only red and grayscale. The cyan appears exclusively in glitch seam transitions and hover states, creating a jarring digital intrusion into the analog wall aesthetic. When a block is hovered, its red elements briefly channel-shift — the red layer offsets 3px right and a cyan ghost appears 3px left, simulating CMYK misregistration. ## Imagery and Motifs **Hand-Drawn Visual System:** All illustrations are rendered in a hand-drawn, marker-on-paper style — rough, immediate, unapologetic. No stock photography. No polished vector art. Every visual looks like it was sketched on the back of a ballot with a thick Sharpie. - **Ballot Sketches:** Hand-drawn ballots with checkmarks, X marks, and ranked numbers. These appear as background decorations in poster blocks, rotated at slight angles, with visible paper edges as if torn from a notebook. Rendered as inline SVGs with `stroke-dasharray` animation so they appear to be drawn in real-time on scroll. - **Diagram Doodles:** Voting system diagrams (preference flows, elimination rounds, winner circles) drawn in the rough annotation style of whiteboard math — arrows that curve imperfectly, circles that don't quite close, text labels in "Permanent Marker" font. These are the core educational visuals. - **Spray Texture Overlays:** Grain and spatter textures applied via CSS `background-image` using radial gradients with randomized `background-position` to simulate overspray. Applied at 5-15% opacity over poster blocks. - **Stencil Cutout Icons:** Navigation and section icons are built as stencil cutouts — simplified shapes with the characteristic bridge gaps. A ballot box, a raised fist, a bar chart, a circular arrow (for ranked choice). All monochrome red on concrete. **Motifs (Tech-Infused):** The tech motif manifests as digital artifacts intruding on the analog wall: - Binary strings (`01100101`) running vertically along block edges at 8% opacity in Share Tech Mono, 10px size - QR-code-like square patterns in block corners, purely decorative, built from CSS grid of tiny squares - Scanline overlays (1px repeating horizontal lines at 3% opacity) across the entire viewport, giving a subtle CRT monitor feel - Cursor blinking animations on certain text blocks, as if the stencil is also a terminal prompt ## Prompts for Implementation **Full-Screen Narrative Experience:** The site is a single continuous vertical scroll down an infinite wall. There are no page transitions, no route changes — just one long descent through layers of accumulated democratic graffiti. 1. **The Stencil Drop (0-100vh):** The viewport opens on dark concrete. After 400ms, the hero stencil of "voting.wiki" slams in from above with a spring-physics animation (slight overshoot, settle). Paint drips begin animating downward from letterforms using CSS `@keyframes` with randomized delays per drip (200-800ms stagger). Scattered tags ("ranked choice," "approval," "STAR") fade in at random positions around the stencil over 1.5 seconds with staggered timing. 2. **The First Poster (100vh-200vh):** On scroll, the first content block slides in from the left with a `translateX(-100%)` to `translateX(0)` animation triggered at 80vh scroll position. It looks like a torn paper poster: white background (`#F1F1E6`), slight rotation (-1.2deg), rough `clip-path` edges simulating torn paper (using polygon with micro-random vertices). Content: "What is a voting system?" with hand-drawn ballot illustration animating its strokes. 3. **The Comparison Wall (200vh-400vh):** Multiple blocks tile in using a stagger animation (each block enters 150ms after the previous). This section is the densest — 6-8 blocks of varying sizes comparing voting methods. Each block is a different "poster" with distinct visual treatment: one is red stencil on concrete, another is white paper with black ink, another is an inverted block (red background, white text). Glitch seam dividers appear between sub-sections. 4. **The Interactive Ballot (400vh-500vh):** A full-viewport interactive module where users can drag-and-rank candidates. The ballot is styled as a hand-drawn form on aged paper. Drag interactions use spring physics. When a ranking is submitted, the result animates as a spray-paint stencil appearing on the wall beside the ballot — the winning candidate's name expanding from center with a scale + opacity animation. 5. **The Final Tag (500vh+):** The wall fades darker. A single line appears, stenciled small: "democracy is a technology." Below it, the glitch seam expands to full viewport, consuming the concrete, transitioning to pure digital — scanlines, color shifts, pixel noise — before resolving to a simple centered "voting.wiki" in Share Tech Mono on black. **Animation Principles:** - All scroll-triggered animations use `IntersectionObserver` with `threshold: 0.2` - Spring physics: `transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1)` for overshoot effects - Glitch effects use `@keyframes` with rapid `translateX` and `background-position` shifts over 100-200ms durations, triggered on hover or at glitch seam scroll positions - Paint drip animations: `@keyframes` moving a gradient stripe downward with `ease-in` timing to simulate gravity - Stagger delays calculated as `index * 150ms` for block entry sequences **AVOID:** - CTA-heavy layouts — this is an informational wall, not a sales funnel - Pricing blocks — voting systems are public knowledge, not products - Stat-grids — data is presented as hand-drawn diagrams, not dashboard widgets - Smooth corporate transitions — everything should feel abrupt, physical, claimed **Technical Notes:** - Concrete texture: CSS `background-image` using layered `radial-gradient` and `noise` filter (SVG `feTurbulence` element applied as background) - Torn paper edges: `clip-path: polygon()` with randomized vertex offsets generated per block - Stencil bridge effect on headlines: `clip-path` rectangles cutting through enclosed letterforms, or overlay white rectangles positioned manually for key letters - All glitch channel-shift effects via CSS `filter: drop-shadow()` with offset colored shadows, no canvas required ## Uniqueness Notes **Differentiators from other designs:** 1. **Concrete-wall-as-canvas spatial metaphor:** The entire site exists on a single continuous concrete wall. Unlike card-based or section-based layouts, content is physically "applied" to the wall surface through different methods (spray stencil, wheat-paste poster, marker tag), creating a spatial hierarchy based on application method rather than grid position. No other design in the portfolio uses a unified physical surface as its structural metaphor. 2. **Analog-digital collision through glitch seams:** The site maintains two contradictory visual registers simultaneously — the physical, textural world of concrete and spray paint, and the digital world of scanlines and channel shifts. These registers collide at specific scroll positions (the glitch seams), creating a visual argument that voting is both an ancient physical act and a modern computational problem. This thematic tension between analog and digital is unique to this design. 3. **Stencil typography as functional and decorative system:** The stencil bridge effect on headlines is not just decorative — it enforces a specific typographic constraint (no enclosed counters) that shapes how language appears. This self-imposed limitation produces a distinctive visual voice. Combined with the "Permanent Marker" hand tags as counterpoint, the typography system operates as a two-voice dialogue between institutional stencil and individual hand, mirroring the tension between voting systems (institutional) and individual votes. 4. **Duotone palette with singular glitch accent:** While 7% of designs use duotone palettes, this design's strict red-and-gray duotone with a single alien-frequency cyan accent appearing only in glitch states creates a color system with clear narrative meaning — red is the human signal, gray is the infrastructure, cyan is the digital ghost haunting the process. 5. **Zero-photography hand-drawn-only imagery:** Every visual element is either drawn in marker style or generated through CSS texture. The commitment to hand-drawn imagery across the entire site — ballots, diagrams, icons, annotations — creates visual coherence while reinforcing the "made by hand, decided by hand" thematic resonance of voting itself. **Chosen Seed/Style:** `aesthetic: graffiti, layout: modular-blocks, typography: mono, palette: duotone, patterns: glitch, imagery: hand-drawn, motifs: tech, tone: bold-confident` **Avoided overused patterns from frequency analysis:** - Avoided `playful` aesthetic (95% frequency) — used `graffiti` instead (4%) - Avoided `centered` layout (99%) — used `modular-blocks` (6%) - Avoided `warm` palette (100%) — used `duotone` (7%) - Avoided `friendly` tone (99%) — used `bold-confident` (4%) - Avoided `minimal` imagery (95%) — used `hand-drawn` (rare) - Avoided `vintage` motifs (89%) — used `tech` (24%) - Avoided `scroll-triggered` as sole pattern — used `glitch` as primary pattern identity - Mono typography (99%) is from the assigned seed but given distinctive character through stencil-bridge effects and the Permanent Marker counterpoint voice