# Design Language for political.wiki ## Aesthetics and Tone `political.wiki` is a **Scandinavian parliamentary reading room that became a coral reef overnight**. Imagine a Nordic civic hall — white birch wood panels, clean grid windows, indirect northern light — and then imagine that the whole building was submerged in warm tropical water, and small fluorescent fish now swim between the reading desks and data tables. The tension between cool institutional clarity and vibrant underwater life defines every visual decision. The tone is **optimistic-bright**: this is a wiki that believes democracy is fixable, that facts matter, and that presenting political information with joy rather than dread is a radical act. The palette refuses the grey-on-grey gravitas of traditional news design. Skeleton loading states pulse with warm light — information is *arriving*, not absent. Vector fish illustrations drift through whitespace as ambient companions rather than mascots. The Scandinavian functional substrate (sparse grid, negative space, typographic restraint) is the skeleton. The dopamine neon overlays — electric coral (#FF4E6A), bioluminescent teal (#00F5C4), golden citrus (#FFD23F) — are the reef. The fish move between the two registers, connecting structural data to living color. Every entry point communicates: this is information you can actually understand, and it was designed for you with care. ## Layout Motifs and Structure The site uses a **portfolio-grid architecture**: a masonry-adjacent 3-column grid at 1200px+ that breaks to 2 columns at 768px and single column below. Unlike typical portfolio grids, cells vary in weight by political significance — a landmark vote occupies a 2×2 mega-cell, a minor procedural note sits in a 1×1 cell. The grid breathes: 32px gutters, 24px inner padding, with cells that have rounded corners at 12px. **Grid logic:** - Column 1 (wide, 40%): Featured topic or deep-dive article — the "exhibit" cell - Column 2 (medium, 35%): Recent updates, timelines, related entities - Column 3 (narrow, 25%): Quick facts, sidebar data, fish-populated whitespace zones **Compositional rules:** - No cell touches another — the 32px gap is sacred, always visible - At scroll-in, cells arrive staggered (100ms offset per column) from a 16px upward translate - The grid sits on a warm off-white field (#FAFAF7), not pure white, evoking Nordic natural paper - Section headers float above the grid in oversized display type, functioning as architectural labels rather than navigation elements **Skeleton loading is structural:** Each cell has a skeleton state with three horizontal bars (85%/60%/40% widths) that pulse at 1.8s intervals with a shimmer moving left-to-right using the neon teal gradient. Skeletons are not grey — they use a warm #E8F5F2 base with a #00F5C4 shimmer overlay at 30% opacity, suggesting information that is luminous and arriving. ## Typography and Palette **Type system (all Google Fonts, verified):** - **Display headings — `Nunito`** (variable, wght 200–900). Used at 72px for page-level labels, weight 300, letter-spacing +0.04em. The softly rounded terminals echo the rounded grid corners and the organic shapes of vector fish. As viewport width narrows, fluid type scales from 72px to 40px using `clamp(40px, 6vw, 72px)`. - **Body and UI — `DM Sans`** (variable, wght 300–700). The workhorse: 16px body, 14px metadata, 13px labels. Clean and legible without being clinical. Line height 1.65 for long-form wiki text, 1.4 for data tables. - **Monospace / data tables — `JetBrains Mono`** (variable, wght 100–800). Vote tallies, percentages, dates in ISO format. Used at 13px, weight 400. The monospace precision contrasts pleasantly with the rounded display type. - **Pull quotes — `Playfair Display`** (wght 400, 700, italic). When a politician's statement is quoted in a featured cell, it appears in Playfair Display italic, size 22px, as an editorial break from the functional DM Sans prose. **Palette:** | Role | Name | Hex | |---|---|---| | Background field | Nordic Paper | #FAFAF7 | | Card surface | Birch White | #FFFFFF | | Card border | Fjord Mist | #E2EAE8 | | Primary accent | Coral Reef | #FF4E6A | | Secondary accent | Bioluminescent Teal | #00F5C4 | | Tertiary accent | Citrus Gold | #FFD23F | | Text primary | Charcoal Fjord | #1C2B2A | | Text secondary | Slate Birch | #5A6E6C | | Text muted | Driftwood | #8FA8A5 | | Skeleton base | Shallow Water | #E8F5F2 | | Skeleton shimmer | Neon Teal 30% | #00F5C4 at 30% opacity | | Interactive hover | Deep Coral | #E03050 | **Contrast and usage:** - Primary text (#1C2B2A) on card (#FFFFFF): 15.2:1 — exceeds requirements - Coral accent on paper background: used for active states, not sustained reading - Teal is the signal color: skeleton pulses, scroll-progress bars, active links - Gold is for verified / featured markers, vote-majority indicators ## Imagery and Motifs The site has **no photography**. The registry shows photography overused across many designs; political.wiki opts for a fully vector world. **Tropical fish vector illustrations:** A library of 8–12 distinct fish species, each drawn in a flat vector style with 2–3 fill layers and no outlines (shapes-only illustration). Fish are not cartoon — they are naturalistic silhouettes with simplified banding. Species include: - Clownfish (orange-white-black: #FF7B35 / #FFFFFF / #2A2A2A) — used in featured mega-cells - Blue tang (electric blue: #0066FF with teal edge #00F5C4) — used in timeline cells - Mandarin dragonet (teal-orange patterned: #00D4AA / #FF6B35) — appears in data cells - Moorish idol (black-white-yellow: #1A1A1A / #FFFBF0 / #FFD23F) — appears in sidebar quote cells - Lionfish (coral-white striped: #FF4E6A / #FFF8F5) — used rarely in "controversial topic" cells - Parrotfish (gradient teal-magenta: #00F5C4 → #FF4E6A) — appears in overview / landing cells **Fish behavior in CSS:** Each fish is an `` element with a CSS `@keyframes` path animation along a gentle sine-wave. Fish swim left-to-right at 18–28 second intervals, appearing from the left edge of whitespace zones and disappearing off the right. On `prefers-reduced-motion`, fish are stationary and positioned as decorative accents in the lower-right corner of cells. **Additional visual motifs:** - **Grid rule lines**: subtle 1px horizontal lines in #E2EAE8 at every 8px interval in whitespace zones, evoking graph paper and Nordic textile patterns - **Rounded data chips**: party affiliations, vote counts, dates — all appear in pill-shaped chips (border-radius: 100px) with category-specific accent fills - **Civic iconography**: minimal SVG icons for parliament (a simple dome), ballot (folded paper), person (single figure), and scale (justice) — all drawn at 24×24px, 1.5px stroke, color: Teal - **Wave separator**: between page sections, a gentle SVG wave path in #E8F5F2 (2px tall, full width) separates content regions like a tideline ## Prompts for Implementation Build this as a **full-screen immersive civic aquarium** — a place where political information lives in a warm, lit underwater world rather than a stark document repository. Every interaction should feel like gently disturbing water. **Structural narrative:** The page opens with a hero zone: full-viewport-width, #FAFAF7 background, a single centered `

` in Nunito 300 at 80px reading "political.wiki" — lowercase, unhurried. Beneath it, a subtitle in DM Sans 18px: "a civic encyclopedia made of light." Two fish drift past in the background SVG layer within 3 seconds of load, establishing the aquarium metaphor before the grid appears. **Grid reveal sequence:** After the hero, the portfolio grid enters with a staged animation: 1. The grid container fades in at opacity 0 → 1 over 400ms 2. Column 1 cells translate from `translateY(16px)` to `0` at 0ms delay 3. Column 2 cells translate from `translateY(16px)` to `0` at 100ms delay 4. Column 3 cells translate from `translateY(16px)` to `0` at 200ms delay 5. Each cell has `transition: transform 360ms cubic-bezier(0.34, 1.56, 0.64, 1)` — a subtle spring that overshoots by ~2px then settles, like a card landing on water **Skeleton loading:** Before data arrives, all grid cells show skeleton states: - Three shimmer bars per cell (widths: 85%, 60%, 40%) - Shimmer animation: `@keyframes shimmer { 0% { background-position: -200% 0 } 100% { background-position: 200% 0 } }` at 1.8s linear infinite - Gradient: `linear-gradient(90deg, #E8F5F2 25%, #B0EEE4 50%, #E8F5F2 75%)` - When data loads, skeleton fades out at opacity 0 over 200ms, then cell content fades in over 300ms — a two-step baton pass **Fish animation implementation:** ```css @keyframes swim-left-right { 0% { transform: translateX(-120px); opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { transform: translateX(calc(100vw + 120px)); opacity: 0; } } .fish { animation: swim-left-right 24s ease-in-out infinite; } .fish:nth-child(2) { animation-delay: -8s; animation-duration: 28s; } .fish:nth-child(3) { animation-delay: -16s; animation-duration: 20s; } ``` Fish swim in a dedicated `position: fixed; pointer-events: none; z-index: 0` layer behind the content grid, so they never obscure text. **Hover interactions:** - Card hover: `box-shadow: 0 8px 32px rgba(0, 245, 196, 0.15)` — a teal underwater glow, `transform: translateY(-3px)` at 200ms ease - Chip hover: background transitions from category-fill to Coral Reef (#FF4E6A) over 150ms - Links: underline is a 2px line in #00F5C4, not the text color; on hover the line width animates from current width to 0 and redraws from left at 200ms **Color mode:** The site is light-mode-only. No dark mode. The aquarium metaphor depends on warm light filtering through clear water — darkness would break the metaphor. **AVOID:** - CTA-heavy layouts with large buttons above the fold - Pricing blocks or conversion funnels - Stat-grids with large isolated numbers (use inline data chips instead) - Full-bleed hero photography - Dark or charcoal backgrounds (the site lives in Scandinavian daylight) - Floating navigation bars that obscure content ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **scandinavian**, layout = **portfolio-grid**, typography = **frutiger-clean**, palette = **dopamine-neon**, patterns = **skeleton-loading**, imagery = **vector-art**, motifs = **tropical-fish**, tone = **optimistic-bright** **Differentiators from other designs in this registry:** 1. **The civic aquarium metaphor is unprecedented.** No other design combines Scandinavian institutional restraint with tropical fish animation. The fish are not decorative add-ons — they are the philosophical statement: political information should feel alive and inhabitable, not sterile. 2. **Skeleton loading as aesthetic signal, not placeholder state.** Every other design treats skeleton states as loading junk to hide. Here the skeleton shimmer uses the site's primary teal (#00F5C4) accent, making loading states feel like bioluminescent organisms preparing to surface. The transition from skeleton to content is choreographed as a two-step reveal. 3. **Portfolio-grid with civic size-weighting.** Standard portfolio grids assign cell size by visual preference. This grid assigns cell size by democratic significance — landmark legislation earns a 2×2 mega-cell, procedural notes stay 1×1. The grid itself becomes a visual representation of political importance. 4. **Full-vector world, no photography.** Against a registry that heavily uses photography, political.wiki uses only flat vector illustration with naturalistic fish silhouettes and civic iconography. This creates a consistent handmade quality that distinguishes it from photo-heavy news/wiki designs. 5. **Frutiger-clean typography executed through softly rounded type (Nunito + DM Sans) rather than literal Frutiger.** The rounded-sans characteristic of Nunito echoes fish fin curves and rounded grid cells, creating a visual system where every element — type, card corners, pill chips, fish — shares the same radii vocabulary. **Avoided patterns (per frequency analysis):** - `serif-revival` (6% — overused): avoided entirely; all body type is sans-serif - `serif-classic` (6% — overused): no classical serif for body text - `art-deco-display` (6% — overused): no geometric ornamental display type - `variable-fluid` (6% — overused): fluid type is used sparingly (hero only), not as the defining typographic gesture - `sans-grotesk` (6% — overused): deliberately chose Nunito (rounded-sans) over neutral grotesque; DM Sans is humanist, not grotesque