# Design Language for ppzz.ee ## Aesthetics and Tone ppzz.ee is a **celestial shrine for the still moment** — the visual language of a fairycore altar assembled at 3am by someone who collects pressed stars, silver ink, and the particular silence that lives between one thought and the next. The aesthetic occupies the precise overlap of **fairycore softness** and **zen-contemplative restraint**: not the frilly, overflowing meadow variant of fairycore, but its quieter, more esoteric twin — moonlight through gauze, a single candle, ink wash on vellum. The tone is **unhurried and interior**. There is no call to action. There is no urgency. The visitor arrives, pauses, and something inside them slows down. ppzz.ee presents itself as a meditative artifact — a digital zine that exists mostly to be looked at, to be felt, not to be used. The emotional temperature is cool-silver-lavender: not cold, but clear. Visual inspiration: the negative space in a Japanese folding screen, silver-gilt illuminated manuscript margins, the trail a finger leaves in condensation on a winter window, old astronomical charts where stars have names like prayers. The color system is a strict **duotone** — two anchor tones and their blended midpoints, with no warm colors permitted. Deep astral violet (`#1a0d2e`) and silver-fog white (`#e8e4f0`) are the twin poles. Everything between is a gradient of lavender, pale lilac, and mercury. A single accent — fine-line gold (`#c9b78a`) — appears only for celestial symbol strokes and is never used as fill. ## Layout Motifs and Structure The layout is **broken-grid as sacred geometry** — not as aggressive asymmetry or brutalist disruption, but as a deliberate departure from the tyranny of alignment, the way brushstrokes in sumi-e deliberately miss the grid they imply. **Global composition principle:** Three-column implicit grid (33 / 33 / 33) that every section partially ignores. Text blocks drift left by 12vw, icons float at unexpected coordinates anchored by `position: absolute` with `clamp()`-driven offsets, section dividers are diagonal SVG lines at 7–11 degrees rather than horizontal rules. **Section structure (single vertical scroll, no anchor nav):** **Zone 1 — The Arrival (100vh):** Full-viewport silence. Dead center: the wordmark `ppzz` in Cormorant Garamond weight 300, letter-spacing 0.35em, 7.2rem, color `#e8e4f0`. Below it, a single em-dash, then a 2-line koan-like phrase in 0.9rem weight 300 italic, color `#9b8fbf`. Around it, floating at slow drift: 7–9 SVG star glyphs (☆ variants) placed at irrational coordinates — never in a circle, never in a line. They breathe at 0.6x different speeds via independent `animation-duration` values (11s, 17s, 23s — prime numbers for aperiodic drift). **Zone 2 — The Icon Field (auto height):** A broken-grid arrangement of 12–16 hand-crafted SVG celestial icons (described below in Imagery), each placed on a 7-column × 4-row implicit grid but offset by `translateX(--drift)` and `translateY(--float)` CSS custom properties that vary per icon. Icons have tooltip-like captions in mono text that appear on hover via `underline-draw` animation. No prose here — only icons, their names, and silence. **Zone 3 — The Contemplation Passage (auto height):** Long-form text in two irregular columns that share a gutter of 8vw. The left column is wider (55%) and holds the main prose. The right column (30%) holds marginalia: short fragments, single lines of italic serif, dates, star coordinates in the style of `α Lyr 18h 36m`. Text blocks are vertically offset — the right column begins 140px lower than the left. A thin diagonal SVG line (stroke `#9b8fbf`, opacity 0.3, weight 0.5px) crosses the zone from bottom-left to upper-right at 9 degrees. **Zone 4 — The Closing Symbol (60vh):** A single large SVG celestial mandala (28vw diameter) centered in the viewport. Around it, in a slow 40-second rotation (CSS `animation: rotate linear infinite`), a ring of 12 tiny SVG star-points at `r=14vw`. Below the mandala, the domain in letter-spaced caps at 0.8rem, weight 200. ## Typography and Palette **Typography (Google Fonts only — classical serif throughout, broken by a single mono accent):** - **Primary display — `Cormorant Garamond`** (variable, wght 300–700): The foundational voice of the site. Used for the wordmark at weight 300, size `clamp(4rem, 9vw, 7.2rem)`, letter-spacing `0.35em`. Also used for all section headings at weight 400, `clamp(1.6rem, 3.2vw, 2.8rem)`. The classical proportion of Cormorant creates gravitas without heaviness — its long descenders mirror the trailing tails of calligraphy brushstrokes. - **Body running text — `EB Garamond`** (variable, wght 400–500): For all prose passages. Size `clamp(1rem, 1.15vw, 1.15rem)`, line-height 1.85, color `#c4bdd8`. EB Garamond's slightly rougher texture compared to Cormorant creates a subtle dual-serif system where display and body feel like different manuscripts from the same scriptorium. - **Monospace accent — `JetBrains Mono`** (wght 300): Used ONLY for icon captions, star coordinates, and metadata fragments. Size `0.72rem`, letter-spacing `0.12em`, color `#9b8fbf`. This is the single typographic disruption — a reminder that the shrine lives on a machine. **Palette (strict duotone + gold thread):** - `#1a0d2e` — Astral Void (background, deepest darks) - `#e8e4f0` — Silver Fog (primary text, wordmark) - `#9b8fbf` — Lavender Dusk (secondary text, captions, icon strokes at default state) - `#c4bdd8` — Pale Mercury (body prose, slightly warmer than Silver Fog) - `#2e1a4a` — Midnight Violet (section backgrounds, alternating zones) - `#c9b78a` — Celestial Gold Thread (star glyph strokes only — never fill, never background) - `#3d2e5e` — Deep Indigo (hover states, subtle card backgrounds) All colors strictly violet-silver-indigo family. No warm hues in body elements. The gold is a hairline accent only. ## Imagery and Motifs **No photography. No raster images. No gradients used as decorative fills.** All visual matter is drawn from two motif families: **1. Celestial Icons (the dominant visual language — icon-heavy).** 12–16 unique SVG icons, each approximately 64×64px at base size, drawn in single-stroke style with `stroke-width: 1` and no fill (transparent interiors). The icon vocabulary: - `☽` — Crescent with a thin inner arc (two concentric curves, open left) - `✦` — Four-pointed star with long vertical axis, short horizontal axis - `⊕` — Circle with crosshairs (astronomical symbol for Earth/center) - `⌖` — Target/scope reticle (four L-shaped corners around a center dot) - `◈` — Diamond within diamond, rotated 45°, with four small corner marks - `⟡` — Elongated hexagon with a center vertical line - `∞` — Lemniscate drawn as a continuous single SVG path - `⏾` — Half-moon phase symbol (circle, filled half) - `△` — Equilateral triangle with interior meditation line at 1/3 height - `⌇` — Vertical wavy line (breath, signal) - `☽✦` — Combined crescent + four-point star (compound glyph) - `⊗` — Circle with X (excluded, the void) Each icon has a `data-name` attribute used by the hover tooltip system. On hover: the icon stroke transitions from `#9b8fbf` to `#c9b78a` (Celestial Gold Thread) over 0.4s, and a caption label appears below via `underline-draw` — a fine line extends left-to-right beneath the mono-text caption (SVG `stroke-dasharray / stroke-dashoffset` animation, 0.5s ease-out). **2. Star-Celestial Background Motifs.** Behind Zone 1 and Zone 4: a field of tiny SVG dots (`r=1px`, color `#c9b78a`, opacity 0.25–0.6) placed at pseudo-random coordinates using a seeded distribution — approximately 140 points across the full viewport. They are not animated individually; they exist as a static sky. Overlaid on the star field: 2–3 invisible SVG constellation lines (thin dashes, `stroke-dasharray: 3 8`, opacity 0.15) connecting nearby stars — present but unobtrusive, only visible on close inspection. **Forbidden:** stock photos, emoji, flat color fills for icons, rounded-rectangle cards, any warm color imagery. ## Prompts for Implementation Build ppzz.ee as **a celestial meditation object** — a single scrollable page that behaves like entering a quiet room where someone has arranged star-charts and silence. The visitor is not a user; they are a contemplator. There is nothing to do here except look and feel. **Implementation mandates:** **1. The Arrival Zone (`#zone-arrival`):** - `background: #1a0d2e`, full 100vh, no overflow - Star-field: 140 SVG circles, `r=1`, coordinates generated via a simple seeded LCG in inline `