# Design Language for PPZZ.ee ## Aesthetics and Tone PPZZ.ee is **a chrome-pastoral broadcast from a country that has no mountains, dreaming of mountains it never had.** Estonia, the .ee TLD, is geographically a long flat coastal plain whose highest "peak" — Suur Munamägi — rises 318 metres, less than the antenna of the Tallinn TV Tower. Yet PPZZ.ee is constructed entirely around an **imaginary alpine range**: a fictional Baltic Cordillera, dreamed in 1991 by a state-television test-pattern operator who had never travelled south of Tartu and who stayed late one night letting a tape of a Swiss travelogue loop through a failing magnetic head until the snow pixelated, the chrome titles bled into rose, and the mountains came out wrong, and lovely, and his. The doubled letters of the name read as the site's two structural truths. The **two P's** are twin parallel ridgelines, viewed from below — `/\` and `/\` stacked. The **two Z's** are simultaneously: (a) the zig-zag of a mountain silhouette, (b) the diagonal scanline-glitch where a VHS tape skips, (c) the alpha-state hum of someone falling asleep watching late-night Eesti TV, (d) the buzz of a fluorescent shop sign in a mountain bus station, and (e) the lazy double-Z of a dreamer who is never quite awake. The lowercase `.ee` is the small reflective foil sticker of an Estonian state-broadcaster's archival cassette, peeling at one corner. The aesthetic is **vaporwave**, but specifically the **Slavic / Eastern-Bloc / Baltic strain** — not California mall-court vaporwave, not Tokyo neon vaporwave, but the *colder, slower, sadder* version that lives in disused Soviet sanatoria, Karelian railway timetables, and 1991 East-German graphic-design pamphlets that survived only because no one threw them out. It is romantic without being warm. It is luxurious without being rich. The chrome is not Beverly Hills chrome; it is the chrome of a Tallinn tram pole in November mist. The **tone is pastoral-romantic** — but pastoral as a *ghost*. The lover is the landscape, but the landscape is a glitched recording of a landscape. Every page reads like a love letter from a meteorologist to a mountain that was never measured. The site is never ironic about this. It is entirely sincere, and slightly sleepy, and quietly crushed. ## Layout Motifs and Structure The composition is **broken-grid** — strictly, doctrinally, *programmatically* broken. A 12-column reference grid is computed at load and then **deliberately fractured**: every block is offset from its column-snap by a pseudo-random integer between -22px and +22px, drawn from a seed derived from the day-of-year, so the grid drifts a little each day like a tape slipping. The grid lines themselves are visible at 6% opacity, in chrome silver, so the visitor sees both *the law* and *the violations*. No element ever sits flush in its cell. This is the layout's entire grammar. The page is composed of **seven panels**, each one a glitched magazine-spread fragment. Panels are not stacked vertically; they are **scattered** across an oversized canvas (3200px × 5400px on desktop), and the visitor scrolls *diagonally* — yes, both X and Y — through them. A custom inertia-scroll routes vertical wheel events into a 0.7y / 0.3x vector so the journey down the mountain is also a journey across it. On mobile, the diagonal collapses to a vertical tilt, but each panel retains its broken-grid offset. The seven panels: 1. **THE TEST CARD.** The opening. A full-bleed CRT colour-bar broadcast pattern (Estonia's specific 1990 state-television variant, with the `EESTI TELEVISIOON` cyrillic-latin hybrid wordmark replaced by `PPZZ.ee`) glitches, jumps a frame, and resolves into the first mountain photograph. 2. **PEAK ONE — THE ONE THAT EXISTS.** A single duotone-photo of Suur Munamägi (real Estonia, 318m), captioned in condensed metal type at 1:1 truthful scale. 3. **PEAK TWO — THE ONE I DREAMED.** Same composition, 7× the height. Pure fiction, rendered in chromed pastel ridges. 4. **THE LIST OF NAMES.** A handwritten broken column of seventeen invented mountain names in Estonian, each one glitching one letter every 4 seconds. 5. **THE WEATHER REPORT.** A pastoral-romantic monologue dressed as a 1991 weather forecast, with chrome temperature dials and broken-glitch precipitation icons. 6. **THE LETTER.** The site's longest-form text: a love letter from the meteorologist to the dreamed peak, set in condensed serif, drifting across the broken grid. 7. **THE SIGN-OFF.** The CRT loses signal. The grid de-coheres, every block offsets to the maximum, and a single horizontal scanline closes vertically over the page like a TV being turned off in 1995. There is **no header bar, no nav, no hero CTA, no footer columns, no pricing strip, no stat-grid.** The seven panels are linked only by a small chrome compass-rose in the bottom-left corner that drifts across panels like a tape index. ## Typography and Palette **Fonts (Google Fonts only, three faces):** - **Display / Mountain Names — `Oswald`, weight 700, condensed, all-caps, letter-spacing 0.04em.** This is the **condensed** anchor of the site. Oswald is set at clamp(3.2rem, 9vw, 8.4rem) for the seven panel titles. The condensed verticality is deliberate: every title is itself a tall thin mountain. Each title has a chrome-bevel rendered as a CSS `text-shadow` triple — `0 1px 0 #F5F5F5, 0 2px 0 #B8C0CC, 0 3px 4px rgba(31,42,68,0.45)` — giving the type a polished metal ridge against the pastel sky. On hover, a 1-frame horizontal scanline-skip (translateX(2px) for 16ms then back) glitches the title. - **Body / Letter & Captions — `Cormorant Garamond`, weights 300 and 500 italic.** A Renaissance-revival serif with long ascenders, used at 1.05rem for body and 1.35rem italic for the love-letter. This is the **pastoral-romantic** voice: scholarly, slightly archaic, the typographic equivalent of a meteorologist's longhand notebook. Line-height 1.7. Ink is deep prussian #1F2A44, not black. - **System / Test-Card / Weather-Report — `Space Mono`, weight 400.** The technical voice. Used for cassette-archival labels (`A-37 / 1991 / EESTI`), broadcast-engineering chyrons, and the weather-report numerical readouts. Always all-caps, letter-spacing 0.08em, at 0.78rem. **Palette (chrome-metallic, eight colours):** The site is duotoned across two co-existing palettes — *chrome* (the medium) and *pastel-pastoral* (the dream). Chrome lives in the typography, dials, and grid lines. Pastel lives in the sky, the snow, and the duotoned mountain photographs. - `#F5F5F5` — Polished Chrome (highlights, type top-bevel, scanline) - `#B8C0CC` — Tarnished Chrome (mid-tones of metal type, dial faces, grid lines) - `#5D6678` — Steel Shadow (lower bevels, weather-instrument shadows) - `#1F2A44` — Prussian Ink (body type, hairlines, deep mountain shadow) - `#E8B7C5` — Sunset-on-Snow Rose (the pastoral upper sky, the chromed-pink ridge) - `#A4C8E1` — Baltic Air Blue (the lower sky, the cold air pooled in valleys) - `#C8B8DC` — Lavender Glaciation (deep distance, the impossible far-peaks) - `#F5E9D2` — Foil-Sticker Cream (the .ee archival sticker, the paper of the love letter) The two palettes never blend — they meet at hard chrome edges. A duotoned mountain photograph uses **only Sunset Rose and Prussian Ink** (rose for highlights, ink for shadows, no mid-tones), so each photo has the harsh chrome-print quality of a 1991 risograph postcard. ## Imagery and Motifs The site is built from five recurring visual artifacts, each rendered with deliberate craft to support the dream-of-mountains conceit. **1. The Duotone Mountain Photograph.** The site's primary imagery is **duotone-photo**: each of the seven panels carries one large monochrome-treated photograph of a mountain ridge, rendered in only two colours — the rose-on-ink chrome-print duotone described above. These are not stock; they are CSS-composited from layered SVG `feTurbulence` ridge generators (baseFrequency 0.012, octaves 4, with a custom `feDisplacementMap` to fracture the ridgeline) overlaid with a `feColorMatrix` duotone filter. The result is a *generated* mountain that looks photographic — fitting, since none of these mountains exist. Each one is regenerated daily from a different seed. **2. The Glitch Bar.** Borrowing from the **glitch** pattern, every panel is interrupted by 1-3 horizontal **scanline-glitch bars** — sudden 4–14px tall horizontal slices of the panel that are offset by ±18px and tinted with a single channel-shift (RGB-split: red channel translateX(-3px), blue channel translateX(+3px)). The glitch bars appear, hold for 80–220ms, and resolve. They never appear twice in the same place. They feel like the tape is slipping. Crucially: the glitch is *welcomed*, not feared — it is the visual equivalent of the dreamer remembering they are dreaming and choosing to stay asleep. **3. The Chrome Compass-Rose.** Bottom-left of the canvas, a 96px diameter compass-rose drawn in pure SVG using radial gradients to simulate brushed chrome. It rotates slowly (30s per revolution) and tilts on cursor proximity within 240px (using **magnetic** behaviour). Its purpose is decorative-functional: the cardinal arms point to the four nearest panels in the broken-grid scatter. **4. The Test-Card Border.** A 24px-wide vertical chrome-test-card column on the far-left of every panel, carrying the SMPTE colour bars (recoloured to the pastel palette: rose, lavender, baltic-blue, cream, instead of the standard yellow/cyan/green) plus a chyron strip with cassette-archival code (`A-37/1991/EESTI/PPZZ`). This anchors the broadcast-tape conceit on every screen. **5. The Mountain-Silhouette Zigzag.** The motif **mountain-landscape** rendered as the literal `Z` of the brand. A repeating SVG zigzag — three peaks, condensed, narrow — appears as the bottom-edge of every panel, drawn in 1px chrome-silver, like a graph plotted on engineering paper. The zigzag drifts horizontally during scroll (parallax × 0.3), so the mountains appear to walk past slowly, the way they would from a passenger train at dusk. ## Prompts for Implementation Build PPZZ.ee as a **single seven-panel diagonally-scrolled glitched broadcast** in one HTML, one CSS, one JS — no framework. The visitor is tuning a 1991 Estonian state-television receiver to a channel that broadcasts only mountains that do not exist. The experience is slow, cool, sincere, and quietly heartbroken. **Backdrop and grid construction.** `body` is `#F5E9D2` (Foil-Sticker Cream) with a CSS-painted vertical interlace (every 3rd row darkened by 4%) to simulate a CRT scanline at rest. A separate fixed `.broken-grid-overlay` element draws the 12-column reference grid using `repeating-linear-gradient` in `#B8C0CC` at 6% alpha — the visible *law* that every block then violates. Compute a daily seed in JS (`new Date().getDate() + new Date().getMonth() * 31`) and use it to assign each panel its broken-grid offsets between -22px and +22px on both axes. **Diagonal inertia scroll.** Capture wheel events on `window`. Translate `wheelDeltaY` into a CSS variable update on ``: `--scroll-y` increases by 0.7 × delta, `--scroll-x` increases by 0.3 × delta. The seven panels are absolutely-positioned on a 3200×5400 canvas inside a fixed-viewport `
` whose `transform: translate3d(calc(-1 * var(--scroll-x)), calc(-1 * var(--scroll-y)), 0)` carries them. Inertia is implemented with a single `requestAnimationFrame` loop applying 0.92 friction. On mobile (matchMedia `pointer:coarse`), fall back to native vertical scroll, but preserve the broken-grid offsets — the diagonal becomes a vertical tilt only. **Panel 1 — The Test Card.** On load, full-viewport SMPTE colour bars in the pastel-recoloured palette (eight bars: cream, rose, baltic-blue, chrome, lavender, ink, rose-shadow, cream). Bar height fills the screen. After 900ms, a single horizontal scanline-skip (a 14px bar shifts +180px right and channel-splits) introduces the wordmark `PPZZ.ee` in Oswald 700, condensed, set across the bars in chrome-bevel type. After 2.4s, the bars fade-collapse to 24px and dock to the left edge as the persistent test-card border. The first mountain photograph rises behind. Use only CSS keyframes, no JS animation library. **Panel 2 — Peak One (the real one).** The duotone Suur Munamägi photograph fills the right two-thirds of the panel at its true geographic ratio: the peak rises only 18% of the panel height. Caption in `Space Mono`: `SUUR MUNAMÄGI / 318M / VÕRUMAA / VERIFIED`. The word `VERIFIED` is the only piece of `Space Mono` on the entire site that is *not* glitched — a small typographic loyalty to a real place. Below it, a hand-illustrated ridge-line in 1px chrome silver overlays the photo and labels every contour in `Cormorant` italic. **Panel 3 — Peak Two (the dreamed one).** Same composition mirrored, but the mountain is **2,460m** in invented elevation, named **`KÕRGEM ÕHUNE` ("the higher airy one")**. The duotone is more saturated. The ridge is fractured by glitch bars three times. Caption ends `UNVERIFIED. PERSISTENT.` On scroll-into-view, the elevation digits count up from 318 to 2460 over 1.8s using **counter-animate**, then *over-shoot* to 2467 and glitch-collapse back to 2460 — a small lie that corrects itself. **Panel 4 — The List of Names.** Seventeen invented Estonian mountain names, set in `Cormorant` italic in a single broken column (each name offset ±22px from the column axis). Names include `EHATUUL`, `LUMIKARDIN`, `JÄÄPEEGEL`, `KAUGEM-VEEL`, `UNESTUS-MÄGI`. Every 4 seconds, one randomly chosen name has a single character replaced with a similar-shape character for 320ms (e.g., `Ä` → `A`, `M` → `H`), then resolves back. This is **glitch** as a deliberate, slow, almost-romantic flicker — never aggressive. **Panel 5 — The Weather Report.** Three chrome-bevel circular dials (temperature, wind direction, precipitation) rendered in pure SVG with realistic radial-gradient brushed-metal. The dials read out invented forecasts for the dreamed peaks: `KÕRGEM ÕHUNE: -12°C / N-NW 14M/S / KERGE GLITCH-LUMI`. (`Glitch-snow`. The forecast itself includes the word.) The needles tick once per second with a soft **spring** physics (overshoot 8% then settle). **Panel 6 — The Letter.** The site's longest text. Set in `Cormorant Garamond` italic at 1.35rem, line-height 1.85, in a column 32rem wide that *itself* obeys the broken-grid (the column is offset -16px from its computed left). The letter begins: *"My dearest Kõrgem Õhune — I have measured nothing of you. I have only the tape, which slips, and the rose-light that falls on what I have decided is your western face..."* It runs ~340 words. Three sentences in, a glitch-bar slices through the paragraph and one word channel-splits before re-coalescing. The letter is signed `— M.K., meteorological station 7, 14.X.1991`. **Panel 7 — The Sign-Off.** On reaching the final panel, a single horizontal **chrome scanline** appears at the vertical centre of the viewport. Over 2.6s, it expands top and bottom with `cubic-bezier(0.7, 0, 0.3, 1)` until the whole screen is `#1F2A44` Prussian Ink. A faint, condensed `Oswald` line in chrome reads `EESTI TELEVISIOON / SIGNAALI LÕPP / 1991`. After 1.4s of held black, the scanline contracts back to a single white horizontal hair, holds 600ms, then disappears. The page loops back to Panel 1 only if the visitor scrolls upward. **The Compass-Rose magnetic.** Bottom-left fixed position, 96px diameter. Continuous slow rotation (30s/turn). Within 240px of cursor, it tilts up to 18° towards the cursor (CSS `transform`, eased over 280ms). Click toggles a 540ms zoom-to-fit which centres the nearest panel in the diagonal scroll. **Glitch-bar choreography.** A single JS function `scheduleGlitchBars(panel)` runs per panel, dispatching 1–3 bars at random intervals between 6s and 14s. Each bar is a `
` with computed `top`, `height` (4–14px), and channel-split rendered with `mix-blend-mode: screen` and two filter-color-matrix variants overlaid 3px apart. Bars hold 80–220ms then unmount. Never two simultaneous bars in one panel. **Reduced-motion.** All glitch, all parallax, all diagonal scroll collapses to a clean vertical scroll with static panels. The chrome bevels remain. The duotone photos remain. The dream survives without the medium. ## Uniqueness Notes **Differentiators (eight, each a deliberate signature absent from the corpus):** 1. **Diagonal scroll across a 3200×5400 canvas.** No site in the corpus uses two-axis diagonal scrolling as its primary navigation. Horizontal-scroll appears at 3%, immersive-scroll at 20%, but the **0.7y / 0.3x diagonal vector** of PPZZ.ee is unique. The visitor literally walks down-and-across a mountain range while reading. 2. **Programmatically broken grid that drifts daily.** Broken-grid is at 3% in the corpus and is treated everywhere else as *static* asymmetry. PPZZ.ee makes broken-grid **temporal** — the grid is reseeded each day from `dayOfYear`, so a returning visitor sees the same panels at slightly different offsets. The grid is alive and slipping. 3. **Pastel-recoloured SMPTE colour bars.** No site in the corpus uses broadcast-engineering test cards. PPZZ.ee makes the SMPTE bars its left-edge spine on every panel, recoloured to rose/lavender/cream — chrome-broadcast as decoration. 4. **The chrome-pastoral palette tension.** Chrome-metallic appears at 13% but always alone, and pastoral-romantic appears at 10% but always with warm earth tones. The collision of *cold metal type* over *rose-and-lavender pastoral skies* is unique to PPZZ.ee. The two palettes never blend; they meet at hard polished edges. 5. **Glitch as romance, not aggression.** Glitch appears at 6% in the corpus and is everywhere else used for tech/cyberpunk. PPZZ.ee uses glitch as a **slow, gentle, almost-tender** flicker — a tape slipping, a name forgetting one letter, a number lying for 320ms then telling the truth. Glitch is here a *love language*. 6. **Two co-existing peaks: one real, one dreamed.** No site in the corpus uses **factual / fictional twin objects** as a structural device. PPZZ.ee builds Panel 2 (Suur Munamägi, 318m, real) and Panel 3 (Kõrgem Õhune, 2460m, invented) as a deliberate *mirror with one side warped*. The site's truth-claim varies panel by panel. 7. **Procedurally generated mountain photographs.** No site in the corpus generates its photography. PPZZ.ee uses SVG `feTurbulence` + `feDisplacementMap` + duotone `feColorMatrix` to *manufacture* its mountain ridges in-browser — fitting, since the mountains are imaginary. Each photograph is regenerated daily from a different seed. 8. **The love-letter as primary content surface.** No site in the corpus places a 340-word **first-person love letter from a meteorologist to a mountain** as a primary panel. The site's longest-form text is not a manifesto, not a feature list, not an FAQ — it is a confession. **Chosen seed (from assignment):** `aesthetic: vaporwave, layout: broken-grid, typography: condensed, palette: chrome-metallic, patterns: glitch, imagery: duotone-photo, motifs: mountain-landscape, tone: pastoral-romantic` **Avoided / underused patterns from frequency analysis:** - AVOIDED: hand-drawn (86%), photography as stock (93%), full-bleed (83%), centered (70%), card-grid (53%), gradient (86%), warm (86%), parallax (90%), spring (56%), stagger (53%), cursor-follow (46%), mono (90%). - LEANED INTO (underused): broken-grid (3%), glitch (6%), vaporwave (6%), chrome-metallic (13%), condensed (13%), mountain-landscape (newly introduced — corpus has 0%), duotone-photo (20%), pastoral-romantic (10%). **Tagline (internal compass for implementation):** *"PPZZ.ee — broadcast from the meteorological station for mountains that do not exist."*