# Design Language for annual.quest ## Aesthetics and Tone annual.quest is a **pixel-bitten almanac** — a digital marginalia of the year, rendered as if a 1994 demoscene coder hand-soldered a perpetual calendar into a CRT and left it humming in a server closet for three decades. The site reads like the *changelog of a planet*: every revolution around the sun is a build number, every season a release branch, every memory a commit hash someone pixel-punched into a sprite sheet at 2 AM. The mood is **raw-authentic** with the unvarnished glow of a phosphor display that has burned a faint ghost of itself into the bezel. Nothing here is glassy, nothing is glossy — every surface admits its substrate. Pixels are honest about being pixels (no anti-aliasing, no subpixel cheating); chunks of color sit on a bone-white field like inkstamps that didn't quite dry. Type that needs to be smooth is smooth; type that wants to be jagged is jagged. The site never pretends to be anything but what it is: a cartridge of the year, plugged in. There is a stubborn **handmade-inside-the-grid** quality. The 8×8 pixel cell is the atomic unit, but humans broke a few. Underlines are drawn slightly past the word, sometimes too short. Sprites are aligned to the grid except where a 1-pixel jitter feels honest. The whole thing should feel like a year's worth of journal entries someone copied into a Game Boy emulator on purpose, refusing the pressure to look "professional." A **lens-flare** seal hovers across the top-left of every section — a six-pointed bloom of warm light that suggests this pixel-art world was photographed with a dirty 35mm lens, briefly imperfect, briefly cinematic. The flare is the only "high-fidelity" element on the site; it argues with everything else and that argument is the design. ## Layout Motifs and Structure **Asymmetric pixel-grid composition** is the structural backbone. The page is built on an 8×8 pixel atomic grid (every margin, gutter, and stroke is a multiple of 8 — no exceptions), but the *macro* layout deliberately refuses symmetry. Content lives on a **3-column-but-only-uses-2** scheme where: - The left **gutter strip** (96px wide on desktop, fixed) is reserved for vertical date stamps, build numbers, and a slow-blinking cursor sprite — purely scenographic, no content. - The **main column** (clamp(380px, 56vw, 720px)) is offset 14% from the left edge — never centered, never full-bleed. - The **right margin** is left **deliberately empty** for ~40% of the viewport on desktop, occasionally interrupted by a single floating sprite (a 32×32 px abstract-tech glyph: a circuit-board curl, a floppy-disk fragment, a small radar sweep). **Spatial logic:** - Every "year" of content (the site is structured as 12 chapters — one per month of the user's quest-year) lives in its own **horizontally-offset slab**. Slab 1 sits flush-left at column 1; slab 2 nudges 24px right; slab 3 nudges another 24px right; by slab 12 the content has drifted 264px from its origin — the page literally walks across the screen as the year progresses. - Section breaks are **underline-draw** events: a 3px-thick horizontal pixel-line that animates from left to right (stroke draws over 800ms with stagger between siblings) using `path-draw-svg` with stroke-dashoffset. - No traditional navigation bar. Instead, a **persistent sidebar terminal-strip** on the left edge displays `MONTH 03 / 12 — LOADED` in 8px monospace, scrolling silently as the user scrolls. - Footer is the same as the masthead, mirrored and inverted in palette — closing the cartridge. **Hero treatment:** A 320×200 pixel "title-card" sprite (rendered as crisp `image-rendering: pixelated` SVG) sits in the upper-left third of the viewport. Behind it: a single hand-drawn lens flare at 35% opacity, off-axis. To its right, the wordmark **annual.quest** rendered in a variable-fluid typeface that *physically widens* as the page loads (`font-variation-settings: 'wdth' 75 → 125` over 1400ms). The collision between the crunchy 8-bit sprite and the smooth, breathing variable type is the design's thesis. ## Typography and Palette **Typography (Google Fonts only — variable-fluid family-first):** - **Primary display (the wordmark and all H1/H2):** `Roboto Flex` (Google Fonts, variable axes: wght 100→1000, wdth 25→151, opsz 8→144, GRAD -200→150, slnt -10→0, plus parametric XTRA, XOPQ, YTLC). Used at clamp(3.2rem, 8vw, 6.4rem) for the wordmark with `font-variation-settings` animating wdth from 75 to 125 on load, then idling with a slow ±3 oscillation tied to scroll velocity. Headlines lock to wdth 100, wght 700, opsz matching their visual size. The variable-fluid choice is *the* typographic statement: type that breathes proves the page is alive. - **Body & long-form prose:** `Inter` (Google Fonts, variable wght 100→900, opsz 14→32). Set at 17px/28px, weight 380 (yes, 380 — between book and regular, only possible on a variable axis), opsz auto-tuned via `font-optical-sizing: auto`. Tracking +0.5% for body, -1% for headlines. - **Pixel/system voice (sidebar timestamps, build numbers, captions, error-style annotations):** `VT323` (Google Fonts) — a perfect pixel-CRT monospace that is unapologetically chunky. Set at 14px / 18px line-height, never anti-aliased (`-webkit-font-smoothing: none`, `font-smooth: never`). Used for: the left-strip date stamps, hover-state coordinates, every numeric annotation. VT323 grounds the whole site in its CRT-cartridge identity. - **Marginalia & dropped quotes:** `Space Mono` (Google Fonts), 13px italic, set in the warm-mid-gray palette color, indented 16px from the column. **Palette — DUOTONE (electric warm × cold deep):** The whole site is rendered in only **two ink colors plus a paper** — a true duotone in the printer's sense, not just a tinted photo. Every photograph, every sprite, every illustration is reduced to these two inks on this paper. Hex values: - **Paper / canvas:** `#F4EBD9` — a warm bone-vellum, not white, not cream. The slight yellow shift implies aging and CRT-phosphor afterglow on a pale screen. - **Hot ink (primary, brand, all type by default):** `#FF3B17` — a tangerine-vermilion red that reads as both safety-orange and 1980s arcade-cabinet warning red. Used for ~90% of inked surfaces. - **Cold ink (secondary, shadows, the "depth" channel):** `#0B1B3A` — a near-black navy with a 4% blue cast. Used for shadows, the lens-flare's deeper rays, sprite outlines, and the rare body of cold text. **Allowed accents (used surgically, never as fills):** - `#7A0F00` — burnt vermilion, used only for hot-ink shadows and pressed/active states (a 25% darken of the hot ink). - `#E8DCC2` — paper shadow / gutter strip background, exactly 6% darker than canvas. - `#FFB89C` — a single warm peach used *only* inside the lens-flare bloom, nowhere else. It is the single "third color" the duotone permits, and it appears in <1% of any viewport. **Usage discipline:** Backgrounds are always paper. Type is always hot ink unless explicitly demoted. Cold ink appears only as shadow-offsets (3px right, 3px down behind hot-ink display type — a hard-edged riso-print shadow), as the lens-flare's spine, and as sprite outlines. No gradients except inside the lens-flare. No transparency stacks except the flare's bloom. ## Imagery and Motifs **Pixel-art is the exclusive imagery vocabulary.** No photography, no rendered 3D, no stock. Every image is a hand-pixeled sprite at 8×8, 16×16, 32×32, or 64×64 px, rendered as SVG with `shape-rendering: crispEdges` and `image-rendering: pixelated`, scaled to integer multiples (×4, ×6, ×8) for display. Every sprite is duotone (hot ink + cold ink, on paper). **Recurring sprite subjects:** - **The Cartridge** — a 32×32 sprite of a generic ROM cartridge with a label that reads "QUEST 26" in 6×6 pixel type. Appears in the masthead, footer, and as the favicon. - **The Calendar Tear** — a 16×16 sprite of a torn calendar page corner, used as the chapter-break ornament; one rotates into view each scroll-section. - **The Cursor Beacon** — a 12×12 blinking cursor sprite (1.0s blink cycle, 60% duty), positioned in the left gutter-strip; it pulses cold-ink → hot-ink → cold-ink to anchor the eye. - **The Floppy Fragment** — a 24×24 sprite of half a 3.5-inch floppy disk, rendered as if cracked across the diagonal; appears once per chapter as a marginal asterisk. - **The Radar Sweep** — a 64×64 sprite of a single radar arc (90° pie-slice rotating once every 4s), placed in the right empty margin of slabs 4, 8, and 12. - **The Annual Ring** — a 48×48 sprite of concentric pixel-rings (a tree's growth rings, but blocky), appearing once at the very end of the page as the closing colophon. **Abstract-tech motif vocabulary** (decorative, behind-content, ~12% opacity): - **Pixel circuitry** — 1px hot-ink lines on the 8px grid, forming right-angled traces with small square solder-pads at junctions. These run in a faint background pattern across slabs 3, 6, 9, 12. - **Bitmap noise** — a 1-bit dither pattern (Bayer 8×8) in cold-ink, used as a subtle texture in the gutter strip and the footer. - **Scanlines** — horizontal 1px hot-ink lines at 4px vertical intervals, opacity 5%, applied only to the masthead title-card sprite (CRT-glass nostalgia). **The lens-flare** (the singular high-fidelity counter-element): - One 280px-wide, 6-pointed lens flare per chapter, hand-drawn as SVG with `feGaussianBlur` and a radial-gradient bloom from `#FFB89C` core → `#FF3B17` mid → transparent. Always positioned in the upper-left quadrant of the chapter, always partially clipped by the slab edge, always at 35–45% opacity. The flare drifts 24px on slow parallax. It is the only "soft" thing on the page — its smoothness is the joke. **Underline-draw as primary punctuation:** - Every internal link, every chapter title, every emphasized term gets a hand-drawn 3px hot-ink underline that animates `path-draw-svg` style on first viewport entry. The underline is *deliberately too long* — extending 8px past the word's right edge, in the spirit of someone striking a marker past where they meant to stop. On hover, the underline retracts to exactly the word's width over 280ms (spring), then on mouseout extends back past. This single interaction is the site's signature gesture. ## Prompts for Implementation Build annual.quest as a **single scrolling almanac** structured into **12 chapters** (one per month of a personal year), with the entire experience reading like a private cartridge of someone's twelve-month quest. The visitor scrolls through a year — slowly, attentively — and the page itself walks rightward across the screen as months progress. **Structural blueprint (12 chapters + bookends):** 1. **MASTHEAD — `THE CARTRIDGE`** — full-height intro slab. Wordmark `annual.quest` set in Roboto Flex variable-fluid, animating wdth 75 → 125 on load over 1400ms. A 320×200 pixel title-card sprite (the cartridge with "QUEST 26" label) sits to the left. A single lens-flare blooms behind. Sub-headline in VT323: `LOADING YEAR 26.04 OF 26... [READY]`. No CTAs. No buttons. Just: scroll. 2. **CHAPTERS 01 → 12** — twelve content slabs, each: - Sits 24px further right than the previous (drifting across the page). - Opens with a chapter number in Roboto Flex at clamp(6rem, 14vw, 12rem), wght 200, wdth 25 (skinny tall) — a number that looks like a ladder. The chapter title sits beside it, hot-ink, with the signature too-long underline. - Contains 1–3 short prose entries (200–600 words each) in Inter, set on a narrow 56-character measure. - Includes one duotone pixel-sprite per chapter (cycling through the sprite vocabulary). - Has a single calendar-tear ornament at its closing edge. - Reveals via `scroll-triggered` entry animations: prose fades in from below with stagger, sprites snap-in (no fade — pixels are honest, they don't blur), the underline draws. 3. **COLOPHON / FOOTER** — mirror of the masthead, palette inverted (cold-ink wordmark on a slightly warmer paper), the annual-ring sprite as the final image, a single VT323 line: `END OF YEAR — REWIND? [Y/N]`. The "Y" is a hot-ink interactive link that scrolls smoothly back to the masthead over 4.2 seconds (intentionally slow — a year deserves time). **Animation & interaction principles:** - **Variable-fluid breathing:** The wordmark and all H1s subtly oscillate `wdth` ±3 units tied to a 6-second sine wave. This is the page's heartbeat. It must never stop. - **Underline-draw on every link:** Implement as inline SVG `` with `pathLength="1"` and a CSS-animated `stroke-dashoffset: 1 → 0` over 480ms ease-out. Hover retracts. Mouse-out re-extends. This is the only hover state on the entire site — buttons do not lift, cards do not shadow, nothing tilts. - **Pixel-snap discipline:** Every sprite must scale by integer multiples only. CSS `image-rendering: pixelated; shape-rendering: crispEdges`. Never `transform: scale(1.1)` on a sprite — only `scale(2)`, `scale(4)`, etc. - **Lens-flare parallax:** The single lens-flare per chapter drifts 24px on scroll using a 0.4 parallax coefficient. It is the only parallax element. Everything else moves at 1.0 — the world is flat, the flare is the lens. - **Cursor-beacon blink:** A `setInterval` at 1000ms toggles the gutter-strip cursor sprite between hot-ink and cold-ink fills. It is the only thing on the page that animates without scroll input — a metronome. - **Build-number ticker:** The left gutter strip continuously displays `BUILD 26.{month}.{day} — CH {n}/12` in VT323, updating as the user scrolls past each chapter boundary. Use IntersectionObserver to detect chapter-in-view and update. - **Sprite reveal:** On `IntersectionObserver` entry (threshold 0.4), each chapter sprite pops in via a 4-step animation: invisible → 1×1px → 50% size → 100% size, each step 80ms, no easing (stairstep). Pixels arrive in pixel time. **Content posture:** - Treat every line of prose as a journal entry from a real year. First-person, low-key, specific. Not ad copy. No "we" voice. No "elevate your" anything. - AVOID: pricing tables, feature grids, statistic counters, testimonials, CTA buttons, hero "join us" forms. This is not a SaaS site. - AVOID: dark-mode toggles, language switchers, cookie banners (visually — implement as needed but make them duotone too). - The only interactive element besides links is the final `[Y/N]` rewind prompt. **Storytelling arc:** - Chapter 01 is hesitant, sparse — only 80 words of prose, mostly white space, a single sprite. A year is just beginning. - Chapters 04–08 are dense — the year is in motion, more sprites, more prose, more lens-flare drift. - Chapter 12 is a single sentence in oversized Roboto Flex at wght 900, wdth 151 — the full breadth the variable axis allows. The year ends *wide*. **Performance/feel:** This site should load instantly (no images > 8KB, all sprites are SVG, fonts subset aggressively) and run cool. The aesthetic of "honest pixels on warm paper" demands a build that feels handmade, not heavy. ## Uniqueness Notes **Differentiators from the existing 27-design registry:** 1. **Pixel-art as exclusive imagery (registry first).** Pixel-art does not appear in the imagery frequency analysis at all — no current design uses 8/16/32-bit sprite vocabulary as its sole image system. The closest neighbor is `cyberpunk` (18%) or `retro` (11%), but those use neon and chrome, not honest 1-bit pixels on warm paper. annual.quest plants a flag in unoccupied territory. 2. **Variable-fluid typography as a *living* axis (registry near-first).** `variable-fluid` shows up in only 3% of the registry (one design). Most sites use `mono` (92%) or `humanist` (29%). annual.quest pushes variable type further than any existing design by animating `wdth` continuously as a heartbeat — type that breathes is the central typographic claim, and no other site does this idle-oscillation. 3. **Duotone as actual duotone (printer's sense, not photo-tinted).** `duotone` exists at 14% in the registry, but those designs use it as a photo-treatment effect on top of full-color photography. annual.quest commits: every pixel of every sprite is exactly two inks on paper, no stock photos at all. The discipline is total. 4. **The asymmetric horizontal-drift (registry first).** No registry design has chapters that *physically migrate rightward* across the viewport as the user scrolls — the page itself walks. `asymmetric` (48%) and `parallax-sections` (7%) appear separately, but the rightward-stepping slab cadence is a unique combination. 5. **Underline-draw as primary punctuation (registry first at this scale).** Only 7% of the registry uses `underline-draw`. annual.quest uses it as the *only* hover-state in the entire site — every link, every emphasis, every chapter title — making it a signature gesture rather than a decorative flourish. The "deliberately too long" rule is the visual fingerprint. 6. **Lens-flare as a single counter-element (registry first).** `lens-flare` appears in 3% (one design) but as ambient bokeh. annual.quest uses it as a *singular high-fidelity* element argued against the pixel-art texture — exactly one flare per chapter, the only smooth thing on the page. The contrast is the design's thesis, not a decoration. 7. **Raw-authentic tone in a non-handwritten context (registry first).** `raw-authentic` is 7% in the registry, and `hand-drawn` is 77% — most "raw" sites lean handwritten. annual.quest goes raw via *pixel-honesty* (no anti-aliasing, no smoothing, integer-scale-only) — a different rawness, machine-honest rather than ink-honest. 8. **Twelve-chapter year-cartridge structure.** No other registry design uses a 12-month cartridge metaphor as its IA. The closest is `parallax-storytelling` patterns, but none structure as a literal annual changelog/cartridge. **Chosen Seed (per assignment):** - aesthetic: **pixel-art** - layout: **asymmetric** - typography: **variable-fluid** - palette: **duotone** - patterns: **underline-draw** - imagery: **lens-flare** - motifs: **abstract-tech** - tone: **raw-authentic** **Avoided patterns from frequency analysis:** - Avoided `parallax` (85%) — used only for the single lens-flare; everything else is flat-scroll. - Avoided `stagger` and `scroll-triggered` as primary mechanics (55% each) — used minimally for chapter prose entry only. - Avoided `photography` (88%) — zero photography on the site. - Avoided `full-bleed` (88%) and `centered` (88%) layouts — content is offset 14% left and never reaches the right edge. - Avoided `gradient` palette (92%) — duotone permits zero gradients except inside the single lens-flare. - Avoided `vintage` motif (81%) — abstract-tech is the chosen motif, future-machine rather than past-paper. - Avoided `mono` typography (92%) as the *primary* — VT323 is used surgically only for sidebar/timestamps; the body and display are the variable-fluid Roboto Flex / Inter pairing. - Avoided `hand-drawn` aesthetic (77%) — every line is grid-snapped pixel-art. - Avoided `warm` palette (96%) as a fill — paper is warm-bone, but the duotone hot-ink is a vermilion-red, not a "warm" earth-tone family.