# Design Language for political.wiki ## Aesthetics and Tone political.wiki exists in the visual space where a late-1990s Geocities tribute to Greek democracy has been re-rendered through the corrupted framebuffer of a decommissioned government mainframe -- and then someone who practices ikebana has arranged the resulting fragments with meditative care on a bed of sun-baked Tuscan clay. The aesthetic is **vaporwave** not in the lazy-pastel-and-palm-trees sense, but in its original philosophical register: a meditation on the decay and recycling of political systems, where the idealized imagery of governance (marble columns, senate chambers, ballot boxes, constitutional preambles) has been sampled, distorted, and re-presented as digital artifacts drifting through geological time. The tone is **zen-contemplative** -- political.wiki does not shout, debate, or persuade. It breathes. It presents political knowledge the way a stone garden presents rocks: with deliberate placement, vast negative space, and an invitation to sit with complexity rather than resolve it. Every scroll feels like turning a page in a book that has been reading itself for centuries. The site carries the unhurried gravity of a retired diplomat writing memoirs in a terracotta villa, the CRT monitor on the desk still warm, its screen showing the ghost-image of a policy document that was left open too long. The collision of vaporwave and zen creates a unique emotional register: political nostalgia processed through digital entropy, presented with monastic calm. Roman busts rendered in scan-line static. Parliamentary proceedings slowed to the frame-rate of a candle flame. The aesthetic says: "All political systems are temporary, and that impermanence is beautiful." ## Layout Motifs and Structure The layout follows a **stacked-sections** architecture -- discrete, full-width horizontal bands that the user descends through like sedimentary layers in a geological core sample. Each section is a self-contained world with its own background treatment, color temperature, and spatial logic. There is no persistent sidebar, no sticky navigation widget, no omnipresent header. The only constant is a thin 1px horizontal rule in Oxidized Bronze (#8B6914) that separates each section, drawn on-screen with a left-to-right animation lasting 1400ms when the section enters the viewport. **Section Rhythm and Proportions:** Sections alternate between three height profiles to prevent monotony: - **Monument Sections** (100vh): Full-viewport panels used for thematic openings and major topic transitions. These breathe with vast negative space. Text is centered vertically and horizontally, never occupying more than 40% of the viewport width. The remaining 60% is atmosphere. - **Archive Sections** (auto-height, min 60vh): Content-rich bands where political knowledge lives. These use a narrow reading column (max-width: 680px, centered) with generous 2.4rem line-height. Long-form text flows here with the comfort of a well-set book page. - **Artifact Sections** (50vh): Transitional interludes containing a single visual element -- a glitch-processed image, an animated SVG diagram, or a typographic specimen -- floating in negative space. These are the "breathing" sections that give the stacked layout its meditative rhythm. **The Geological Metaphor:** As the user scrolls deeper, the background color temperature shifts almost imperceptibly from lighter tones (Raw Sienna, Sandstone) at the top toward darker, earthier values (Burnt Umber, Deep Loam) at the bottom -- as if descending through strata. This gradient is not applied via a single CSS gradient but through individual section backgrounds that progressively darken, creating a sense of depth and historical accumulation: recent political concepts at the surface, foundational principles in the deep layers. **Grid System:** Within content sections, a 12-column grid with 24px gutters provides structure, but only 4-6 columns are ever used for text. The remaining columns exist as deliberate negative space -- visible only through faint vertical guide lines rendered at 3% opacity in Patina Green (#5B7B6A), which appear on hover and fade out 800ms after the cursor leaves the section. These ghost-guides reference the vaporwave tradition of exposing the grid beneath the surface. **Navigation:** A minimal vertical navigation appears on the right edge of the viewport only during scroll: small circular indicators (6px diameter, hollow stroke in Oxidized Bronze) represent each Monument Section. The active section indicator fills with color using a 400ms ease-out animation. This navigation auto-hides after 3 seconds of scroll inactivity, fading out at 0.15 opacity per 100ms. ## Typography and Palette **Typography:** - **Display / Headlines:** "Playfair Display" (Google Fonts) -- a transitional serif with the high-contrast thick-thin strokes of Baskerville-era typography, chosen because its sharp, authoritative letterforms carry the visual weight of institutional proclamation while its italic variants possess an almost calligraphic fluidity that softens the political register into something contemplative. Used at weight 700 for Monument Section titles (4rem-7rem) and weight 400 italic for subheadings (2rem-3rem). All display text is set with letter-spacing: -0.02em (tight, classical) and a text-shadow of 0 0 40px rgba(139,105,20,0.08) that creates an almost subliminal warm halo -- the typographic equivalent of candlelight on parchment. - **Body / Reading Text:** "Source Serif 4" (Google Fonts) -- a serif designed specifically for screen reading at body sizes, with sturdy serifs, open apertures, and generous x-height that makes 600+ words per section comfortable rather than fatiguing. Used at weight 400 for body text (1.125rem / 18px with 2.4rem / 38.4px line-height). The deliberate pairing of two serif faces -- Playfair Display for headlines and Source Serif 4 for body -- embodies the serif-revival philosophy: serifs are not just decorative but functional, and a page set entirely in serif typography carries an authority and warmth that sans-serif cannot replicate. Source Serif 4's optical size axis is utilized: smaller captions use opsz 8, body text uses opsz 14, ensuring every size feels intentionally drawn rather than merely scaled. - **Accent / UI / Metadata:** "IBM Plex Mono" (Google Fonts) -- a monospace typeface used sparingly for dates, reference numbers, citation keys, and the vertical navigation labels. Set at weight 300 (light) and 0.6rem-0.75rem, always in Patina Green (#5B7B6A) or Oxidized Bronze (#8B6914). The monospace face serves as a visual signal that the reader has moved from the contemplative-humanist register of the serif text into the archival-systematic register of political data. It is the typeface of timestamps, amendment numbers, and coordinate references. **Palette:** The palette draws from **earth-tones** -- specifically the color vocabulary of a Mediterranean landscape in late afternoon light, where terracotta, dried sage, oxidized metal, and sun-bleached stone create a warm, grounded chromatic field that ages gracefully and never feels artificial. | Role | Name | Hex | Usage | |------|------|-----|-------| | Primary Background | Raw Linen | #F2E8D5 | Page background, Monument Section base | | Deep Background | Burnt Umber | #5C3A1E | Deep-layer sections, footer regions | | Primary Text | Charcoal Loam | #2C2418 | Body text, primary headlines | | Secondary Text | Weathered Slate | #6B5E4F | Subheadings, captions, secondary content | | Accent Warm | Oxidized Bronze | #8B6914 | Section dividers, active states, links | | Accent Cool | Patina Green | #5B7B6A | Monospace text, ghost-grid lines, metadata | | Highlight | Terracotta Dust | #C4724E | Underline-draw animations, hover states | | Surface | Sandstone Wash | #E8DCC8 | Card surfaces, Archive Section backgrounds | | Vaporwave Tint | Faded Mauve | #9B7E8E | Glitch-art overlay, scan-line tint | The Faded Mauve is the sole concession to the vaporwave palette tradition -- a desaturated, earthy purple that appears only in glitch-art overlays and the scan-line effect, bridging the earth-tone palette with the digital-decay aesthetic. It never appears as a background or text color; it exists only in the corrupted, transient layer. ## Imagery and Motifs **Glitch-Art as Political Metaphor:** The primary imagery mode is **glitch-art** -- but not the aggressive, neon-saturated glitch of cyberpunk. This is geological glitch: slow, warm, erosive. The visual language imagines what happens when the digital representations of political systems degrade not through violence but through the patient work of time, like sandstone facades weathering over centuries. **Specific Visual Treatments:** 1. **Corrupted Marble:** CSS-generated imagery that evokes classical marble busts and columns but rendered with deliberate data-corruption effects. Achieved through layered CSS backgrounds: a base radial-gradient in Sandstone Wash (#E8DCC8) overlaid with thin linear-gradient stripes (1px wide, repeating every 3px) in Faded Mauve (#9B7E8E) at 15% opacity, creating a scan-line effect over geological texture. Occasional horizontal "tear" lines are rendered as pseudo-elements -- 100%-width bands of 2-4px height in Terracotta Dust (#C4724E) at 40% opacity, positioned at seemingly random vertical offsets, creating the impression of a CRT display showing an image of ancient stone. 2. **Displacement Maps on Text:** For Monument Section titles, a subtle CSS animation shifts individual characters by 1-2px vertically at staggered intervals (every 6-8 seconds, 200ms duration), creating a barely perceptible digital tremor -- as if the words are being displayed on aging hardware. The displacement is never dramatic; it is the quiet hum of entropy, not the crash of failure. 3. **SVG Path Diagrams:** Political concepts (separation of powers, electoral systems, diplomatic relationships) are represented through hand-crafted SVG line diagrams rendered in a single stroke weight (1.5px) in Oxidized Bronze (#8B6914). These diagrams are drawn on-screen using path-draw-svg animation (stroke-dasharray technique, 2000ms duration, ease-in-out timing) triggered by scroll intersection. The line quality is deliberately architectural -- straight segments, precise angles, measured curves -- but with occasional 1px jitter applied via an SVG filter (feTurbulence, baseFrequency: 0.02) that introduces the faintest hand-drawn imperfection. 4. **Atmospheric Grain:** A CSS noise overlay (generated via a tiny inline SVG using feTurbulence with type="fractalNoise", baseFrequency: 0.65, numOctaves: 4) covers the entire viewport at 4% opacity, blended via mix-blend-mode: multiply. This grain is static (not animated) and creates the visual texture of paper or aged film, grounding the digital surface in a physical, earthy materiality. **Tech Motifs:** The decorative motifs draw from **tech** vocabulary but rendered in the earth-tone palette, creating a fusion where technology feels ancient and geology feels computational: - **Circuit-Trace Dividers:** Section dividers are not simple horizontal rules but SVG paths that trace circuit-board-inspired right-angle routes from left edge to right, with small circular nodes (4px radius) at junction points. Drawn in Oxidized Bronze (#8B6914) at 1px stroke, these evoke both microchip architecture and the branching paths of political decision trees. - **Binary Rain (Background):** In Artifact Sections, a very faint (3% opacity) background animation plays: columns of zeros and ones in IBM Plex Mono at 0.5rem, falling vertically at 40px/second in Patina Green (#5B7B6A). This is the vaporwave "digital rain" motif re-tuned to the zen register: barely visible, infinitely patient, a reminder that all political knowledge now exists as binary data. - **Coordinate Stamps:** Each section bears a small coordinate-style identifier in the upper-right corner, set in IBM Plex Mono at 0.6rem in Patina Green: e.g., "SEC.04 // 51.5074N" -- a fictional reference number that blends archival indexing with geographic coordinates, suggesting that each section of political knowledge can be located in both conceptual space and physical territory. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport Monument Section. The background is Raw Linen (#F2E8D5) with the grain overlay active from the first frame. At 0ms, the viewport appears empty. At 400ms, the site title "political.wiki" fades in (opacity 0 to 1, 1200ms, ease-out) at center-viewport, set in Playfair Display 700 at 5.5rem, color Charcoal Loam (#2C2418), letter-spacing -0.02em. The title does not simply appear -- each character has a 1px vertical displacement that settles to 0 over 800ms with spring easing (staggered 40ms per character), creating the impression of letterforms finding their final position, like type being set in a composing stick. At 1600ms, a subtitle appears below: a single contemplative line (e.g., "a quiet index of how humans govern themselves") in Source Serif 4 italic, 1.25rem, Weathered Slate (#6B5E4F), fading in over 800ms. At 2400ms, the first section divider -- a circuit-trace SVG -- draws itself across the lower quarter of the viewport (left to right, 1400ms, ease-in-out), and a small downward-pointing chevron (1px stroke, Oxidized Bronze) begins a slow breathing animation (translateY oscillating 4px, 3 seconds per cycle, infinite). **Scroll Behavior:** Scrolling is the primary interaction. Each section transition is marked by the underline-draw animation pattern: as a new section enters the viewport (Intersection Observer, threshold: 0.15), its heading text gains an animated underline -- a pseudo-element that grows from left to right over 600ms in Terracotta Dust (#C4724E), 2px height, positioned 4px below the text baseline. This underline-draw is the signature interaction pattern of the entire site: every heading, every link on hover, every active navigation indicator uses this same left-to-right reveal, creating a rhythmic visual thread that stitches the stacked sections together. **Section Transition Effects:** As a section scrolls into view, its content elements use stagger animation: each paragraph, image, or diagram enters with a 60ms delay relative to its predecessor, translating from 20px below to 0 and from opacity 0 to 1, with 500ms duration and ease-out timing. The stagger creates a cascade effect -- content settling into place like sediment after a disturbance. **Link and Hover Behavior:** Links are set in Oxidized Bronze (#8B6914) with no default underline. On hover, the underline-draw animation triggers (400ms, left-to-right, Terracotta Dust). The cursor changes to a custom SVG crosshair (16x16px, 1px stroke in Oxidized Bronze) -- a tech-motif cursor that replaces the default pointer, reinforcing the archival-coordinate aesthetic. **Glitch Micro-Interactions:** Every 45-90 seconds (randomized), a subtle full-viewport glitch flickers: the entire page shifts 1px to the right and back over 80ms, and two horizontal scan-lines (2px height, Faded Mauve at 20% opacity) flash across the viewport at different vertical positions. This micro-glitch is almost subliminal -- most users will not consciously notice it, but it contributes to the persistent low-frequency anxiety that political knowledge systems are fragile, temporary, always one power surge away from corruption. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, newsletter signup modals, cookie banners styled as design elements, testimonial carousels, hero images with overlay text-on-photo, countdown timers, progress bars, gamification badges. **PREFER:** Long-form reading comfort, typographic hierarchy as the primary navigation aid, negative space as content, animation as atmosphere rather than attention-grabbing, the page as a place to dwell rather than a funnel to convert. ## Uniqueness Notes **Differentiators from other designs in the portfolio:** 1. **Vaporwave-Earth Fusion (unprecedented combination):** Vaporwave aesthetic appears in only 2% of existing designs, and every existing instance pairs it with neon-electric or pastel palettes. political.wiki is the first design to render vaporwave through an earth-tones palette (also 2% frequency), creating a wholly new chromatic register: digital decay rendered in terracotta, oxidized bronze, and sun-dried clay rather than pink, teal, and chrome. The glitch effects feel geological rather than electronic. 2. **Double-Serif Typography System (serif-revival at 1% frequency):** While other designs use serif-sans or serif-mono pairings, political.wiki pairs two serif typefaces (Playfair Display for display, Source Serif 4 for body) with monospace reserved strictly for metadata. This double-serif approach is a deliberate commitment to the serif-revival movement and appears in virtually no other design in the portfolio. The result is a page that feels like a printed book first and a website second. 3. **Geological Scroll Narrative (stacked-sections at 3% frequency):** The stacked-sections layout with progressive background darkening creates a descent-metaphor that no other design employs. Users don't scroll through a page; they excavate through layers. Combined with the earth-tone palette, this produces a genuinely unique spatial experience: political knowledge as geological record, with the most fundamental concepts buried deepest. 4. **Zen-Contemplative Political Register (3% frequency):** Political content online is almost universally rendered in either authoritative-professional or energetic-partisan registers. political.wiki's zen-contemplative tone -- unhurried, spacious, non-argumentative -- is a radical departure that reframes political knowledge as something to meditate on rather than weaponize. No other design in the portfolio applies this tone to political subject matter. 5. **Subliminal Glitch as Thematic Commentary:** The micro-glitch events (every 45-90 seconds) are not decorative; they are thematic. They embody the design's central argument that political systems are inherently fragile digital constructs. No other design uses glitch effects at this level of subtlety -- most glitch implementations in the portfolio (13% aesthetic frequency) are overt and aggressive. Here, the glitch is zen: almost invisible, always present, deeply unsettling only if you stop to think about it. **Documented Seed/Style:** aesthetic: vaporwave, layout: stacked-sections, typography: serif-revival, palette: earth-tones, patterns: underline-draw, imagery: glitch-art, motifs: tech, tone: zen-contemplative **Avoided Patterns (from frequency analysis):** - playful aesthetic (95%) -- replaced with zen-contemplative - centered layout as primary structure (99%) -- replaced with stacked-sections where centering is a local choice within sections, not a global layout strategy - warm palette as generic descriptor (100%) -- replaced with specific earth-tones vocabulary - scroll-triggered as the only animation pattern (97%) -- supplemented with underline-draw as the signature pattern, with scroll-triggered serving only as the activation mechanism - mono typography as primary voice (99%) -- relegated to metadata-only role, with serif-revival as the typographic identity - minimal imagery (94%) -- replaced with active glitch-art imagery program - vintage motifs (86%) -- replaced with tech motifs rendered in earth-tone materials - friendly tone (98%) -- replaced with zen-contemplative register