# Design Language for politics.quest

## Aesthetics and Tone

politics.quest inhabits the visual world of a **hand-drawn political broadside** -- the kind of illicit pamphlet that might have been passed under tavern doors in 18th-century London or wheat-pasted onto Parisian alley walls during the Commune. The aesthetic is rooted in the tradition of political caricature and the sketchbook margins of parliamentary reporters: ink-stained fingers, crosshatched shadows, the imperfect urgency of a hand that draws faster than the press can print. But this is not historical cosplay. The hand-drawn quality is filtered through a deep burgundy darkness -- the color of dried sealing wax, of wine spilled on manifestos, of velvet curtains in smoke-filled committee rooms where deals are struck at midnight.

The tone is **conversational** -- not the detached analysis of a think tank white paper, but the engaged, occasionally sardonic voice of someone who has actually read the legislation they are discussing. It speaks to you as an equal, assumes intelligence, and refuses to condescend. There is warmth in the hand-drawn imperfection, a signal that a human made this, that someone cared enough to sketch rather than screenshot. The mood oscillates between the intimacy of a late-night conversation about power and the theatrical gravity of a parliamentary chamber at the moment of a crucial vote.

Every surface carries the faint texture of tooth -- the grain of heavy drawing paper, visible at low opacity beneath all content. Nothing is slick. Nothing is polished to a corporate sheen. The site feels like opening a leather-bound notebook filled with annotated political maps, constituency sketches, and marginalia that is more interesting than the main text.

## Layout Motifs and Structure

The layout follows a **stacked-sections** architecture -- a vertical sequence of full-width narrative blocks that unfold like the chapters of a political argument. Each section occupies a minimum of 85vh and is separated not by whitespace alone but by hand-drawn horizontal dividers: irregular ink lines that waver and thicken as if drawn with a steel-nib dip pen. These dividers are SVG paths with deliberate tremor applied via JavaScript noise functions, and they vary from section to section -- some are single lines, some are double-ruled like a ledger, some are crosshatched borders that recall copperplate engraving.

**Section Rhythm:**
The stacking is not uniform. The first section (the foyer) is a full-viewport statement. The second section is deliberately shorter (60vh), creating a compression that accelerates the reader's scroll. The third section expands again to 100vh, slowing the pace. This rhythmic breathing -- expand, compress, expand -- mimics the cadence of a political speech: setup, pivot, declaration. No section is ever the same height as its neighbor.

**Column Architecture:**
Within each stacked section, content is organized in a single asymmetric column that shifts its position. In odd sections, the text column sits at 10% from the left edge, occupying 55% of the viewport width. In even sections, it shifts to 35% from the left, occupying 50%. This alternating offset creates a subtle visual argument: the content is literally taking different positions, just as political discourse requires the ability to see issues from shifting vantage points. The remaining viewport space on each side is never truly empty -- it holds faint hand-drawn marginalia: arrows, circled words, small sketched symbols that appear to be someone's annotations on the text.

**Navigation:**
There is no persistent navigation bar. Instead, a small hand-drawn compass rose (SVG, ~40px) sits fixed at the top-right corner of the viewport. On hover, it unfurls into a vertical list of section names rendered in the handwritten typeface, each name preceded by a small sketched bullet (a different symbol for each: a quill, a ballot box, a gavel, a torch). This compass navigation fades to 30% opacity when not interacted with, becoming part of the visual marginalia.

**Grid Rejection:**
There is no CSS grid. The layout is built entirely with flexbox and explicit margin/padding values that are intentionally non-systematic -- section padding might be 4.2rem on one block and 3.7rem on the next. This irregularity is the hand-drawn principle extended to spatial relationships: nothing snaps to a grid because grids are the language of bureaucracy, and this site speaks the language of political argument, which is messy, passionate, and never perfectly aligned.

## Typography and Palette

**Typography:**

- **Display / Headlines:** "Playfair Display" (Google Fonts) -- weight 900 (Black), always in mixed case. This is the serif of political authority: high-contrast strokes with dramatic thick-thin transitions that recall engraved masthead lettering on 19th-century political newspapers. Used at sizes from 3rem for section headers to 7vw for the hero statement. Letter-spacing is set to -0.02em, pulling the characters into tight, commanding formations. Headlines are rendered in the darkest burgundy (#2A0A14) against lighter grounds, or in pale cream (#F5EBE0) when reversed against dark sections.

- **Body / Running Text:** "Lora" (Google Fonts) -- weight 400 (Regular) and 400 Italic for emphasis. Lora's brushed curves and balanced proportions provide readability at paragraph length while maintaining the editorial gravitas that Playfair Display establishes. Set at 1.125rem / 1.75 line-height, with paragraph max-width capped at 38em to ensure a comfortable reading measure. The italic variant is used generously -- not just for emphasis but for entire parenthetical asides, creating a conversational rhythm where the italic functions as a stage whisper.

- **Accent / Marginalia / Navigation:** "Caveat" (Google Fonts) -- weight 400-700. This is the handwritten voice of the site: a natural, slightly hurried script that appears in margin annotations, navigation labels, pull-quotes, and section subtitles. Caveat's letterforms look like actual handwriting rather than a designed simulation, and its slight irregularity reinforces the hand-drawn aesthetic. Used at 1rem-1.5rem for marginalia, 2rem for pull-quotes. The variable weight allows annotations to range from tentative (400) to emphatic (700), as if the annotator pressed harder when making an important point.

**Palette:**

The palette is **deep burgundy** -- a narrow, saturated range that evokes the interior of a Victorian parliamentary library at night, lit by gas lamps and the glow of a dying fire.

| Role | Color | Hex | Description |
|------|-------|-----|-------------|
| Primary Dark | Oxblood Depth | `#2A0A14` | The deepest burgundy -- almost black, used for backgrounds of alternate sections and the hero foyer. The color of dried ink on parchment. |
| Primary Mid | Claret | `#6B1D35` | The heart of the palette -- rich, saturated burgundy used for headlines, key UI elements, and the SVG divider strokes. |
| Primary Light | Rosewood Blush | `#A83255` | A brighter burgundy that serves as hover state, active indicator, and accent for the compass rose navigation. |
| Warm Neutral | Parchment Cream | `#F5EBE0` | The background of light sections -- not white, but the warm, slightly yellowed tone of aged paper. Used for body text backgrounds and card surfaces. |
| Dark Neutral | Charcoal Sepia | `#2C1A10` | A warm near-black with brown undertones, used for body text. Never pure black -- pure black is too stark for this hand-drawn world. |
| Accent Gold | Wax Seal | `#C4873B` | A muted gold that appears sparingly: in the compass rose, in highlighted marginalia, in the thin top-border of pull-quote blocks. The color of the brass fittings on a parliamentary dispatch box. |
| Grain Overlay | Tooth Texture | `#D4C5B2` | A semi-transparent warm tone (opacity 0.04-0.08) applied as a full-viewport noise texture to simulate the grain of drawing paper across every surface. |

**Color Application Rules:**
- Sections alternate between dark (#2A0A14 background / #F5EBE0 text) and light (#F5EBE0 background / #2C1A10 text).
- The Claret (#6B1D35) never appears on the Oxblood Depth background directly -- it requires the Parchment Cream ground for legibility.
- The Wax Seal gold (#C4873B) is used at maximum 15% of any given viewport area. It is an accent, not a co-primary.
- All hand-drawn SVG strokes use Claret (#6B1D35) on light sections and Parchment Cream (#F5EBE0) on dark sections, at stroke-width ranging from 1.5px to 3px with round line-caps.

## Imagery and Motifs

**Grain Overlay (Primary Visual Texture):**
Every pixel of the site is overlaid with a CSS-generated grain texture that simulates the tooth of heavy cold-pressed drawing paper. This is implemented as a fixed-position full-viewport pseudo-element (::after on the body) using an SVG filter chain: `<feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="4" />` piped into `<feColorMatrix>` to shift the noise toward warm sepia tones, then composited at opacity 0.06 via `mix-blend-mode: multiply`. The grain is always present -- it unifies all content under a single tactile surface and prevents any element from feeling digitally sterile.

**Hand-Drawn SVG Motifs:**
The site's visual identity is built on a library of hand-drawn SVG elements that appear throughout the layout:

1. **Section Dividers:** Horizontal ink lines with tremor. Each divider SVG path is generated with a JavaScript function that takes a straight line and applies Perlin noise to each control point, producing a stroke that wobbles like a pen held in a slightly unsteady hand. Three variants: single line, double-ruled, and crosshatched (a grid of 4-6 intersecting tremor lines).

2. **Margin Annotations:** Small SVG drawings that float in the empty space beside the main text column. These are abstract-tech motifs reinterpreted through a hand-drawn lens: circuit board traces drawn as if sketched in a notebook, gear outlines with wobbly teeth, network graphs where the nodes are hand-drawn circles and the edges are imperfect ink lines. Each annotation has a subtle parallax offset (translateY at 0.15x scroll speed), so they drift slightly as the user scrolls, as if they were on a separate transparent overlay sheet.

3. **Pull-Quote Brackets:** Large hand-drawn square brackets (SVG) that frame pull-quotes. Each bracket is ~80px tall, drawn with a thick (3px) tremor stroke in Claret (#6B1D35), with a small decorative flourish at each terminal -- not a serif, but a quick flick of the pen, like the stroke a calligrapher makes when lifting the nib.

4. **Compass Rose Navigation Icon:** A hand-drawn compass rose at 40x40px, with the four cardinal points drawn as tapered ink strokes of different weights (N is heaviest, suggesting primacy/direction). The rose rotates 5 degrees on hover with a spring-ease transition.

**Abstract-Tech Motifs Through a Political Lens:**
The motif system takes the vocabulary of abstract-tech -- circuit traces, node-edge graphs, data flow arrows, signal waveforms -- and redraws them entirely by hand, then overlays them with political context. A circuit board trace becomes a visualization of legislative process flow. A network graph becomes a power-relationship map. A waveform becomes the amplitude of public discourse over time. These motifs are never explained with labels -- they exist as ambient visual atmosphere, the kind of thing the viewer's eye catches in the margin and half-interprets, the way you might notice a doodle in someone's meeting notes and wonder what it means.

**Texture Layering:**
Every section background carries three texture layers:
1. Base color (solid, either #2A0A14 or #F5EBE0)
2. Grain overlay (the SVG noise filter at 0.06 opacity)
3. A very faint (opacity 0.03) repeating pattern of diagonal lines at 45 degrees, spaced 80px apart, in the section's contrasting color. This creates a subliminal sense of ruled paper -- the kind of faint grid that exists on expensive stationery, barely visible but structurally grounding.

## Prompts for Implementation

**Full-Screen Narrative Foyer:**
The site opens to a full-viewport screen of Oxblood Depth (#2A0A14). On load, the grain texture fades in first (duration: 800ms, ease-out), establishing the tactile surface before any content appears. Then the domain name "politics.quest" renders in Playfair Display Black at 7vw, positioned 30% from the top, in Parchment Cream (#F5EBE0). The text does not simply fade in -- it is drawn, letter by letter, using a stroke-dasharray/dashoffset SVG animation that reveals each character as if an invisible hand is writing it in ink. Total draw duration: 2.2 seconds, with each letter starting 80ms after the previous.

Below the domain name, after a 400ms pause, a subtitle appears in Caveat at 1.5rem: a single line that reads as a conversational aside, rendered in the Rosewood Blush (#A83255). This line fades in with a slight translateY(15px) upward drift.

At the bottom of the foyer, a small hand-drawn arrow (SVG, tremor-stroked) pulses gently with a subtle translateY oscillation (5px amplitude, 2s period, ease-in-out infinite), inviting the scroll. The arrow is in Wax Seal gold (#C4873B).

**Fade-Reveal Section Transitions:**
As each stacked section enters the viewport (triggered at 20% intersection via IntersectionObserver), its content elements perform a choreographed fade-reveal sequence:
1. The section divider SVG draws itself (stroke-dasharray animation, 600ms)
2. The headline fades in with translateY(30px) upward drift (400ms, 200ms delay)
3. The body text fades in paragraph by paragraph (300ms each, 150ms stagger between paragraphs)
4. Margin annotations fade in last (200ms, at 40% opacity -- they never reach full opacity, maintaining their role as peripheral notation)

All fade-reveals use `opacity` and `transform` only -- no layout-triggering properties. Easing: cubic-bezier(0.25, 0.46, 0.45, 0.94) -- a slightly underdamped curve that gives elements a faint deceleration into their final position, like a pen stroke reaching its endpoint.

**Scroll-Linked Grain Intensity:**
The grain overlay opacity modulates subtly with scroll position. At the top of the page, grain is at 0.06. As the user scrolls through dark sections, grain increases to 0.09 (making the paper texture more visible against the dark background). In light sections, grain returns to 0.05. This modulation is handled by a requestAnimationFrame loop that reads scrollY, determines which section is dominant, and lerps the grain opacity toward the target value at 0.03/frame. The result is a breathing texture that responds to the narrative rhythm.

**Hand-Drawn Cursor Companion:**
On devices with fine pointers (hover: hover media query), the default cursor is replaced with a custom SVG cursor that resembles a small ink nib -- a tapered triangular shape in Claret (#6B1D35) at 24x24px. On interactive elements (links, the compass rose), the cursor shifts to a hand-drawn pointing hand, also in SVG.

**Pull-Quote Theatrics:**
Pull-quotes are full-width interruptions in the text flow. When a pull-quote enters the viewport, the hand-drawn brackets animate inward from the edges (translateX from -40px and +40px respectively, 500ms, spring ease). The quote text then types out in Caveat at 2rem, using a typewriter-style animation where each character appears with a 30ms interval and a slight random vertical jitter (translateY of +/- 1px per character), simulating the natural bounce of handwriting. The source attribution fades in 300ms after the quote completes, in Lora Italic at 0.9rem.

**Interactive Marginalia:**
The hand-drawn margin annotations are not purely decorative. On hover, each annotation expands slightly (scale 1.05, 200ms spring) and a tooltip appears in Caveat at 0.85rem, offering a brief contextual note. The tooltip background is Parchment Cream with a hand-drawn border (1px tremor stroke), positioned with a 4px offset that makes it look slightly misaligned -- deliberately, as if the tooltip were a sticky note placed by hand.

**AVOID:**
- CTA-heavy layouts (no "Subscribe Now" buttons, no mailing list popups, no action-oriented UI patterns)
- Pricing blocks (this is not a SaaS product page)
- Stat-grids (numbers are woven into narrative, never presented as dashboard metrics)
- Centered layout symmetry (the asymmetric column shift is fundamental)
- Smooth corporate gradients (all color transitions are hard edges between sections)
- Stock photography or any photographic imagery (everything is drawn, textured, or typographic)
- Persistent sticky headers (the compass rose is subtle, not a navigation bar)

**BIAS TOWARD:**
- Full-screen narrative immersion where each section is a chapter
- Storytelling through sequential reveal, not simultaneous display
- The feeling of reading a physical artifact -- a broadside, a pamphlet, a marked-up document
- Animation that mimics physical processes (drawing, writing, unfolding) rather than digital transitions (sliding, bouncing, scaling)

## Uniqueness Notes

**Differentiators from other designs:**

1. **Hand-Drawn Political Broadside Aesthetic:** No other design in the portfolio combines the hand-drawn aesthetic (22% frequency) with political subject matter and the visual language of historical pamphlets and parliamentary caricature. The hand-drawn quality here is not decorative whimsy -- it is a deliberate political statement that human craft stands against the algorithmic polish of modern political media. The tremor-stroked SVGs, the margin annotations, and the Caveat handwriting create a visual argument that is inseparable from the content.

2. **Deep Burgundy Palette at 1% Frequency:** The deep-burgundy palette is used in only 1% of existing designs, making it one of the rarest color choices in the portfolio. The specific application here -- alternating oxblood-dark and parchment-cream sections with wax-seal gold accents -- creates a color world that evokes Victorian parliamentary chambers, sealed correspondence, and the gravitas of political discourse conducted by candlelight. No other design occupies this color territory with this cultural specificity.

3. **Stacked-Sections Layout with Rhythmic Breathing:** At 3% frequency, stacked-sections is deeply underused. But the implementation here goes beyond simple vertical stacking: the deliberate variation in section heights (85vh, 60vh, 100vh) creates a rhythmic cadence that mirrors the rhetorical structure of political argument. Combined with the alternating column offset (left in odd sections, right in even), the layout itself becomes a visual metaphor for political positioning.

4. **Abstract-Tech Motifs Redrawn as Political Marginalia:** The abstract-tech motif vocabulary (circuit traces, node-edge graphs, signal waveforms) is at 7% frequency, but no other design reinterprets these motifs through a hand-drawn political lens. Here, a circuit trace becomes a legislative process diagram. A network graph becomes a power structure map. The collision of technical abstraction and hand-drawn imperfection creates a unique visual language: politics as complex system, rendered with human imperfection.

5. **Grain Overlay with Scroll-Linked Modulation:** While grain-overlay appears at only 2% frequency, this design pushes it further by making the grain texture responsive to scroll position -- breathing heavier on dark sections, lighter on cream sections. This dynamic grain creates a living tactile surface rather than a static filter, reinforcing the sense that the viewer is interacting with a physical document.

**Chosen seed/style:** aesthetic: hand-drawn, layout: stacked-sections, typography: playfair-elegant, palette: deep-burgundy, patterns: fade-reveal, imagery: grain-overlay, motifs: abstract-tech, tone: conversational

**Avoided overused patterns from frequency analysis:**
- playful aesthetic (95%) -- replaced with hand-drawn (22%)
- centered layout (99%) -- replaced with stacked-sections (3%) with asymmetric column offsets
- scroll-triggered patterns (97%) -- replaced with fade-reveal (8%) as the primary animation pattern
- friendly tone (98%) -- replaced with conversational (4%), which shares warmth but adds specificity and intellectual engagement
- warm palette (100%) -- replaced with deep-burgundy (1%), which has warmth but through a specific, rare color territory
- mono typography (99%) -- replaced with playfair-elegant (8%), a serif-first system with handwritten accent
- minimal imagery (94%) -- replaced with grain-overlay (2%), a tactile texture-first approach
- vintage motifs (87%) -- replaced with abstract-tech (7%), recontextualized through hand-drawn rendering
<!-- DESIGN STAMP
  timestamp: 2026-03-10T17:19:23
  domain: politics.quest
  seed: seed
  aesthetic: politics.quest inhabits the visual world of a **hand-drawn political broadside**...
  content_hash: 4252ab320ee4
-->