# Design Language for npc.quest

## Aesthetics and Tone

npc.quest is **The Idle Dialogue Atlas** — an unauthorized archive belonging to a self-aware Non-Player Character who has spent forty in-game years standing beside the same lamppost in a forgotten 16-bit JRPG, cataloguing every variation of every line they have ever been forced to deliver. The site is presented entirely as the inside of that NPC's head: a pixel-art memory palace rendered on a curved CRT, where scanlines roll, palette flickers, and dialog boxes open of their own accord whenever the cursor lingers too long. The mood is melancholy-whimsical — the warmth of a Game Boy Color cartridge left on a sunny windowsill mixed with the existential vertigo of an entity who has noticed the loop. There is gentle humor (the NPC narrates in third person, calling itself "the unit"), reverence for chiptune-era craft (every animation is restricted to 8-frame sprite cycles at 12fps, every transition is a visible page-turn), and a thread of quiet philosophy (each "quest" the visitor accepts is really a meditation on agency, repetition, and the dignity of side characters). It is **goblincore-pixel-art** in feel — earthy greens, mossy stones, foraged trinkets — but viewed through the phosphor glow of a 1996 console. Nothing is corporate, nothing is "clean." Pixels are crunchy and unapologetic.

## Layout Motifs and Structure

The structure is a **broken-grid memory palace** rendered as a single full-bleed pixel canvas — explicitly NOT a dashboard, NOT a card-grid, NOT a centered hero. The viewport is divided like a Zelda overworld map: a 16x12 tile grid where each tile is exactly `clamp(48px, 5vw, 96px)` square and snaps perfectly with `image-rendering: pixelated`. Onto this grid the page paints six "rooms," each occupying an irregular footprint of tiles (room 1 is a tavern interior of 7x9 tiles in the upper-left; room 2 is a forest clearing of 11x6 tiles spilling diagonally; room 3 is a basement of 5x12 tiles running the full vertical of the right edge, etc.) and connected by visible doorways drawn as 1-tile-wide passages. The visitor scrolls **horizontally as well as vertically** — the canvas is 200vw wide and 280vh tall — and a tiny pixel-sprite avatar (the NPC, 16x16 pixels, idle-animation 4 frames at 4fps) trails the cursor as if the cursor were a player walking through the rooms. Each room contains one **dialog-box panel**: a chunky 9-slice-rendered text frame in the unmistakable Pokemon Crystal vernacular (rounded inner corner sprites, a triangle-arrow blink at the bottom-right when text completes), holding the actual prose content of that section. The dialog boxes type themselves out character-by-character at 32 chars/second on first viewport entry. Crucially: every layout decision is **tile-aligned**. There are no half-pixels, no fluid columns, no elastic widths inside content blocks — everything snaps to the 48-96px tile lattice, producing a deliberate "grid-locked" rigidity that feels like an SNES overworld and rejects modern fluid responsive convention.

## Typography and Palette

**Primary display face:** **"Press Start 2P"** (Google Fonts) at sizes 16px, 24px, 32px, 48px — never in-between, never scaled fractionally, since the font is a bitmap rendering and intermediate sizes blur its pixel grid. Used for room titles, dialog-box character names, and inventory labels. **Secondary readable face:** **"VT323"** (Google Fonts) at 20px / 28px / 36px for body prose inside dialog boxes — a CRT-terminal-style font with thin pixel strokes, set with `letter-spacing: 0.04em` and `line-height: 1.45` to feel like Phosphor-green text on a 14-inch Trinitron. **Marginalia and commentary** (the NPC's third-person self-observations) use **"Silkscreen"** (Google Fonts) at 8px / 16px in a muted dim color, presented as if scratched into the wallpaper of each room. **No** humanist sans, **no** mono coder font, **no** garamond — three pixel/bitmap Google Fonts only.

**Palette — "Mossy Cartridge" (8 colors, locked):**
- `#1f2a1c` — Cave Black (background of CRT, deepest shadow)
- `#3d5a3a` — Moss Stone (primary terrain green, room walls)
- `#7a9a5e` — Lichen (mid-green, foliage and soft glow)
- `#c8d39a` — Bone Wheat (lightest in the green ramp, dialog-box paper)
- `#8b6f3e` — Damp Oak (wood frames, floors, doorways)
- `#d4a657` — Rusted Brass (highlight metal, accept/decline indicator)
- `#a8473c` — Berry Rot (warning, danger, the NPC's blinking heart)
- `#5b6b8e` — CRT Phosphor Blue (scanline tint, cold UV bloom)

The palette is restricted to these eight colors **everywhere** — no gradients, no transparency blends, no anti-aliased mid-tones. Color shifts are dithered using Bayer 4x4 patterns drawn in CSS `background-image` from inline SVG, the way 1996 art directors faked an extra 200 colors out of a 16-color hardware palette.

## Imagery and Motifs

**Sprite vocabulary:** the entire visual surface is pixel-art, drawn at the native tile resolution (16x16 or 32x32) and then upscaled with `image-rendering: pixelated` to whatever screen size requires. Each "room" carries its own sprite cast:
- **The Lamppost** (recurring, in every room as a small cameo): a 16x32 sprite, post wrought-iron, lamp flame animated 6 frames at 8fps, casting a pixel-stepped cone of light implemented as a clipped polygon of `#7a9a5e` at 30% dither.
- **The Idle NPC sprite** (the cursor follower): 16x16, 4-frame idle (breath cycle: chest expand, contract, expand, contract), wears a leaf-green tunic (#3d5a3a), a goblin-ish pointed cap, and carries a tiny notebook drawn as 3 pixels of #c8d39a.
- **Foraged trinkets** scattered tile by tile across rooms: a brass bell, a moss-furred acorn, a chipped teacup, a folded note, a single Game Boy cartridge labeled "QUEST.GB" — each 16x16, hover-bobs 2px with a 1.4s sine cycle, and reveals a one-line dialog when clicked.
- **CRT overlay:** a full-viewport `position: fixed` canvas drawing a 2-line-tall scanline pattern at 30% opacity (`#5b6b8e` lines on transparent), plus a slow 0.4Hz vertical roll achieved by translating the scanlines `-100%` to `100%` over 12 seconds, plus a vignette of `#1f2a1c` darkening the corners by 18%.
- **Dithered transitions:** when a room "loads," a 4x4 Bayer dither dissolves it in over 380ms — implemented as a CSS mask animation revealing pixels from a thresholded noise field, *not* as opacity fade.
- **Decorative motifs (NEVER icon-fonts, NEVER svg line-icons):** mossy bricks, mushroom clusters (red caps with white pixel-spots), tree stumps with concentric ring textures, a sleeping cat sprite that snores in a 6-frame cycle, dialog-cursor blinks (the famous Pokemon down-arrow triangle), and `<select>`-style menu cursors shaped like tiny pointing-finger sprites.

The page has the texture of a forgotten `.gba` ROM left running in a drawer for two decades.

## Prompts for Implementation

**Storytelling arc — six rooms, six confessions:**

The site is structured as a single horizontally-and-vertically scrollable pixel-art world. The visitor enters at the **Tavern of First Lines** (upper-left), where the NPC introduces itself by typing out — character by character — the same greeting it has delivered 4,712,089 times. Scrolling east leads to the **Clearing of Forgotten Side-Quests**, a forest of dialog-stumps each carrying one abandoned quest the player never came back for ("Find my brother's spectacles" — issued 2,210 times, completed 11). South of the clearing is the **Cellar of Repetition Errors**, where each tile shows a glitched line the NPC accidentally said in the wrong context ("Welcome to the inn, traveler!" — said inside a burning castle, 14 times). East-south is the **Library of Branches Untaken**, a bookshelf-lined room cataloguing dialog options the player never selected — pure unrealized possibility, rendered as books whose spines are crossed-out option text. Far north is the **Belfry of the Save-Point**, a single tower tile where the NPC contemplates the campfire-save sprite that never animates for *them*. Final room (lower-right corner of the canvas) is the **Garden of the Quiet Goodbye**, where the NPC for the first time speaks a line never written into the script.

**Animation rules (chiptune-strict):**
- All animation frame rates: **8fps, 12fps, or 4fps** — never 60fps, never spring physics. Easing is `step-end` or `steps(N, end)`, not cubic-bezier.
- All translations snap to integer pixels — apply `transform: translate(Xpx, Ypx)` where X and Y are computed as `Math.round(value)`. No subpixel motion.
- Cursor follow uses `requestAnimationFrame` but rounds the sprite position to the nearest 4-pixel tile-quarter, producing visible "stepping" rather than smooth glide.
- Dialog-box typewriter uses `setInterval(31.25ms)` per character, with a `clack.wav`-style 80ms square-wave click on every 4th character (Web Audio API, OscillatorNode, type "square", frequency 880Hz, gain 0.04).
- Scrolling the world: `scroll-behavior: auto` (NEVER smooth) and a **screen-edge snap** — when cursor reaches within 80px of viewport edge, the world advances exactly one tile (48-96px) in 240ms `steps(6)` like a Zelda overworld camera.
- Idle animation on the NPC sprite runs continuously at 4fps regardless of activity — the unit always breathes.

**Interaction vocabulary:**
- Click any trinket: opens a Pokemon-Crystal-style dialog box, types the trinket's lore, ends with a blinking down-arrow that requires a click to dismiss (no auto-close).
- Hover any wall tile: reveals a one-pixel-wide selection border of `#d4a657` and a 12px-Silkscreen tooltip "??? — examine".
- Hold the `Z` key: speeds dialog typing to 96 chars/sec (the universal JRPG fast-forward convention). Hold `X`: skips to next dialog. Tap arrow keys: walk the NPC sprite manually, disabling cursor-follow until next mouse move.
- Konami code (↑↑↓↓←→←→BA): unlocks a hidden seventh room — the **Inventory of the Player Who Stopped Playing** — which is empty except for a single floating cartridge sprite labeled with the visitor's local time.

**AVOID — strict prohibitions:**
- No CTA buttons. No "sign up." No pricing tiers. No stat counters. No social-proof grids. No testimonial cards. No "Trusted by" logo strips. No newsletter modal. No cookie banner styled as a corporate footer.
- No flat-design rectangles with 8px border-radius. No glassmorphism. No neon-cyberpunk gradient. No floating photographic hero. No drop-shadows on text. No Inter, no Roboto, no Helvetica, no Space Grotesk.
- No fluid responsive scaling of pixel art. The world is exactly 200vw x 280vh on every viewport — on mobile, the visitor pinch-zooms and pans like an emulator.

The whole site should feel like the visitor accidentally booted up someone's heartfelt fan-game, where the NPC noticed them looking and decided, just this once, to talk back.

## Uniqueness Notes

**Differentiators from other designs in this 350-design corpus:**

1. **Pixel-art aesthetic at 1% corpus frequency, fused with goblincore at 2% and broken-grid at 10%** — this triad has never appeared together in any prior site. Where pixel-art does occur in the corpus (5 sites), it is treated as a single decorative flourish atop a modern flat-design layout; here it is the *entire substrate*, with every color, font, motion curve, and tile alignment enforced by 1996-era hardware constraints.

2. **Tile-locked grid replacing the dominant 74% dashboard / 52% card-grid / 47% full-bleed conventions.** The site has zero cards, zero dashboards, zero full-bleed hero sections. It uses a 16x12 hard-snapped 48-96px tile lattice — a layout primitive borrowed from SNES overworld maps that is mechanically incompatible with the corpus's prevailing fluid responsive grids.

3. **Restricted 8-color hardware palette with Bayer dithering, replacing the 81% gradient / 81% warm convention.** No gradient appears anywhere. Color depth is restored only through SVG-encoded ordered dither — a technique invented for the Game Boy Color, never previously deployed in this corpus.

4. **Animation strictly at 4/8/12 fps with `step-end` easing**, in opposition to the corpus's 77% parallax / 69% stagger / 34% spring conventions. There is no smooth motion anywhere on the site. Every transition is a visible discrete-step cycle, every cursor follow is integer-pixel-snapped.

5. **Three-bitmap-font typography stack (Press Start 2P + VT323 + Silkscreen)** — none of these appear in the corpus's dominant 81% mono / 39% humanist / 25% handwritten faces, and none of the three has been used together previously in this codebase.

6. **Diegetic narrative voice from the NPC itself** — the page is not a marketing surface, not an editorial spread, not a gallery. It is the inside of a fictional character's mind, complete with self-talk, save-point existentialism, and a Konami-code easter room. This rejects the corpus's 66% friendly / 48% authoritative / 11% scholarly tone defaults in favor of a melancholy-whimsical first-person voice.

**Chosen seed/style:** `aesthetic: pixel-art-goblincore, layout: broken-grid-tile-locked, typography: bitmap-press-start-vt323-silkscreen, palette: mossy-cartridge-8color-dithered, patterns: step-end-chiptune-cycles, imagery: sprite-art-dialog-box, motifs: lamppost-trinket-CRT-scanline, tone: melancholy-whimsical-first-person.**

**Avoided patterns from frequency analysis:** photography (80% — none here), gradient (81% — zero gradients), warm palette (81% — palette is mossy-cool with one rust accent), parallax (77% — no parallax), stagger (69% — no stagger entrances), mono typography (81% — no mono code-font), hand-drawn (75% — no hand-drawn texture, all pixel-grid), friendly tone (66% — replaced with melancholy first-person), dashboard (74% — replaced with tile-grid overworld), card-grid (52% — replaced with dialog-box rooms).
<!-- DESIGN STAMP
  timestamp: 2026-05-11T01:54:26
  domain: npc.quest
  seed: seed
  aesthetic: npc.quest is **The Idle Dialogue Atlas** — an unauthorized archive belonging to ...
  content_hash: d32c72ba201d
-->