# Design Language for ppuzzle.org ## Aesthetics and Tone ppuzzle.org is a **lost-cartridge puzzle arcade rendered in handmade pixel art** — the conceit is that this is the boot screen and overworld of a puzzle game that was never published, recovered from a scratched ROM and lovingly emulated in a browser. The mood is *whimsical-creative* with an undertow of *nostalgic-retro*: the warm glow of a CRT in a dark bedroom at 2am, the chunky satisfaction of pieces clicking into a grid, the optimistic chiptune that loops forever on the title screen. This is **not** a flat-design or "retro-styled" site that merely uses a pixel font. Every visual atom is built on a deliberate, *visible* pixel lattice — 4px is the smallest meaningful unit, and nothing is anti-aliased that doesn't have to be. Diagonal lines stair-step. Circles are octagons-of-octagons. Gradients are dithered with ordered Bayer-matrix checkerboards, never smooth. The cursor itself is a 16×16 chunky hand-pointer. The whole page behaves like a 320×240 logical canvas scaled up with `image-rendering: pixelated`, then framed inside a softly-curved CRT bezel with a faint scanline veil and a phosphor bloom that breathes. The tone of voice in copy is the over-enthusiastic, slightly broken English of a fan-translated puzzle game manual: "PRESS START TO ARRANGE THE WORLD," "EVERY PIECE HAS A PLACE — EVEN YOU." Earnest, never ironic. The site is *playful* and *energetic* but it never shouts a sales pitch; it invites you to *play with the layout itself*. ## Layout Motifs and Structure The governing layout is **broken-grid disguised as a perfectly intact grid** — a jigsaw that *looks* solved until you nudge it. The page is one tall scrolled "world map" divided into five `
` "stages," each one a logical 320×240 viewport scaled to fill the browser. - **Bezel frame:** The entire viewport sits inside a fixed-position CRT shell — rounded screen corners (clipped with an SVG mask, hard-edged at the pixel level), a 24px chunky plastic frame in warm beige, a tiny power LED that pulses, and a screen-printed label reading `P-PUZZLE ENT. SYSTEM · MODEL 1989`. - **Stage 1 — TITLE SCREEN:** Full-bleed. A pixel-art logo assembled from jigsaw tiles that *fall in from offscreen and snap together* with a stagger, each landing with a 2px overshoot bounce. Beneath it, a blinking `▸ PRESS ↓ TO BEGIN` and a looping marquee of pixel clouds drifting across an dithered sky-gradient. - **Stage 2 — THE OVERWORLD:** An isometric-ish but axis-aligned (true 2:1 pixel-iso) map of "puzzle types" as little tiled islands connected by dotted paths. Hovering an island lifts it 4px with a hard drop-shadow and plays a `blip`. This is the closest thing to "navigation" — but it's a place, not a menu bar. - **Stage 3 — THE WORKSHOP:** A bento-box of "puzzle pieces" — irregular jigsaw-shaped cards (real `clip-path` jigsaw tabs, but the tabs are *stepped*, not curved) holding content. They sit in a grid with one piece deliberately *missing* (an empty socket with a faint dithered shadow showing where it goes); as you scroll, the missing piece slides up from the bottom and clicks home. - **Stage 4 — THE PUZZLE BOX:** A single centered, oversized "level select" — a 5×5 sliding-tile puzzle where each tile is a fragment of a larger pixel illustration; tiles auto-shuffle on entry then solve themselves in a satisfying cascade, revealing the picture. - **Stage 5 — END SCREEN:** `THANK YOU FOR PLAYING` in big dithered letters, a fake "high score" table (whimsical, not real stats), and a slow scroll of pixel-credits that loops back to the title. Spatial rules: everything snaps to the 4px lattice. Margins are always multiples of 8px. There is **no** asymmetric organic flow — the charm is in *rigid grid that occasionally and audibly clicks*. ## Typography and Palette **Type stack — Google Fonts only, all pixel/bitmap or chunky.** - **Press Start 2P** — the iconic 8px bitmap face. Used *only* for the title logo, stage names, and the blinking prompts. Always at integer multiples of its native 8px cap height (8, 16, 24, 32px) so it never blurs. Letter-spacing 1px. Reserve for short bursts — it is exhausting in body copy and we lean into that. - **VT323** — a fixed-width "terminal CRT" face with a slightly humanist warmth. This is the workhorse for all body copy, manual-style instructions, captions, and the credits crawl. Set at 20–24px, line-height 1.4, generous, like a printed game manual. - **Silkscreen** — a tiny rounded bitmap face. Used for UI micro-labels: the bezel screen-print, the high-score table headers, button captions, the `MODEL 1989` plate. Always small (8–12px), always uppercase. - Optional accent: **Jersey 10** for the big "STAGE CLEAR"-style flash messages — a condensed pixel display face that reads loud at huge sizes. **Palette — a hand-mixed 16-color "console" ramp (everything dithers between these, never outside):** - `#1a1228` — **CRT Black** (deep aubergine-black; the screen "off" color and darkest shadow) - `#2b1d3f` — **Cabinet Plum** (the dim background field behind stages) - `#5b4b8a` — **Twilight Mid** (mid-tone for dithered gradients, distant map) - `#f4d35e` — **Cartridge Yellow** (primary highlight; the logo, the LED, selected tiles) - `#ee964b` — **Sunset Orange** (secondary accent; paths, hover states, the missing-piece glow) - `#f95738` — **Vermilion Alert** (errors, the blinking cursor, "PRESS START") - `#26c6a7` — **Phosphor Teal** (the friendly UI green; checkmarks, solved-state, success blips) - `#7fd1ff` — **Sky Pixel** (dithered sky, water tiles, link text) - `#f2e9e4` — **Manual Paper** (the cream of body text on dark; the "printed manual" surfaces) - `#c9b8a8` — **Bezel Beige** (the plastic CRT frame and cartridge shells) Rule: any blend of two colors must be a **2×2 or 4×4 ordered dither**, visible at 1:1. Never use `linear-gradient` without `background-blend-mode` faking a checkerboard, or just generate dither tiles as repeating CSS `conic-gradient`/`repeating-linear-gradient` at hard stops. ## Imagery and Motifs **Pixel-art is the *only* imagery** — no photography, no SVG line-illustration with smooth curves, no 3D renders. All decorative assets are drawn (or CSS-constructed) on a pixel grid: - **Jigsaw tiles** with *stepped* (not bezier) interlocking tabs — the core repeating motif, used for cards, the logo, the loading bar segments. - **Sliding-tile puzzles** — the Stage 4 hero and small idle animations in corners. - **Dithered skies and water** — Bayer-matrix gradients as section backgrounds. - **Chunky CRT chrome** — scanlines (a 2px-pitch `repeating-linear-gradient` at ~6% black), a subtle barrel-vignette via radial mask, a faint moving "refresh line" that sweeps top-to-bottom every ~8s, and a phosphor-bloom (`box-shadow` glow in Cartridge Yellow on bright text). - **Pixel sprites** — tiny ambient critters: a 16×16 cloud, a hopping puzzle-piece mascot named "Tab" who walks along section edges, twinkling stars, a bobbing question-block. - **Marquee ribbons** — horizontal scrolling pixel-text strips like an arcade attract-mode. - **Empty sockets** — negative-space jigsaw holes with inset dithered shadow, the leitmotif of "something belongs here." Iconography: all icons are 16×16 grid, two-frame animated where it helps (a key that jingles, an arrow that nudges, a star that sparkles). No icon font; hand-placed `
`s or a single sprite-sheet `background-position` shift. ## Prompts for Implementation Build ppuzzle.org as **one long static HTML document** — no framework, no router. Think of it as a single emulator canvas: a fixed CRT bezel wrapper, then five stacked `
` "stages," total scroll length ~520vh desktop / ~640vh mobile. **Global setup:** - Apply `image-rendering: pixelated` everywhere; design at a logical scale and use `transform: scale()` or just author everything in multiples of 4px so nothing fractional ever renders. - The CRT bezel is `position: fixed`, `inset: 0`, pointer-events through to content; it carries scanlines, vignette, the breathing phosphor bloom (`@keyframes` slow opacity drift on a glow layer), and the sweeping refresh line. - Custom cursor: a 16×16 pixel hand pointer (`cursor: url(...) 4 0, pointer`). - Honor `prefers-reduced-motion`: freeze the sliding-tile solves to their final state, stop the refresh-line sweep, keep everything else. **Stage-by-stage:** 1. **TITLE SCREEN.** On load: a 1.5s "power-on" — screen flashes from CRT Black, a horizontal line expands vertically (classic TV turn-on), a faint hum visualized as one jolt of scanline brightness. Then the logo tiles **fall and snap** in with a stagger (each tile: drop from `translateY(-120%)`, land with a `cubic-bezier` 2px overshoot, a hard 1-frame white flash on impact, a `blip`). `▸ PRESS ↓ TO BEGIN` blinks at 1.2s intervals in Vermilion. Pixel clouds drift right-to-left on a dithered Sky→Twilight gradient. 2. **OVERWORLD.** A 2:1 pixel-iso map of "puzzle island" tiles linked by dotted Sunset-Orange paths (path dashes "march" with an animated `background-position`). Hover an island: it pops up 4px, hard drop-shadow appears beneath, a label tooltip in Silkscreen snaps in, a `blip` plays. Tab-the-mascot walks the path between islands in a 2-frame loop, idling occasionally with a 3rd frame. Parallax: clouds and a far mountain layer drift at different scroll rates — but in **stepped** increments (snap parallax to 4px), so it judders charmingly rather than glides. 3. **WORKSHOP.** A bento grid of jigsaw-tab `clip-path` cards (stepped tabs). One slot is **empty** — a dithered inset socket. As this section enters the viewport, the missing piece slides up from below the fold, wobbles, and **clicks** into the socket (scale-down snap, white flash, a satisfying two-tone chime, a tiny dust-puff of 4 pixel particles). Other cards do a subtle "settle" stagger on first reveal. Hovering any card lifts it 4px with a hard shadow; clicking does a quick "press-in" 2px. 4. **PUZZLE BOX.** Centered oversized 5×5 sliding-tile puzzle; each tile is a fragment of one big pixel illustration (e.g. Tab the mascot holding a giant key, or a pixel sunrise over puzzle islands). On entry the tiles **shuffle** rapidly (8–12 random slides, each with a hard ease), pause a beat, then **auto-solve** in a flowing cascade — adjacent tiles sliding in sequence — finishing with a full-illustration reveal, a phosphor-bloom pulse, and a "STAGE CLEAR" flash in Jersey 10. A "SHUFFLE AGAIN" pixel-button lets the visitor replay it. 5. **END SCREEN.** `THANK YOU FOR PLAYING` in big dithered Press Start 2P, letters fading in one column of pixels at a time. A whimsical "HIGH SCORES" table (names like `AAA`, `TAB`, `YOU`, with playful "scores" that are really fun facts, not metrics). Then a slow vertical credits crawl in VT323 — roles invented in the spirit of game credits — which, when it finishes, hard-cuts back to the TITLE screen power-on, looping the "cartridge" forever. **Storytelling bias:** this is a *full-screen narrative experience* — the visitor is "playing" a recovered puzzle game, not browsing a product page. **AVOID** entirely: CTA-heavy hero buttons, pricing tables, three-up stat grids, testimonial carousels, "Trusted by" logo walls, mega-menus, smooth glassmorphic gradient cards. Every interaction should make a *click*, a *blip*, or a *snap* — sound-design-as-feeling expressed visually through flashes and overshoots even if audio is muted. ## Uniqueness Notes Differentiators from the rest of the registry: 1. **True pixel-lattice discipline, not "retro flavor."** Most retro/vaporwave/y2k designs in the pool use a pixel font over otherwise smooth, anti-aliased modern layouts. This design forbids anti-aliasing structurally: all gradients are *visible ordered dithers*, all diagonals stair-step, the cursor and icons are 16×16, the whole page is `image-rendering: pixelated`. Pixel-art aesthetic sits at only ~3% of the registry — and almost none commit to the dither-everything rule. 2. **The layout itself is the puzzle.** Rather than decorating with jigsaw clip-art, the *grid behaves as a jigsaw*: a deliberately empty socket in the Workshop bento, a piece that physically clicks into place on scroll, a 5×5 sliding-tile puzzle as the "level select." The page's structure is diegetic. The dominant layout is broken-grid masquerading as an intact grid that audibly clicks — distinct from the registry's usual organic-flow / asymmetric / immersive-scroll treatments. 3. **"Recovered unpublished cartridge" narrative + CRT-emulator frame.** A fixed curved bezel with scanlines, barrel vignette, breathing phosphor bloom, and a sweeping refresh line wraps the entire site as if you're emulating a 1989 puzzle console. The copy voice is earnest fan-translated-manual English. No other registry entry frames itself as a playable lost game booting up and looping forever. 4. **Stepped parallax.** Where 91% of the registry uses smooth parallax, this design snaps parallax offsets to the 4px grid so background layers *judder* in pixel increments — a deliberate anti-smoothness choice consistent with the lattice. Avoided overused patterns from frequency analysis: glassmorphism (81%), smooth `parallax` glide (91% — kept the motif but made it stepped), `cursor-follow` magnetic blobs (89% — replaced with a chunky fixed pixel cursor and `blip` hovers), warm-gradient mesh imagery, `tilt-3d` cards (replaced with hard 4px lift + hard drop-shadow), photography (98% — zero photos here). Underused patterns leaned into: pixel-art imagery (3%), `pixel-art` aesthetic (3%), `bounce-enter` / overshoot snaps, `typewriter-effect` revealed column-by-column. Chosen seed/style: **90s pixel art playful** (fallback selection — no Planned Seed was supplied in the assignment; chosen for being one of the least-used seeds in the registry and a perfect thematic fit for a puzzle domain).