# Design Language for thefirst.quest ## Aesthetics and Tone thefirst.quest is **the inside cover of a quest log that has only one entry — Entry 001 — and that entry is the player's**. The aesthetic is **90s pixel-art role-playing-game manual**, but rendered not as nostalgia-bait, more as a *living artifact*: the lovingly-misregistered colour separations of a 1994 strategy-guide reprint, the dithered gradients of a 256-colour CRT, the cross-hatched ink of a hand-drawn dungeon map folded into the back of a cardboard box. Imagine the *Ultima IV* cloth map, the *EarthBound Player's Guide* clay dioramas, and the start-screen of a Game Boy Color cartridge that was never released — all flattened into a single scrolling document that reads like the moment *before* an adventure: the bag is packed, the door is open, nothing has happened yet, and that emptiness is the whole point. Tone is **whimsical-creative crossed with mysterious-moody** — the warmth of a friend handing you a controller and saying "you go first," held against the cold blue hush of a save-point room at 2 a.m. It is *not* energetic, *not* gamified-with-XP-bars, *not* a SaaS dressed in 8-bit clothes. It speaks in the second person, in short imperative lines like quest objectives ("Step outside. Name yourself. Choose a weapon you cannot lift yet."), with the occasional `[!]` parenthetical and the patient, slightly-melancholy voice of a game that knows you will eventually turn it off. ## Layout Motifs and Structure The page is a single **immersive-scroll** descent through **seven Rooms** — the canonical opening rooms of an RPG: the BLACK SCREEN, the NAME ENTRY, the CHILDHOOD BEDROOM, the FRONT DOOR, the FIRST FIELD, the SAVE POINT, and the THRESHOLD. There is no nav, no menu, no router. You scroll the way you walk: one screen, then the next, no going back without effort. Each Room is `100vh` minimum. **The Tilemap Grid.** Every Room is composed on a visible **32×32-pixel tile lattice** — a faint 1px hairline grid in `#2A2440` that snaps every element to the cell. Headlines, illustrations, text columns, and the player-sprite all align to this grid; nothing floats free of it. The lattice is the structure *and* the decoration. On scroll, the lattice of the outgoing Room "tears" downward one tile-row at a time (an 8-step CSS stagger) while the incoming Room's lattice "draws in" tile-by-tile from the top-left, like a level loading. **The Status Strip.** A persistent 32px-tall strip pinned to the bottom of the viewport — pixel-bordered, the colour of weathered parchment — shows three things only: the current Room name in the left cell (`ROOM 03 — THE CHILDHOOD BEDROOM`), a single heart sprite in the centre that is always *half-full* (you start wounded; that is the joke and the mood), and a tiny walking-sprite in the right cell whose animation frame advances with scroll velocity. No HP numbers, no XP, no currency. The strip is the only chrome. **Asymmetric room composition.** Within each Room the tilemap is divided unevenly — never a centred column. Room 03 puts the bedroom diorama in the left 18 columns and a single ink-handwritten paragraph in the right 11, with an empty 3-column "corridor" of pure backdrop between them. Room 05 inverts it. The negative space is always *floor you haven't walked yet* — deliberate, named in the layout comments as `--unwalked`. ## Typography and Palette **Fonts (Google Fonts only):** - **Press Start 2P** — used for *all* Room titles, the Status Strip labels, and any `[!]` system callout. Pure pixel bitmap; set at 14px → 22px, letter-spacing 0.04em, line-height 2.0 so the bitmap stays crisp and never anti-aliases into mush. This is the voice of *the game speaking to you*. - **VT323** — the dialogue voice. A clean monospaced terminal face that reads like NPC text crawling across a window. Set at 1.35rem, line-height 1.5, used for all body copy, quest objectives, and the bedroom paragraph. It is unhurried and slightly green-CRT in feel even when coloured warm. - **Special Elite** — used *only* for the hand-typed marginalia and the single closing line at the Threshold ("you go first."). A worn typewriter face — the human annotator who once owned this strategy guide and pencilled notes in the gutters. Restricted: never a heading, never more than two lines at a time. **Palette — a CRT dusk, jewel-toned and dithered:** - `#0E0A1F` — **Cathode Black.** The base. Not true black; a deep indigo-violet, the colour of a powered-on screen showing nothing. - `#1B1438` — **Save-Room Blue.** Panel fills, the bedroom walls, the depth layer behind the tilemap. - `#2A2440` — **Grid Violet.** The 32px lattice hairlines and pixel borders. - `#E8C170` — **Torch Brass.** The primary text on dark, the heart-sprite outline, the parchment Status Strip. Warm, slightly desaturated, like a Game Boy Color amber at half brightness. - `#D85C7E` — **Wound Rose.** The half-heart fill, the `[!]` callouts, the single accent that appears once per Room and never twice. - `#5FB8A8` — **Field Teal.** The first-grass colour, used in Room 05's pixel-meadow and as the hover/link tint elsewhere — the only "outside" colour, kept rare. - `#F4ECD8` — **Manual Ivory.** Reserved exclusively for the hand-typed Special Elite marginalia and the final line, so the human annotations always read warmer than the game's own voice. Dithering is real: gradients between Cathode Black and Save-Room Blue are done with a CSS `repeating-conic-gradient` 2×2 Bayer pattern, never a smooth `linear-gradient`. ## Imagery and Motifs **Everything is pixel art, hand-built as SVG `` grids or CSS box-shadow sprites — no photography, no 3D, no smooth vector curves.** Pixels must be visible; `image-rendering: pixelated` everywhere. - **The Player Sprite.** A small 16×24-pixel figure in Torch Brass with a Wound Rose detail, seen from behind, standing at the threshold of every Room. It has a 4-frame idle animation (breathing) and a 6-frame walk cycle triggered by scroll. It never faces the viewer. It is always one tile *ahead* of the text, as if waiting for you to catch up. - **The Half-Heart.** The single most-repeated motif: a pixel heart, 9×8, filled exactly 50% with Wound Rose, the rest hollow Torch-Brass outline. It anchors the Status Strip and appears, tiny, beside each Room title. The site never explains it; that restraint is the design. - **The Tilemap Diorama.** Each Room contains one isometric-leaning pixel diorama built on the tile grid: Room 03 a child's bedroom (a too-small bed, a wooden sword leaning by the door, a window showing dithered dawn); Room 05 a single screen of grass with one trembling shrub; Room 06 a glowing pixel save-crystal humming in an empty stone room. Each diorama has exactly one *animated tile* — the curtain, the shrub, the crystal pulse — and nothing else moves. - **The Cursor as Selection Box.** The mouse cursor is replaced by a 2px Torch-Brass pixel-bracket reticle (the "▶ choose this" box from a menu). On any selectable element it "snaps" to enclose the element's tile bounds with a hard step, never a smooth transition, and plays a single sub-pixel jitter. - **Map-fold creases.** A faint Grid-Violet diagonal hairline runs through Rooms 04 and 07, as if the whole page were a paper map that had been folded into a box once and never quite flattened. ## Prompts for Implementation Build thefirst.quest as **one long single-route HTML document** — seven Rooms, one CSS file, one small JS module. No SPA framework, no router, no modals, no cookie banner, no email capture, no "subscribe," no pricing, no testimonials, no stat-grid, no FAQ, no footer of links. The entire page is the *opening cutscene of a game that is also a homepage*. Atmosphere over information. One slow vertical walk, never a branching menu. **Storytelling structure (seven Rooms, vertical immersive-scroll, tile-tear transitions):** 1. **Room 01 — THE BLACK SCREEN.** Opens on Cathode Black with a single blinking Torch-Brass cursor block, dead centre, for ~2.5s. Then four words type out in VT323, one per second: "you" / "are" / "about" / "to". The Status Strip slides up from the bottom. The Player Sprite fades in at the threshold. No skip button. This is the only non-interactive overture. 2. **Room 02 — NAME ENTRY.** A pixel text-entry box in the classic JRPG style — a grid of letters. It is *not actually functional*; whatever the visitor "types" (or if they ignore it), after a beat the box auto-fills with the word **YOU** and the game proceeds. Press Start 2P title: `ROOM 02 — NAME ENTRY`. A Special Elite margin note: "(it was always going to be you.)" 3. **Room 03 — THE CHILDHOOD BEDROOM.** The asymmetric diorama-left / paragraph-right layout. The paragraph (VT323) is the only "lore" on the whole site: a 4-sentence second-person memory of the room. The wooden sword by the door has a Wound-Rose hilt. Curtain is the animated tile. 4. **Room 04 — THE FRONT DOOR.** Full-width tilemap; a closed pixel door, dead centre, with a Field-Teal sliver of light beneath it. On scroll the door opens one pixel-column at a time (a path-draw-style stagger across 16 columns) revealing nothing — just more Cathode Black with a single distant Torch-Brass dot. A map-fold crease runs corner to corner. 5. **Room 05 — THE FIRST FIELD.** A single screen of dithered Field-Teal grass on the tile grid. One shrub trembles. Three quest objectives appear, one per scroll-tick, in VT323 with `[ ]` checkboxes that never check: "[ ] walk three tiles east" / "[ ] talk to no one" / "[ ] notice the music has started". (The "music" is implied, never played.) 6. **Room 06 — THE SAVE POINT.** Save-Room Blue floods the viewport. A pixel save-crystal pulses (the animated tile) with a soft Torch-Brass glow built from stacked box-shadows, no blur filter. Press Start 2P: `ROOM 06 — SAVE POINT`. A `[!]` callout in Wound Rose: `[!] PROGRESS RECORDED.` Then a Special Elite line: "(you can stop here. most don't.)" The half-heart in the Status Strip does a single beat animation here — the only time it moves. 7. **Room 07 — THE THRESHOLD.** Cathode Black returns. The Player Sprite walks from the left edge to the centre and stops, still facing away, at the lip of a tilemap that simply *stops* — beyond it, undrawn grid fading to nothing. One line, large, Special Elite, Manual Ivory, centred above the sprite: **"you go first."** The Status Strip fades. The page ends. No CTA. No next. **Motion rules:** Every animation is *stepped*, never eased — `animation-timing-function: steps(N)` is the law of the land. Scroll-linked transitions advance the tilemap tear/draw and the sprite's walk frame. The cursor reticle snaps in hard steps. Springs, magnetic hover, smooth parallax, tilt-3D, blur-focus — all forbidden; they would betray the pixel grid. The one exception to "everything aligns to 32px" is the Player Sprite's sub-pixel idle jitter, deliberately 1px off-grid to feel alive. **Sound is implied, never delivered:** the site references "the music has started" and "PROGRESS RECORDED" but plays nothing. The silence is intentional — you are reading a manual, not playing the game. ## Uniqueness Notes Differentiators, each a deliberate departure from the frequency analysis: 1. **Pixel-art as primary aesthetic, not garnish.** Pixel-art sits at 3% in the corpus and pixel-art *imagery* at near-0%; where it appears it's usually a decorative accent on an otherwise smooth design. thefirst.quest commits totally — `image-rendering: pixelated` site-wide, every gradient dithered with a Bayer matrix, every animation `steps()`-quantised, fonts chosen so nothing anti-aliases. The grid *is* the design. 2. **Stepped-only motion.** The corpus is 89% parallax, 83% spring, 79% magnetic, 32% tilt-3D — all smooth, all eased. This site bans every one of them on principle. There is no smooth transition anywhere. That hard-edged motion language is, against the dominant patterns, near-unique. 3. **The always-half-heart that is never explained.** Other sites with game motifs gamify *toward* the user (XP bars filling, badges, progress). thefirst.quest's only "stat" is a heart that starts at 50% and only ever beats once, in the save room, and is never accounted for. Restraint as a feature. 4. **"The moment before the adventure" as the entire content.** Where game-themed sites stage triumph, action, or a hero shot, this one is deliberately *pre-narrative* — packed bag, open door, nothing has happened. The negative space is literally named `--unwalked`. No CTA, no pricing, no stat-grid, no testimonial, no email capture (frequency analysis's card-grid 92% / centered 80% / hero-dominant — all avoided in favour of a seven-room immersive-scroll on a visible tilemap). 5. **The non-functional name-entry box.** An interactive-looking element that quietly refuses to be interactive, auto-resolving to "YOU." A small piece of authored fatalism rather than the conversion-funnel input it mimics. Chosen seed/style: **"90s pixel art playful"** — instantiated as `aesthetic: pixel-art, layout: immersive-scroll, typography: retro-display (Press Start 2P / VT323 / Special Elite), palette: jewel-tones (CRT-dusk indigo + torch brass + wound rose), patterns: path-draw-svg (stepped tile-tear), imagery: hand-drawn pixel SVG, motifs: book-scholarly (the strategy-guide manual) + star-celestial-adjacent save-crystal, tone: whimsical-creative × mysterious-moody`. Avoided patterns from frequency analysis: hand-drawn-illustration (94% — used here only as pixel-grid SVG, not loose ink), glassmorphism (85% — none), card-grid (92% — none), centered (80% — asymmetric throughout), parallax/spring/magnetic/tilt-3D (banned), photography (98% — zero), warm/gradient smooth palettes (dithered instead), cursor-follow as smooth lerp (replaced with hard-snap reticle).