# Design Language for ppuzzle.works ## Aesthetics and Tone ppuzzle.works is the public archive of an imagined two-person *puzzle workshop* — a tiny outfit that, since the late 1980s, has hand-assembled logic grids, cryptic crosswords, nonograms, dissection puzzles, and "impossible" wooden burrs, photographed each one on a green cutting mat, then logged it into a numbered ledger. The site **is** that ledger, but the ledger has been transcribed onto a CRT terminal that someone in the workshop wired up in 1994 and never replaced. So the whole archive renders in the visual grammar of that era: chunky 8×8 pixel glyphs, dithered checkerboard shadows, hard 1px black outlines, no anti-aliasing anywhere, colour fields that snap rather than blend. It is *not* a game and it is *not* nostalgia-bait — it is a working catalogue that happens to live inside a beige plastic monitor. The tone is **dry, precise, and quietly proud** — the voice of two craftspeople who measure tolerances in tenths of a millimetre and think a good clue should make you feel clever, not stupid. Every puzzle entry reads like a museum label written by an engineer: title, year, mechanism, "difficulty (workshop scale)", solve-time of the slowest tester, and a single sentence of commentary that is usually a faint joke. Warmth comes from the *content* — the hand-drawn puzzle plates, the affectionate footnotes — not from rounded corners or soft gradients. The pixels are sharp; the people are kind. Mood references: the inventory screen of a 16-colour DOS adventure; a graph-paper notebook held under a desk lamp; the cardboard back of a Saturday-newspaper puzzle insert; the satisfying *click* of a wooden puzzle piece finding its slot. ## Layout Motifs and Structure The site is **a single vertically-scrolled card-grid "catalogue wall"** built to look like a CRT desktop. There is no marketing hero, no nav bar, no footer columns, no pricing table, no testimonial row, no newsletter form, no cookie banner, no dark-mode toggle. The structure, top to bottom: 1. **A 200px-tall "terminal header band"** spanning full width: the wordmark `ppuzzle.works` rendered in a custom 12×12 bitmap-style display face at huge size, a blinking 1-character block cursor after it, and a single status line below in 8px pixel mono — `WORKSHOP LEDGER · VOL. IX · 24 ENTRIES · CRT TERMINAL #2`. The band has a 4px solid `#0E1B0E` outline and a faint horizontal scanline texture. 2. **The catalogue grid itself — exactly 24 puzzle cards** in a strict 4-column × 6-row layout at ≥1180px, collapsing to 3 → 2 → 1 columns at narrower breakpoints. Each card is a hard-edged rectangle with a 3px black outline, a 6px dithered drop-shadow offset down-right (a checkerboard of `#0E1B0E` 50%-coverage pixels, *not* a blur), and zero border-radius. Inside each card: a square **puzzle plate illustration** (top), then a metadata block laid out like a spreadsheet — label column left-aligned in pixel mono, value column right-aligned — then the one-line commentary at the bottom in a slightly larger humanist face. 3. Between the header and the grid, a **single thin "control strip"** — a row of fake DOS-style filter "buttons" (`ALL · CRYPTIC · NONOGRAM · DISSECTION · LOGIC-GRID · BURR`) drawn as beveled pixel tabs. They genuinely filter the grid (CSS class toggles), but they are not styled as conversion CTAs — they look like radio buttons on a 1994 utility. 4. The grid sits on a **green "cutting-mat" background** (`#1F4D2E`) printed with a faint 1px lighter grid every 32px and slightly heavier line every 160px, so the whole page reads as puzzle pieces laid out on a self-healing mat. Negative space is deliberate and *snapped to an 8px pixel grid* — every margin, gap, and offset is a multiple of 8px, never an arbitrary decimal. The composition is symmetric and orderly on purpose: this is a workshop that keeps its bench tidy. ## Typography and Palette **Three families, all available on Google Fonts:** - **Display / wordmark / card titles / filter tabs:** *Press Start 2P* (Google Fonts) — a true 8-bit bitmap face. Used at ~44px for the wordmark, ~13px for puzzle titles (with `letter-spacing: 0` and generous line-height since the glyphs are wide), and ~9px for the filter tabs. Rendered with `image-rendering` left default but **no text-shadow blur** — any "shadow" is a hard offset duplicate in `#0E1B0E`. - **Metadata / status lines / footnotes:** *VT323* (Google Fonts) — a monospaced CRT terminal face. Used at 16–18px for the spreadsheet-style metadata rows, the status line under the wordmark, year stamps, and the slow-tester solve times. Tracking neutral; color usually the dim phosphor green `#7BB661` on dark cards, near-black on light cards. - **Commentary sentences / longer label text:** *Pixelify Sans* (Google Fonts) — a pixel-flavoured but more readable humanist sans, so the one-line jokes at the bottom of each card stay legible at small sizes. Used at 14–15px, weight 400, in `#241F1A`. **Palette — a clamped DOS-era set, no gradients, no soft tints:** - `#1F4D2E` — **cutting-mat green**, the page background. - `#E8E2D0` — **paper card**, the default puzzle-card fill (warm newsprint cream). - `#0E1B0E` — **terminal black**, all outlines, dithered shadows, and the wordmark stroke. - `#7BB661` — **phosphor green**, the CRT-text accent on dark elements and the blinking cursor. - `#C4452F` — **ink red**, the "difficulty" pips, the `[SOLVED]` / `[UNSOLVED]` stamps, and the heavier mat grid-lines tint. - `#D8A11C` — **brass yellow**, used sparingly for the wooden-burr category and the "editor's pick" star. - `#3A6B8C` — **blueprint blue**, reserved for dissection-puzzle plates and the control-strip active tab. Colours always meet at a hard 1px edge. If two colours touch and a transition is needed, it is a **2px Bayer dither band**, never a gradient. ## Imagery and Motifs **Puzzle-plate illustration system.** Every card's square image is a flat, hard-edged **pixel-art plate** depicting that specific (imagined) puzzle as it would look photographed on the green mat: - A **cryptic crossword** corner — black-and-white pixel grid with three answers filled, the rest blank, a folded newspaper edge bottom-right. - A **nonogram** mid-solve — a 15×15 grid with the row/column number runs drawn as tiny pixel digits down the side, some cells filled forming the silhouette of a teapot. - A **wooden burr puzzle**, six notched sticks in brass-yellow and two browns, one stick pulled half-out, drawn in 3-tone shading (light face / mid face / dark face) with a 1px black outline. - A **dissection puzzle** — a blueprint-blue square cut into seven irregular pieces with hairline white cut-lines, one piece floated off to the side casting a dithered shadow. - A **logic-grid table** — the classic "who-owns-the-zebra" matrix, pixel-rendered, with three cells marked ✓ and several marked ✗ in ink red. - A **sliding-tile puzzle**, 4×4, one tile missing, the tiles bearing fragments of a pixel portrait. - A **matchstick equation** lying on the mat, one match lifted, casting a long dithered shadow. Each plate is consistent: 4–7 colours max, 1px black outline around the whole object, a single dithered contact-shadow, and the green mat showing at the edges with its faint grid. **Recurring decorative motifs:** the blinking block cursor (appears after the wordmark and after each section's last line); a **dithered checkerboard** used for every shadow and every "loading" placeholder; tiny **pixel corner-brackets** (`⌐ ¬ ∟ ⌐`) framing the "editor's pick" cards; a **scanline overlay** — 1px horizontal `rgba(14,27,14,0.06)` lines every 3px across the whole viewport; and a **"WORKSHOP STAMP"** in the bottom-right of the page: a pixel-art rubber-stamp impression in ink red reading `INSPECTED · #2`, slightly rotated and rough-edged like real ink. ## Prompts for Implementation Build ppuzzle.works as **a single static catalogue page** — one HTML file, one CSS file, one small ES module — that opens as Volume IX of an imagined puzzle-workshop ledger displayed on a 1994 CRT. Treat the visit as a 3-minute browse along a tidy workbench, not a funnel. There is **no** sign-up, **no** pricing, **no** "contact us" hero, **no** testimonials, **no** stat-grid of vanity numbers, **no** chatbot, **no** cookie wall. The "story" is told entirely through the 24 catalogue entries and their dry, affectionate copy. **Typography & rendering:** - Load *Press Start 2P*, *VT323*, and *Pixelify Sans* from Google Fonts. Set `text-rendering: optimizeSpeed` and never apply blur to any `text-shadow` — fake all shadows as hard offset duplicates. - Set `image-rendering: pixelated` on every illustration so any small SVG/PNG plates stay crunchy when scaled. - Snap **every** size, margin, gap, padding, and translate value to a multiple of 8px (the wordmark may use a multiple of 4px). No `border-radius` anywhere except `0`. **Layout & background:** - Page background: `#1F4D2E` with two repeating linear-gradient grids — a 1px line at `rgba(232,226,208,0.10)` every 32px both axes, and a 1px `rgba(196,69,47,0.18)` line every 160px both axes — to read as a self-healing cutting mat. - Overlay a fixed, `pointer-events:none` scanline layer: repeating-linear-gradient of transparent + `rgba(14,27,14,0.06)` 1px bands every 3px. - Terminal header band: full-width, `#E8E2D0` fill, 4px `#0E1B0E` bottom border, wordmark in *Press Start 2P* with a hard 4px `#0E1B0E` offset shadow, followed by a `` block cursor (a solid `#7BB661` rectangle) that blinks via `steps(1)` animation at 1.06s. - The 24 cards: CSS Grid, `grid-template-columns` going `repeat(4,1fr)` → `repeat(3,1fr)` → `repeat(2,1fr)` → `1fr` at 1180 / 920 / 640px. `gap: 24px`. Each card: `#E8E2D0` fill, `3px solid #0E1B0E`, and a `box-shadow` faked as a stacked `::after` pseudo-element offset `8px 8px` filled with a CSS-generated Bayer-dither checkerboard of `#0E1B0E`. **Animation & interaction (all snappy, none smooth):** - Card entrance: as each card scrolls into view (IntersectionObserver), it "stamps in" — `scale(0.96)` → `1` over **2 frames using `steps(2)`**, plus the dithered shadow appearing one frame later. Stagger by ~60ms down each row. No easing curves; everything moves in discrete pixel jumps. - Hover on a card: the card translates `-8px, -8px` instantly (`transition: transform 0s` — it just *jumps*), the dithered shadow grows to `16px 16px`, and the `[SOLVED]`/`[UNSOLVED]` stamp does a tiny 1-frame `rotate` jitter. A faint *click* feel — implied, not audio. - The filter-strip tabs: clicking one instantly hides non-matching cards (set `display:none`), re-runs the stagger-in for the survivors, and the active tab inverts its bevel (light/dark edges swap) and turns blueprint-blue. - The wordmark cursor and one "now editing…" cursor at the end of the status line blink on the same 1.06s `steps(1)` clock. - Optional tiny flourish: a single horizontal "CRT degauss" wobble of the whole `
` on first load — one 0.4s `transform: skewX()` keyframe sequence using `steps(6)`, then dead still forever. **Copy guidance:** write 24 short puzzle entries. Each entry = a pixel-art plate + a metadata block (`MECHANISM`, `YEAR`, `DIFFICULTY` shown as 1–5 red pips, `SLOWEST TESTER`, `PIECES/CLUES`) + one dry sentence of commentary. Three or four entries get an `⌐ EDITOR'S PICK ¬` bracket-frame and a brass-yellow star. Keep all copy understated, exact, occasionally funny — the voice of two people who love the craft and don't need to shout about it. ## Uniqueness Notes **Differentiators against the existing corpus:** 1. **True 8-bit bitmap typography as the *primary* type system.** `pixel-art` aesthetic sits at 3% and `pixel-art` imagery at 3% in the frequency report — and almost none of those use a real bitmap face like *Press Start 2P* for the wordmark *and* titles *and* filter UI. This site commits fully: every shadow is a dither, every value snaps to 8px, anti-aliasing is treated as a bug. 2. **A CRT-terminal *catalogue ledger*, not a game and not a marketing page.** The dominant patterns in the corpus are `parallax` (91%), `cursor-follow` (89%), `spring` (84%), `magnetic` (81%) — all *smooth, continuous* motion. ppuzzle.works deliberately refuses every one of them: all animation is discrete `steps()` jumps, there is no cursor-follow, no parallax, no spring, no magnetic hover. The novelty is *motion that snaps*. 3. **Green cutting-mat background + dithered checkerboard shadows as a unified material story.** No prior design uses a self-healing-mat grid as its page substrate, and "shadows rendered as Bayer dither, never blur" is essentially unrepresented. The puzzle-plate illustration system (cryptic grid, nonogram, wooden burr, dissection, logic-grid, sliding tile, matchsticks) is content unique to a puzzle workshop. 4. **No CTA, no pricing, no stat-grid, no testimonials, no newsletter, no cookie banner** — the page is purely a 24-entry catalogue wall, against a corpus where `card-grid` (91%) and `hero-dominant`/CTA layouts dominate. The card grid here carries *content*, not conversion. **Avoided overused patterns (per frequency analysis):** no `glassmorphism` (81%), no `hand-drawn` aesthetic (96%), no `photography` imagery (98%), no `warm`/`gradient` palette blends (98% / 95%) — colours are clamped and meet at hard edges; no `parallax` / `cursor-follow` / `spring` / `magnetic` motion. **Chosen seed/style:** `90s pixel art playful` (from seeds.json) — interpreted as a meticulous CRT-terminal puzzle-workshop ledger rather than a literal retro game UI.