# Design Language for PPUZZL.org ## Aesthetics and Tone PPUZZL.org is the digital reading room of an *imagined* future-classical institute — a hybrid between an avant-garde curatorial archive and a corrupted database of broken statuary. Picture the Glyptotek catalogued by an AI that misremembers — marble torsos and Doric capitals shedding their lossless edges into terracotta-tinted scan errors, an institute that solves puzzles by deliberately breaking them, then exhibiting the breaks. The mood is **futuristic-cutting-edge** but lit by sunset, not strip-lights: cutting-edge in the sense of a cracked obsidian blade, not a chrome one. Glitch is reframed here not as cyberpunk neon noise but as the warm, organic decay of paper, ochre, and weathered limestone — a quieter, slower glitch that breathes like terracotta in a kiln. The site treats the suffix `.org` as a curatorial promise: this is an *organization* of fragments, not a product. Every interaction nudges the visitor into the role of an archaeologist of the recently-fictional, dusting away horizontal scan-lines from a bust's shoulder to read what the system thinks the bust *was*, while the bust thinks back something different. The tone is reverent yet experimental, scholarly yet playful — an avant-garde lookbook crossed with a museum's lapidary, with the wry humor of an institute that knows its own catalogue is corrupted. The voice in copy is half-curator, half-decoder: short caption-like fragments at 12px; sudden expansions into 96px chiseled headlines mid-sentence; italic marginalia in the margins of margins. PPUZZL is not a brand to *use* — it is a room to *enter*, a future-classical antechamber where the walls are fragmenting in tasteful, premeditated ways. ## Layout Motifs and Structure The page is built on a **deliberately broken three-column asymmetric grid** (12-cu logical, but only columns 1, 4, 7, and 11 are ever load-bearing) that the eye reads as a scattered tabletop of catalogue cards. There is no centered hero. The main column is offset 18% to the right of viewport center, leaving a wide left margin that functions as a **negative-space cloister** — empty paper-ochre space populated only by tiny serial numbers and the slow, drawing-itself outline of a single SVG meander. The composition reads vertically through six **rooms**, each room ~140vh, but the rooms do not stack — they *interleave*. The bottom 20vh of one room overlaps the top 20vh of the next via absolute positioning, so as the user scrolls a marble fragment from Room II will momentarily share screen-space with a glitched scanline from Room III. This is intentional: the rooms are catalogued slightly wrong, and the system has shelved them with overlap. Within each room, content sits at irregular eight-point baselines (8px, 21px, 34px, 55px, 89px — Fibonacci, not uniform). Headlines never start at column boundaries; they always break in by 7–13px so the reader feels them *enter* the column rather than fill it. Captions float in the *outdent*, hanging into the negative-space cloister like footnotes that have left the book. A persistent fixed element — the **PPUZZL Marker** — sits at top-right: a 64px square of warm-earthy stone-color through which a glitch-band slowly travels, north to south, every 11 seconds. It is the only stable marker in the layout; everything else drifts. No CTA bar. No conversion strip. No pricing block. No stat-grid. The page ends not with a footer but with **Room VI: Lapidary**, where every visited fragment from prior rooms reappears at 14% opacity, scattered like rubble in a courtyard. ## Typography and Palette **Type stack — Google Fonts only:** - **Display & headline face:** `Fraunces` (variable axes: opsz 9–144, wght 100–900, SOFT 0–100, WONK 0–1). Used at 96–168px for room titles like "I. ANTECHAMBER" and "III. THE BROKEN MEANDER," with `font-variation-settings: "opsz" 144, "wght" 720, "SOFT" 30, "WONK" 1`. The wonky, almost-handcarved character of Fraunces at high opsz reads as classical-serif-corrupted — perfect for the marble-glitch dialectic. - **Sub-display & curatorial labels:** `Big Shoulders Display` variable, weight axis 100–900, used at 28–44px in `font-stretch: 70%`, all-caps, letter-spacing 0.18em. This is the "institutional plaque" voice — the engraved plinth label. - **Body & long-form:** `Fraunces` opsz 14, weight 380, italic for marginalia, with `text-wrap: balance` and `hanging-punctuation: first last`. Line-height 1.62. - **Serial numbers, timestamps, fragment IDs:** `JetBrains Mono` weight 400 at 11px / 13px, letter-spacing 0.04em. Reserved exclusively for catalogue metadata such as `FRG/2026/IX-014` or `SCAN 04:11:38`. - **Variable-fluid behavior:** Headlines and sub-displays interpolate their `wght` and `SOFT` axes on scroll progress — at the top of a room a heading is `wght: 380, SOFT: 100` (soft, almost feathered), and by the time it scrolls past the top third of viewport it has hardened to `wght: 760, SOFT: 0` (chiseled). The type is *cooling like fired clay* as you read it. **Palette — warm-earthy, eight stops:** - `#F4ECDD` — *Bisque Paper*, base canvas, the page proper. - `#E8D6BB` — *Limestone Veil*, secondary surfaces, raised plinths. - `#C9A57B` — *Ochre Wash*, the warm middle tone, used in the meander stroke. - `#A86A3F` — *Terracotta Burn*, primary accent for active links and the moving glitch-band. - `#7E3B1E` — *Umber Cinder*, body text on bisque, also for marble-vein detail. - `#3A2516` — *Burnt Bistre*, near-black, used for chiseled display weights. - `#1B1410` — *Kiln Smoke*, deepest tone, reserved for Room VI rubble silhouettes. - `#D04B2A` — *Hazard Vermilion*, the single saturated accent — used **only** on the glitch-error marginalia and the moving scan-band. Never more than 2% of viewport. The palette resolutely refuses cool tones. There is no blue, no cyan, no teal, no chrome. Everything is sun-baked, oven-fired, or paper-aged. ## Imagery and Motifs **Glitch-Art reframed as Warm Decay.** The hero imagery is a series of CSS/SVG-rendered classical busts and Doric fragments — generated entirely from layered `clip-path` polygons and SVG `` strokes, never raster photography — that are then *broken* by horizontal **scanline displacement bands**. The displacement does not chromatic-aberrate into RGB neon; instead it shifts only within the warm-earthy palette: a band of `#A86A3F` slips left by 8px, a band of `#E8D6BB` slips right by 5px, the seam between them tinted by `#D04B2A`. The effect reads as *photo-archival decay* rather than digital corruption — like a 1970s fiche-card scan of a Greek torso, scratched and re-scanned through warm dust. **Marble-Classical Specimens.** Six recurring fragment-objects, each rendered as pure SVG with hand-set Bezier curves: 1. **Meander Strip** — a continuous Greek key (Greek meander pattern) running as a 4px ochre stroke that draws itself across the entire page perimeter on load via `stroke-dasharray` animation over 6.4 seconds. It is the only continuous edge. 2. **Capital, Doric** — a stylized SVG capital sat at 240×180px in the gutter of Room II, slowly rotating 0.02 turns over a minute. 3. **Torso, Fragmented** — appears in Room III: a vector silhouette of a classical torso composed of 14 disconnected SVG `` segments, each draws itself in sequence on intersection, then a glitch-band travels across once. 4. **Plinth Inscription** — flat rectangles bearing Big Shoulders Display labels, with subtle `inset` shadow to suggest carved relief on `#E8D6BB`. 5. **Cracked Tablet** — two facing rectangles separated by a 2px `#D04B2A` jagged seam, used as section dividers. 6. **Marble Veining** — large-scale SVG noise filtered through `feTurbulence` + `feDisplacementMap`, opacity 6%, only on Limestone Veil surfaces. Subtle, smelled rather than seen. **No photography. No 3D-rendered objects. No icons in the conventional sense.** Every visual is constructible in vector + CSS, which keeps the vocabulary internally consistent and rejects the easy plug-in look of stock photography. **Path-Draw-SVG as a recurring motif:** every transition between rooms is announced by an SVG `path` drawing itself — sometimes the outline of the next fragment, sometimes a Greek meander, sometimes a single chiseled glyph from Fraunces converted to path. The motion is always **slow** (3.4–5.2 seconds), **monodirectional** (no reverse), and **once-per-visit per element** (no replay loops; each fragment is finished, not animated). ## Prompts for Implementation Build PPUZZL.org as a **single-route, full-page narrative scroll** through six rooms of an imagined future-classical archive. Bias every implementation choice toward storytelling, slow reveal, atmosphere, and the feeling of *entering an exhibit catalogue*. Specifically: **Room I — Antechamber (0–140vh).** Page opens silent on a Bisque Paper field. Over the first 1.8 seconds, the Meander Strip draws itself around the viewport perimeter via SVG `stroke-dasharray` from 6400 → 0. As soon as the meander closes, the title `PPUZZL ⁘ ORG` materializes at column 4 in Fraunces 144px / wght 380 / SOFT 100, then over 2.4 seconds variable-axis interpolates to wght 760 / SOFT 0 — feathered to chiseled, like clay firing. Below it, in JetBrains Mono 11px ochre, a serial: `INSTITUTUM · FRG · MMXXVI · ENTRY 001`. No nav. No menu. Just a tiny `↓ DESCEND` label hanging in the left cloister at 13% viewport. **Room II — Capital, Out of Context (140–280vh).** As the user scrolls, the Doric Capital draws itself in the right gutter via SVG path-draw, while a single sentence — broken across three asymmetric line-breaks at columns 1, 7, and 4 — describes the institute's mission in fragments: `WE / CATALOGUE / WHAT BREAKS BEAUTIFULLY.` Each fragment lands at a different baseline (8, 34, 89). Captions float in the negative-space cloister at column -1, hanging into the left margin. **Room III — The Broken Meander (280–420vh).** The Torso, Fragmented appears center-right; on intersection, its 14 path-segments draw themselves in sequence over 4.2 seconds. Once complete, a horizontal glitch-band of `#D04B2A` travels south-to-north across the torso once, displacing each segment by ±3–7px on its way. The displacement is permanent: the torso stays slightly broken for the rest of the visit. Body copy beside it (Fraunces 14/22, wght 380, italic at first then resolving to roman as it scrolls into upper third) names the fragment, dates it impossibly (`c. 2148 BCE / 2387 CE`), and offers a "provenance" of three institutions that don't exist. **Room IV — Lapidary Codex (420–560vh).** A loose grid of nine Plinth Inscriptions in Big Shoulders Display, each at a different `font-stretch` (50%–95%) and `wght` (200–900), arranged at Fibonacci offsets. Each plinth, on hover, fires a single subtle `path-draw-svg` underline beneath itself — never an underline rectangle, always a hand-curved Bezier that takes 0.7s to draw. Plinths read like museum object labels: `FRG/IX-014 · OCHRE WASH ON LIMESTONE · UNATTRIBUTED`. There is exactly one plinth labeled simply `?` whose hover triggers a longer 2.1-second meander draw — an Easter egg. **Room V — The Scan Room (560–700vh).** Full-bleed Bisque Paper field. A single classical bust (SVG silhouette) sits center-offset at 18% right. Three horizontal glitch-bands of varying warm-earthy hues travel down the bust over 9 seconds, each displacing only within the warm palette. After the third band passes, the bust *settles* into a stable, slightly-cracked state and a single chiseled caption appears: `THE PUZZLE IS NOT THE BUST. THE PUZZLE IS THE SCAN.` Variable-axis interpolation drives the caption from feathered to engraved over 1.6 seconds. **Room VI — Lapidary Courtyard (700–840vh).** Every fragment seen previously — the meander, the capital, the torso, the plinths, the bust — reappears at 14% opacity, **rearranged**, scattered across the entire viewport at irregular positions. They are now rubble. The user can hover any fragment to bring it briefly back to 100% opacity, accompanied by its serial number lifting from 11px to 28px in JetBrains Mono, then released. There is no footer. There are no links to other pages. The page simply ends in stone. **Engineering biases:** - Use `IntersectionObserver` with `threshold: [0, 0.25, 0.5, 0.75, 1]` to drive variable-font axis interpolation per heading; never use scroll listeners directly. - Drive variable axes by writing CSS custom properties (`--wght`, `--soft`, `--opsz`) on root, not by mutating `font-variation-settings` strings — interpolation is 6× cheaper. - Path-draw animations should use SVG `stroke-dasharray` + `stroke-dashoffset` with `cubic-bezier(0.16, 1, 0.3, 1)` easing. Never use `requestAnimationFrame` loops for path-draw — declarative CSS keyframes only. - Glitch-bands are absolutely-positioned `
`s with `mix-blend-mode: multiply`, animated via `transform: translateY()` + `clip-path` — never via canvas. The whole site should be GPU-cheap. - Text uses `text-wrap: balance` on headlines, `text-wrap: pretty` on body, `hanging-punctuation: first last`, and `font-feature-settings: "ss01", "ss02", "cv11", "kern"` for Fraunces stylistic alternates. - All measurements in `clamp()` units anchored to `100svh` / `100svw` (small viewport units), not legacy `vh` / `vw`. Mobile collapses the asymmetric three-column grid to a single column with the cloister becoming a top-margin. **Forbidden:** carousels, modals, tooltips, animated GIFs, raster photography, gradient backgrounds (gradients should appear only inside SVG via `` on stone-vein fills), centered hero text, any cool/blue/cyan hue anywhere, any "Learn More" or "Get Started" CTA. The user is here to look, not to convert. ## Uniqueness Notes This design's seven distinct departures from the rest of the batch and from default web aesthetics: 1. **Warm-earthy glitch.** Glitch art on the web is overwhelmingly cyberpunk — RGB chromatic aberration, neon, midnight-blue. PPUZZL.org refuses every cool tone and renders glitch entirely within terracotta, ochre, umber, and bisque, reframing corruption as *kiln-fired patina* rather than digital noise. No other site in the registry pairs `glitch-art` imagery with `warm-earthy` palette. 2. **Variable-fluid type as a firing kiln.** Most variable-font usage on the web morphs weight or width on hover. PPUZZL drives Fraunces' `wght`, `opsz`, `SOFT`, and `WONK` axes simultaneously on scroll progress, treating each headline as a piece of clay that *hardens* as the reader passes it. The metaphor is firing pottery, not animating UI. Frequency analysis shows variable-fluid at 10% — this design earns it by giving it narrative meaning. 3. **Asymmetric grid as a cluttered tabletop, not a fashion-magazine flex.** The asymmetric layout here isn't a designer's pose — it's a literal "catalogue cards on a curator's table" model, with a 18%-right-shifted main column, Fibonacci-spaced baselines, and a left negative-space *cloister* that holds floating marginalia. Headlines deliberately break into columns rather than fill them. 4. **Marble-classical motif via pure SVG, not photography or 3D-render.** Every classical fragment — bust, capital, torso, meander — is hand-set SVG path geometry. No stock museum photography, no Three.js. This keeps the visual vocabulary internally consistent and refuses the cliché of "drop-in classical photo over gradient." 5. **Path-draw-svg as the single transition language.** Every section change, every label appearance, every hover affordance uses one shared mechanic: an SVG path drawing itself slowly. There are no fades, no slide-ups, no spring bounces (frequency shows spring 50%, stagger 45%, parallax 85% — all avoided here). The site has exactly one motion verb: *to draw*. 6. **Rooms that overlap.** The six narrative rooms interleave their final 20vh / first 20vh, so two rooms are visually present mid-transition. This produces a *catalogued slightly wrong* feeling that no other site in the batch employs. It rejects clean section boundaries. 7. **No footer, no nav, no CTA — terminates in rubble.** Per SDESIGN biases, this site has zero conversion surface. It ends with Room VI's lapidary courtyard, where everything previously seen returns at 14% opacity. There is nowhere to click, nowhere to subscribe, nowhere to "learn more." The exit is staring at fragments. This is rare even within this batch. **Avoided patterns from frequency analysis:** parallax (85%), spring (50%), stagger (45%), cursor-follow (40%), magnetic (25%), gradient palette (85%), full-bleed layout (80%), centered layout (75%), card-grid (45%), photography imagery (95%), mono typography (85%), hand-drawn aesthetic (80%), glassmorphism (55%). All deliberately rejected. **Embraced under-used vocabulary:** avant-garde (0% before this), variable-fluid (10%), warm-earthy (re-used but reframed), path-draw-svg (20% — earned via single-mechanic motion design), glitch-art (1 prior, reframed), marble-classical (15% — extended via pure-SVG approach), asymmetric (55% — but here as cluttered-tabletop, not editorial-pose), futuristic-cutting-edge tone (~0% prior). **Chosen seed (planned):** `aesthetic: avant-garde, layout: asymmetric, typography: variable-fluid, palette: warm-earthy, patterns: path-draw-svg, imagery: glitch-art, motifs: marble-classical, tone: futuristic-cutting-edge`. Holistically: *a future-classical lapidary that catalogues its own decay in warm earth tones, where every transition is a path drawing itself and every headline cools from feathered to chiseled as you read.*