# Design Language for ppzz.lu ## Aesthetics and Tone `ppzz.lu` is a **pop-art lithograph soaked in mountain spring water** — imagine Roy Lichtenstein tore a page from a 1960s Alpine tourism poster, ran it under a cold waterfall, and pinned the still-dripping sheet to a sun-bleached barn wall in Luxembourg. The halftone dots bleed and bloom where the water touched them. The bold outlines soften into watercolor halos at their edges. The primary colors hold — but they hold the way a stone holds warmth after an afternoon sun, not the way a neon tube holds light. The tone is **bold-confident without aggression**. This is not a brand screaming. This is a mountain that has always been there, that knows you will eventually look up. The site speaks in declarative sentences. It does not hedge. The confidence is geological — patient, massive, certain. The pop-art vocabulary here is mid-career Lichtenstein filtered through Swiss Alpine graphic tradition: **Ben-Day dots as texture not decoration**, thick black outlines that define rather than constrain, flat planes of warm earth — ochre, burnt sienna, dusty rose — cut against pure cream and raw canvas. The mountain is not a logo; it is a horizon line that governs every section's composition. ## Layout Motifs and Structure The page is a **stack of six lithograph panels**, each one a full-viewport horizontal band that scrolls into view like a print being fed through a press. This is the **stacked-sections** pattern executed as a printing metaphor rather than a card-deck metaphor. **Structural rules:** - Each section is exactly `100svh` tall (short viewport height unit, so mobile keyboards don't clip). No section bleeds into the next. - The **mountain horizon line** — a single SVG polyline with 7–9 angular peaks, drawn at 2.5px stroke in `#1A0E00` — persists as a `position: sticky` element at the bottom of each panel, creating the illusion that the same ridge line runs through every section as the viewer scrolls. - Within each panel, content is positioned on a **3-column / 6-row CSS Grid**, but only 1–2 cells are occupied per section, leaving the rest as negative space. This anti-dashboard discipline (the registry shows 18% dashboard layouts) makes the occupied cells land like offset print registration marks. - Odd-numbered panels: content anchored **left**, mountain horizon right-heavy. - Even-numbered panels: content anchored **right**, mountain horizon left-heavy. The alternation is asymmetrical — not a mirror, a conversation. - Section transitions: not fade-in. Each panel **snaps** (scroll-snap-type: y mandatory on the container) with a 40ms elastic overshoot (using `scroll-snap-stop: always`). The overshoot is the elastic-pattern expression: the panel slides in 8px past its target and springs back. **Six panels:** 1. **The Summit** — wordmark + one-line manifesto, mountain horizon dominant 2. **The Face** — the primary offering / story, asymmetric text block 3. **The Ledge** — secondary content, water-bubble animation element 4. **The Valley** — supporting detail, halftone dot field as background 5. **The Path** — contact or action element, minimal 6. **The Base** — footer, raw canvas texture, registration-mark footer grid ## Typography and Palette **Type system — two families, used like a lithographer uses two ink passes:** - **Display & wordmark — [Cormorant Garamond](https://fonts.google.com/specimen/Cormorant+Garamond)** — Semibold Italic 600, set at `clamp(52px, 9vw, 110px)`. Tracked at `-0.015em`. The seed calls for `garamond-classic`, but Cormorant Garamond on Google Fonts is the correct verified implementation — it carries the same old-style proportions, the bracketed serifs, the high-contrast stroke modulation. The italic is used for the wordmark and all H1 elements because the italic is where Garamond's personality lives: the swash capital P, the calligraphic lowercase z-z (perfectly matching the domain). Set in `#1A0E00` (near-black with warm undertone) on cream. - **Body & UI — [DM Sans](https://fonts.google.com/specimen/DM+Sans)** — Regular 400 and Medium 500 only. Set at 18px / 1.7 line-height for body. 13px / 1.4 for captions and metadata. DM Sans's circular geometry contrasts cleanly against Cormorant's calligraphic warmth — the combination reads as Alpine poster meets contemporary editorial without either typeface dominating. - **Accent numerals (section counters) — Cormorant Garamond** Thin 300, 9vw, set in `#C4703A` (burnt sienna). These sit in the grid's empty cells as wayfinding marks, like lithograph registration numbers in the margin. **Palette — warm-earthy, no gradients:** | Role | Hex | Description | |---|---|---| | **Canvas** | `#F5ECD7` | Raw linen / aged paper — the dominant background | | **Near-black** | `#1A0E00` | Warm shadow black, outline weight | | **Burnt Sienna** | `#C4703A` | Primary warm accent — Ben-Day dot color, accent numerals | | **Ochre** | `#D4A843` | Secondary warm — section highlight bands, hover states | | **Dusty Rose** | `#C7856B` | Tertiary warm — water-bubble element tint | | **Stone Grey** | `#8C7B6E` | Body text when on canvas, mountain midtones | | **Deep Sage** | `#4A5C45` | Mountain valley shadow, occasional panel background | No gradients anywhere. No shadows with blur. All depth is created through flat color planes and the Ben-Day dot halftone pattern. **Ben-Day dot specification:** 8px dots, 14px pitch, rendered as an SVG `` element. Used at three opacities — 15% as a full-section background wash, 40% as a mid-ground texture element, 80% as a foreground graphic element in the halftone-face panel. Colors rotate through the palette by panel. ## Imagery and Motifs **No photographs.** The registry shows photography heavy across most sites. ppzz.lu uses zero photographic imagery. **Mountain landscape motif — the governing visual grammar:** The mountain horizon SVG is the site's primary visual element. It is not an illustration; it is a structural line. Specs: 7 peaks of irregular height (tallest peak at 38% from left, a deliberate off-center composition), drawn with `stroke-linejoin: miter` and `stroke-linecap: butt` at 2.5px. The line color is `#1A0E00`. Below the horizon, a flat fill of `#4A5C45` (Deep Sage) extends to the panel bottom. Above the horizon, canvas white. The horizon SVG is 100vw × 180px, `viewBox="0 0 1440 180"`, and the polyline points are defined once and reused across all panels via `` — slightly transformed (translated, not scaled) per panel to suggest a moving vantage point as the user scrolls. **Water-bubble animation element — Panel 3 (The Ledge):** A cluster of 12–18 SVG `` elements, radii ranging from 8px to 48px, positioned in the right two-thirds of the panel. Each circle: `fill: none`, `stroke: #C7856B` (Dusty Rose), `stroke-width: 1.5px`. On page load, the circles animate with a staggered elastic spring — each bubble scales from 0 to 1 with a 600ms cubic-bezier(0.34, 1.56, 0.64, 1) (the elastic seed pattern), staggered 80ms between bubbles. On scroll approach (IntersectionObserver), the bubbles re-trigger. The bubbles are not random — they follow the Fibonacci spiral, centered at the panel's golden ratio point (61.8% from left, 38.2% from top). Inside the largest three bubbles, Ben-Day dot fill at 40% opacity in `#D4A843`. **Halftone face — Panel 4 (The Valley):** The background of this panel is a 200×200px SVG tile of Ben-Day dots at 80% opacity in `#C4703A`, tiled via CSS `background-image`. Over it, a single text block in `#F5ECD7` on a `#1A0E00` background plane, cutting through the halftone like a woodblock stamp. This creates the pop-art contrast moment. **Pop-art outlines:** Key UI elements — the wordmark container, the primary text block in Panel 2, and the action element in Panel 5 — are wrapped in `outline: 3px solid #1A0E00` with `outline-offset: 6px`. No border-radius anywhere. All corners are 0px. The thick outline with negative offset gap is the Lichtenstein signature move. ## Prompts for Implementation Build this as **a lithograph press run in six passes** — each scroll-snap panel is one pass of the press, laying down a different color plane of the same mountain. The mountain horizon line is not decoration; it is the registration mark that tells you all six passes are aligned. **Technical implementation priorities:** 1. **Scroll snap container.** `scroll-snap-type: y mandatory` on `
`. Each `
` has `scroll-snap-align: start` and `scroll-snap-stop: always`. The elastic overshoot is achieved by adding a CSS `@keyframes` that runs on `.panel-entering` — translate Y from `-8px` to `0px` using `cubic-bezier(0.34, 1.56, 0.64, 1)` over 400ms, triggered by an IntersectionObserver that adds/removes the class. 2. **The horizon SVG.** Define the mountain polyline in a hidden `` block. Each panel's horizon `` element applies a `translateY()` transform that shifts the horizon by `(panelIndex × 12px)` — the mountain appears to rise as the viewer descends the page. The Deep Sage fill below the horizon uses a `` that closes from the rightmost polyline point, down, across, and back up. 3. **Ben-Day dot pattern.** Define once as an SVG `` with an 8px circle on a 14px × 14px cell. Reference it as `fill="url(#benday-sienna)"` in Panel 4's background rect, and as `background-image: url("data:image/svg+xml,...")` for CSS usage elsewhere. 4. **Water-bubble Fibonacci cluster.** Compute the 12 Fibonacci spiral positions in JS at mount time, normalize to a 400×400 bounding box, then scale to the panel's available space. Animate with `gsap.from(circles, {scale: 0, stagger: 0.08, ease: "elastic.out(1, 0.5)"})` triggered by IntersectionObserver. If GSAP is not available, use the Web Animations API with the cubic-bezier equivalent. 5. **Typography loading.** Load Cormorant Garamond (weights 300, 600 italic) and DM Sans (weights 400, 500) via a single Google Fonts `` using `display=swap`. Use `font-display: swap` and define fallback stacks: `'Cormorant Garamond', 'Georgia', serif` and `'DM Sans', 'Helvetica Neue', sans-serif`. The layout must not shift when fonts load — set explicit `min-height` on the H1 container based on `clamp()` calculation. 6. **Section counter numerals.** Each panel has a `` with the section number (01–06) in Cormorant Garamond Thin `#C4703A`, positioned absolute in the panel's empty grid cell. These are `aria-hidden="true"` — they are visual marks, not content. 7. **Hover states.** The `outline-offset` on key elements transitions from `6px` to `2px` on hover, over 200ms — the outline tightens like a lasso. The body text color transitions from `#8C7B6E` to `#1A0E00`. No other interactive states. No animations on hover beyond these two. 8. **No JavaScript required for initial render.** The mountain horizon, Ben-Day dots, scroll snap, and typography must all render correctly without JS. The water-bubble animation and elastic-snap enhancement are progressive — the page is usable before they load. **Bias toward full-screen narrative.** Each panel must fill the viewport completely. No partial panels visible before scrolling. The narrative is sequential — Panel 1 establishes the world, Panel 6 closes it. Do not implement: CTAs in every panel, pricing blocks, stat grids, testimonial sliders, feature comparison tables, sticky navigation bars (no persistent nav — only a minimal fixed wordmark in the top-left at 14px / Cormorant Garamond Thin), cookie banners, or modal dialogs. ## Uniqueness Notes **Chosen seed (per assignment):** aesthetic = **pop-art**, layout = **stacked-sections**, typography = **garamond-classic**, palette = **warm-earthy**, patterns = **elastic**, imagery = **water-bubbles**, motifs = **mountain-landscape**, tone = **bold-confident**. **Differentiators from every other design in the registry:** 1. **The mountain horizon as a structural registration mark, not decoration.** Every other design in the registry that uses a mountain motif (2% frequency) treats it as an illustration or background image. Here the mountain horizon is a `position: sticky` SVG that defines the compositional bottom edge of every panel — it is architecture, not ornament. The horizon slowly rises (12px translateY per panel) as the user descends, inverting the expected relationship between scrolling down and moving up. 2. **Pop-art vocabulary filtered through Alpine lithography.** Pop-art appears in only 1% of the registry — and in other designs it tends toward neon/vaporwave adjacency. Here pop-art means its actual historical source: the commercial print lithograph, the Ben-Day dot as industrial texture, the thick registration outline. The warm-earthy palette (ochre, burnt sienna, dusty rose) is aggressively anti-neon while remaining bold. No other design in the registry combines pop-art structure with warm-earthy colors. 3. **Cormorant Garamond italic as the pop-art voice.** The registry's pop-art adjacent designs use display-bold or bebas-bold (6% each, overused). Cormorant Garamond Italic at 9vw is an unexpected collision: the most refined Renaissance type engine used for the loudest visual format. The swash capitals and calligraphic stroke modulation read as hand-drawn outlines at large sizes — the pop-art outline effect achieved typographically rather than with a box-shadow or SVG filter. 4. **Water-bubble Fibonacci cluster as the single animated motif.** Other designs animate everything. This design animates exactly one element — the bubble cluster — and that animation is the only moment of whimsy in an otherwise geological, patient, bold visual language. The Fibonacci positioning makes the cluster feel discovered rather than designed. 5. **Zero gradients, zero photographs, zero shadows.** The registry shows warm palettes at 88% and gradient palettes at 77%. ppzz.lu's warm-earthy execution uses zero gradients and zero blur-shadows. All depth is flat planes. This is the strictest flat constraint in the registry and produces the most lithographically accurate visual result. **Frequency-analysis context (from `tools/design/frequency.sh`):** - **AVOIDED overused patterns:** hand-drawn (58%), editorial (53%), dashboard layout (18%), gradient palette (77%), photographic imagery (dominant across registry) - **LEVERAGED underused patterns:** pop-art (1%), stacked-sections (2%), mountain-landscape (2%), warm-earthy (3%), bold-confident (3%), water-bubbles (4%) - **Seed patterns with elevated frequency:** elastic (6%), garamond-classic (6%) — both are the assigned seed; the execution here differentiates via the lithographic context and Fibonacci structure, not the pattern label alone