# Design Language for ppuzzl.com ## Aesthetics and Tone ppuzzl.com is an opulent puzzle-game experience — the meeting point of a high-fashion editorial spread and a brutalist architectural manifesto, shot through with the inflated, hyper-physical 3D aesthetic that defines the most arresting digital work of the moment. The site's visual premise is simple and extreme: every element looks like it was moulded in thick silicone or poured from molten chrome and then left to cool into impossible, gravity-defying solidity. Letters swell at the joints. Geometric shapes press against each other like balloons in a marble atrium. The background is mute. The foreground is immense. The tone is **opulent-grand** — not luxury in the sense of quiet restraint, but luxury in the sense of a Baroque cathedral ceiling painted by an architect who had just discovered inflation physics. ppuzzl.com treats puzzle solving as a monument-scale event. Every scroll reveal feels like the curtain rising on a stage performance. Nothing is tentative. Nothing is shy. Mood reference: the foyer of a brutalist concert hall re-dressed with oversized typographic sculptures cast in frosted stone; a Herzog & de Meuron lobby reinterpreted by a 3D artist obsessed with inflated letterforms; a city building facade photographed in Osaka at 4:00 AM where the only light is the signage itself, rendered as blurred urban light-wash behind crisp geometry. The vocabulary of the site is: mass, weight, depth, glow, silence beneath the noise. ## Layout Motifs and Structure The structure is **parallax-sections** executed as a vertical stack of full-viewport cinematic chapters, each one a self-contained scene. There are exactly seven sections — no horizontal navigation, no sidebar, no hamburger menu with sub-pages. The header is a single floating label, left-aligned, set in 11px Bebas Neue at 0.25em letter-spacing: `PPUZZL`. No tagline. No links. The label disappears on scroll past the first section and re-appears as a thin progress-line along the left margin. **Section architecture:** 1. **The Entrance** — Full-viewport, black ground (#0a0a0c). A single inflated 3D letterform `P` centered, twelve centimetres of apparent depth, lit from the upper-left at 20°, casting a soft shadow 3× its own height downward. Below the `P`, the word `PUZZLE` set in Bebas Neue at 18vw, letter-spacing 0.04em, colour #e8e0d4. No subheading. No CTA. The user scrolls because the scene demands it. 2. **City Depth** — A city-urban photograph (aerial night cityscape, heavily blur-focused: the middle plane in sharp focus, foreground and background melting into bokeh) floats behind a parallax grid of six inflated 3D spheres, each muted stone-grey (#b8b0a8), each casting a drop-shadow onto the city image beneath them. The spheres are positioned asymmetrically, as if scattered by gravity. 3. **The Mechanics** — A broken-grid text section. The word `LOGIC` in Bebas Neue at 28vw, rotated -6°, colour #c4bdb5. Behind it, a stack of three geometric-abstract SVG planes — a hexagon, a trapezoid, and a rhombus — all in the muted palette, layered with different z-depth blur-focus levels (sharp, 2px blur, 8px blur). Parallax causes these planes to drift at different rates on scroll. 4. **The Pause** — Near-black section (#0d0d10) with a single centred sentence in Space Grotesk Regular, 1.4rem, colour #6b6560: *"Every puzzle is a city block waiting to be solved."* Below it: a 1px horizontal rule (#2a2520), 40% page-width, centred. 5. **The Material** — Inflated 3D geometric objects in close-up: a cube with rounded corners (#d4cec8), a torus in muted sage (#8a9880), a truncated pyramid in pale charcoal (#7a7270), each photographed at a slight angle in raking light. These three objects are positioned in an asymmetric triangle — upper-left, upper-right-offset, lower-centre — and all three have individual blur-focus depth treatment. 6. **City Geometry** — The city-urban motif returns, now purely typographic: twelve city-block names (OSAKA, FRANKFURT, MONTRÉAL, ISTANBUL…) arranged as a dense asymmetric grid in Bebas Neue, sizes ranging from 2vw to 14vw, colours cycling through the muted palette (#e8e0d4, #b8b0a8, #8a9880, #c4bdb5, #d4cec8). Behind this grid, a single out-of-focus urban photograph (#0a0a0c overlay at 65% opacity) creates the sense of looking through frosted glass at a city directory. 7. **The Invitation** — Full-viewport black. A single inflated 3D `?` mark, smaller than the opening `P`, slightly rotated (+4°). Below it, in Space Grotesk Light at 1rem, letter-spacing 0.15em, colour #6b6560: `ENTER THE PUZZLE`. No button. The text itself is clickable — underline draws in on hover (2px, colour #b8b0a8, animation 0.6s ease). **Scroll mechanic:** `position: sticky` containers drive the parallax. Section heights are 200vh (sections 1, 2, 3, 5) and 120vh (sections 4, 6, 7). The visual content locks at viewport-centre while the scroll position advances, creating pull-apart cinematic depth. **Grid:** No formal grid system. All placement is absolute within each section container, using viewport units and carefully chosen percentage offsets to create a deliberately unbalanced but weighted composition. ## Typography and Palette **Primary Display — [Bebas Neue](https://fonts.google.com/specimen/Bebas+Neue)**, weight 400 (the face only has one weight — use this intentionally). All uppercase. Set extremely large: 18vw–28vw for the hero text, 11px for the minimal header label. The personality of Bebas Neue is condensed, architectural, and without apology. Used for all display headings, city-block name grids, and section transitions. **Secondary Body — [Space Grotesk](https://fonts.google.com/specimen/Space+Grotesk)**, weights 300 (Light) and 400 (Regular). Used exclusively for the sparse body copy (one sentence maximum per section), the entry invitation, and any UI micro-labels. Size range: 0.9rem–1.4rem. Letter-spacing 0.12em–0.18em when set small. **No third typeface.** The restraint of two faces is the point — the architectural condensed and the humanist geometric must do all the work. **Palette — muted stone monochrome with deep near-black grounds:** - `--obsidian`: #0a0a0c — primary background, near-absolute black with the faintest blue undertone - `--deep-ground`: #0d0d10 — alternate background for transition sections - `--stone-pale`: #e8e0d4 — primary text and hero letterform, warm off-white with a chalky undertone - `--stone-mid`: #c4bdb5 — secondary geometry, rule lines, hover states - `--stone-cool`: #b8b0a8 — sphere and object fill, underline-draw animation colour - `--sage-muted`: #8a9880 — accent geometry colour (the torus, one city-block name in the grid) - `--charcoal-warm`: #7a7270 — truncated pyramid fill, tertiary city-grid names - `--void-text`: #6b6560 — smallest body text, the pause sentence, the invitation label No neon. No white (#ffffff). No pure black (#000000). Every value is off-axis — the palette is a petrified city at dusk, all its colour drained by long exposure. ## Imagery and Motifs **Imagery: geometric-abstract + blur-focus urban photography.** There are exactly two image types used across the site: 1. **Inflated 3D letterforms and geometric solids**, generated as CSS 3D transforms + box-shadow stacking or as WebGL-rendered shapes. The inflated-3d aesthetic is achieved not through external 3D software assets but through layered CSS: `border-radius` at 30–45% on cubes, multiple `box-shadow` layers (inner and outer) using the stone palette, and `perspective: 800px` transforms. The shapes appear tangible, pressable, weighty. 2. **Urban night photography — blur-focus treated.** Aerial city images (dense urban grids, expressway curves, tower clusters) used as atmospheric underpainting. Treatment: CSS `filter: blur()` applied differentially by layer — the base city image at 0px blur, a mid-layer overlay at 2px blur, the top decorative layer at 6px blur. This creates genuine depth without 3D software. **Recurring motifs:** - **The inflated letterform.** The `P` and `?` are the anchor monoliths of the site. They frame the experience as a journey from declaration to question. - **City-block name grids.** Real city names used as typographic texture — pure Bebas Neue at varying scales, functioning as a word-map of urban density. References the city-urban motif explicitly as a puzzle-of-place metaphor: every city is itself a puzzle. - **Geometric plane layering.** Hexagon, trapezoid, rhombus — deliberately non-circular shapes, chosen to evoke puzzle-piece geometry without literally showing a puzzle piece. The shapes are always at a slight rotation (3°–8°) to suggest they were placed by hand. - **The muted stone material.** All 3D objects are textured with the stone palette, never with primary colours. The opacity of the site's restraint makes each shape feel like a museum artefact rather than a digital asset. - **Blur-focus depth.** Every section that uses layered elements applies `blur-focus` at three depths: 0px (foreground), 2px (mid), 6–10px (background). This is the site's primary spatial language — you are always looking through something to reach something else. **Decorative SVG motifs:** A single repeating geometric grid-line pattern (#2a2520, 0.08 opacity) tiled behind sections 3 and 6, suggesting a city street plan seen from 2,000 metres. ## Prompts for Implementation Build ppuzzl.com as a **single vertical parallax narrative in seven cinematic acts**, rendered entirely in HTML/CSS with targeted JavaScript only for scroll-position tracking and the WebGL optional upgrade for the 3D letterforms. **Technical foundations:** - Root CSS custom properties: define all eight palette variables at `:root` - `@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Space+Grotesk:wght@300;400&display=swap')` — no other fonts - `html { scroll-behavior: smooth; }` — native smooth scroll - Each section: `position: relative; min-height: 200vh;` with inner `.scene { position: sticky; top: 0; height: 100vh; overflow: hidden; }` - The sticky scene contains all visual layers as `position: absolute` children, each with its own `will-change: transform` and parallax rate controlled by JavaScript `IntersectionObserver` + `requestAnimationFrame` **Parallax implementation:** ``` window.addEventListener('scroll', () => { const scrollY = window.scrollY; // Per-section: compute section progress [0..1] from scrollY // Apply transform: translateY(progress * rate * 100px) to each layer // Layer rates: foreground=0.1, midground=0.4, background=0.8 }); ``` **Inflated 3D letter P (CSS approach):** ```css .letter-p { font-family: 'Bebas Neue', sans-serif; font-size: 42vw; color: #e8e0d4; text-shadow: 0 2px 0 #b8b0a8, 0 4px 0 #c4bdb5, 0 8px 0 #8a9880, 0 16px 32px rgba(0,0,0,0.6), 0 32px 64px rgba(0,0,0,0.4); transform: perspective(800px) rotateX(8deg) rotateY(-3deg); display: block; text-align: center; line-height: 0.85; } ``` **Blur-focus depth layers:** ```css .layer-fg { filter: blur(0px); z-index: 3; } .layer-mid { filter: blur(2px); z-index: 2; opacity: 0.85; } .layer-bg { filter: blur(8px); z-index: 1; opacity: 0.6; } ``` **City-block name grid (section 6):** Generate twelve `` elements inside a CSS `position: relative` container. Each span is `position: absolute`, placed using specific percentage coordinates hardcoded per city name. Sizes range from `font-size: 2vw` (MONTRÉAL, small) to `font-size: 14vw` (OSAKA, giant). Colours cycle through the stone palette in order. **Geometric plane objects:** SVG `` elements, each in its own `
` with CSS transform for the rotation offset. The hexagon uses `stroke: #b8b0a8; stroke-width: 1; fill: #c4bdb5; fill-opacity: 0.15;`. The planes are layered via `z-index` and receive individual blur-focus treatment. **The underline-draw on invitation text:** ```css .invitation { cursor: pointer; background: linear-gradient(#b8b0a8, #b8b0a8) no-repeat; background-size: 0 2px; background-position: 0 100%; transition: background-size 0.6s ease; } .invitation:hover { background-size: 100% 2px; } ``` **Anti-patterns for this site:** - NO CTA buttons with rounded corners and fill colours - NO pricing tables or stat grids - NO testimonial carousels - NO hamburger menu with dropdown sub-pages - NO footer with four-column link lists - NO hero image with a large centred paragraph + two side-by-side buttons **The site tells ONE story:** you arrive at a puzzle, you descend through the weight and geometry of it, you are invited to enter. Every scroll forward is a commitment. ## Uniqueness Notes **Planned seed:** aesthetic: inflated-3d, layout: parallax-sections, typography: bebas-bold, palette: muted, patterns: blur-focus, imagery: geometric-abstract, motifs: city-urban, tone: opulent-grand **Differentiators relative to the 386-design corpus:** 1. **inflated-3d aesthetic executed without any 3D software assets.** The frequency report shows `inflated-3d` at 0% of the corpus — it is entirely absent. Other 3D-adjacent designs in the corpus (holographic, glassmorphism, isometric) rely on pre-rendered images or SVG icon sets. ppuzzl.com achieves the inflated-3d look entirely through layered CSS `box-shadow`, `text-shadow` stacking, and `perspective` transforms. The inflated weight is created by the designer's eye, not a renderer. This is a genuine formal differentiator. 2. **Muted stone monochrome on near-black obsidian, with zero warm gradient.** The corpus shows `warm` palette at 88% and `gradient` at 77% — nearly every site reaches for warmth and gradient to create visual interest. ppuzzl.com commits entirely to the opposite: a palette of compressed stone tones (no gradient, no warmth, no saturation above ~10%) on near-black grounds. The palette has the temperature of a cold marble hall at midnight. The `muted` palette entry appears at 33% in the corpus, but no existing muted design uses it this radically — most pair muted with warm neutrals or soft gradients. This design pairs muted with obsidian and demands that the stone tones do all the luminosity work. 3. **City-urban motif treated as pure typographic texture, not illustration.** At 3% of the corpus, city-urban motifs are rare; every existing instance uses urban photography or architectural illustration. ppuzzl.com uses city names as typographic building material — twelve real cities rendered as a variable-scale Bebas Neue grid, functioning as both decorative texture and conceptual puzzle-frame (every city is a solvable system). This is a first in the corpus. 4. **Blur-focus as the primary spatial language, not as a decorative effect.** The corpus shows blur-focus at near-zero frequency as a named pattern. Where other sites use blur as a hover state or background treatment, ppuzzl.com uses three distinct blur depths (0px / 2px / 6–10px) as the formal system through which all section depth is communicated. Every layered element has an assigned blur depth. The entire parallax scroll experience is organised around this depth language — you are always looking through one blurred plane to reach a sharper one. 5. **No colour above 10% saturation anywhere on the site.** The corpus is dominated by saturated accent colours, neon highlights, and gradient fills used to create visual hierarchy. ppuzzl.com achieves all hierarchy through scale, weight, and blur depth alone — never colour saturation. The `--sage-muted` (#8a9880) is the most saturated value and it sits at approximately 9% saturation. This constraint forces a rigour that most sites in the corpus avoid. **Avoided from frequency analysis:** - hand-drawn (58%) — avoided entirely - editorial aesthetic (52%) — avoided; this is architectural-monumental, not editorial - warm palette (88%) — inverted; all colour is stone-cool or near-neutral - gradient (77%) — zero gradients (except the underline-draw animation, which is a single-colour gradient used as a technical device) - photography as primary imagery (87%) — photography is used only as atmospheric underpainting, never as a featured image - centered layout dominance (84%) — all composition is asymmetric or deliberately off-centre - parallax as a generic effect (75%) — parallax here is the structural system, not a decorative layer applied on top of a conventional layout