# Design Language for ppzz.ee ## Aesthetics and Tone ppzz.ee is a digital wall -- a concrete overpass at 3 AM where someone has been layering aerosol paint for decades, where each new tag doesn't erase the old one but builds on top of it, creating a geological stratigraphy of color and intention. The aesthetic is **graffiti as architecture**: not the curated "street art" of gallery walls, but the raw, territorial, evolving palimpsest of actual urban writing culture. Every element on the page exists at a specific depth in a stack of visual layers, as if the user is peeling back strata of spray-painted concrete. The tone is **futuristic-cutting-edge** -- not the polished chrome futurism of corporate keynotes, but the grassroots futurism of underground crews who tag server farms and wheatpaste QR codes onto construction barriers. It's the future as imagined by people who actually live in cities: messy, stratified, competitive, and deeply human despite its technological substrate. The domain name "ppzz.ee" itself reads like a tag -- compressed, vowel-stripped, coded -- and the design leans into that cryptographic energy. The mood borrows from the visual language of bombing culture (large-scale illegal graffiti), where speed, coverage, and layering matter more than precision. But the execution is deliberate: every drip, every overlap, every z-index decision is intentional. The site should feel like it was built by someone who understands both `position: absolute` and the physics of a Krylon can at arm's length. ## Layout Motifs and Structure The layout is built on the principle of **layered-depth** -- a z-axis composition where content exists on multiple visual planes that the user navigates through. This is not a flat page with sections stacked vertically; it is a dimensional space where elements overlap, occlude, and reveal each other as the user scrolls. **Primary Architecture:** - The viewport is divided into three persistent depth layers, managed via CSS `z-index` and `position: fixed/sticky` combinations: - **Background Layer (z: 0-10):** A slowly shifting monochrome concrete texture that serves as the "wall." This layer is fixed and only subtly transforms (slight parallax drift at 0.15x scroll speed). It uses a repeating SVG noise pattern tinted in dark grays (#1A1A1A to #2B2B2B). - **Mid Layer (z: 20-50):** The primary content plane. Text blocks, icon clusters, and informational elements live here. They are positioned with intentional asymmetry -- no two content blocks share the same left offset. Blocks use `transform: rotate()` at subtle angles (-2deg to 3deg), mimicking the slight tilt of hastily applied stencils and tags. - **Foreground Layer (z: 60-90):** Decorative graffiti elements -- drip SVGs, tag letterforms, spray-fade gradients -- that partially obscure the mid layer content. These elements scroll at 1.3x speed (reverse parallax), creating a sensation of the user moving between layers of paint. - Content blocks are never contained in symmetrical grids. Instead, they use a **broken offset system**: each block is positioned using `calc()` values that reference viewport width with deliberate remainders (e.g., `left: calc(13vw + 2rem)`, `left: calc(47vw - 1rem)`). This produces a scattered, tag-like distribution across the wall. - **No traditional navigation.** Instead, a cluster of icon glyphs in the upper-right corner (fixed position, z: 95) serves as a compressed nav. Each glyph is a custom SVG symbol -- circle, triangle, cross, zigzag -- that expands on hover to reveal a text label. The nav itself looks like a small collection of crew marks or hobo signs. - **Vertical rhythm** is deliberately irregular. Sections are separated by varying amounts of empty wall space (8vh to 25vh), and some sections overlap their predecessors by negative margins (-5vh to -12vh), creating the layered-depth effect where new content is literally painted over old content. ## Typography and Palette **Typography:** - **Display / Headlines:** "Rubik Spray Paint" (Google Fonts) -- a display typeface that directly references aerosol lettering. Its rough edges and uneven weight distribution capture the speed and pressure variation of actual spray painting. Used at 4rem-8rem via `clamp(3rem, 7vw + 0.5rem, 8rem)` for primary headings. Applied with `letter-spacing: -0.04em` to compress the letters like a tight tag. No text-transform -- mixed case is used as the tagger wrote it. - **Secondary / Subheadings:** "Archivo Black" (Google Fonts) -- a heavy, condensed grotesque that reads like stencil block letters at distance. Used at 1.5rem-2.5rem for section titles and callouts. Weight 400 (its only weight). Applied with `text-transform: uppercase` and `letter-spacing: 0.12em` to mimic stencil-cut spacing. Occasionally rotated 90 degrees and positioned vertically along the left edge of content blocks, like orientation markers on shipping crates. - **Body / Reading Text:** "Space Grotesk" (Google Fonts) at weights 300-500. A geometric sans-serif with enough personality in its letterforms (the distinctive "G", the squared "e") to avoid sterility while remaining legible at body sizes. Used at 1rem-1.15rem with `line-height: 1.65` and `letter-spacing: 0.01em`. Color alternates between #E0E0E0 (on dark backgrounds) and #1A1A1A (on light sections). - **Monospace Accent:** "Space Mono" (Google Fonts) at 0.85rem for metadata, coordinates, timestamps, and small labels. Used sparingly -- only where the content references something technical or coded. Applied with `opacity: 0.7` to push it visually behind the primary text layers. **Expressive Variable Treatment:** Headlines using Rubik Spray Paint are further manipulated through CSS custom properties and `font-variation-settings` on fallback variable fonts. But the key expressive technique is **layered text shadows**: each headline is rendered three times at slightly offset positions (1px, -1px) in different shades of gray, creating a registration-error effect like a misaligned silkscreen or a tag where the painter's hand shifted mid-stroke. **Palette (Monochrome):** The entire site operates within a strict monochrome palette -- no hue, only value. This is a deliberate constraint that references both the black-and-white photography tradition of documenting graffiti culture and the raw material reality of black spray paint on gray concrete. - `#0D0D0D` — **Void Black**: deepest background, used for sections that recede maximally - `#1A1A1A` — **Asphalt**: primary background tone, the base wall color - `#2B2B2B` — **Wet Concrete**: secondary background, used for slightly elevated surfaces - `#4A4A4A` — **Graphite**: mid-tone for borders, dividers, and shadow elements - `#7A7A7A` — **Primer Gray**: used for secondary text, metadata, and de-emphasized elements - `#B0B0B0` — **Dust**: light mid-tone for hover states and subtle highlights - `#E0E0E0` — **Chalk White**: primary text color on dark backgrounds - `#F5F5F5` — **Flash White**: used only for maximum-emphasis elements -- the "fresh paint" layer that sits visually closest to the viewer. Reserved for hero text, active nav glyphs, and the single accent stroke on key icons. **Gradient usage:** Linear gradients are used only for depth simulation -- `linear-gradient(to bottom, #0D0D0D 0%, #1A1A1A 40%, #2B2B2B 100%)` on the background layer to create a sense of overhead lighting falling on a wall. Radial gradients at low opacity (0.05-0.15) simulate the spray-fade of aerosol paint around icon elements. ## Imagery and Motifs **Icon-Heavy Visual System:** The primary imagery mode is **icon-heavy** -- the site communicates through a dense vocabulary of custom SVG icons and glyphs rather than photographs or illustrations. Each icon is designed to evoke the symbolic shorthand of graffiti culture: crowns, arrows, eyes, lightning bolts, dripping letters, crossed-out circles, and abstract geometric marks that function as territory markers. Specific icon treatments: 1. **Crew Marks / Navigation Glyphs:** A set of 6-8 abstract symbols that serve as both decorative elements and functional navigation. Each is a single-path SVG rendered in #E0E0E0 with a `stroke-width: 2` and no fill, giving them the appearance of scratched-in etchings on glass or quick marker strokes on a wall. On hover, they fill with #F5F5F5 and a radial gradient halo appears behind them (10% opacity, #7A7A7A), simulating the spray-bleed around a stencil. 2. **Section Markers:** Each content section is preceded by a large (120px-180px) icon that functions as a chapter marker. These are more elaborate than the nav glyphs -- multi-path SVGs with layered strokes at different opacities, creating the illusion that the icon was drawn multiple times in the same spot (the way a graffiti writer retraces their lines for coverage). Icons include: a fragmented globe (for "world/scope"), a stacked chevron (for "layers/depth"), a signal wave (for "broadcast/reach"), and a keyhole-eye hybrid (for "access/vision"). 3. **Drip Elements:** Vertical SVG paths that originate from text baselines and icon edges, extending downward 30-80px with tapered stroke-width (from 3px to 0.5px), simulating paint drips. These are positioned at `z-index: 70` (foreground layer) so they appear to drip over content below them. Color: #4A4A4A at 60% opacity, so they read as shadows rather than foreground elements. 4. **Noise Overlays:** A full-viewport SVG `` element applies a subtle `feTurbulence` grain to the entire page at very low intensity (`baseFrequency: 0.65`, `numOctaves: 4`, blended at 8% opacity). This adds the concrete-texture grain that unifies all visual layers and prevents the monochrome palette from feeling too digital or clean. **Layered-Depth Motifs:** The layered-depth motif is expressed through consistent visual cues: - Elements at different z-depths receive different amounts of the noise filter (background: heavy grain, foreground: minimal grain), simulating depth-of-field - Drop shadows use enormous spread values (`box-shadow: 0 0 60px rgba(0,0,0,0.4)`) on foreground elements, while background elements cast no shadow - Content blocks occasionally feature a torn-edge top border (an SVG `clip-path` with irregular vertices) that reveals the layer beneath, like peeling paint exposing old tags ## Prompts for Implementation **Full-Screen Narrative Entry:** The site opens to a full-viewport void (#0D0D0D) that holds for 300ms, then the concrete noise texture fades in over 800ms on the background layer. After the texture stabilizes, the domain "ppzz.ee" is rendered in Rubik Spray Paint at `clamp(5rem, 10vw, 8rem)` with the triple-offset shadow technique, fading in from `opacity: 0` over 600ms. The text appears at approximately 40% from top, offset 15vw from the left -- never centered. Below it, a single line in Space Grotesk Light (300 weight) at 1rem fades in 400ms later. No buttons, no CTA, no navigation visible yet. The glyph nav cluster fades in at z: 95 after a 1.5s total delay. **Ripple Interaction Pattern:** The primary interaction pattern is **ripple** -- but not the Material Design circle-expand ripple. This is a spray-paint ripple: when the user clicks or taps anywhere on the page, a radial gradient expands from the click point outward to 200px radius, using a monochrome spray-fade (#7A7A7A at center, transparent at edge) that persists for 2 seconds before fading. Maximum 5 concurrent ripples, oldest removed first. Implementation via `pointer` events, creating absolutely-positioned `
` elements with CSS `radial-gradient` and `animation: spray-expand 2s ease-out forwards`. The ripple's z-index is always 55 (between mid and foreground layers), so it interacts with the depth system. **Scroll-Driven Layer Separation:** As the user scrolls, the three depth layers move at different rates: background at 0.15x, mid at 1x, foreground at 1.3x. This is implemented via `transform: translateY()` driven by a scroll event listener (throttled to `requestAnimationFrame`). The effect creates a constant sense of moving through stacked planes of paint. At key scroll thresholds (every ~150vh), a "layer shift" animation triggers: the foreground layer elements undergo a brief `transform: scale(1.02) translateX(5px)` over 400ms, as if a new layer of paint is settling into place. **Icon Hover Micro-Interactions:** Each icon in the section-marker set responds to hover with a three-phase animation: (1) the outermost stroke paths increase `stroke-opacity` from 0.4 to 1.0 over 200ms, (2) the icon scales to 1.05 over 150ms with `transform-origin: center`, (3) a spray-halo radial gradient appears behind the icon and expands to 1.5x the icon's bounding box over 300ms. On mouse-leave, the sequence reverses in 400ms. The spray-halo uses a CSS custom property `--halo-spread` animated via `@keyframes`. **Content Block Reveal:** Content blocks in the mid layer are initially invisible (`opacity: 0; transform: translateY(20px) rotate(-1deg)`). When they enter the viewport (detected via `IntersectionObserver` with `threshold: 0.15`), they animate to final position over 500ms with a custom cubic-bezier easing (`cubic-bezier(0.23, 1.0, 0.32, 1.0)`) that overshoots slightly, mimicking the physical gesture of slapping a sticker onto a wall. Each block staggers its reveal by 100ms relative to the previous block in the same viewport frame. **AVOID:** CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, hero sliders, cookie banners, hamburger menus, stock photography, gradient mesh backgrounds, centered symmetrical compositions. This site has no commerce, no conversion funnel, no trust signals. It is a wall. You either read it or you walk past it. ## Uniqueness Notes **Differentiators from other designs:** 1. **Graffiti Aesthetic as Structural Principle, Not Decoration:** While graffiti appears at only 4% frequency in the portfolio, those instances typically use graffiti as a surface decoration -- a font choice or a background texture. ppzz.ee uses graffiti as the fundamental organizational logic: content is *layered* like paint on a wall, navigation mimics crew marks, and the entire spatial system is based on the z-axis stratigraphy of urban writing. The graffiti isn't on the site; the site *is* graffiti. 2. **Strict Monochrome Without Warmth:** The monochrome palette (11% frequency) is typically deployed with warm undertones or accent colors that soften it. ppzz.ee uses a pure neutral-gray monochrome with zero color temperature -- every value from #0D0D0D to #F5F5F5 sits at exactly 0 saturation. This produces a brutally stark visual field where depth and layering must do all the work that color normally handles. Combined with the graffiti aesthetic, it references the black-and-white documentary photography tradition (Martha Cooper, Henry Chalfant) that canonized subway graffiti culture. 3. **Ripple as Spray-Paint Interaction:** The ripple pattern (7% frequency) is reimagined from the standard Material Design expanding-circle into a spray-paint metaphor -- a radial gradient that mimics aerosol dispersion. This transforms a common UI pattern into something that directly reinforces the site's visual language, making every click feel like leaving a mark on the wall. 4. **Icon-Heavy Communication Without Color Coding:** At 3% frequency, icon-heavy imagery is rare in the portfolio. ppzz.ee pushes it further by using icons as the *primary* visual content rather than supplementary decoration, and does so within a monochrome constraint that eliminates color-coding as a disambiguation tool. Icons must communicate purely through form, scale, stroke weight, and spatial position -- the same constraints faced by actual graffiti symbols. 5. **Reverse Parallax Foreground Layer:** Most parallax implementations move background elements slower than content. ppzz.ee adds a foreground layer that moves *faster* than content (1.3x scroll speed), creating a sandwiching effect where the user perceives themselves as existing between two moving surfaces. This directly expresses the layered-depth motif and has no precedent in the current design portfolio. **Chosen seed/style:** aesthetic: graffiti, layout: layered-depth, typography: expressive-variable, palette: monochrome, patterns: ripple, imagery: icon-heavy, motifs: layered-depth, tone: futuristic-cutting-edge **Avoided overused patterns:** playful aesthetic (95%), centered layout (99%), mono typography (99%), warm palette (100%), scroll-triggered patterns (96%), friendly tone (98%), minimal imagery (95%), vintage motifs (87%). None of these appear in the design seed or execution. The site deliberately opposes the dominant aesthetic cluster by being adversarial rather than welcoming, stratified rather than centered, and monochromatic rather than warm.