# Design Language for ppzz.lu
## Aesthetics and Tone
ppzz.lu exists in the visual territory of a forgotten educational broadcast from a parallel 1987 -- imagine a late-night public television program about signal processing, filmed on Betacam SP, where the host demonstrates waveform analysis against a backdrop of slowly rotating holographic diffraction patterns. The aesthetic is **holographic tech-tutorial**: iridescent prismatic surfaces overlaid with the warm grain and desaturated color science of vintage film stock. This is not the slick holographic of a credit card sticker; it is the scientific holographic of a university optics laboratory, where rainbow interference patterns emerge from precision-cut glass plates under sodium vapor lamps.
The tone is **tech-tutorial** -- measured, explanatory, patient. The site speaks as if guiding you through a complex process step by step, with the calm authority of someone who has repeated this demonstration a thousand times. There is no urgency, no sales pitch, no exclamation marks. Every element on the page exists to teach, to reveal, to illuminate. The voice is that of an analog-era instructor who genuinely believes that understanding how things work is its own reward. Text reads like annotated diagrams -- labels pointing to phenomena, brief explanatory captions beneath visual demonstrations, numbered sequences that unfold with pedagogical precision.
The intersection of holographic iridescence and vintage film grain creates a unique tension: the content looks simultaneously futuristic and archival, as if you've discovered documentation of technology that was ahead of its time, preserved on media that has aged beautifully.
## Layout Motifs and Structure
The layout employs a **full-bleed** architecture where every section commands the entire viewport width, creating an immersive, edge-to-edge visual experience that mimics the framing of a television broadcast -- no margins, no safety zones, content that bleeds right to the edges of the screen as if the monitor itself is the interface.
**Structural Principles:**
- **Full-Viewport Sections:** Each content block occupies 100vw and a minimum of 100vh, functioning as discrete "slides" in a lecture presentation. Transitions between sections are not gradual scrolls but definitive shifts -- each section has its own complete visual environment with its own dominant holographic color cast.
- **Instructional Grid Overlay:** A subtle 12-column grid is permanently visible as thin (#c8b8a8 at 6% opacity) vertical lines spanning the full viewport height. This grid evokes the alignment guides of technical drawing software and broadcast safe-area markers. Content snaps to this grid but never fills more than 8 columns, leaving 2-column margins of breathing space on each side that function as the "notes margin" of a laboratory notebook.
- **Caption Zones:** Below each major visual element, a dedicated 60px-tall strip runs the full viewport width, filled with a slightly darker tone of the section background. This strip contains explanatory text in a monospace typeface, formatted as technical annotations: "Fig. 01 — Prismatic diffraction at 45° incidence angle" style captions that reinforce the tutorial aesthetic.
- **Numbered Sequence Blocks:** Content is organized into explicitly numbered steps (01, 02, 03...) displayed as large Bebas Neue numerals at 8rem, positioned at the left edge of the content area, with the corresponding content block flowing to their right. This creates a clear pedagogical rhythm: each number announces a new concept, a new demonstration, a new layer of understanding.
- **Floating Annotation Markers:** Small circular markers (12px diameter, holographic gradient fill with animated hue rotation) are positioned at key points within visual elements, connected by 1px solid lines to their corresponding caption text. These function like the callout markers in a technical manual, pointing to specific features within the holographic imagery.
- **No Traditional Navigation:** There is no hamburger menu, no nav bar. Instead, a thin horizontal progress indicator at the very top of the viewport (2px height, holographic gradient fill) shows how far through the tutorial sequence the viewer has progressed. Navigation is purely sequential -- scroll down to advance through the lesson.
## Typography and Palette
**Typography:**
- **Display / Step Numbers:** "Bebas Neue" (Google Fonts) -- the definitive condensed all-caps display typeface. Used at 6rem-10rem for section numbers, 3rem-5rem for section headings. Weight: 400 (Bebas Neue's single weight). Letter-spacing: +0.08em for headings, +0.15em for step numbers. Text-transform: uppercase always. Line-height: 0.9 (tight, architectural). The extreme vertical compression of Bebas Neue gives the headings the look of broadcast title cards -- bold, unapologetic, instantly legible at any distance. This typeface at 2% frequency is dramatically underused in the portfolio.
- **Body / Explanatory Text:** "Space Grotesk" (Google Fonts) -- a proportional sans-serif with a technical, slightly geometric character that bridges the gap between humanist warmth and engineering precision. Used at 1rem-1.15rem for body copy, 0.9rem for secondary annotations. Weight: 300 for body text (light, airy, easy to read in long passages), 500 for emphasis within body. Letter-spacing: +0.01em. Line-height: 1.75 (generous, textbook-like spacing that invites careful reading).
- **Captions / Technical Annotations:** "IBM Plex Mono" (Google Fonts) -- a monospace typeface with the authority of a mainframe terminal but the refinement of contemporary type design. Used at 0.8rem-0.85rem for figure captions, code-style annotations, and the progress indicator labels. Weight: 400. Letter-spacing: 0 (monospace handles its own spacing). Line-height: 1.5. Text color: always at 60% opacity of the section's primary text color, creating a clear visual hierarchy between instructional content and supplementary notation.
**Palette:**
The palette is **muted** -- deliberately desaturated, as if every color has been photographed through a vintage lens with a slight haze filter. This restraint in saturation allows the holographic accents to sing by contrast.
| Role | Name | Hex | Usage |
|------|------|-----|-------|
| Background Primary | Aged Linen | #E8E0D4 | Main section backgrounds, the warm off-white of old projection screens |
| Background Secondary | Darkroom Slate | #2A2A32 | Alternate section backgrounds, creating light/dark alternation like lecture slides |
| Text Primary (on light) | Broadcast Charcoal | #3A3632 | Body text on light backgrounds, warm enough to avoid clinical coldness |
| Text Primary (on dark) | Signal Cream | #D8D0C4 | Body text on dark backgrounds, the color of aged paper under warm light |
| Holographic Accent 1 | Diffraction Rose | #C4788A | Primary iridescent accent, the pink-red band of a holographic spectrum |
| Holographic Accent 2 | Prism Teal | #6AA8A0 | Secondary iridescent accent, the cool complement to Diffraction Rose |
| Holographic Accent 3 | Sodium Vapor | #C8B468 | Tertiary accent, the warm yellow of laboratory lighting |
| Caption Strip | Notebook Gray | #B8B0A4 | Background for caption zones, slightly darker than Aged Linen |
| Grid Lines | Ghost Grid | #C8B8A8 | The visible alignment grid, at 6% opacity |
The holographic effect is achieved not through saturation but through **animated hue-shifting gradients** on accent elements: borders, markers, and decorative lines cycle through the three holographic accent colors (Diffraction Rose to Prism Teal to Sodium Vapor and back) over a 12-second CSS animation loop. The muted base palette ensures these gentle color shifts feel luminous without becoming garish.
## Imagery and Motifs
**Vintage Photography as Primary Imagery Mode:**
All photographic elements use the visual language of **vintage photography** -- specifically the look of 1970s-80s technical documentation photography. Images are presented with:
1. **Desaturated Color Treatment:** Every photograph is processed through CSS `filter: saturate(0.6) contrast(1.1) sepia(0.08)` to achieve the slightly faded, warm-shifted look of Kodachrome slides that have aged in a filing cabinet for decades. Colors are recognizable but softened, as if remembered rather than seen.
2. **Film Border Framing:** Each photograph is wrapped in a border treatment that mimics a film slide mount -- a 4px border of #3A3632 at 40% opacity, with small registration marks (tiny crosshair shapes, 6px) at each corner. This frames every image as a "specimen" in the tutorial's visual argument.
3. **Caption Integration:** Every photograph has a mandatory caption beneath it in IBM Plex Mono, formatted as "Fig. XX — [description]" in the Caption Strip zone. No image exists without explanation; this is a tutorial, and every visual element earns its place by teaching something.
**Particle Effects as Holographic Atmosphere:**
The secondary visual layer consists of **particle effects** that simulate holographic light scatter:
- **Prismatic Dust:** Tiny particles (2-4px circles) drift slowly across the viewport in random paths, each one a different holographic accent color at 20-35% opacity. They move at 0.3-0.8px per frame, creating the impression of light refracting through a dusty optics lab. Approximately 30-50 particles are active at any time, generated via a lightweight Canvas element layered behind the content.
- **Interference Fringes:** On dark-background sections, thin horizontal lines (1px, holographic gradient, 8% opacity) appear at irregular vertical intervals, slowly drifting upward at 0.1px per frame. These evoke the interference patterns visible in holographic film when viewed at oblique angles -- a subtle, hypnotic background texture.
- **Diffraction Flare on Scroll:** When scrolling, a brief radial gradient "flare" (200px diameter, centered on the scroll position, Diffraction Rose to transparent, 15% opacity) appears and fades over 400ms. This simulates the momentary prismatic flash you see when tilting a hologram under light.
**Border Animation as Structural Motif:**
The defining interactive pattern is **border-animate** -- borders on key elements (section containers, image frames, numbered step blocks) are not static but animate their color through the holographic spectrum:
- Section dividers: A full-width 2px line between sections animates from Diffraction Rose through Prism Teal to Sodium Vapor over 8 seconds, using `background: linear-gradient(90deg, ...)` with `background-size: 300% 100%` and a CSS animation shifting `background-position`.
- Image frames: The 4px border around photographs cycles through the same three colors but offset by 3 seconds, so image borders and section dividers are never showing the same color simultaneously.
- Step number underlines: Each Bebas Neue step number sits above a 3px underline that animates identically to section dividers, creating visual continuity between the numbering system and the structural divisions.
## Prompts for Implementation
**Full-Screen Narrative Tutorial Experience:**
The site opens to a full-bleed viewport of Aged Linen (#E8E0D4). The holographic progress bar at the top begins as a thin empty line. In the center of the screen, the domain name "ppzz.lu" appears in Bebas Neue at 8rem, with each letter arriving via a staggered fade-in (150ms delay between letters, 600ms fade duration each). Beneath the name, a single line of IBM Plex Mono at 0.85rem reads a subtitle, its characters appearing one by one in a typewriter cadence (30ms per character). The prismatic dust particles begin their drift immediately on page load, giving the static page a sense of living atmosphere.
**Section Transition Choreography:**
As the user scrolls past each section boundary, the following sequence executes over 800ms:
1. The outgoing section's content fades to 30% opacity (200ms ease-out)
2. The animated border divider between sections brightens from 40% to 100% opacity and expands from 2px to 4px height (300ms ease)
3. The incoming section's step number slides in from 40px below its final position while fading from 0% to 100% opacity (400ms spring easing)
4. The incoming section's body content follows 200ms later with the same slide-up motion
5. The diffraction flare effect fires at the section boundary point
6. The progress bar at the top updates its width with a smooth 300ms transition
**Border Animation Implementation:**
All animated borders use the same core CSS pattern for visual consistency:
```
background: linear-gradient(90deg, #C4788A, #6AA8A0, #C8B468, #C4788A);
background-size: 300% 100%;
animation: holographic-shift 8s linear infinite;
```
The `@keyframes holographic-shift` moves `background-position` from `0% 50%` to `100% 50%`. Different elements apply different animation delays and durations to prevent visual lockstep while maintaining palette unity.
**Vintage Photo Treatment:**
All `![]()
` elements receive the CSS filter stack: `filter: saturate(0.6) contrast(1.1) sepia(0.08);` with a `transition: filter 0.4s ease` that shifts to `saturate(0.85) contrast(1.15) sepia(0)` on hover, allowing the user to "restore" the photograph to slightly more vivid color by interacting with it. This subtle interaction reinforces the vintage-to-present temporal narrative.
**Particle System (Lightweight Canvas):**
A `