# Design Language for ppuzzle.dev ## Aesthetics and Tone ppuzzle.dev is built as **an abandoned 1990s puzzle-game cartridge that someone opened up, soldered a modern dev-console onto, and left running on a CRT in a basement workshop**. The site reads like the title screen of a "lost" Game Boy / SNES-era logic-puzzle game — sliding tiles, falling blocks, wire-routing mazes — except the game in question is *the craft of building puzzles*. Every screen is presented as a "stage" in a side-scrolling level select; every paragraph of prose is a tile that slides into place; every section transition is a level wipe. The dominant aesthetic is **pixel-art** (only 3% of the corpus — deliberately claimed here as the site's entire skin, not a garnish). Not "pixel-art accents over a clean modern layout" — the whole interface is rendered at a chunky logical resolution: a fixed 8px base grid, `image-rendering: pixelated` on every raster element, hard 2px borders, no anti-aliased curves, no drop-shadows softer than a 4px offset hard-edged block shadow. Sub-pixel motion is forbidden; everything snaps to the 8px lattice. The tone is **playful and whimsical-creative**, but with a builder's seriousness underneath — like the manual that shipped in the cartridge box, written by someone who genuinely loved level design. Warm CRT phosphor glow, a faint scanline shimmer, the sense that the machine has been left on overnight and the demo loop is still playing. It is joyful, a little nostalgic, never ironic-cool — this is not a vaporwave pastiche, it is an honest love-letter to the era when a puzzle was a grid of pixels and a single elegant rule. ## Layout Motifs and Structure The page is a **horizontal-scroll** "level select" — the corpus uses horizontal-scroll at only 7%, and almost never as the *primary* axis. Here it is the spine: the visitor scrolls left-to-right through numbered "Stages" (Stage 1: What is a puzzle / Stage 2: The grammar of grids / Stage 3: Build log / Stage 4: Bonus room), each Stage a full-viewport "screen" framed like a TV bezel. - **The bezel frame.** Every screen lives inside a fixed `position: sticky` CRT-bezel border: a thick (32px) dark plastic frame with a tiny molded "ppuzzle.dev" logo embossed bottom-right, a faux power LED top-left, and four corner screws. Content scrolls *inside* the screen; the bezel never moves. - **8px tile lattice.** Within each screen, layout is built on an explicit 8×8-of-8px module grid (so a 64px "tile" is the atomic block). Headlines occupy 2–3 tiles tall; body text columns are exactly 5 tiles wide; nothing is fractional. - **Stage transitions as level wipes.** Moving between Stages triggers a hard-edged wipe (a checkerboard dissolve, or a column-by-column "Tetris drop" of the incoming screen). No cross-fades. - **The HUD strip.** A persistent bottom bar (one 16px tile tall) shows: STAGE 02/04 · PIECES PLACED: 14 · TIME: 03:41 — a faux game HUD that increments as you scroll, turning reading into "progress". - **No hero-dominant splash, no card-grid of features, no pricing tier columns, no stat counters.** The "stats" that exist are diegetic HUD numbers, never marketing metrics. ## Typography and Palette **Fonts — Google Fonts only, all genuinely available:** - **Display / headings: `Press Start 2P`** — the canonical 8-bit bitmap face. Used at integer multiples of its native size only (8px → 16px → 24px → 32px), letter-spaced loosely so the bitmap blocks breathe. This is the "title screen" voice: STAGE SELECT, BUILD LOG, BONUS ROOM. - **Sub-headings / labels / HUD: `Silkscreen`** — a tighter pixel face for the small UI furniture (HUD readouts, button captions, the bezel logo). Reads cleanly at 8px. - **Body copy: `VT323`** — a monospaced terminal-bitmap face that stays legible at paragraph length and keeps the "this is running on a console" feel. Line-height locked to 24px (3 lattice units). For longer-form passages where VT323 gets tiring, fall back to **`DotGothic16`** which has the same pixel character but rounder counters. - **Accent / "secret" text: `Pixelify Sans`** for the playful margin notes the level designer scribbles. **Palette — a CRT-phosphor set, high-contrast, four anchor colors plus accents:** - `#0B0C1A` — **deep cabinet black** (the bezel plastic, the void behind the screen). Almost-black with a blue bias, like unlit CRT glass. - `#10F2A1` — **phosphor green** (the primary "alive" color: power LED, active tile outlines, the HUD text glow). The green of a monochrome monitor that has been left on. - `#FF4FA3` — **bubblegum magenta** (the "puzzle piece" highlight — the color of the tile you're currently moving, danger blocks, the secret-room door). - `#F7E7C2` — **manual-paper cream** (the body-text surface in reading screens — like the off-white pages of the cartridge instruction booklet, so prose is comfortable to read). - Support swatches: `#2B2D52` (twilight slate — screen background gradient top), `#1A1B33` (screen background gradient bottom), `#FFD23F` (coin/star yellow — completion sparkles), `#5BC0EB` (ice-block cyan — secondary tile type), `#E8E8F0` (panel white — dialog boxes). Color is applied in flat fills only — no gradients except the single subtle vertical screen-background ramp from `#2B2D52` to `#1A1B33`, dithered with a 2×2 Bayer pattern so even the gradient looks like 1994. ## Imagery and Motifs Every visual element is **original pixel-art rendered as inline SVG `` grids or tiny CSS-`box-shadow` sprites** — no photography (the corpus is 98% photography; this site has zero), no 3D renders, no stock icons, no Lottie. Imagery type: **pixel-art / custom-illustration**, with **grain-overlay** reinterpreted as a CRT scanline + phosphor-bloom layer. 1. **Puzzle-piece tiles as the universal unit.** Sliding-puzzle squares, Tetromino-style blocks (I, L, T, S, O, Z, J), wire-routing pipe segments, and Sokoban crates are the recurring icon vocabulary. Section markers are tetrominoes; bullet points are little 8×8 crates; the cursor is a chunky 16×16 hand-pointer sprite (à la classic point-and-click) that snaps tile-to-tile. 2. **The demo-loop animation.** When idle, a small playfield in the corner of Stage 1 auto-plays: blocks fall, lines clear, a tiny sprite walks a maze — pure ambience, like the attract mode of an arcade cabinet. 3. **Star/coin sparkles** burst (8-frame pixel animation) whenever a "piece is placed" — i.e. when a content tile finishes sliding into position on scroll. 4. **Wire-maze dividers.** Between Stages, a horizontal "circuit-maze" runs along the floor of the bezel — a pixelated pipe-puzzle the eye can trace; nodes light phosphor-green as you scroll past. 5. **CRT artifacts.** A full-screen overlay: 1px scanlines at 50% opacity, a faint barrel-distortion vignette baked into the bezel SVG (not a CSS filter — drawn), occasional 1-frame "signal jitter" on Stage transitions, and a soft `#10F2A1` bloom around bright pixels. 6. **The instruction-booklet motif** in reading screens: cream `#F7E7C2` "pages" with a stapled spine (two pixel-staples top-left), page-corner curl, and hand-lettered `Pixelify Sans` margin notes. ## Prompts for Implementation Build ppuzzle.dev as a **single static HTML document, one CSS file, one ES module — no framework, no bundler, no build step.** The narrative *is* the horizontal scroll: the visitor boots the cartridge, lands on STAGE SELECT, and scrolls right through four stages, each a full-viewport "screen" inside a fixed CRT bezel. - **The bezel.** Render the TV bezel as one inline SVG with `viewBox` covering the whole viewport, `position: fixed`, `pointer-events: none`, drawn on top — chunky dark-plastic frame, corner screws, embossed logo, power LED (`#10F2A1`, gently pulsing via a 4-step opacity keyframe — no smooth fades, snap between 4 values). Content scrolls underneath in a `overflow-x: scroll; scroll-snap-type: x mandatory` track; each `
` is `scroll-snap-align: start; width: 100vw; height: 100vh`. - **Everything snaps to 8px.** Set `--u: 8px`. All sizes, margins, translations are `calc()` multiples of `--u`. Disable sub-pixel: `image-rendering: pixelated` globally; for any transform animation, use `steps()` timing functions exclusively (`transition-timing-function: steps(8)`), never `ease`. Motion must look like a sprite redrawing frame-by-frame. - **Scroll-triggered "piece placement".** As each content tile enters the viewport, animate it sliding in from off-grid (e.g. `translateX(64px → 0)` over `steps(8)`), then fire an 8-frame coin-sparkle SVG sprite at its corner, and increment the HUD "PIECES PLACED" counter (`counter-animate`, but integer-stepped, no smooth tween). Use `IntersectionObserver`. - **Stage transitions = level wipes.** On scroll-snap settling into a new section, play a wipe: a CSS `clip-path` checkerboard reveal driven by `steps()`, or a column-by-column "block drop" where 16 vertical strips of the new screen fall in with staggered delays (`stagger`, ~40ms each, `steps(6)` each). Add a 1-frame `#FFFFFF` flash + slight `transform: translateX(2px)` "signal jitter" at the moment of switch. - **The demo-loop attract mode.** In Stage 1's corner, a tiny `` (or pure-CSS sprite grid) auto-plays a looped Tetris-ish clear and a maze-walker; pause it when the user is actively scrolling, resume on idle (3s) — like an arcade cabinet returning to attract mode. - **CRT layer.** Full-viewport fixed overlay: `repeating-linear-gradient` 1px scanlines at low opacity, a radial vignette, and a `mix-blend-mode: screen` phosphor-bloom div that follows nothing — just sits there glowing faint green. Optional: a `prefers-reduced-motion` switch that freezes the scanlines and disables jitter (but keep the pixel look). - **Cursor.** Hide the OS cursor inside the screen; draw a 16×16 pixel hand-pointer that lerps in `--u`-sized steps toward the real pointer position (so it visibly "hops" tile to tile). On hover over interactive tiles it switches to the "grab" sprite. - **Tone of copy.** Write all prose as if it's the cartridge instruction booklet — short, warm, a little playful, section titles like "STAGE 2 — THE GRAMMAR OF GRIDS". The "Build log" stage is a vertical (within-screen) scroll of dated dev-diary entries on cream booklet pages. The "Bonus room" is a hidden 5th screen reachable only by clicking the secret magenta `#FF4FA3` door — a thank-you / colophon screen. - **AVOID:** CTA-stacked hero, feature card-grids, pricing tables, marketing stat counters, smooth easing curves, gradients beyond the one dithered screen ramp, any photography, any glassmorphism blur, any rounded soft shadows. ## Uniqueness Notes Differentiators from the rest of the corpus — none of these may be duplicated by other CMassC sites: 1. **Pixel-art (3% in the corpus) promoted to the site's *entire rendering model*, not an accent.** Most pixel-art uses in the corpus are decorative sprinkles over a modern layout. ppuzzle.dev commits fully: 8px lattice, `steps()`-only motion, no anti-aliasing, no soft shadows, bitmap fonts at integer scale only — the whole site behaves like a 1994 console redrawing the screen frame by frame. 2. **Horizontal-scroll (7%) as a literal "level select", with a fixed CRT bezel and diegetic HUD.** Not a horizontal gallery of images — a side-scrolling *game stage progression* where reading literally increments a faux game HUD ("PIECES PLACED: 14 · STAGE 02/04"), and section transitions are hard-edged Tetris-drop / checkerboard *level wipes*, never fades. 3. **Diegetic UI instead of marketing UI.** There is no hero CTA, no feature grid, no pricing block, no stat panel — the only numbers are in-fiction HUD readouts, the only "imagery" is original inline-SVG `` pixel sprites (zero photography in a 98%-photography corpus), and the colophon is a *hidden bonus room* behind a secret magenta door. 4. **Font stack `Press Start 2P` + `Silkscreen` + `VT323` + `DotGothic16` + `Pixelify Sans`** — an all-bitmap typographic system used at native/integer sizes only, which no clean-modern corpus site shares. Chosen seed / style: **"90s pixel art playful"** (from seeds.json). Aesthetic axis: `pixel-art` (3%, underused). Layout axis: `horizontal-scroll` (7%, underused). Tone: `whimsical-creative` (6%, underused). Avoided overused patterns flagged by frequency analysis: no `glassmorphism` (81%), no `hand-drawn` watercolor softness (96%), no `photography` (98%), no `card-grid` (91%), no `centered`/`hero-dominant` marketing layout, no `parallax`/`cursor-follow` smooth easing — all motion here is hard `steps()` sprite-style, all surfaces flat-filled.