# Design Language for maid.quest ## Aesthetics and Tone maid.quest is a **16-bit role-playing game that was never released** — a complete, polished JRPG cartridge titled *MAID QUEST: The Manor of a Thousand Floors*, recovered from a defunct studio's archive and presented here as a playable in-browser slice. The conceit: the visitor is a wandering adventurer who has just arrived at the gates of a vast, gently haunted manor, and the manor is staffed entirely by maids who are themselves party members, bosses, shopkeepers, and lost NPCs. The site is the game's **opening dungeon** and its **status screen**, rendered with absolute fidelity to the SNES/PC-98 era: chunky pixel tiles, dithered gradients, a 4-channel chiptune sensibility, dialogue boxes with that *tk-tk-tk* letter-by-letter typewriter cadence, and the specific melancholy of a 1996 fantasy game that took its own little world very seriously. The tone is **whimsical-creative** but never ironic — it commits. Maids are knights-errant of the broom. Tea service is a sacred combat art. A dropped saucer is a tragedy with full orchestral (well, square-wave) weight. The mood sits between *EarthBound*'s deadpan tenderness and *Princess Maker*'s loving menu-craft, with the dusty-attic warmth of a strategy guide whose spine has cracked from rereading. Nothing here is "edgy" or "premium" — it is **earnest, handmade, and pixel-proud**. The color of the experience is candle-amber dusk: a manor at the hour when the lamps are lit but the corridors are still long. ## Layout Motifs and Structure The site is a **stacked-sections vertical scroll** disguised as **moving between rooms of the manor**. There is no centered "content well" — instead, the page is a column of full-width *room plates*, each one styled as a single JRPG screen with a hard pixel border (a 4px double-line frame, like a Game Boy window). Scrolling down is "walking deeper into the manor"; a thin pixel **floor-counter** in the top corner ticks B1F → 1F → 2F → ... → 1000F (it skips, of course — "the stairwells fold"). **Room-plate composition rules:** - Every plate is min-height 100vh and bordered by the double-pixel frame with rounded-by-one-pixel corners (the authentic "beveled window" look — light edge top-left, dark edge bottom-right, classic skeuomorphic-pixel bezel). - The **dialogue box** is the recurring structural unit: a bottom-anchored panel, ~22% viewport height, dark navy fill with a 2px cream inner border and a 1px black outer border, holding letter-by-letter revealed text and a blinking ▼ "press to continue" caret. At least four plates resolve their content *inside* a dialogue box rather than as free-floating prose. - A persistent (but unobtrusive) **party ribbon** rides the left margin on desktop — three to five tiny 32×32 pixel maid portraits stacked vertically with HP/MP bars, like an RPG status sidebar. It is decorative narration, not navigation, and collapses to a single sprite on mobile. - Section transitions use a **fade-to-black with a 1-bit dither sweep** ("the screen wipes as you enter the next room"), not a smooth crossfade — the dither pattern (Bayer 4×4) is visible mid-transition for ~250ms. - One plate is a **shop screen**: a two-column item list (left: pixel icon + name, right: price in a fictional currency, "✦ Doilies"), with a selection cursor (a white pixel hand ☞) that follows hover. It sells nothing — every "buy" prompt returns a maid's polite refusal in the dialogue box. - One plate is the **world map**: an isometric-ish pixel diorama of the manor seen from outside, with labeled regions (The Linen Wing, The Conservatory of Forgotten Names, The Sub-Cellar Where The Tea Is Aged). Regions glow on hover. No region is clickable to anywhere — it is a map of a place you are already inside. - The footer is a **save-point**: a pulsing pixel candle on a pedestal, the text "Your progress has been recorded in the manor's memory," and a fake "Continue?" / "Title Screen" menu pair. This is deliberately **anti-CTA, anti-dashboard, anti-stat-grid**: no pricing tables, no feature cards, no testimonial carousel, no metrics. The "stats" that appear are character sheets (a maid's STR / TEA / GRACE), which are flavor, not data. ## Typography and Palette **Typefaces (all available on Google Fonts):** - **Press Start 2P** — the headline and dialogue-box face. Used for floor labels, room titles, menu options, and the letter-by-letter dialogue text. Set small (10–14px on body, never larger than 28px even for the title) because that's how this typeface breathes; generous letter-spacing, line-height ~1.9 so the blocky glyphs don't collide. This is the *voice of the game UI*. - **VT323** — the "manual / strategy-guide" face for any longer running prose (lore scrolls, the about-the-cartridge note). A terminal monospace that reads like a dot-matrix printed game manual; set at 18–22px, line-height 1.5. - **DotGothic16** — the "Japanese release" accent face, used sparingly for ornamental subtitles, region names on the world map, and the occasional bilingual flourish ("MAID QUEST / メイドクエスト"). Its bitmap-gothic forms add a PC-98 import-cartridge texture. No anti-aliased "smooth" font appears anywhere. `image-rendering: pixelated` governs every asset; `font-smoothing` is left default but the typefaces are inherently aliased. **Palette — "Candle-Amber Dusk Manor" (a tight 16-ish color SNES-style ramp):** - `#1B1A2E` — **Deep Manor Navy** (primary background, the corridor dark) - `#2C2A4A` — **Velvet Shadow** (dialogue-box fill, panel backgrounds) - `#4A3B6B` — **Dusk Plum** (mid shadows, hover states) - `#F4E9C8` — **Candlelight Cream** (primary text, window inner borders, the warm glow) - `#E8C170` — **Brass Amber** (highlights, the candle flame, selection cursor glint, headings) - `#D9756B` — **Maid-Ribbon Rose** (the maids' signature accent — bows, HP bars when full, key callouts) - `#7FB39B` — **Conservatory Sage** (the botanical/plant rooms, MP bars, a cool counterpoint) - `#3A6EA5` — **Linen-Wing Blue** (water, the world-map sky, info text) - `#1A1726` — **True Black-ish** (1px hard outlines on every pixel element — never pure #000) - `#C4B998` — **Aged Doily** (muted secondary text, disabled menu items) Gradients exist only as **ordered dithering** between two ramp colors (e.g. Navy → Plum sky done in a Bayer-matrix checker), never as smooth CSS gradients. The whole thing should look like it was painted at 256×224 and scaled up ×4 with nearest-neighbor. ## Imagery and Motifs - **Pixel-art sprites, CSS-drawn where possible.** Maid portraits (32×32 and 48×48), item icons (16×16: a feather duster, a silver teapot, a brass key, a folded napkin, a candlestick, a tiny grimoire titled "Stain Removal vol. III"), and the candle save-point are all hand-built from `box-shadow` pixel grids or tiny inline SVGs with crisp edges — no photography, no 3D renders, no hand-drawn ink. - **Tile patterns as background texture:** a repeating 16×16 **parquet-floor tile** (Plum/Navy two-tone), a **wallpaper damask tile** for the Linen Wing (Cream-on-Plum, very low contrast), a **starfield tile** for the conservatory ceiling at night. - **The recurring iconography of service-as-adventure:** crossed feather-dusters where a game would put crossed swords; a teacup-and-saucer where it would put a shield emblem; a folded white apron rendered like a knight's tabard; a ring of keys as the "dungeon map" icon. - **A blinking ▼ caret** at the end of every dialogue box. A **white pixel-hand cursor ☞** for menu selection. A **flashing "!" bubble** over an NPC maid sprite when there's something to read nearby. A **floor-counter** in a tiny pixel frame, top-left. - **Atmospheric particles, pixel-style:** dust motes drifting in candlelight (2px cream squares, slow), an occasional pixel moth near a lamp, falling tea-steam wisps. All snap to a virtual pixel grid — no sub-pixel motion. - **Boss-intro motif:** when the page reaches the "Head Maid" plate, a name-plate slides in (`◆ ROSALIND, KEEPER OF THE THOUSANDTH FLOOR ◆`) with a screen-shake and an HP bar that fills left-to-right — pure JRPG drama, deployed once. ## Prompts for Implementation Build maid.quest as **one long single-page HTML document** styled as a playable JRPG slice — no SPA router, no modal stack, no real forms. The visitor scrolls down through the manor's rooms; every interaction should reinforce "you are inside a 16-bit game." Lean hard into **storytelling and in-engine animation** over information delivery — there is no "convert," only "explore the manor." - **Hard pixel rendering everywhere:** `image-rendering: pixelated` on all sprites/tiles; integer-multiple sizing; no `border-radius` larger than ~3px; no `box-shadow` blur — shadows are hard offset pixel-blocks. Disable text/image antialiasing aesthetics by leaning on bitmap fonts. - **Boot sequence:** the page opens on a black screen, a pixel "MAID QUEST" logo fades in via a **2-step dither dissolve** (no smooth opacity — two intermediate dither frames), a square-wave-style "title jingle" CSS animation pulses the brass-amber glow, then a "▶ PRESS START" prompt blinks; first scroll or click "starts the game" and the first room wipes in. Total: ~3 seconds, skippable on second visit via a hidden flag. - **Dialogue typewriter:** body copy inside dialogue boxes reveals **one character at a time** (~28ms/char, `typewriter-effect`), with a soft "tk" tick animation on the box border every few characters; the blinking ▼ caret appears when a line finishes; on scroll/click the rest snaps in instantly (respect impatient readers). Use `prefers-reduced-motion` to render text fully immediately. - **Room transitions:** between section plates, do a **1-bit dither wipe** (Bayer 4×4 mask animated across the viewport, ~250ms each way, fade through Deep Manor Navy). This is the signature transition — make it crisp, not smooth. - **Cursor & menu interactivity:** menu lists (the shop, the save-point "Continue?" / "Title Screen", the world-map regions) use a **pixel-hand cursor** that snaps between items on hover with a tiny "blip" scale-pop (`spring`, but quantized to feel mechanical); selecting any item opens a dialogue box with a maid's in-character response. Nothing navigates away. - **Party ribbon (left margin, desktop ≥1024px):** a vertical strip of 3–5 maid sprites with name + HP/MP pixel bars; sprites do a 2-frame idle bob (alternate every 500ms); on hover, that maid's one-line bio types into the bottom dialogue box. Collapses to a single sprite + "PARTY ▸" on tablet/mobile. - **The world-map plate:** an isometric pixel diorama of the manor; named regions get a **brass-amber outline glow + a 2-frame shimmer** on hover and a region blurb in the dialogue box. Pan ~12px parallax-light on pointer move (the diorama tilts like a held cartridge) — keep it subtle and pixel-snapped. - **Boss plate (the Head Maid):** trigger a one-time **screen-shake (3px, 6 frames)**, a sliding ◆name-plate◆, and a **left-to-right HP-bar fill** with a chiptune-style staccato animation when this section enters the viewport. Use it exactly once for maximum weight. - **Save-point footer:** a pulsing pixel candle (3-frame flame loop), the line "Your progress has been recorded in the manor's memory," and a fake `▸ Continue?` / ` Title Screen` menu (the latter scrolls back to the boot screen). End the page here — no email capture, no links list dressed as navigation, no "subscribe." - **AVOID:** CTA-heavy layouts, pricing blocks, feature-card grids, testimonial carousels, real stat-grids, smooth gradients, glassmorphism, hand-drawn doodle illustration, stock photography, any "Get Started" energy. The only buttons are diegetic JRPG menu options that respond in-character. ## Uniqueness Notes 1. **A fully-committed playable-JRPG-slice metaphor.** Where sibling sites use parallax storytelling or editorial scroll, maid.quest *is a 16-bit game cartridge* — boot screen, dialogue boxes with character-by-character text, a party status ribbon, a shop screen, a world map, and a boss intro with HP-bar drama. Nothing on the page behaves like a website; it behaves like *EarthBound*'s opening dungeon. No other design in the corpus stages itself as an actual JRPG. 2. **Pixel-art everything, dither-only gradients.** Pixel-art imagery sits at ~3% in the corpus and bitmap typography (Press Start 2P / VT323 / DotGothic16) is rare; combining strict `image-rendering: pixelated`, CSS `box-shadow`-grid sprites, and Bayer-matrix ordered dithering as the *only* permitted gradient is a hard, distinctive constraint almost nothing else applies. 3. **The 1-bit dither room-wipe + "tk-tk-tk" typewriter cadence as signature motion.** Instead of the corpus-default smooth `parallax` / `fade-reveal` / `spring` cluster, maid.quest's motion vocabulary is *quantized and mechanical* — Bayer-mask wipes, 2-frame idle bobs, screen-shake, character-by-character text ticks — motion that feels rendered by a 1996 console, not a 2026 browser. 4. **Floor-counter narrative + "service as adventure" iconography.** The B1F→1000F floor counter that "folds the stairwells," and the systematic substitution of maid-craft for combat tropes (crossed feather-dusters for swords, teacup-saucer for shield crest, apron for tabard, key-ring for dungeon map) give it a coherent invented-world identity unlike any sibling. **Chosen seed/style:** `90s pixel art playful` — expressed as `aesthetic: pixel-art, layout: stacked-sections, typography: tech-mono (bitmap: Press Start 2P / VT323 / DotGothic16), palette: warm (candle-amber dusk ramp), patterns: typewriter-effect, imagery: custom-illustration (CSS pixel sprites), motifs: retro-patterns, tone: whimsical-creative`. **Avoided overused patterns (per frequency analysis):** skips `hand-drawn` (96%), `glassmorphism` (73%), `photography` (98%), smooth `gradient` (96%), `parallax`-heavy / `cursor-follow` / `spring` / `magnetic` defaults (79–95%), and `card-grid` / `centered` / `full-bleed` layout defaults — in favor of underused `pixel-art`, bitmap mono typography, `stacked-sections`, `typewriter-effect`, and dither-based transitions.