# Design Language for PPUZZL.bar ## Aesthetics and Tone PPUZZL.bar is a **slow Bauhaus pavilion at golden hour** — the foundational geometry of Dessau (1925) repainted with the chromatic vocabulary of a Persian sunset and the patient choreography of a Japanese stone garden. The mood is **calm-serene**: a place where the puzzle is not a riddle to be solved frantically but a long horizontal contemplation, like watching the light change across a courtyard wall over the course of an afternoon. The "bar" of the TLD is read literally — as a horizontal *bar* of color, a *bar* of music held under a fermata, a *bar* of compressed Bauhaus chromatic information held to the eye. The emotional reference points are unusually specific: the **interior color studies of Hinnerk Scheper** at the Bauhaus stairwells in Weimar, the **lens-flare cinematography of Wong Kar-wai** in *In the Mood for Love* where streetlights bloom into hexagonal coronas, and the **water-ripple courtyards of Mughal pleasure pavilions** like Shalimar Bagh — the way still pools double the architecture so the reader is never sure which is the building and which is the reflection. The site avoids any sense of urgency or commerce. There are no calls-to-action, no pricing, no testimonials. The page is a lobby, not a storefront. The tone is **patient, civilizational, slightly nocturnal even at noon** — as if the reader has stepped from a hot afternoon street into a tiled antechamber where someone, decades ago, set out the puzzle pieces of their world in the exact order the late sun will illuminate them. ## Layout Motifs and Structure The structural commitment is **parallax-sections** built around a five-act *bauhaus tableau*. The reader does not scroll past content — the reader **descends through chromatic strata** at different rates, like sinking through layers of warm tinted glass. Each act fills 100vh minimum (180vh for the central acts) and is composed strictly from the **Bauhaus primary triad**: the square (red), the circle (yellow), the triangle (blue) — but here the triad is recolored into the sunset palette so the square is terracotta, the circle is honeyed amber, the triangle is dusk-mauve. The vertical journey is laid out as five **parallax strata**, each moving at a published velocity ratio so the reader feels them as separate physical depths: - **Stratum A — The Marquee Bar** (z: -400px, parallax 0.20). A single full-width horizontal *bar* of warm color stretched across the top of the viewport. It does not move horizontally — it pulses chromatically, drifting through the sunset gradient on a 28-second loop. This is the literalized "bar" of the TLD. - **Stratum B — The Geometric Cast** (z: -200px, parallax 0.45). Three large bauhaus primitives — a 38vw terracotta square, a 28vw amber circle, a 22vw mauve triangle — set on a rigorous Tschichold asymmetric grid. They translate vertically at 0.45× scroll velocity, giving the impression that the reader is descending past them. - **Stratum C — The Reading Plate** (z: 0, parallax 1.00). The textual content itself — set in calm 14-column grid, generous 1.7 leading, never more than 62 characters per line. This is the only stratum that scrolls at true scroll velocity. - **Stratum D — The Ripple Pool** (z: +120px, parallax 1.18). A foreground SVG water surface that scrolls *faster* than the reader, the way real water seems to rush past a slow boat. Concentric ripples emanate from cursor contact, but slowly — periods of 1.4–2.6 seconds, not the snappy ripples of typical UI. - **Stratum E — The Lens-Flare Veil** (z: +260px, parallax 1.35). A near-foreground film of warm anamorphic lens-flare streaks and hexagonal aperture blooms, drifting slightly with mouse parallax (max ±18px). This is the only stratum that responds to cursor X/Y, giving the page the feel of a lens slightly out of true with the world behind it. Sections are joined by **Bauhaus chromatic seams**: at the boundary between any two acts, the dominant primary swap is foreshadowed — the outgoing terracotta square slides off-frame *just* as the incoming amber circle's leading edge pierces the bottom of the previous act. Nothing fades. Color is never blended through opacity; it is always **butted edge-to-edge** like a Josef Albers homage to the square. The five acts in order: **(1) Threshold**, **(2) The Pieces**, **(3) The Pool**, **(4) The Pavilion**, **(5) The Long Horizon**. Acts 1–4 are vertical scroll. Act 5 transitions to a single horizontal bar that holds steady for 8 seconds before the page concludes — a pictorial fermata. ## Typography and Palette **Typefaces — Google Fonts only, all confirmed available:** - **Hanken Grotesk** (variable: weight, slant) — the principal typeface, serving the **frutiger-clean** mandate. Hanken is Frutiger's grandchild: humanist, calm, slightly warm, with the same restrained terminal cuts that made Adrian Frutiger's signage faces feel breathable. Used for headings (clamp 3.4rem → 6.8rem, weight 360, tracking -0.01em) and body (1.1rem, weight 420, tracking 0). Never below weight 360 — this is a calm face, not a thin face. - **Manrope** — secondary frutiger-clean partner used for navigation labels, captions, and the marquee bar's chromatic legend. Set at 0.78rem, weight 500, tracking 0.14em uppercase. Manrope's slightly geometric construction echoes Bauhaus circles in the Frutiger family. - **Cormorant Garamond Italic** — used **only once per page** as a single italic phrase set in act 4, the way a Persian miniature reserves one stroke of vermilion for the most important leaf. Weight 300, italic, 1.6rem, tracking 0. The palette is **sunset-warm**, but specifically the *desert sunset* hour — that 8-minute window between magic hour and full blue — not the saturated tropical sunset. Every color is named after a place the warm light has actually fallen. - `#F4DBC0` — **Caravanserai Plaster**: the calm warm off-white of the page. Backgrounds, the reading plate, negative space. - `#E8B07A` — **Honeyed Amber**: the bauhaus circle, mid-strength sunset wash, the lens-flare veil baseline tint. - `#C7714A` — **Terracotta Brick**: the bauhaus square, the marquee bar at its warmest moment, accent rules. - `#7B5278` — **Dusk Mauve**: the bauhaus triangle, the long horizon's upper band, italic phrase color. - `#3A2E3F` — **Pavilion Shadow**: the deepest tone, used only for headings and the type on the reading plate. Never pure black — pure black is too cold for this palette. - `#F2E6D5` — **Lantern Cream**: highlights on the ripple pool's wave crests, lens-flare hot-spots. - `#A85A3D` — **Ember Edge**: the chromatic-seam color, used for the 1px Albers-square borders and the underline-draw motion. The palette is rigidly **analogous** with one cool break (the dusk mauve) — exactly the color logic of a real sunset where the only non-warm hue is the violet shadow on the eastern wall. ## Imagery and Motifs The visual world is built from four motif families, all hand-composed from CSS, SVG, and a small amount of WebGL — no photography, no stock illustration. - **Bauhaus Tableaux (motif: cultural).** The square / circle / triangle triad appears at every scale: 38vw monumental in act 2, 8vw at the reading plate margins, 1.2rem inline as bullet glyphs, 0.4rem as the tracking marks of section numbers. The cultural reference is intentionally **layered**: Bauhaus Dessau 1925, Persian tilework geometry, Mexican modernism (Luis Barragán's color planes), Japanese *fusuma* panel composition. None of these is a pastiche — they are *cited* as influences within a coherent voice. - **Lens-Flare Veils (imagery: lens-flare).** Anamorphic warm streaks rendered as `radial-gradient` smears overlaid with `backdrop-filter: blur(0.5px)` and 6% film grain. Each veil has 2–4 horizontal streaks and 1 hexagonal aperture bloom centered on the page's "sun" — an invisible point at viewport (78vw, -12vh) that all flares geometrically point away from. The flares respond to cursor parallax with a maximum ±18px offset and a 360ms ease-out. - **Ripple Pools (patterns: ripple).** A horizontal shallow pool occupying the lower 18vh of acts 3 and 4, rendered as an SVG with concentric circles of varying stroke opacity (1% → 6%). On cursor contact the pool emits a *slow* ripple — 1.4–2.6 second period — that propagates outward and softly attenuates against the act's bauhaus primitives. The ripples are visible on the geometric shapes too: each shape's edge wobbles ±0.6px in sync with passing ripple wavefronts. This is the design's only "real" interactivity and it is meditative, never reactive. - **Cultural Cipher Glyphs (motifs: cultural).** Tiny rotated combinations of square + circle + triangle form a private alphabet that punctuates the type — used as drop caps, section dividers, page-number ornaments. The cipher reads as a Bauhaus version of *koodo* or Persian *bandi* (binding) marks, treating decoration as a slow grammar rather than ornament. ## Prompts for Implementation Build PPUZZL.bar as **a single immersive HTML document** — one page, no SPA, no routing, no second screen. The whole experience is a vertical descent through five parallax strata that ends in a single held horizontal bar. Bias every implementation decision toward **stillness, slowness, and chromatic resolution** — never toward conversion, density, or speed of comprehension. AVOID: hero CTAs, pricing tables, stat grids, testimonial carousels, feature comparisons, footers crowded with links. The footer here is a **single Bauhaus glyph** centered in 22vh of warm negative space. **Stratum architecture.** Build five `
` elements with `transform: translate3d(0, calc(var(--scroll) * ), 0)` driven by a single `requestAnimationFrame` loop reading `window.scrollY` once per frame and writing it to a CSS custom property `--scroll` on `:root`. Stratum A: ratio 0.20. Stratum B: 0.45. Stratum C: 1.00 (omit transform — let it scroll natively). Stratum D: 1.18. Stratum E: 1.35. Use `will-change: transform` only on the strata, never on inner content. The 0.20 vs 1.35 split must be physically perceptible — when the reader scrolls 100px, stratum A moves 20px and stratum E moves 135px. **Marquee bar pulse.** The top horizontal bar runs a 28-second `linear` keyframe cycle through stops at `#C7714A → #E8B07A → #F2E6D5 → #E8B07A → #C7714A`. Set `background-size: 400% 100%` and animate `background-position`. The bar is exactly `clamp(56px, 6vh, 84px)` tall and runs full viewport width. No content in the bar except a single 0.78rem Manrope label `PPUZZL.bar — slow puzzle, warm light` set in `#3A2E3F`. **Bauhaus primitive choreography.** In stratum B, position the three primitives on a Tschichold-asymmetric grid: **square** at left edge, vertically anchored at 32vh, terracotta `#C7714A`, no border, exactly 38vw across, aspect-ratio 1; **circle** at right 8vw offset, vertically at 58vh, honeyed amber `#E8B07A`, 28vw diameter; **triangle** at center 12vw left of midline, vertically at 86vh, dusk mauve `#7B5278`, 22vw base, equilateral, point up. Each primitive holds *absolute stillness* except for a 0.6px edge wobble triggered by passing ripples from stratum D. Do not rotate them. Do not pulse them. Their power is their stillness. **Ripple Pool implementation.** In acts 3 and 4, render an SVG occupying the lower 18vh as a `` with `viewBox="0 0 100 18"`. Compose three layered groups of concentric circles centered on the cursor's projected x-coordinate, with stroke-opacity at 0.06, 0.04, 0.02 and stroke widths 0.06, 0.10, 0.14. On `pointermove`, append a new ripple group with initial radius 0 and animate radius → 28 over 2400ms with `cubic-bezier(0.22, 0.61, 0.36, 1)` while opacity decays to 0. Cap concurrent ripples at 6; oldest is reaped first. Crucially, **clamp the spawn rate to 1 ripple per 600ms** even if the cursor moves continuously — this enforces the calm-serene tempo. A frantic mouse cannot produce a frantic page. **Lens-flare veil.** Stratum E is a single `
` with five layered `radial-gradient` backgrounds: one hexagonal bloom at (78vw, -12vh) using a six-stop pseudo-hexagonal gradient, plus four warm horizontal streaks of 1200px × 18px Gaussian-blurred 24px, each rotated -3° / -1° / +1° / +3° and tinted with `#F2E6D5` at 22% opacity over `#E8B07A` at 8%. The veil drifts on `mousemove` with `translate3d(calc(var(--mx) * 18px), calc(var(--my) * 12px), 0)` where `var(--mx/my)` are normalized cursor offsets in [-1, 1], 360ms ease-out. **Type rhythm.** All headings are weight 360 Hanken Grotesk. Never bold. The contrast of the page is carried by **scale and color**, not weight. Set `letter-spacing: -0.01em` on display sizes, `0` on body. Never justify text — always left-rag. Reading plate (stratum C) sits on `#F4DBC0` with `#3A2E3F` type. The single italic Cormorant phrase in act 4 reads: *"a puzzle is a long sentence the room is finishing for you."* — set in `#7B5278`. **Storytelling arc.** Act 1 (Threshold) introduces the marquee bar and a single Hanken phrase: `slow puzzle, warm light`. Act 2 (The Pieces) introduces the bauhaus triad and names each piece in Manrope micro-caption. Act 3 (The Pool) drops the ripple surface and lets the reader play with the slow ripples — there is no copy in act 3 except a 0.78rem label `the surface is the puzzle`. Act 4 (The Pavilion) layers all five strata at maximum density and presents the italic Cormorant phrase. Act 5 (The Long Horizon) collapses everything back into a single 100vw horizontal bar pulsing through the full sunset cycle, held for 8 seconds before the page reaches its bottom — a pictorial fermata. The fermata is the page's signature. **Motion budget.** Total animations on the page: marquee bar pulse (always), lens-flare veil parallax (cursor-driven), ripple pool ripples (cursor-driven, throttled), edge wobble on bauhaus primitives (ripple-driven, ±0.6px). That is all. No fade-ins on scroll, no stagger entrances, no counter animations, no typewriter. The page is **calm by enforced subtraction**. ## Uniqueness Notes This design commits to the following differentiators, chosen explicitly to avoid duplicating other CMassC sites and to lean into the underused patterns surfaced by frequency analysis: 1. **Bauhaus aesthetic without primary RGB.** The 5% of CMassC sites that have used Bauhaus reach reflexively for the canonical red/yellow/blue triad. PPUZZL.bar **recolors the Bauhaus triad into the sunset-warm palette** — terracotta square, honeyed amber circle, dusk mauve triangle. This is a deliberate civilizational layering: Dessau 1925 meets Persian sunset, with no primary blue or canonical RGB on the page. 2. **Parallax-sections at 5-stratum depth, with a mathematically published velocity table.** Most parallax sites use 2 layers (back / front). This site uses 5 layers with explicit ratios 0.20 / 0.45 / 1.00 / 1.18 / 1.35 — the foreground layer is *faster than scroll*, which is unusual and gives the page a sense of looking through a slowly-moving lens. The 5-stratum spec is part of the design's identity, not just an enhancement. 3. **Lens-flare as a structural layer, not a hero effect.** The frequency analysis showed lens-flare imagery essentially unused. PPUZZL.bar makes lens-flare the *foreground veil through which everything else is read* — it is z-positive, parallax-fastest, and cursor-reactive. The lens is the page; the page is what you see through the lens. 4. **Ripples that refuse to be fast.** The ripple pattern is rare in the corpus, and when it appears it is usually fast UI feedback. Here ripples are 1.4–2.6 seconds long and rate-limited to one per 600ms regardless of cursor velocity. The page **physically cannot be made frantic**. This is a design assertion, not a technical limit. 5. **Frutiger-clean typography paired with sunset-warm palette.** Frutiger-clean is rare (5%), sunset-warm is rare (5%). Their combination is unique in the corpus: the calm, humanist breath of Hanken Grotesk on the warm desert plaster of `#F4DBC0` produces a *civic-pavilion* feel rather than a *startup-saas* feel — Frutiger originally designed for airport signage and metro systems, and this design treats the page as transit-civic infrastructure, not as a product. 6. **Cultural motif as cipher, not pastiche.** Where "cultural" motifs are used in the broader CMassC corpus, they tend toward single-tradition references (one nation, one era). PPUZZL.bar *layers* cultural references — Bauhaus Dessau, Persian Mughal pleasure pavilions, Mexican modernism, Japanese panel composition — and binds them into a private cipher alphabet of rotated triad glyphs. The cipher punctuates the type without ever explaining itself. 7. **The horizontal bar fermata.** The page ends not with a CTA, footer, or fade-out but with **8 seconds of held color** — the marquee bar at full viewport width, pulsing through the sunset cycle once, while everything else is gone. This is the design's single most distinctive moment and makes the "bar" of the TLD literal at the moment of departure. **Avoided patterns from frequency analysis.** This design intentionally does not use: photography (95%, oversaturated), full-bleed centered hero (80% / 75%), gradient palette in the standard sense (85% — the sunset is not a gradient, it is a pulsing solid bar moving through palette stops), parallax in its conventional 2-layer hero form (85% — replaced with the 5-stratum spec), mono typography (85% — replaced with frutiger-clean Hanken), hand-drawn aesthetic (80%), spring/stagger/cursor-follow micro-interactions (50% / 45% / 40% — replaced by ripple-driven edge wobble only). **Chosen seed (from assignment):** *aesthetic: bauhaus, layout: parallax-sections, typography: frutiger-clean, palette: sunset-warm, patterns: ripple, imagery: lens-flare, motifs: cultural, tone: calm-serene.*