# Design Language for PPUZZL.net ## Aesthetics and Tone PPUZZL.net is **a chrome-graffiti shrine, lit by one candle, where the puzzle pieces are made of polished metal**. The visual posture is the impossible cross-pollination of three things that should not coexist: a writer's chrome throw-up burning silver on a bridge underpass, a Japanese kura storehouse where a single beeswax flame illuminates folded steel, and an isometric blueprint of a wooden 3D puzzle exploded into its component blocks and frozen mid-detonation. The tone is **minimal not by subtraction but by silence** — the page contains very few elements, but every element is loud, reflective, and refuses to behave on a grid. The double-P in PPUZZL is read as **two upright slabs of brushed chrome leaned against each other forming a tent**, and the double-Z is **a zigzag of spray on a wall**, lit only by candleflame, casting a wobbling shadow. The mood is **late-night studio after the heist**: the safe is open, the parts are out, the candle is burning down to the holder, and someone has begun assembling the puzzle on the floor. There is no one in the room. The visitor is the late arrival who finds the lights off, the chrome still warm, the candle still flickering, and the broken grid of pieces waiting to be turned over. Inspirations explicitly woven together: **Futura/Goyard's chrome wordmarks**, **NYC subway burner pieces by SEEN/IZ THE WIZ circa 1981**, **Hiroshi Sugimoto's photographs of single candles burning for the duration of an exposure**, **Ezekiel Jackson's isometric block puzzles**, **the Helvetica Now Display specimen book**, and **the way a magnifying glass softens what surrounds the focal point into milk**. The result is **graffiti with the loudness pulled out and the reflection turned up**. ## Layout Motifs and Structure The page is a **broken grid** — explicitly broken, not "asymmetric." A 12-column grid is laid down as the substrate, then **three of the columns are deliberately destroyed**: column 4 is shifted +47px right, column 7 is rotated -1.4°, and column 10 is dropped 112px below baseline. Every element snaps to this fractured grid, so the page reads as **a grid that has been hit with a hammer at three predictable points**. The breakage is *systematic*, not random — the same three columns drift the same way on every viewport, creating a fingerprint the visitor learns by scrolling. The page is composed of **seven scenes**, each `min-height: 100vh`, but stacked with **negative top-margin overlap of -8vh** so adjacent scenes always show a sliver of the next one bleeding chrome across the seam. Within each scene: - A single **isometric puzzle-piece** (rendered as inline SVG, ~38% viewport width) anchors the broken-grid hotspot of that scene. - A single **candleflame** (a 6-point animated SVG path, ~44px tall) sits in the upper-left of every scene as a persistent witness — its flicker is bound to the scroll velocity (faster scroll = more flicker). - A single **paragraph of body copy** (max-width 38ch) is set against the broken column — never centered, always pinned to one of the three fractured columns so the prose itself reads off-axis. - Generous, deliberate negative space. Roughly 68% of every scene is empty chrome-tinted dark. The seven scenes are: **(1) PIECES** (introduction — one chrome cube floating), **(2) FRACTURE** (the grid breaks visibly on-screen), **(3) ASSEMBLY** (pieces drift toward each other in isometric space), **(4) MIRROR** (chrome reflectivity demo — page reflects itself), **(5) FLAME** (candle takes over, blur-focus heaviest here), **(6) SOLVE** (the puzzle completes for one frame), **(7) DISPERSE** (pieces scatter back, candle blown out by reaching the bottom). A persistent **soft-focus vignette** is applied site-wide — only a 320×320px circular region near the cursor remains in sharp focus, everything else has `backdrop-filter: blur(3px)` softening the surroundings. The visitor's gaze is literally the candle's halo of clarity in a blurred chrome room. ## Typography and Palette **Typography — Google Fonts only, sans-grotesk register:** - **Space Grotesk** (Variable, weights 300–700) — the lead voice. Used for all display headlines at 96–180px with `font-variation-settings: "wght" 520`, `letter-spacing: -0.034em`, `line-height: 0.88`. Set lowercase. Space Grotesk is chosen because its **slightly geometric proportions read as both graffiti tag and engineering blueprint** — its single-storey "a" and exaggerated descenders feel hand-cut by a cap. - **Archivo** (weights 400, 600) — secondary voice for sub-display copy at 28–44px and section labels. Used in `font-feature-settings: "ss01" on` (alternate "g") to add a subtle grotesque tic. - **Inter** (weight 400, 500) — the only body font, set at 17px with `line-height: 1.55` and `letter-spacing: 0.005em`. Inter's neutrality lets the page's other elements (chrome, candle, puzzle) speak. - **Reserved emergency display:** **Bricolage Grotesque** (Variable) used exactly *once* on the entire site — for the scene 6 "SOLVE" headline — with `font-variation-settings: "wdth" 75, "wght" 800`, compressed and heavy, as the only moment the page raises its voice. No serifs. No mono. No script. **The grotesque is total.** **Palette — chrome-metallic, eight values, all explicit hex:** - `#0B0B0E` — *Storehouse Dark* — primary background; not pure black but a warm-toned graphite that lets candlelight read warm against it. - `#1A1B22` — *Shadow Steel* — secondary surface, used for scene-bleeds and the broken-column blocks. - `#C8CCD4` — *Brushed Chrome* — primary metallic foreground; all isometric puzzle-piece "top faces" use this with a 14% inner-light. - `#9AA0A8` — *Mid-Polish* — secondary metallic for piece "side faces" (the isometric -30°/+30° planes). - `#5C6068` — *Tarnished Edge* — bottom faces of isometric pieces; gives weight to the puzzle. - `#E6E8EC` — *Hot Specular* — used only for the chrome highlight stripe on each piece (a 2px line catching imaginary studio light); also the body-text color. - `#FFB85A` — *Candle Honey* — the candleflame's core; the **only warm color in the entire palette** and used exclusively for the flame, the vignette glow around the cursor, and exactly four typographic flourishes (the period after "PPUZZL," the underscore in "ppuzzl_net" footer, and two pull-quotes). - `#FF4D2E` — *Spray Red* — used **on a single element only** — the graffiti tag of the site logotype in scene 7, where the entire chrome surface dissolves and what remains is a hand-pulled red drip. This is the loudest moment on the page, and it lasts ~6 seconds before the page ends. The palette is deliberately **anti-rainbow**: chrome variations + one candle warmth + one drip of red. The viewer should feel that color is rationed and therefore precious. ## Imagery and Motifs The site contains **no photography**. Imagery is built from three intersecting motif systems: 1. **Isometric-Icons (the puzzle-piece grammar).** Every visual object is rendered as a hand-drawn isometric shape on a strict 30°/30°/90° axonometric. The vocabulary is exactly five primitives: the cube, the L-tromino, the T-tetromino, the staircase-three, and the single-piece "key." All five appear in scene 1 as a quiet inventory; they reassemble through scenes 2–6 into a single sculptural object that fills scene 6. Each piece is rendered as a layered SVG with three `` faces (top/left/right) using the Brushed Chrome / Mid-Polish / Tarnished Edge palette. A 2px Hot Specular highlight runs along the top edge of every top face. Pieces never use bitmaps — the chrome is *implied* by faceting, not by gradients, and looks more like a Memphis Group rendering of a Tetris piece than a 3D rendered photoreal cube. 2. **Candle-Atmospheric (the flame and the soot).** A single SVG flame, 44px tall, lives in the persistent header. The flame is a 6-point animated path with an inner Honey core (`#FFB85A`) and an outer gradient halo softened by a `feGaussianBlur stdDeviation="6"`. Flicker is driven by `animation: flame-flicker 220ms steps(7,end) infinite alternate` plus a JS-bound multiplier on scroll velocity. Around the flame, a soft **soot smudge** is built from a 240px radial gradient of Storehouse Dark, simulating where the flame has darkened the chrome above it. Every scene transition releases a *ghost flame* that slowly drifts up-screen and dissolves at top-of-viewport — the page's only purely decorative element. 3. **Graffiti tags (sparingly, structurally).** On exactly four pages-of-scroll, a hand-drawn graffiti tag appears at the broken-column hotspot — drawn in Spray Red `#FF4D2E` — using a textured SVG `` chain (`feTurbulence` baseFrequency 0.9 + `feDisplacementMap`) to simulate spray-can speckle. The four tags are: "PPUZZL" (scene 1), "fracture" (scene 2), "still here" (scene 4), "solved." (scene 7). They are **always under-the-chrome** — meaning a chrome plate sits in front, and only the tag's edges are visible peeking around the chrome. The graffiti is implied, not displayed. A persistent **chrome-noise grain** (a 2-tone SVG noise layer at 4% opacity, `mix-blend-mode: overlay`) sits across the whole document, giving every chrome surface the micro-pitting of real brushed metal. ## Prompts for Implementation Build PPUZZL.net as **a single-page chrome-and-candle film, 7 scenes, 100vh each, no navigation, no menu, no CTAs, no contact form, no pricing, no footer chrome of any kind beyond a single `ppuzzl_net` wordmark and a copyright line in 11px Archivo at the very bottom.** The site is a *narrative experience that happens to be a website*, not a website that tells a story. **Implementation specifics:** - **Broken grid as CSS variable system:** Define `--col-4-shift: 47px; --col-7-rot: -1.4deg; --col-10-drop: 112px;` and apply them to elements via `data-column="4|7|10"` attributes. Never let any element occupy a column without snapping to either pristine or broken state. - **Scene scaffolding:** Use `IntersectionObserver` per scene with `threshold: [0, 0.25, 0.5, 0.75, 1]`. Bind a CSS variable `--scene-progress` (0 → 1) to each scene-root and use it to drive transforms on the isometric pieces, the candle flicker rate, and the vignette tightness. - **Cursor-driven blur-focus:** Place a fixed-position `
` of 320×320px following the cursor with `pointer-events: none; backdrop-filter: blur(0); border-radius: 50%; mask-image: radial-gradient(circle, black 30%, transparent 70%);`. Apply `backdrop-filter: blur(3px)` to the body, then "punch out" the aura with the inverse mask. The result: only the area near the cursor is sharp; everything else is softly chromed milk. On touch devices, fall back to a slow 8s orbital path so the aura still moves. - **Isometric piece animations:** Each scene's puzzle-piece performs a single transform — translateZ in scene 1, rotation around the isometric Y in scene 3, a magnetic snap in scene 6. Use `transform-style: preserve-3d` even though the rendering is implied-2D — this lets `will-change: transform` engage the GPU without forcing real 3D math. - **Candle JS:** A 60Hz requestAnimationFrame loop multiplies flicker amplitude by `1 + (scrollVelocity / 80)`. Cap at 4×. When the page reaches scene 7 bottom, fire a one-time "blowout" — flame opacity drops to 0 over 600ms, soot smudge persists for 1.6s longer, then dissolves. - **Storytelling sequence (7 scenes):** 1. **PIECES.** Black screen. Candle lights itself in the upper-left over 1.2s. Single chrome cube fades into broken-column-4. Headline (Space Grotesk 180): "ppuzzl." 2. **FRACTURE.** Grid lines briefly become visible (Storehouse Dark on Storehouse Dark, 2px stroke), then crack at the three breakpoints with a faint shatter SFX. Tag "fracture" in Spray Red appears tucked behind a chrome plate. 3. **ASSEMBLY.** Five isometric primitives drift in from offscreen, meeting at scene-center on `--scene-progress` 0.4–0.8. 4. **MIRROR.** A horizontally-mirrored chrome plate covers the upper half of the viewport; the lower half is rendered upside-down through it. Tag "still here" peeks from the seam. 5. **FLAME.** The candle grows. Vignette tightens to 180px. The blur on surroundings increases to 7px. Body copy (a single sentence in Inter): "everything outside the flame is a guess." 6. **SOLVE.** All five primitives snap into one composite sculpture. Bricolage Grotesque "SOLVE" headline appears at 220px in chrome. Pause for 800ms. The sculpture is the puzzle's solution. 7. **DISPERSE.** Pieces scatter outward in isometric trajectories. The flame is blown out. The Spray Red tag "solved." remains as the last visible mark on a Storehouse Dark field, then a 6s hold before the page resets to scene 1 if the visitor lingers. - **Sound (optional, off by default):** A single muted-by-default audio element with a 7-second loop of vinyl-room-tone + candle crackle. The unmute affordance is a 12px chrome speaker icon in the lower-right of scene 1 only. - **No CTAs. No pricing block. No stats-grid. No "trusted by" logo wall. No newsletter modal. No cookie banner unless legally required, and if so, render it as a chrome plate in scene 1's broken column with consent text in 14px Archivo.** - **Performance considerations are explicitly subordinate to atmosphere** — chrome highlights and SVG filters are expensive; ship them anyway. Bias the implementation toward **stillness punctuated by precise motion**. The page should feel inhabited by a single candle, not animated by a designer. ## Uniqueness Notes Differentiators from any other design in this monorepo and from contemporary web design generally: 1. **A graffiti aesthetic with the volume turned all the way down, expressed through chrome instead of color.** Most graffiti-styled sites lean on neon, drips, riot-color, and hand-drawn distress textures (LLITTL.ai uses graffiti-with-stencil-red on rice-paper cream — already different from us). PPUZZL.net does the opposite of "loud street": it renders graffiti as **implied chrome glints under candlelight** with a single drip of Spray Red appearing only in the final scene. The street voice is whispered through metal. 2. **Cursor-driven blur-focus as the single dominant interaction model.** Per the frequency analysis, `blur-focus` appears in only 5% of designs in this repo and is almost never the *primary* interaction. Here it is the entire reading model — the visitor's cursor is the candle's halo of clarity, and everything outside it is intentionally soft. There is no menu, no CTA, no traditional hover state. The cursor *is* the navigation. 3. **A systematic broken-grid (three named breakpoints, repeating) rather than asymmetric chaos.** Most "broken" or "asymmetric" layouts (which appear in 55% of repo designs) randomize spacing or stagger blocks. PPUZZL.net defines exactly three deterministic fractures (`--col-4-shift`, `--col-7-rot`, `--col-10-drop`) that recur on every viewport, so the brokenness has a fingerprint the visitor can recognize and the design has the discipline of a grid even while violating it. 4. **A palette that is 87% chrome and 13% not-chrome, with the not-chrome strictly rationed.** Chrome-metallic appears in 10% of repo designs but always alongside other strong colors. Here, chrome is six of eight values, candle honey is one, and spray red is one — and spray red appears on screen for a total of about 6 seconds across the entire visit. Color is doled out like ammunition. 5. **Isometric-icons appear in only 5% of repo designs**, and combined with chrome-metallic + candle-atmospheric + graffiti, this seed has zero precedent in the corpus. 6. **The page enacts the brand name.** PPUZZL is delivered literally — pieces appear, fracture, assemble, mirror, ignite, solve, disperse. The site is the puzzle, not a description of a puzzle. **Chosen seed:** `aesthetic: graffiti, layout: broken-grid, typography: sans-grotesk, palette: chrome-metallic, patterns: blur-focus, imagery: isometric-icons, motifs: candle-atmospheric, tone: minimal` **Frequency-informed avoidances:** - **Avoided:** `aesthetic: hand-drawn` (80% — saturated), `imagery: photography` (95% — saturated), `layout: full-bleed` (80% — saturated), `layout: centered` (75% — saturated), `palette: gradient` (85% — saturated), `palette: warm` (80% — saturated), `palette: muted` (65% — saturated), `typography: mono` (85% — saturated), `patterns: parallax` (85% — saturated), `motifs: nature` (25%, but generic). - **Preferred (rare):** `palette: chrome-metallic` (10%), `imagery: isometric-icons` (5%), `motifs: candle-atmospheric` (10%), `patterns: blur-focus` (5%), `typography: sans-grotesk` (5%), `aesthetic: graffiti` (5%), `tone: minimal` (no exact prior occurrence shown — fresh ground), `layout: broken-grid` (no exact prior occurrence shown — fresh ground). The combination is intentionally one-of-one within this repository.