# Design Language for pzz.lu ## Aesthetics and Tone pzz.lu is a deliberate act of visual sabotage -- an anti-design portfolio that treats the conventions of web design as a piñata to be beaten open. The spirit is that of a zine printed on a broken Risograph in a squat in Luxembourg City, stapled together by someone who studied at Cranbrook but quit because the curriculum was too polite. Every element that "should" be aligned is nudged 3-7 degrees off-axis. Every color that "should" harmonize instead argues with its neighbor like mismatched socks worn on purpose. The tone is playful in the way a cat is playful -- calculated mischief disguised as casual indifference. The primary inspiration is the work of David Carson's "Ray Gun" magazine era, the deliberately ugly interfaces of early Craigslist, and the confrontational graphic design of the Emigre type foundry in the 1990s. But pzz.lu is not nostalgic -- it treats anti-design as a living language, not a historical reference. The ugliness is precise. The chaos is choreographed. Every "mistake" is a decision. The emotional register lands between sardonic wink and enthusiastic high-five. This is a portfolio that does not take itself seriously but takes its craft extremely seriously. The domain name itself -- pzz.lu -- suggests pizza, puzzles, something abbreviated and playful, a domain hack that treats the Luxembourg TLD as punctuation rather than geography. ## Layout Motifs and Structure The layout is a **portfolio-grid** that actively resists the tidiness grids usually impose. The underlying structure is a 12-column CSS grid, but items are placed with deliberate overlap, misalignment, and z-index collisions that create a sense of **layered depth** -- cards stacking on top of each other like polaroids thrown onto a table. **Grid Disruption System:** - The base grid uses `grid-template-columns: repeat(12, 1fr)` with a 4px gap (intentionally too small, creating claustrophobic tension) - Portfolio items span irregular column ranges: some occupy columns 1-5, others 4-9, others 8-12, creating intentional overlap zones - Each grid item has a random rotation between -4deg and +4deg applied via CSS custom properties (`--rot: -2.3deg`), set per-item as inline styles - Items use `z-index` values that deliberately break expected stacking: the "least important" item sits on top, the hero piece is partially buried beneath two smaller cards - No item is perfectly aligned to the grid edges -- every item has a `translate()` offset of 5-15px in a seemingly random direction **Depth Architecture:** - Three distinct visual planes: background (solid color fields), mid-ground (the grid cards), and foreground (floating label elements and UI debris) - Background consists of large, hard-edged rectangular color blocks placed at slight angles, like a Mondrian painting that got bumped during installation - Foreground layer contains floating text labels, asterisks, arrows, and bracket characters positioned with `position: fixed` so they remain as persistent visual noise during scroll - The scroll behavior is NOT parallax (deliberately avoided) -- instead, scroll triggers discrete state changes: items snap between rotations, colors invert in blocks, cards flip to reveal back faces **Navigation:** - No traditional nav bar. Instead, a cluster of overlapping text links in the top-left corner, each link rotated at different angles, forming a visual tangle that resolves when you hover individual items (hover straightens the hovered link to 0deg while pushing siblings further askew) - A single oversized "?" character in the bottom-right corner, fixed-position, that when clicked expands into a full-screen overlay with site information ## Typography and Palette **Typography:** - **Headlines / Display:** "Bebas Neue" (Google Fonts) -- the quintessential anti-design headline face. Used EXCLUSIVELY in uppercase at sizes ranging from 4rem to 12rem. Weight: 400 (the only weight Bebas Neue offers, and that limitation is part of the point). Letter-spacing: -0.03em (tighter than default, creating dense headline blocks). Line-height: 0.85 (lines crash into each other deliberately). Headlines are sometimes set vertically using `writing-mode: vertical-rl`, sometimes upside-down via `transform: rotate(180deg)`, sometimes with individual characters at different sizes to create typographic rhythm. - **Body / Secondary:** "Work Sans" (Google Fonts) -- a clean geometric sans-serif that provides readability contrast against the chaos of the headlines. Weight: 300 (Light) for body text, 600 (SemiBold) for emphasis and labels. Size: 0.9rem for body, 0.75rem for captions. Letter-spacing: +0.01em. Line-height: 1.55. Set in sentence case, never uppercase (the exclusivity of uppercase belongs to Bebas Neue alone). - **Accent / Labels:** "Courier Prime" (Google Fonts) -- a monospaced face used sparingly for category labels, dates, and metadata. Deployed at 0.7rem in uppercase with letter-spacing: +0.15em, creating the look of rubber-stamped classification marks. Color always contrasts against its background with maximum tension (e.g., bright yellow on dark gray). **Palette:** The palette is deliberately muted but internally discordant -- colors that individually read as quiet but together create low-frequency visual friction: | Role | Color | Hex | |------|-------|-----| | Background Primary | Dirty Concrete | #b8b4a8 | | Background Secondary | Smoked Plaster | #d4cfc3 | | Text Primary | Almost Black | #1c1c1e | | Text Secondary | Warm Graphite | #4a4843 | | Accent 1 | Mustard Bruise | #c9a832 | | Accent 2 | Faded Brick | #a0523c | | Card Back | Slate Blue Fog | #6b7b8d | | Highlight | Off-White Cream | #f0ebe0 | The palette avoids warmth as a dominant register. These are the colors of a concrete building at 4pm on an overcast day in November -- not inviting, not hostile, just present. The two accents (mustard and brick) function as interruptions rather than harmonizers, appearing in small doses on labels, underlines, and card-flip reverse faces to create punctuation marks of color in an otherwise desaturated field. ## Imagery and Motifs **Anti-Imagery Approach:** pzz.lu treats imagery with hostility. There are no hero images, no photography, no illustrations in the conventional sense. Instead, visual interest comes from: 1. **Typographic Compositions as Image:** Each portfolio card's "thumbnail" is a typographic lockup -- the project title set in Bebas Neue at extreme sizes, cropped, rotated, and color-inverted to create abstract compositions that read as images from a distance but resolve as text up close. These lockups use CSS `clip-path` with polygon values to create non-rectangular crops (parallelograms, trapezoids, chevrons). 2. **CSS-Only Texture Marks:** Small decorative elements generated purely through CSS: hash marks (repeating-linear-gradient at 45deg, 1px lines), dot grids (radial-gradient patterns at 4px intervals), and diagonal stripe fields. These appear as background textures on cards, overlays, and the floating foreground elements. 3. **Bracket and Symbol Motifs:** The characters `[ ]`, `{ }`, `*`, `→`, `↗`, and `//` are used as decorative motifs throughout the site. They appear as oversized background elements (at 20-40rem, opacity 0.04-0.08), as functional labels, and as hover-state indicators. The double-slash `//` serves as pzz.lu's unofficial mark, appearing consistently as a prefix to section labels. 4. **Layered Depth through Box-Shadow Stacking:** Cards achieve their sense of physical depth through aggressive box-shadow use: each card carries 3-4 layered shadows with different offsets and colors, creating the illusion of a physical card hovering above a surface. Shadow colors are not neutral -- they use muted versions of the accent palette (#c9a83240 for mustard-tinted shadows, #a0523c30 for brick-tinted shadows), reinforcing the layered-depth motif. 5. **Redaction Bars:** Random sections of body text have CSS-generated redaction bars (solid background-color rectangles behind text using `box-decoration-break: clone` and `background: #1c1c1e` with `color: #1c1c1e`), creating the appearance of censored documents. On hover, redaction lifts to reveal the text beneath. ## Prompts for Implementation **Full-Screen Narrative Entry:** The site loads to a full-viewport screen of Dirty Concrete (#b8b4a8). In the center, the text "PZZ.LU" appears in Bebas Neue at 15vw, letter-spacing -0.05em, colored Almost Black (#1c1c1e). The text is initially rotated -3deg. After a 400ms delay, each letter individually animates to a different rotation (P: -5deg, Z: +2deg, Z: -1deg, .: +8deg, L: -3deg, U: +4deg) over 600ms with a CSS `cubic-bezier(0.34, 1.56, 0.64, 1)` easing -- the letters splay apart like a dropped hand of cards. Below, a Work Sans Light line reads "// portfolio of controlled accidents" at 1rem, fading in from opacity 0 after 1.2 seconds. **Card-Flip Portfolio Interaction:** Each portfolio item is a card with a front face (typographic lockup composition) and a back face (project description in Work Sans with Courier Prime metadata labels). The flip is triggered on click (not hover -- hover causes a subtle 5deg tilt via CSS `perspective(800px) rotateY(5deg)` and a box-shadow shift). The flip animation uses `transform: rotateY(180deg)` over 500ms with `ease-in-out`. The back face has a different background color (Slate Blue Fog #6b7b8d) and text in Off-White Cream (#f0ebe0), creating a stark tonal shift that reinforces the sense of discovering something hidden. **Scroll-State Inversions (NOT scroll-triggered animations):** Rather than smooth scroll-triggered parallax or fade effects, pzz.lu uses `IntersectionObserver` to detect when grid sections cross the viewport center and triggers instant state changes: background color blocks swap (Dirty Concrete becomes Smoked Plaster and vice versa), card rotations snap to new values, and the floating foreground symbols shuffle positions. These changes happen at `transition: none` -- they are abrupt, binary, anti-smooth. The effect is of flipping through pages of a physical portfolio book rather than scrolling a continuous surface. **Hover Microinteractions:** - Navigation links: hovered link snaps to `rotate(0deg)` while siblings add +/- 3deg to their existing rotations - Cards: tilt toward cursor position using `perspective(800px)` and `rotateX/rotateY` based on mouse position within the card, calculated via JavaScript mousemove event - The "?" button: pulses scale from 1.0 to 1.15 on a 2-second CSS animation loop; on hover, stops pulsing and inverts colors (background becomes Almost Black, text becomes Mustard Bruise) - Redaction bars: on hover, the redacted text fades in over 300ms using `color: transparent` transitioning to `color: #f0ebe0` **AVOID:** - CTA buttons of any kind -- there are no "hire me" or "get in touch" buttons; contact information exists only as a line of Courier Prime text in the ? overlay - Pricing blocks, feature lists, stat-grids, testimonial carousels - Smooth scroll animations, parallax effects, or any scroll-linked opacity/position changes - Hamburger menus, sticky headers, footer link columns - Photography or illustration -- all visual content is typographic and CSS-generated ## Uniqueness Notes **Differentiators from other designs:** 1. **Anti-Design as Method, Not Aesthetic Veneer:** While other designs in the portfolio may use broken grids or asymmetric layouts as decorative choices, pzz.lu treats anti-design as a systematic methodology. Every conventional web design pattern (centered layout, smooth transitions, harmonious color) is identified and deliberately subverted. The grid overlaps itself. The transitions are instant rather than eased. The colors argue rather than agree. This is not ugliness for shock value -- it is a rigorous critique of design conventions expressed through design itself. 2. **Card-Flip as Primary Navigation Metaphor:** No other design uses the card-flip pattern as its central interaction model. Here, the entire portfolio experience is built around revealing hidden information through physical card metaphor. The front face is abstract (typographic compositions), the back face is informational (project details). This creates a tactile, discovery-driven browsing experience where every click is an act of uncovering rather than navigating. 3. **Typographic-Only Visual System:** Where 95% of designs in the portfolio rely on "minimal" imagery (which often still implies some photographic or illustrative content), pzz.lu achieves its entire visual identity through typography alone. Bebas Neue headlines cropped and rotated into abstract compositions serve as the portfolio thumbnails. No images are loaded. No SVGs beyond basic symbols. The visual richness comes entirely from letterforms, CSS textures, and shadow depth. 4. **Binary State Changes Instead of Smooth Transitions:** The deliberate rejection of smooth scroll-triggered animations (96% frequency) in favor of abrupt, IntersectionObserver-driven state snaps creates a radically different scrolling experience. Where every other site eases elements in and out, pzz.lu flips states like a switch. This creates a staccato rhythm that matches the anti-design ethos and stands in stark contrast to the fluid motion of every other design. 5. **Foreground Visual Debris Layer:** The fixed-position floating symbols (`//`, `*`, `→`, `[ ]`) that persist through scrolling create a layer of visual noise unique in the portfolio. This "UI debris" functions as both decoration and branding (the `//` prefix becomes a recognizable mark), adding a dimension of layered depth that exists above the content rather than behind it. **Chosen Seed:** aesthetic: anti-design, layout: portfolio-grid, typography: bebas-bold, palette: muted, patterns: card-flip, imagery: minimal, motifs: layered-depth, tone: playful **Avoided Overused Patterns:** scroll-triggered animations (96%), parallax (75%), centered layout (99%), warm palette (100%), mono typography (99%), friendly tone (98%), vintage motifs (87%), stagger animations (60%), photography imagery (72%), gradient palette (89%)