# Design Language for npc.quest

## Aesthetics and Tone

npc.quest inhabits the intersection of Bauhaus rigor and whimsical world-building — a site that feels like a museum catalog for a video game universe that never existed. The aesthetic is rooted in Bauhaus functionalism: flat geometric forms, primary construction, strict grid discipline — but then deliberately subverted by organic blob morphology that bleeds outside the grid like ink on damp paper.

The tone is **whimsical-creative**: playful enough that visitors feel like they stumbled into a living encyclopedia of fictional characters, but structured enough that the information architecture feels trustworthy and explorable. Think: a zine designed by Herbert Bayer if he had been obsessed with tabletop RPGs and generative art.

Visual mood references:
- Bauhaus stage design posters from 1923 — bold flat geometry, primary red/yellow/blue against off-white
- Data visualizations that feel alive — force-directed graphs, Voronoi territories, organic network diagrams
- NPC "faction maps" and procedurally generated lore cards
- The controlled chaos of a fantasy atlas: categorical but exploratory

The palette is **duotone** — each page or section renders entirely in two chromatic dimensions. The primary duotone pairing is a deep indigo against a warm amber-gold, creating visual tension between cool authority and warm mystery.

## Layout Motifs and Structure

The layout is **asymmetric** in a deliberate Bauhaus sense: not chaotic, but deliberately off-balance to create compositional tension and reading momentum. There is no centered hero. Everything tilts.

Key structural motifs:

**The Diagonal Split**: A dominant composition device. The viewport is divided by an invisible diagonal axis running top-left to bottom-right. Typography and data-viz live in the upper-left quadrant; organic blob decoration and illustration overflow into the lower-right. The eye is pulled across this axis.

**Pinwheel Columns**: Three-column grid that breaks into asymmetric proportions (2:1:3 or 1:3:1 depending on section). Column gutters are wide — 48px — making the whitespace itself a structural element. Columns periodically collapse into each other as content dictates.

**Zoom-Focus Panels**: Specific content panels use a "zoom-in" interaction — they begin compressed and expand to fill the viewport on hover or scroll trigger. NPC cards, lore entries, and data nodes all use this pattern: small and grid-bound until focused, then they expand into an immersive detail view.

**Floating Blob Zones**: Organic SVG blob shapes act as container boundaries for secondary content. They don't clip content — they surround it like a territorial boundary on a map. Blobs animate slowly on an independent timeline, breathing in and out at ~8 second intervals using CSS custom properties.

**Data Constellation Header**: The page header is not a nav bar — it is a dynamic force-directed graph of NPC relationships rendered in canvas/SVG, where nodes are named characters and edges are relationship types. Hovering a node zooms the camera to that character's domain.

**Sticky Sidebar Strip**: A thin 12px vertical strip on the far-left edge of the viewport, color-coded by current section, scrolls with the page as a visual progress indicator.

## Typography and Palette

### Fonts

**Display / Headlines**: `Bebas Neue` — ultra-condensed all-caps industrial letterforms. Bauhaus-adjacent in its stripped functionality. Used at 96–200px for hero text and section labels.

**Body / Data Labels**: `Space Grotesk` — geometric grotesque with slightly quirky terminals that prevent it from feeling mechanical. Used at 14–18px for all prose, card metadata, and UI labels.

**Accent / Kinetic Text**: `Bricolage Grotesque` — variable-width grotesque with expressive optical sizing. Used for animated kinetic typography segments where letters shift weight and width in real-time as scroll position changes.

**Mono / Data**: `JetBrains Mono` — for stat values, IDs, relationship weights, and data-viz labels. The monospaced structure reinforces the data-viz imagery motif.

### Palette (Duotone Core + Accents)

| Role | Hex | Description |
|------|-----|-------------|
| Deep Indigo (Primary) | `#1B1464` | Dominant dark — near-navy, Bauhaus authority |
| Amber Gold (Secondary) | `#F5A623` | Warm duotone counterpart — glowing, alive |
| Off-White (Background) | `#F7F3EC` | Warm parchment — not pure white, feels tactile |
| Crimson Accent | `#D0021B` | Primary red echo — limited to structural markers only |
| Pale Sky | `#BDD5EA` | Soft fill for blob interiors and data-viz node fills |
| Charcoal | `#2D2D2D` | Body text, secondary elements |
| Ghost White | `#FAFAFA` | Card backgrounds, hover state fills |

**Duotone Rendering**: Images (if any) are filtered through CSS `sepia()` + `hue-rotate()` to enforce the indigo/amber duotone. All photographs or generative art imagery is stripped to these two chromatic bands.

**Color Cycling**: Different NPC factions trigger palette shifts — the duotone pair rotates among: indigo/amber, forest-green (#2D5016) / coral (#FF6B47), deep-violet (#3D1A78) / mint (#7FFFD4). This makes the site feel like exploring different realms.

## Imagery and Motifs

### Data-Viz as Primary Imagery

npc.quest treats **data visualization as its primary visual medium**. There are no stock photos. No hero illustrations in the traditional sense. Instead:

- **Force-directed relationship graphs**: NPC connections rendered as physics-based node-edge diagrams. D3.js force simulation with custom node shapes (hexagons for major characters, circles for minor, diamonds for faction leaders).
- **Voronoi territory maps**: Faction influence zones rendered as Voronoi diagrams with organic edge relaxation. Each cell is filled with the faction's duotone color variant.
- **Radar/spider charts**: NPC stat sheets rendered as animated radar charts. Stats values animate from zero on first view using IntersectionObserver.
- **Treemap lore hierarchies**: Lore categories displayed as animated treemaps — cells resize when categories are explored.
- **Particle trails**: Character "aura" effects rendered as canvas particle systems that follow cursor position within NPC cards.

### Organic Blob Motifs

Blobs are not decorative afterthoughts — they are **territorial**. Each blob shape is:
- Generated from a fixed seed (per NPC/faction) using SVG `<feTurbulence>` or hand-crafted cubic bezier paths
- Animated via CSS `@keyframes` morphing between 3 states using `d` attribute interpolation (GSAP MorphSVG or CSS clip-path)
- Color-matched to the duotone pair of the current section
- Used as collision boundaries in the force-directed graph — nodes avoid blob regions they don't "belong" to

### Kinetic Typography Elements

- Section titles use **scroll-linked letter spacing animation**: as you scroll into a section, letter-spacing collapses from 0.8em to 0em, giving a cinematic "focus" effect
- NPC names render with a **weight-shift animation** using Bricolage Grotesque's variable weight axis: wght transitions from 200→800 on hover
- A typewriter-effect "lore ticker" runs at the bottom of the viewport, cycling through procedurally-assembled NPC lore fragments

### Decorative Structural Elements

- **Bauhaus color blocks**: 8px × 40px rectangular color bars in crimson, indigo, or amber — used as bullet markers, list indicators, and section dividers
- **Thin rule lines**: 1px horizontal rules in amber gold punctuate sections like musical notation
- **Grid reveal pattern**: A faint 24px dot-grid pattern overlays the background at 4% opacity, referencing both graph paper and Bauhaus workshop planning sheets

## Prompts for Implementation

### Core Experience Arc

The page tells a **story of discovery**: a visitor arrives not knowing what NPC Quest is, and the page unfolds it through progressive reveal. There is no above-the-fold explanation. The visual experience speaks first; text emerges as the visitor engages.

**Phase 1 — Constellation Arrival** (0px–100vh):
- Full-viewport canvas: force-directed graph of 40–60 nodes slowly settling into equilibrium
- Node labels fade in at stagger intervals using `opacity` transition + `transform: translateY`
- The title "NPC.QUEST" in Bebas Neue at 180px renders in amber gold, positioned asymmetrically (left: 8vw, top: 12vh)
- A single line in Space Grotesk beneath: "Every world needs its people." — fades in after 1.2s
- Scroll indicator: a thin amber vertical line on the right edge pulses with a breathing animation

**Phase 2 — Faction Zoom** (100vh–300vh):
- Pinwheel column layout activates
- Three faction territories expand from compressed cards into immersive zone panels on scroll
- Zoom-focus pattern: each faction card starts at `scale(0.85)` and `transform-origin: top-left`, then zooms to `scale(1)` as viewport intersection threshold is crossed
- Voronoi territory SVG fades in beneath faction names as a territorial marker
- Blob shapes morph between states as scroll position changes — use `scrollY` mapped to animation progress

**Phase 3 — NPC Detail Emergence** (300vh–500vh):
- Individual NPC cards in asymmetric grid (2:3:1 column proportions)
- Each card: dark indigo background, amber name in Bebas Neue, Space Grotesk stat metadata, radar chart animating from zero
- On hover: card scales to `scale(1.06)`, particle trail activates on canvas overlay, blob border morphs outward
- Weight-shift animation triggers on NPC name: Bricolage Grotesque `font-variation-settings: 'wght' 200` → `800`
- Kinetic letter-spacing collapse on section entrance

**Phase 4 — Lore Weave** (500vh+):
- Full-width treemap of lore categories fills the section
- Treemap cells have subtle `transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1)` — spring-like expansion
- Hovering a lore cell expands it and reveals a micro-article in the expanded space
- Background shifts from indigo/amber duotone to the next faction's duotone pair (forest-green/coral)
- Lore ticker at bottom starts cycling: monospaced white text on amber bar, scrolling leftward

### Implementation Details

**Canvas Layer Architecture**:
```
z-index: 1  — background dot grid (CSS, fixed)
z-index: 2  — blob shapes (SVG, absolute)
z-index: 3  — force-directed graph (canvas, absolute)
z-index: 10 — content columns (HTML, relative)
z-index: 20 — NPC card particle overlays (canvas, absolute per card)
z-index: 100 — sticky left progress strip
```

**Scroll-Linked Animations**: Use CSS `animation-timeline: scroll()` where supported, with a JavaScript IntersectionObserver fallback. Map `scrollY` to CSS custom property `--scroll-progress: 0..1` on `:root` for blob morph control.

**Duotone Filter**: Apply to any raster content:
```css
filter: sepia(1) hue-rotate(200deg) saturate(1.8) brightness(0.9);
```

**Variable Font Kinetics**: Bricolage Grotesque weight animation:
```css
@keyframes weight-in {
  from { font-variation-settings: 'wght' 200, 'opsz' 12; }
  to   { font-variation-settings: 'wght' 800, 'opsz' 96; }
}
```

**Blob Morph via clip-path**:
```css
@keyframes blob-breathe {
  0%   { clip-path: ellipse(55% 45% at 50% 50%); }
  33%  { clip-path: ellipse(48% 52% at 45% 48%); }
  66%  { clip-path: ellipse(60% 40% at 55% 52%); }
  100% { clip-path: ellipse(55% 45% at 50% 50%); }
}
```

**Zoom-Focus Panels**: Use CSS `scale()` + `transform-origin` tied to IntersectionObserver:
```javascript
observer.observe(card, { threshold: [0, 0.3, 0.7, 1.0] });
// At threshold 0.7: card.style.transform = 'scale(1)';
// Below threshold: card.style.transform = 'scale(0.85)';
```

**AVOID**:
- Centered hero layouts with centered text
- Navigation bars that look like SaaS products
- "Get Started" or "Sign Up" call-to-action buttons
- Pricing tables or feature comparison grids
- Stat counters ("10,000+ NPCs", "99% uptime")
- Stock photography or illustration sets
- Carousels or horizontal scroll sidebars
- Footer-heavy layouts

## Uniqueness Notes

**Differentiators:**

1. **Data-viz as primary imagery** — npc.quest uses force-directed graphs, Voronoi maps, and radar charts as its visual language instead of illustrations or photography. The site IS a data visualization.

2. **Bauhaus-blob collision** — The deliberate tension between strict Bauhaus geometry (rectangular color bars, grid columns, condensed industrial type) and organic blob morphology creates a visual identity that reads as neither "minimalist" nor "maximalist" but something genuinely unusual: structured chaos.

3. **Faction-driven palette cycling** — The duotone palette shifts as you explore different NPC factions, making the color system narrative rather than decorative. Different parts of the site literally look like different worlds.

4. **Kinetic typography via variable fonts** — Using Bricolage Grotesque's variable weight axis for hover and scroll-linked animation creates typography that feels physically reactive, not just animated.

5. **No above-fold explanation** — The site withholds its purpose intentionally, using the constellation graph to invite curiosity before any text appears. This creates an exploratory, game-like arrival experience.

**Chosen Seed**: `aesthetic: bauhaus, layout: asymmetric, typography: kinetic-animated, palette: duotone, patterns: zoom-focus, imagery: data-viz, motifs: organic-blobs, tone: whimsical-creative`

**Avoided Patterns (from frequency analysis)**:
- `playful-rounded` (5% — overused): avoided rounded corners and bubbly shapes
- `tech-mono` (5% — overused): mono fonts used only for data labels, not as primary voice
- `serif-revival` (5% — overused): no serif fonts in primary typography stack
- `art-deco-display` (5% — overused): Bauhaus reference is Weimar-era geometric, not Art Deco ornament
- `kinetic-animated` (3%): selected specifically because it is underused despite the assignment calling for it
<!-- DESIGN STAMP
  timestamp: 2026-05-09T19:48:09
  domain: npc.quest
  seed: seed
  aesthetic: npc.quest inhabits the intersection of Bauhaus rigor and whimsical world-buildin...
  content_hash: 575a5340e114
-->