# Design Language for PPUZZL.works ## Aesthetics and Tone PPUZZL.works is a **blobitecture** monolith — a single bold-confident column dropped through the screen like a viscous, jewel-coloured cell-tower of solved and half-solved puzzles. The site presents itself as the *workshop floor* of the PPUZZL practice, but the floor is not flat: it is a translucent vat of resin in which thirteen oversized, asymmetrical blobs hover at different depths, each blob a chamber containing one *work* — a logic puzzle, a maze proof, a constraint-satisfaction artefact, a hand-cut wooden dissection scanned at 1200 DPI. Imagine the cooling pools of a 1970s nuclear-research building re-imagined as Karim Rashid sculptures; imagine if Zaha Hadid had been hired to design the Mensa headquarters and then handed the brief to a botanical illustrator who only paints in jewel-tones. The aesthetic is organic-architectural, not cute. The blobs are *heavy*. They have caustics. They cast colored shadows on each other. They breathe. The tone is **bold-confident**, not arrogant. The voice that runs alongside the blobs is the voice of a master craftsperson who is genuinely amused that you are here and would like to show you something they have been working on. Sentences are short, declarative, occasionally cocky: "This took eleven months. Look at it." "We ship puzzles. We don't ship riddles." "Every piece below has been verified by hand." The site does not whisper or flirt. It walks toward the visitor, sets the puzzle down on the bench, and waits. The mood register sits between the saturated-pigment confidence of late Bauhaus dye experiments and the soft-edged ergonomic optimism of mid-century blob furniture (Pierre Paulin's *Tongue Chair*, Verner Panton's *Living Tower*). It is unapologetically *coloured* in an industry that defaults to neutrals, and unapologetically *single-column* in an industry that defaults to dashboards. ## Layout Motifs and Structure The composition is a **single-column** scroll, deliberately and stubbornly one-column-wide for the entire document — no sidebar, no card-grid, no bento-box, no two-up at any breakpoint. The column is centered, capped at `min(720px, 88vw)`, and sits inside a *wider* full-bleed canvas that is filled, edge-to-edge, with the blobs themselves. The blobs are background actors; the column is the foreground reading-rail. **Vertical rhythm — thirteen chambers.** The page is exactly thirteen viewport-heights tall (13 × 100svh = `13 × 100svh`), and each viewport-height is one *chamber* containing exactly one blob and exactly one block of text. Between chambers there are no horizontal rules, no section breaks, no whitespace gaps — the column simply continues, but the blob behind it morphs from one shape into the next via SVG path interpolation (`` along `d`), so the *background* paginates while the *foreground* flows. This is the load-bearing trick of the layout: chapters happen in the canvas, not in the column. **The blob system.** Each blob is a single closed SVG path with 9 to 13 control points, generated from a polar function `r(θ) = R · (1 + Σ aₖ · cos(kθ + φₖ))` where the harmonics k ∈ {2,3,5,7} and the amplitudes aₖ ∈ [0.05, 0.18]. This guarantees every blob is *organically* asymmetric without ever becoming a circle or an ellipse. The thirteen blobs are pre-computed at build time and stored as inline SVG; on scroll, CSS `view-timeline` interpolates each blob's `d` attribute toward the next, producing a *single continuous morph* across the whole document. The morph never restarts — it is one liquid line from chamber 1 to chamber 13. **Depth.** The blobs are not flat. Each one carries a faint inner gradient (radial, off-center, `mix-blend-mode: multiply`) that makes it look like a 3D resin lens, and each one sits at one of three z-depths: *deep* (scale 1.6, blur 18px, opacity 0.35), *mid* (scale 1.0, blur 4px, opacity 0.65), *near* (scale 0.7, blur 0, opacity 0.92). The reading-column always sits *between* mid and near, so two of the three blob-layers blur as the reader passes through them — the **blur-focus** patternlanguage is mechanical, not decorative. **Column anatomy.** The column itself is unornamented: no card backgrounds, no borders, no shadows. The text floats directly on the canvas with a `backdrop-filter: blur(14px) saturate(1.1)` only behind running prose, applied as a soft vertical strip 720px wide that follows the scroll position. This strip is the *only* glassmorphism on the entire site, and it exists solely to keep prose legible against the colored blobs — never as ornament. **The wordmark.** `PPUZZL.works` is set at the absolute top of chamber 1, in tech-mono, scale `clamp(64px, 11vw, 184px)`, weight 500, letter-spacing -0.02em. The double-`P` is *not* kerned to overlap (PPUZZL.dev does that); instead, the two `P`s are connected at their bowls by a single hand-drawn SVG curve that emerges from the right edge of the first `P` and dissolves into the left stem of the second. This curve is one of the **flowing-curves** motifs and recurs throughout the site as the structural connective tissue between sections, headings, and figures. ## Typography and Palette **Typefaces — Google Fonts only.** - **JetBrains Mono** (variable, weights 100–800). The primary face for the entire site. This is the **tech-mono** seed taken at face value: a developer's monospace, but used at *display* sizes (the wordmark, chapter headings, numerical callouts) where its idiosyncrasies — the slashed zero, the rounded comma, the wide italic — read as confident and a little bit smug. Body copy is JetBrains Mono 16px / 26px line-height / weight 400; headings are JetBrains Mono weight 600 italic at 32–80px; the wordmark is weight 500 at 11vw. - **Space Grotesk** (variable, weights 300–700). The single secondary face, used *only* for figure captions, the nav rail (which here is just a vertical scroll-progress label on the left edge), and the running footer. Set at 13px / 20px line-height / weight 400, slightly tracked (+0.04em). Space Grotesk is here as a humanist counterpoint to JetBrains' rigour — a way to say "this is a caption, not a command." It never appears in body copy. - **No third face.** No serif. No handwritten. The combinatorial restraint is part of the brand. **Palette — jewel-tones, deliberately saturated.** | Role | Hex | Name | |---|---|---| | Canvas (deepest background) | `#0E0B14` | obsidian-violet | | Chamber 1 blob (sapphire) | `#1E3A8A` | abyssal-sapphire | | Chamber 2 blob (emerald) | `#0F5132` | mariana-emerald | | Chamber 3 blob (amethyst) | `#5B21B6` | imperial-amethyst | | Chamber 4 blob (ruby) | `#9F1239` | cardinal-ruby | | Chamber 5 blob (citrine) | `#B45309` | citrine-ember | | Chamber 6 blob (peridot) | `#3F6212` | peridot-moss | | Chamber 7 blob (tanzanite) | `#3730A3` | tanzanite-mid | | Chamber 8 blob (garnet) | `#7F1D1D` | garnet-deep | | Chamber 9 blob (aquamarine) | `#155E75` | aquamarine-cold | | Chamber 10 blob (topaz) | `#92400E` | topaz-burnt | | Chamber 11 blob (jade) | `#065F46` | jade-cabinet | | Chamber 12 blob (lapis) | `#1E40AF` | lapis-lazuli | | Chamber 13 blob (rose-quartz finale) | `#9D174D` | rose-quartz-fire | | Foreground prose | `#F5EFD8` | parchment-cream | | Caption + nav rail | `#C7B89A` | dust-gold | | Highlight (links, hover, marker) | `#FDE68A` | flare-citron | The thirteen jewel-tones are *never* mixed within a single chamber — each chamber owns exactly one jewel and saturates the entire blob with it. Between chambers, the morph performs a *hue interpolation in OKLCH space* (not RGB, never RGB) so the transitions stay perceptually even and never pass through muddy mid-greys. The canvas behind everything stays `#0E0B14` obsidian-violet for the entire page; the jewels glow against it the way real cut stones glow against black velvet in a museum case. ## Imagery and Motifs The imagery system is **botanical-illustration**, but bent toward puzzle-anatomy. Each chamber's *work* is represented not by a photograph and not by a screenshot, but by a hand-drawn botanical-style plate showing the puzzle as if it were a plant or organism: roots, stems, leaves, fruit, cross-sections. The visual rule: every plate must look like it could appear in *Curtis's Botanical Magazine* (1787–) or in Ernst Haeckel's *Kunstformen der Natur* (1899–1904), but its subject must be a piece of recreational mathematics. **Plate types — five recurring forms.** 1. **Polyomino Vines.** The pentominoes (F, I, L, N, P, T, U, V, W, X, Y, Z) drawn as the *flowering nodes* of a climbing vine. Each pentomino is rendered with botanical shading (stippled cross-hatching, ink-line, watercolor-wash highlights), labeled in italic tech-mono with its letter-name and its aspect ratio in tiny caption type. The vine itself is a single continuous **flowing-curve** that loops through all twelve pentominoes in the order they were discovered by Solomon Golomb. One plate, full-bleed within its chamber. 2. **Maze-Mycelium.** A maze drawn as the underground hyphal network of a fungus — passages are root-tunnels, dead-ends are sporing-bulbs, the solution path is highlighted in a single luminous flare-citron line that the reader must trace by eye. Botanical-illustration conventions: a faint horizon-line at one-third height, a small inset showing the "above-ground" growth, a 1-cm scale bar in the bottom-right corner. The maze is real; it can be solved. 3. **Sudoku Cross-Section.** A 9×9 sudoku board shown as the cross-section of a fruit (a pomegranate, a custard apple, a fig). Each cell is a *seed*; givens are shaded; the puzzle's symmetry group (whether it has 180° rotational symmetry, diagonal symmetry, etc.) is annotated with botanical-style arrows along the margin: "axis of symmetry: A→A′." 4. **Constraint-Satisfaction Bouquet.** A constellation of constraints drawn as a hand-tied bouquet — each variable is a flower, each constraint is a length of ribbon binding two or more flowers together. Long ribbons that bind many flowers fan out like a peacock's tail; tight ribbons cluster like the tied stems at the bouquet's base. Used to illustrate any CSP-style puzzle (logic grids, graph coloring, latin squares). The ribbons are in the chamber's jewel-tone; the flowers are in parchment-cream and dust-gold. 5. **Dissection Herbarium.** A geometric dissection — Dudeney's haberdasher, the four-piece equilateral-to-square — drawn as a *pressed-flower herbarium specimen*: the polygon pieces flattened and labelled like dried leaves on heavy paper, with a hand-written ink caption in the lower right ("*Triangulus → Quadratus*, four pieces, hinged, P. PPUZZL workshop, 2024"), and a wax-stamp seal in the chamber's jewel-tone. **Drawing technique.** All plates are **rendered as inline SVG**, never as raster images. The SVG strokes are 0.6–0.9px wide, set with `stroke-linecap: round` and `stroke-linejoin: round`, and lightly *trembled* by a per-vertex jitter of ±0.4px to give a hand-drawn quality. Fills use a custom *crosshatch pattern* (`` element, 4–6 directions per plate) that builds tone the way a 19th-century engraver would. No gradients except the SVG-path morph between chambers and the radial inner-gradient of each blob. **Flowing-curves motif.** Beyond the plates, **flowing curves** appear as the connective tissue of the entire document: the curve that links the two `P`s in the wordmark, the section markers (one continuous bezier that loops in from the right margin and tucks back out on the left), the navigation indicator (a single curve along the left edge whose tangent rotates with scroll progress), and the cursor follower (a 280-pixel trailing curve in flare-citron that lags the pointer by 11 frames). Every curve in the document is C¹ continuous — no cusps, no corners, no straight segments. This is non-negotiable. ## Prompts for Implementation Build PPUZZL.works as a **single full-screen, scroll-driven HTML document** that renders as one continuous, blob-morphing canvas with a single column of typography running through its center. It is one document, one scroll, one experience. There is no router, no SPA, no second page, no menu, no contact form, no footer chrome, no cookie banner. **Storytelling architecture (thirteen chambers).** The narrative is the practice's portfolio, told as thirteen short essays of 80–140 words each, paired with one botanical plate per chamber. The essays are written in first-person plural ("we"), present tense, declarative. Each chamber has a tiny chapter-numeral set in tech-mono italic at the top of its column — `01.`, `02.`, … `13.` — and a one-line title in JetBrains weight 600 italic. Below the title is the body essay, then the plate, then a single line of caption in Space Grotesk dust-gold. - **Chamber 01 — *We make puzzles by hand.*** Sapphire. A pentomino-vine plate. The opening manifesto. - **Chamber 02 — *Every solution is verified.*** Emerald. A maze-mycelium plate showing one of our 2024 mazes. - **Chamber 03 — *The wood comes from one forest.*** Amethyst. A dissection-herbarium plate of a hinged dissection cut in elm. - **Chamber 04 — *Constraint is generosity.*** Ruby. A constraint-satisfaction bouquet. - **Chamber 05 — *Logic has a smell.*** Citrine. A sudoku-cross-section plate (pomegranate). - **Chamber 06 — *We do not ship riddles.*** Peridot. The shortest essay (80 words). A pentomino plate of just the F, T, U pentominoes — the awkward ones. - **Chamber 07 — *A maze is an apology.*** Tanzanite. A maze-mycelium plate, but the maze has no solution; the caption explains why we shipped it anyway. - **Chamber 08 — *Symmetry is a kind of music.*** Garnet. A sudoku-cross-section plate of a 180°-symmetric board, with the symmetry axis drawn as a violin-string. - **Chamber 09 — *We charge for time.*** Aquamarine. A constraint-bouquet plate of the workshop's pricing model — every flower is an hour. - **Chamber 10 — *The hardest puzzle we have made.*** Topaz. A dissection-herbarium plate of an unsolved dissection (the Banach-Tarski sphere is referenced obliquely). - **Chamber 11 — *We taught a child to make one.*** Jade. A pentomino-vine plate, but drawn in a child's hand. - **Chamber 12 — *We are taking commissions.*** Lapis. A constraint-bouquet plate that doubles as a contact form: each flower is a field, each ribbon is a validation rule, the submit button is the wax-stamp seal. - **Chamber 13 — *Thank you for scrolling.*** Rose-quartz fire. A single botanical plate of the whole portfolio compressed into one impossible plant — pentominoes for leaves, mazes for roots, sudoku-fruit, constraint-bouquet at the crown. The caption is hand-lettered. **Loading and entry.** The first paint is *only* the obsidian-violet canvas with the wordmark already in place at the top of chamber 1, in parchment-cream. Within 200ms, the sapphire blob fades up behind the wordmark over 1400ms with an ease-out-quart curve. The flowing-curve between the two `P`s draws itself with a `stroke-dashoffset` animation over 900ms, starting 300ms after the blob begins. There is no spinner, no skeleton-loader, no progress bar. The page composes itself like ink hitting paper. **Scroll mechanics — the morph.** The single canonical interaction is *scroll equals morph*. Scroll progress 0→1 maps directly to: - the SVG path `d` attribute interpolation between the thirteen blob shapes, - the OKLCH hue rotation of the blob fill, - the parallax depth-field (deep blob 0.3× scroll, mid 0.6× scroll, near 1.0× scroll), - the column's `backdrop-filter` blur intensity (which intensifies briefly during chamber transitions and relaxes within chamber bodies), - the position of the cursor-follower's anchor along the left margin curve. Use `view-timeline` with a `view-timeline-axis: block` declaration on the document body, fall back to `IntersectionObserver` + `requestAnimationFrame` on browsers without view-timeline. Never animate on `scroll` event listeners directly — always proxy through `requestAnimationFrame`. **Blur-focus pattern.** As each chamber enters the viewport, the *previous* chamber's blob blurs from 0px → 18px over the transition, while the *incoming* chamber's blob sharpens from 18px → 0px. Foreground prose remains crisp. The visual effect is that the canvas is constantly out of focus *except* in the immediate vicinity of the reader's eye-line — which is exactly where the prose is. The patternlanguage is **blur-focus** taken to its logical extreme: blur is not an entrance trick, it is the rest-state of every chamber except the one currently being read. **The cursor follower (one of two interactive flourishes).** On pointer-fine devices, a 280px-long flare-citron curve trails the cursor with an 11-frame lag, drawn as an SVG `` whose control points are updated each frame. The curve is C¹ continuous and never crosses itself. On hover over a plate, the curve thickens from 1.2px to 2.4px and gains a faint glow; on hover over a link, the curve resolves into a small underlining swoop beneath the link text. Disabled on coarse pointers and on `prefers-reduced-motion`. **The vertical scroll-progress rail (the second flourish).** A single 1px-wide flowing-curve runs down the entire left edge of the viewport, in dust-gold, with the chapter-numerals (`01.` through `13.`) set in 11px tech-mono italic along its length. As the reader scrolls, the *current* numeral inflates to 16px and shifts to flare-citron; the others remain dust-gold. Clicking a numeral smooth-scrolls to that chamber over 1200ms with a custom ease-in-out-cubic. **No CTA-heavy layouts. No pricing blocks. No stat-grids. No testimonials carousel. No FAQ accordion. No newsletter signup overlay.** The "contact form" is chamber 12's bouquet plate, and submitting it sends a `mailto:` to the workshop. The "pricing" is chamber 9's bouquet, and it is illustrative, not transactional. The site sells nothing in a checkout sense; it sells *the impression that the people behind it are serious craftspeople*. **Typography rendering.** Set `text-rendering: geometricPrecision` on the wordmark and on chapter numerals; `text-rendering: optimizeLegibility` on body prose. Use `font-feature-settings: "ss01", "ss02", "zero"` on JetBrains Mono to enable the slashed zero and the alternate `g` (single-storey), which read as more confident at display sizes. Captions in Space Grotesk get `font-feature-settings: "tnum"` so numerals tabulate. **Performance and progressive enhancement.** All thirteen blobs are inline SVG (no external requests). All thirteen botanical plates are inline SVG (no raster fallback). The single CSS file is under 12kb gzipped; the single JS file is under 8kb gzipped and exists only to drive the morph and the cursor-follower. The page is fully readable with JS disabled — the morph degrades to static blobs (one per chamber, no interpolation), the cursor-follower disappears entirely, the scroll rail becomes a static `