# Design Language for mang.quest ## Aesthetics and Tone mang.quest is the **field atlas of a 16-bit overworld that was never shipped** — the surviving design bible of an imaginary 1994 Super Famicom adventure called *MANG*, recovered as a stack of dithered tile sheets, hand-drawn world maps on graph paper, and the lead artist's annotated colour notes. The aesthetic is **pixel-art** in the deliberate, archival sense: not the kitsch "retro gaming" pastiche of arcade marquees and CRT scanlines for nostalgia's sake, but the *quiet, exacting craft of a tile artist at 4× zoom* — 8×8 and 16×16 cells, hard square pixels, ordered Bayer-matrix dithering between two palette entries instead of gradients, single-pixel outlines, and the particular melancholy of an overworld glimpsed at dawn before the player wakes the village. The tone is **whimsical-creative** but unhurried — wonder rather than hype. "Quest" here is not a marketing funnel; it is a *route across a hand-tiled continent* — woodlands, a salt marsh, a stepped mesa, a sleeping town — narrated like a manual you read under the covers the night before a long weekend. There is reverence for limitation: 16 colours, no anti-aliasing, no transparency gradients, every pixel placed on purpose. The mood lands between a worn Nintendo Power map insert and a museum vitrine of cels: playful, precise, and faintly elegiac for a world that only ever existed in a binder. ## Layout Motifs and Structure The layout is a **single continuous vertical scroll rendered as a stitched world map** — `immersive-scroll`, never a card-grid, never a dashboard, never bento tiles. The whole page is one **overworld strip**, ~960px of "playfield" centred on a darker "out-of-bounds" border, and scrolling down is *travelling south across the continent of MANG*. Six **regions** chain top to bottom — `00 TITLE PLATE`, `01 GREENMORE WOODS`, `02 THE SALT MARSH`, `03 MESA OF STEPS`, `04 TOWN OF MANG`, `05 THE EDGE TILE` — each at least 100vh, each composed as a **diorama** where pixel-tiled terrain, a few sprite-scale figures, and typeset "manual" captions sit in fixed spatial relationships. **Diorama composition rules:** - Everything snaps to an invisible **16px grid**. Type baselines, sprite positions, panel edges, padding — all multiples of 16. Nothing floats off-grid; the rigidity *is* the texture. - Each region has a **terrain band** (full playfield-width, tiled pixel art) and a **manual margin** — a narrow column, parchment-toned, set flush to one side, holding the region's title plate and 2–4 short paragraphs of "designer's notes." - A persistent **HUD ribbon** runs along the very top of the viewport: a 16px-tall pixel bar with the domain mark `MANG.QUEST` in a bitmap face on the left, a tiny walking-sprite "cursor" in the middle that advances one tile-step per ~8% of page scrolled, and a region counter (`AREA 02/05`) on the right. It is chrome, but *diegetic* chrome — the game's status bar, not a website nav. - Transitions between regions use a **2px hard "screen-wipe" seam** — a single dithered diagonal band, like the curtain transition between map screens — never a soft fade. - No max-width "content well" beyond the playfield. No sidebars beyond the manual margin. No modal, no router, no SPA. One descent. ## Typography and Palette **Typefaces (Google Fonts only — all verified available):** - **Silkscreen** — the bitmap display face. Used for the HUD ribbon, region numerals, title plates, and short all-caps labels. Pixel-grid letterforms that sit *exactly* on the 16px lattice. Set at 1rem / 16px and integer multiples only (16, 32, 48px) — never fractional sizes, never letter-spacing tricks; let the bitmap breathe at its native resolution. *This is the face that defines the site.* - **VT323** — the secondary monospace, used for "designer's notes" body copy and caption text in the manual margin. A warm terminal/typewriter mono that reads like a 1994 design-doc printout. Set at 1.25rem with line-height 1.6, generous and legible. - **Fraunces** (variable, optical-size axis, used at 9pt setting, 400 & italic) — the *one* anti-pixel concession: used only for a single epigraph on the title plate and a single closing line on the Edge Tile, to suggest the human hand behind the binder. Restricted; never used for headings, never inside a diorama. **Palette — a strict 16-entry "console" set; only these may appear:** - `#181425` — **out-of-bounds void** (the border around the playfield, deepest shadow) - `#3a4466` — **dusk slate** (UI panel fill, distant hills) - `#5a6988` — **fog blue** (mid shadows, marsh water) - `#262b44` — **night ink** (sprite outlines, text on light) - `#f4f4f4` — **manual paper** (the parchment margin, lightest pixel) - `#e8d8b0` — **aged map cream** (caption backgrounds, sand) - `#c0a25a` — **brass legend** (HUD accents, the walking-sprite cursor highlight) - `#8a6f30` — **old-oak brown** (tree trunks, fence rails, frame lines) - `#3e8948` — **greenmore leaf** (woodland canopy) - `#265c42` — **deep grove** (forest shadow) - `#a2dcc7` — **marsh reed** (salt-marsh grasses, water highlight) - `#c84e4e` — **questline red** (the route dashes, single emphasis colour, the start-flag) - `#e09b3a` — **mesa ochre** (stepped-mesa stone, dawn glow) - `#7a3045` — **mesa shadow** (canyon depths) - `#cfa8d8` — **dawn lilac** (sky band at the title plate, far-off light) - `#2a2f4a` — **deep sky** (night portion of the gradient-by-dithering sky) Dithering, never blending: where two of these should "fade" into each other (sky, water, distant hills), use an ordered 4×4 Bayer dither between the two palette entries — visible square cross-hatch, not a smooth ramp. ## Imagery and Motifs - **Tiled terrain.** Each region's terrain band is built from a small set of repeating 16×16 tiles: grass, tree, water, sand, stone-step, fence, signpost, cottage-roof. Tiles repeat honestly — you can see the seams, and that is correct. Hand-place a few "decoration" tiles (a stump, a well, a single sheep sprite) to break the grid rhythm. - **Sprites at human scale.** 1–3 small character sprites per diorama: a hooded walker with a staff, a marsh heron, a town child with a kite. ~24px tall, 2-frame idle bob (one pixel up, one down, ~600ms). They are *witnesses*, not interactive — never clickable, never a CTA. - **The questline.** A dashed red (`#c84e4e`) route, 2px squares spaced 2px apart, threads down through every region — entering each diorama from the top seam, weaving past the decorations, exiting the bottom seam. It is the through-line: the player's path across MANG, drawn the way a map insert marks the critical route. - **Map-insert furniture.** A pixel **compass rose** (8 spokes, brass-and-ink) anchored in the title plate's corner; a small **legend box** ("△ tree ≈ marsh ▣ town ⚑ start") rendered as bitmap glyphs; **tile-sheet swatches** in the Edge Tile region — a literal grid of the 16 palette colours with their note-names beside them, like the back page of a design bible. - **Graph-paper substrate.** Behind the manual margin, a faint pixel grid (1px lines every 16px, `#5a6988` at ~12% over `#f4f4f4`) — the artist's planning paper showing through. - **No photography. No 3D. No gradient meshes. No glassmorphism.** Every visual element is hand-placeable on a pixel grid or it does not belong. ## Prompts for Implementation Build mang.quest as **one long pixel-art HTML document** — six regions, scrolled top to bottom, no SPA, no router, no modal, no email capture, no pricing block, no testimonial wall, no stat-grid, no FAQ accordion, no "get started" funnel. The visitor *travels south across a tiled continent* the way you'd trace a route on a folded map insert. Prioritise **atmosphere over information**, **craft-of-the-pixel over volume of content**, **one slow descent over branching navigation**. Rendering rules (these are the whole game): - Set `image-rendering: pixelated` on every raster element. Author pixel art either as tiny inline SVG with hard `shape-rendering: crispEdges` rects on a 16-unit grid, or as small canvases drawn at low resolution and CSS-scaled by an integer factor (×3 or ×4) — **never** ship a blurry upscale. - Snap everything to a **16px lattice**: use `--cell: 16px` and express all spacing, type size, sprite position, and panel dimension as `calc(var(--cell) * N)`. Disable sub-pixel layout where you can. - **Dither, don't gradient.** Skies and water are 4×4 Bayer-dithered between two palette entries. No `linear-gradient()` with more than a hard 2-stop step. No box-shadow blur; "shadows" are a 1px offset block of the next-darker palette colour. - The **HUD ribbon** is `position: fixed`, 16px tall (or 48px at ×3), with the walking-sprite cursor advancing in discrete tile-steps tied to `scrollY` (round to the nearest cell) — it should *step*, never glide. The region counter updates on `IntersectionObserver`. - **Region-to-region wipes:** as a region scrolls past, render a 2px diagonal dithered seam that "draws" left-to-right over ~24px of scroll — a screen-wipe, hard-edged. - **Sprite idle animation:** `steps(2)` keyframes, ~600ms, one-pixel vertical bob. The questline's red dashes can "march" (animate `background-position` by one dash-period over ~1s, `steps(8)`) — subtle, like a route being highlighted. - **Scroll-triggered reveals:** when a diorama enters view, its decoration tiles "pop in" one cell at a time on a short `steps()` stagger (≤120ms each) — like a map screen tiling itself in. Honour `prefers-reduced-motion` by showing everything placed. - **Type discipline:** Silkscreen at 16/32/48px only; VT323 for notes; one Fraunces-italic epigraph at the top and one at the Edge Tile. Never anti-alias the bitmap face by scaling it fractionally. - **Copy voice:** "designer's notes" — short, second-person, like a 1994 strategy guide that wandered into being a love letter. Region titles in Silkscreen caps. The Edge Tile closes on the Fraunces line and the 16-swatch palette sheet — the back cover of the binder. No links out, no share buttons, no footer nav: when the map ends, it ends. ## Uniqueness Notes Differentiators from every other site in the catalogue: 1. **A strict, declared 16-colour console palette with named entries — and dithering instead of gradients.** 96% of sibling sites use gradients; mang.quest *bans* them, replacing every fade with a visible 4×4 Bayer dither between two of exactly sixteen colours. The palette sheet is even rendered on-page as the closing element. No other site treats its colour set as a finite, exhibited artefact. 2. **Pixel-art aesthetic at ~3% sibling frequency, treated as archival craft rather than retro kitsch** — no CRT scanlines, no neon arcade glow, no "press start" parody. The framing is a *recovered design bible* for an unreleased 1994 console game: hand-tiled dioramas, graph-paper substrate, designer's-notes copy. Distinct from the catalogue's two dominant looks (hand-drawn 96%, glassmorphism 73%), and a different register from the other `.quest` siblings (adhoc.quest's mid-century brass; a6c.quest's art-deco light-academia). 3. **A diegetic 16px-tall HUD ribbon with a walking-sprite cursor that *steps* in discrete tiles tied to scroll position** — chrome reframed as the game's status bar, advancing one tile per scroll-quantum rather than gliding. Combined with the persistent dashed-red "questline" threading through every region's diorama, navigation becomes a literal route across a map, not a menu. 4. **Everything snapped to a single 16px lattice with `image-rendering: pixelated` enforced globally** — the layout's rigidity is the texture; sub-pixel positioning is treated as a defect, not a default. Avoided overused patterns from the frequency analysis: gradient palette (96% — banned outright), photography imagery (98% — none used), hand-drawn aesthetic (96% — replaced with grid-exact pixel tiles), glassmorphism (73% — no translucency at all), card-grid layout (89% — single immersive scroll), parallax/cursor-follow/spring/magnetic motion (75–95% — replaced with discrete `steps()` tile animations). Chosen seed/style: **"90s pixel art playful"** — `aesthetic: pixel-art, layout: immersive-scroll, typography: tech-mono, palette: high-contrast, patterns: scroll-triggered, imagery: custom-illustration, motifs: retro-patterns, tone: whimsical-creative`.