# Design Language for npc.quest ## Aesthetics and Tone This is the in-between place — the tavern at 3 a.m. after the player has logged off. **npc.quest** is the personal homepage of every non-player character who has ever stood under a flickering torch waiting for someone to walk up and press the action button. The aesthetic is **late-90s / early-2000s top-down JRPG pixel art**, rendered at a chunky, honest resolution (a strict 4px base "texel" grid), but the *tone* is unexpectedly tender and self-aware: melancholy, deadpan, a little proud. Think of the blacksmith who has forged the same sword 4,000 times and still means it. Think of the village elder who knows exactly which way the protagonist will go. The mood lives at golden hour inside a 16-bit world: warm CRT phosphor glow, scanlines you can taste, a faint barrel-roll vignette at the screen edges, dithered gradients in the sky. Nothing is anti-aliased. Everything snaps. Dialogue arrives one character at a time with a soft blip. The page should feel like booting a beloved cartridge that someone, somehow, wrote *about you* — except "you" are the one who never gets to leave town. Playful but never zany. The humor is dry. The pixels are sincere. ## Layout Motifs and Structure The whole site is staged as a **top-down tile map** — a single continuous "village" you scroll through vertically, like walking north through the overworld. Structure: - **The Spawn Screen (hero):** full-bleed pixel landscape — a cobblestone plaza, a fountain that loops a 6-frame water animation, the site title rendered as a hand-pixeled wooden signpost. A tiny idle NPC sprite stands center, breathing (2-frame bob), occasionally turning to face the cursor. No buttons. A dialogue box at the bottom edge types: *"Oh — you again. Or... someone new? Hard to tell from down here."* - **Tile rooms instead of sections:** each content area is a distinct "room" of the map — *The Tavern* (about), *The Quest Board* (work/links), *The Archive Cellar* (writing/log), *The Save Point* (contact). Transitions between rooms use a hard **screen-wipe** (a column of black tiles sweeping across) or a brief fade-to-black with the word "..." — never a soft modern crossfade. - **Persistent HUD overlay:** a thin pixel-framed status bar pinned top-left — not stats, but flavor: a tiny portrait, a "DISPOSITION: Cautiously Fond" line, and a day/night indicator that actually tracks the visitor's local time and re-tints the whole map (warm noon → indigo dusk → torchlit night). - **Dialogue box as the primary text vessel:** body copy doesn't sit in plain `

` blocks — it lives inside the classic JRPG message window (double pixel border, semi-opaque dark navy fill, a blinking ▼ "more" arrow). Long passages page through; short ones type out. - Strict alignment: everything lands on the 4px grid. No half-pixels, no blur, `image-rendering: pixelated` everywhere. Avoid: card grids, hero-with-CTA, pricing tiers, stat counters, glassmorphism. This is a *place*, not a landing page. ## Typography and Palette **Type (all on Google Fonts):** - **Press Start 2P** — the title signpost, room name plates, the HUD. Used sparingly and BIG; this is the "logo font" of the cartridge era. Letter-spacing left default; never italicized (it can't be). - **Pixelify Sans** — all dialogue-box body text and the typewriter readout. Cleaner pixel face, far more legible at paragraph length, supports a real reading rhythm at ~16–18px with generous line-height (1.7) so the "scanline" feel doesn't crush it. - **VT323** — terminal-flavored accents: timestamps, the day/night clock, the "▶ PRESS Z" prompts, file names in The Archive Cellar. Its slightly glassy CRT vibe contrasts the blocky Press Start 2P. **Palette — "Twilight Overworld":** - `#1b1d2e` — Deep Dusk Navy (background void, dialogue-box fill, the screen-wipe tiles) - `#2e2f4f` — Shadow Cobalt (secondary surfaces, the HUD frame interior, tile shadows) - `#e8c170` — Torchlight Gold (primary highlight — the signpost, active room plate, the blip-cursor; this is the "warm glow" color) - `#d35e57` — Brick Ember (the fountain accents, error/"can't go that way" flashes, NPC scarf) - `#6fb8a8` — Mossy Patina (grass tiles, the Save Point crystal, secondary links) - `#f4f0e6` — Parchment White (dialogue text, signpost lettering — never pure #fff) - Accent dither pairs for skies/gradients: gold→ember at noon, ember→cobalt at dusk, cobalt→navy at night, done with **ordered (Bayer) dithering**, not smooth gradients. Hard rule: no gradient is ever rendered smooth — only dithered. Shadows are flat 1-shade-darker blocks, not soft. ## Imagery and Motifs - **Hand-authored sprite work:** the idle NPC, the fountain, swaying lantern flames (3-frame), a cat that walks across the bottom of one room and never acknowledges you, drifting cloud-shadows over the map. - **Tilesets:** cobblestone, wooden floorboards, grass-with-tiny-flowers, cellar stone, water — each a repeating 16×16 (rendered 4×) pattern. Seams are *intentional*; tiles are tiles. - **The message window** itself is a recurring motif — its double border, the ▼ arrow, the portrait slot. It frames almost every piece of text. - **CRT atmosphere layer:** subtle scanlines (2px), a faint moving "rolling bar" of brightness every ~20s, corner vignette, a 1% RGB-split shimmer on the title only. - **Quest Board:** literal cork-board pixel art with pinned paper scraps — each scrap is a link/project, slightly rotated *to the nearest 4-degree increment*, with a pixel pushpin. - **Save Point:** a glowing rotating crystal/star (the classic green sparkle), used as the contact anchor — "Record your presence here." - **Particle motifs:** torch embers rising, dust motes in the cellar shaft of light, fireflies at night. All chunky pixel particles, never smooth. - Footer = a "GAME OVER... ? no — just a SAVE" screen, with the visitor's local timestamp in VT323 as a fake save-slot line: `SLOT 1 — VISITED [time] — PLAYTIME 00:0X`. ## Prompts for Implementation Build this as **one immersive full-screen scene the visitor walks through** — no traditional page chrome, no nav bar of text links. The visitor "moves north" by scrolling; scroll position drives which room is on screen and triggers the screen-wipe transitions between them. - **Open on the Spawn Screen with zero instructions** except the dialogue box typing itself out. The NPC sprite idles and turns to track the cursor (`pointermove` → flip the sprite's facing among 4 directions, snapping). After the first line finishes, a small VT323 `▶ scroll to continue` blinks at the bottom — that's the only affordance. - **Typewriter dialogue is the core interaction.** Use `requestAnimationFrame`, ~28ms per glyph, with a short Web Audio "blip" (a tiny square-wave tick, pitched up for capital letters) — *respect a mute toggle in the HUD*, default sound OFF, but make turning it on feel like a discovery. Clicking the box or pressing **Z / Enter** fast-forwards the current line, then advances to the next page with the ▼ arrow. - **Day/night re-tinting is real:** read `new Date().getHours()` on load, pick the dither sky + an overlay tint that washes the whole map, and let the HUD clock tick live. If it's night for the visitor, fireflies; if noon, harsher gold light and shorter shadows. This makes every visit slightly different. - **Transitions:** room-to-room = a column-by-column black-tile wipe (CSS steps() or a canvas loop), ~400ms, with a beat of "..." in the message window. Never crossfade. Never ease-in-out smoothly — use `steps()` timing functions so motion is quantized, like sprites moving tile-to-tile. - **Pixel discipline in code:** a single CSS custom prop `--texel: 4px`; size and position everything in multiples of it; `image-rendering: pixelated` on every sprite/canvas; render sprites large via integer-scaled `` or background-image, never SVG-smooth. Disable subpixel font hinting where possible; pin font sizes to clean multiples. - **Storytelling > features:** the "about" isn't a bio, it's the Tavern keeper telling you what it's like to be the person the story passes through. The "work" isn't a portfolio grid, it's quest-board scraps you can pull off and read. The "contact" isn't a form, it's a Save Point — touching it shows a "PRESENCE RECORDED" sparkle and reveals the email/links as inventory items. - Honor `prefers-reduced-motion`: kill the rolling CRT bar, the embers, the screen-wipe (swap for an instant cut), and let dialogue render fully at once — but keep the world, the tint, and the chunky look intact. - One Easter egg: the cat. If the visitor clicks the cat three times, it finally turns, looks at them, and the dialogue box says one line — *"...huh. So you can see me too."* AVOID entirely: CTA-stacked layouts, pricing blocks, stat-grids, testimonial carousels, marketing-funnel structure of any kind. There is nothing to convert here. There's just a town, and someone in it, glad you stopped. ## Uniqueness Notes Differentiators from other designs in the batch: 1. **The site IS a top-down JRPG map you traverse**, with literal "rooms," tile-by-tile screen-wipe transitions, and a real-time day/night re-tint — not a parallax-storytelling scroll and not a card-grid. The structure is a *place*, navigated as a place. 2. **The JRPG message window is the universal text container** — every paragraph pages through a double-pixel-bordered dialogue box with a typewriter blip and a blinking ▼ arrow. No plain `

` body text anywhere. 3. **Strict 4px "texel" grid + dither-only gradients + steps()-quantized motion** — a hard-committed retro-game render pipeline (Press Start 2P / Pixelify Sans / VT323), where even animation timing refuses to be smooth, the opposite of the glassmorphism-and-spring norm. 4. **Emotional inversion of the premise:** an NPC's homepage that is quietly poignant about being the character the story walks past — the cat Easter egg, the "PLAYTIME 00:0X" save-slot footer, "DISPOSITION: Cautiously Fond" in the HUD. Chosen seed/style: **"90s pixel art playful"** (seeds.json) — leaning the `pixel-art` aesthetic (only ~3% of the batch — strongly underused) with a `hud-overlay` layout, `mono`/pixel typography, `warm` torchlight palette, `typewriter-effect` + `glitch` (CRT) patterns, `pixel`/`generative-art` particle imagery, and a `mysterious-moody` ⨯ `whimsical-creative` tone. Deliberately avoids the batch's overused patterns from the frequency analysis: hand-drawn aesthetic (96%), glassmorphism (79%), photography imagery (98%), card-grid layout (90%), full-bleed-with-CTA hero, spring/magnetic/cursor-follow-as-default motion (kept only a snapping sprite-facing nod), gradient palettes (replaced with dithered ramps), pastoral-romantic tone.