# Design Language for pzz.lu ## Aesthetics and Tone **pzz.lu** reads as a sound — the sustained, electric buzz of a neon sign warming up, or the tight hiss of a espresso machine pressurizing. The two-letter Luxembourg TLD (.lu) compounds the effect: this is a site with continental European precision and the compressed energy of a street-level signal. The domain is short, phonemic, kinetic — and the design lives inside that buzz. The aesthetic is **isometric-energetic**: the strict 30°/60° geometry of technical illustration married to the amber warmth of an analog control room. Imagine a mid-century broadcast operations center — all honeyed bakelite, amber pilot lights, condensed system labels, and the rhythmic flicker of teletype output — but rendered in isometric projection as if the entire facility has been exploded into a technical diagram. Every section is a schematic. Every element has a grid address. The mood is **energetic-precise**: busy like a switching board at 3 AM, but disciplined like a Letraset label sheet. The tone is urgent and self-aware. Text does not appear on screen; it **arrives** — one character at a time, as if transmitted. Particles drift like signal noise in an analog broadcast. The duotone photography is treated like archival transmission stills: processed, grain-heavy, amber-and-shadow. Nothing is soft. Everything has a vector address and a scheduled arrival time. Inspiration: Bauhaus control panels, IBM System/360 operations manuals, Letraset catalog spreads, Luxembourg radio towers, 1960s airline operations rooms, analog oscilloscope output aesthetics. ## Layout Motifs and Structure The page is built on a strict **isometric timeline-vertical** spine — a single scrolling schematic that reads top-to-bottom like a broadcast log or a mission timeline, but rendered in isometric 3D perspective. The isometric grid underpins every element: sections float as extruded blocks on a 30°/60° grid, with their Z-height communicating temporal depth (earlier = higher elevation, present = ground floor, future = excavated below-grade). **Macro structure — seven isometric panels from crown to base:** 1. **Transmission Tower (top):** Full-viewport isometric illustration of a broadcast tower rendered in amber wireframe on near-black. The domain `pzz.lu` types itself across the tower's crossbars — condensed monospace, character by character. The tower pulses: a thin amber ring radiates outward from the apex every 4.2 seconds. 2. **Signal Log / About:** An isometric console panel — a tilted desktop surface with a paper tape printer, amber pilot lights, and a scrolling teletype readout. The typewriter-effect text describes pzz.lu in operational, system-log language. Key terms are highlighted as if circled by a red grease pencil. 3. **Frequency Map / Services or Focus:** An isometric array of nine frequency-labeled panels arranged in a 3×3 grid, each panel a different elevation, showing the domain's range of signals/topics/services. Duotone photography (amber + deep shadow) fills each panel as if viewed through a monitor CRT filter. 4. **Timeline Rail:** The central organizing structure — a literal horizontal timeline wire runs left-to-right in isometric perspective, with event nodes (extruded cubes) rising from it at intervals. Each node has a condensed label and a blinking amber cursor. 5. **Transmission Log / Detail:** A full-width isometric paper roll — continuous teletype output, densely set in condensed monospace, particle noise drifting upward as if heat-shimmer from a warm machine. Duotone archival stills embedded as stamp-sized frames. 6. **Operator Console / Contact or CTA-adjacent:** An isometric workstation — keyboard, handset, amber display — with a form that types itself into the screen when the viewer scrolls into range. Not a CTA button block; a console input waiting for transmission. 7. **Carrier Signal (footer):** A single isometric rack of equipment, amber lights blinking in morse-code rhythm, the domain and minimal metadata set in condensed monospace at the smallest legible size. **Grid:** 12-column underneath, but surfaced only as the isometric projection grid. No visible gutters or column lines — the geometry is the structure. Column count is irrelevant; the isometric tile pitch is 64px at 1440px viewport, scaling via CSS custom properties with `clamp()`. **Spatial rule:** No two adjacent panels share the same isometric elevation. The eye travels a staggered Z-path as it scrolls, like reading a folded map. ## Typography and Palette **Typography is condensed-industrial.** Two families, strict roles, no decorative mixing. - **Display / Label:** [Barlow Condensed](https://fonts.google.com/specimen/Barlow+Condensed), weight 700 (Bold), for all section labels, system identifiers, and the wordmark `pzz.lu`. Set at `clamp(2.8rem, 7.2vw, 9rem)` for hero treatment; `clamp(0.7rem, 1.1vw, 1rem)` for instrument panel labels. Tracked at `0.12em` — wide tracking in condensed type, the way aviation instruments are labeled. All uppercase for labels; title-case for longer display strings. - **Teletype / Body:** [Space Mono](https://fonts.google.com/specimen/Space+Mono), weight 400 (Regular) and 700 (Bold), for all typewriter-effect text, log entries, and teletype readouts. Monospace precision signals machine origin. Set at `clamp(0.85rem, 1.2vw, 1.1rem)` for body; `clamp(1.4rem, 2.8vw, 2.4rem)` for large log headings. Line-height 1.6 — generous leading for teletype density. No italic use — machines don't italicize. **Palette — Honeyed-Neutral Industrial:** - `--amber-signal: #D4820A` — Primary amber; pilot lights, active cursors, the typewriter caret, the pulsing tower ring. The only true warm color; everything else is neutral ground for it to glow against. - `--amber-deep: #8A4F00` — Amber shadow; the dark face of isometric extruded blocks, the underside of console panels, the dark-state teletype text. - `--cream-panel: #F2E5C8` — Panel surface; the lightest tone; teletype paper, console face plates, the background ground for isometric surfaces facing upward. - `--warm-void: #1A1510` — Near-black with amber undertone; the space between panels, the sky behind the transmission tower, the particle-effect ground. - `--neutral-steel: #8B7D6B` — Mid-tone; instrument dial faces, cable runs in isometric view, ruled lines on the timeline rail. - `--dust-highlight: #C4A96B` — Warm gold; secondary accent on instrument rings, the timeline wire itself, label underlines. - `--ghost-text: #3D3020` — Dark warm brown; body text on cream surfaces, the ink of the teletype roll, the grease-pencil annotation color. **Color logic:** The page is amber-and-shadow. Every interaction — hover, scroll-trigger, focus — increases amber luminance. Nothing turns blue or cool. Darkness is not grey; it is deep amber-black. The duotone photography uses `--amber-signal` as the highlight tone and `--warm-void` as the shadow tone. ## Imagery and Motifs **Imagery is duotone-archival.** All photography is processed to a strict two-tone: `--amber-signal` (#D4820A) replaces light values, `--warm-void` (#1A1510) replaces shadow values. No original colors survive. Images read as broadcast stills from a 1960s operations room — grainy, high-contrast, timestamp-stamped. **Isometric motifs:** - **The Tower:** The hero isometric illustration of a broadcast tower — clean SVG paths, amber wireframe on `--warm-void`, drawn with `stroke-dasharray` animation (draw-in over 2.4 seconds on first load). The tower is the page's central icon and repeated as a 24px favicon-sized motif throughout. - **Panel Extrusion:** Every content section is an extruded isometric block. The top face is `--cream-panel`, the right face is `--neutral-steel` at 80% opacity, the left face is `--amber-deep`. Shadow falls toward lower-right at 2px blur. The extrusion depth (Z-height) is set by CSS custom property `--z-depth` per panel. - **Particle Drift:** 80–120 particles (SVG `` elements, radius 1–3px, opacity 0.15–0.45) drift upward in a canvas layer behind the transmission tower section. Particles use `--amber-signal` and `--dust-highlight` only. Movement is slow (0.3–0.8px/frame), randomized per particle, looped with `requestAnimationFrame`. No external library — pure JS, under 40 lines. - **Typewriter Effect:** Every text element in the teletype sections renders character-by-character on scroll-entry (IntersectionObserver, threshold 0.3). The caret is a 2px-wide `--amber-signal` block cursor, blinking at 1.1s interval. Typewriter speed: 28ms/character for body text, 55ms/character for large display text (slower = more dramatic). - **Timeline Wire:** A 2px horizontal line in `--dust-highlight` runs the full width of the timeline section in isometric perspective (CSS `transform: rotateX(30deg) rotateY(-10deg)`). Nodes are 16px extruded cubes, amber-lit, with condensed labels above. Active node pulses with a 1.6s amber ring expansion. - **Morse Footer:** The footer's amber pilot lights blink in actual morse code encoding the domain `pzz.lu` — 3 lights, each blinking the encoded letter. Dot = 200ms on, dash = 600ms on, inter-symbol gap = 200ms, inter-letter gap = 600ms. A CSS `animation` keyframe sequence, precomputed. ## Prompts for Implementation Build pzz.lu as a **single scrolling broadcast schematic** — the live operations log of a signal being transmitted from somewhere in Luxembourg, received here, in this viewport, right now. The entire page is a technical artifact: a system diagram that has been activated, not a website that has been decorated. Every character arrives. Every panel has a grid address. Every light is a live status indicator. **Isometric projection:** Use CSS `transform: rotate(30deg) skewX(-30deg) scaleY(0.866)` for the face transforms on isometric blocks — this is the standard CSS isometric technique without WebGL. The grid should be defined as a CSS custom property `--iso-pitch: 64px` at root, halved for mobile. **Particle system:** Implement with a single `` element positioned `fixed` behind the tower section, z-index -1. The canvas auto-resizes on viewport change. Particles are plain `{x, y, r, opacity, speed, color}` objects. No particle libraries. **Typewriter engine:** A single `typewrite(element, text, delay)` function, called by IntersectionObserver callbacks. Queue-based so multiple elements entering the viewport simultaneously don't collide. The caret is a `::after` pseudo-element on the active element, removed when typing completes. **Scroll behavior:** `scroll-snap-type: y mandatory` on the scroll container, with each isometric panel as a snap point. The snap creates the sense of moving between discrete broadcast frames rather than continuous scrolling. Disable snap below 768px viewport height — small screens need free scroll. **Duotone photography:** Apply using CSS `filter: contrast(1.4) grayscale(1)` combined with a `mix-blend-mode: color` overlay div in `--amber-signal`. This achieves duotone without image editing. The overlay div is a sibling with `position: absolute; inset: 0; background: --amber-signal; mix-blend-mode: color; opacity: 0.7`. **Avoid:** CTA button clusters, testimonial grids, pricing tables, feature-list cards with checkmarks, hero text with subhead + button + supporting copy stacked vertically in a centered column, gradient hero backgrounds, bootstrap-style grid of equal-height cards. The page has no "sections" in the marketing sense — it has **panels** in the schematic sense. **Animations must be purposeful:** Every animation encodes information (a light blinking is a status; a particle drifting is signal noise; a character typing is transmission). No animations exist purely for decoration. If an element doesn't need to move to convey meaning, it is static. **Condensed type hierarchy:** - Panel labels: Barlow Condensed 700, uppercase, 0.12em tracking, amber - System IDs: Space Mono 700, uppercase, monospace grid alignment - Log body: Space Mono 400, ghost-text on cream, 1.6 line-height - Instrument labels: Barlow Condensed 700, 10–11px, 0.2em tracking, all-caps ## Uniqueness Notes 1. **Isometric layout at 7% frequency, but executed as broadcast-schematic rather than as interface mockup.** Most isometric designs in the registry use isometric for UI component display or icon sets. pzz.lu uses isometric as the fundamental page architecture — every panel is an extruded schematic block, and the page reads as a folded technical diagram rather than a stacked webpage. No other design in the registry applies isometric geometry to the scroll container itself. 2. **Typewriter-effect (4% frequency) paired with particle-effects (2% frequency) in an analog-industrial context, not a digital/terminal context.** Most typewriter designs evoke hacker/terminal aesthetics (dark, green-on-black, monospace everywhere). pzz.lu's typewriter effect is set against cream panel surfaces in amber type, evoking teletype and broadcast log transmission — a fundamentally warmer and more archival register. The particle system encodes signal noise, not code rain. 3. **Honeyed-neutral palette (3% frequency) applied to an energetic-industrial aesthetic rather than the expected cozy/artisanal context.** Honeyed neutrals typically appear with cottagecore, wabi-sabi, or craft-store aesthetics in the registry. Here the same amber-and-cream palette is weaponized for industrial precision — the honey is bakelite, the neutral is brushed steel, the warmth comes from pilot lights rather than candlelight. This inversion of palette expectation is not present in any other design. 4. **Morse code footer as functional motif, not decorative typography.** The blinking lights in the footer encode the actual domain in morse code — this is a legible, decodable signal, not a pattern. Visitors with morse knowledge can read it. This levels of functional-decorative overlap appears in zero other designs in the registry. 5. **Timeline-vertical layout (3% frequency) expressed through isometric Z-height rather than horizontal position or vertical stacking.** The timeline is not a list or a ribbon — it is a depth axis. Older events are higher in isometric elevation; the present is at ground level. This three-dimensional timeline reading is unique to this design. **Chosen seed from assignment:** aesthetic: isometric, layout: timeline-vertical, typography: condensed, palette: honeyed-neutral, patterns: typewriter-effect, imagery: duotone-photo, motifs: particle-effects, tone: energetic **Avoided patterns from frequency analysis:** warm (88% — extremely overused), isometric as simple icon treatment (2%, overused relative to its visual potential), condensed as standalone font choice without industrial pairing (19% — common, but not in amber-industrial context), duotone as pure stylization without narrative role (12% — common; here duotone encodes archival transmission meaning).