# Design Language for PPZZ.lu ## Aesthetics and Tone PPZZ.lu is **a Swiss astronomical bulletin printed in Luxembourg City and pinned to a wall of black felt under a single tungsten lamp** — a publication that does not announce itself, does not invite you in, and does not apologize for being three-quarters empty. The aesthetic is **Swiss/International Style** at its most disciplined: Müller-Brockmann-grade rationalism colliding gently with the **celestial** subject matter of star catalogues, ephemerides, and sky almanacs. Where most "swiss" homages stop at red squares and Helvetica, PPZZ.lu is built on the colder, slower lineage — *Neue Grafik* (Zurich, 1958–65), *TM/Typografische Monatsblätter*, the wall-mounted *Sternkarten* of the Eidgenössische Sternwarte, and the printed observation logs of the late twentieth century when an astronomer still wrote down a magnitude with a sharp pencil. The doubled letters are read as a coordinate system. **`PP`** is the *parallactic pair* — two reference points required to fix a position in space. **`ZZ`** is the *zenith axis* — the doubled vertical that drops straight from a star to the top of the head of the observer. **`.lu`** is the small printed locality stamp at the bottom of every observation card — the tiny capital letters telling you where the eye was when the dot was inked. Together: *two reference points, one vertical, one place* — the four pieces of metadata that turn a flicker into a record. The site behaves like an institution that has been issuing such records, quietly, for several decades, and has no intention of stopping. The tone is **elegant-sophisticated** — but in the very specific Swiss-aristocratic register that has nothing to do with luxury goods. It is the elegance of a long-deliberated typographic decision; the sophistication of a hairline rule placed exactly where the optical center of a baseline grid demands it. It is *cold to the eye, warm to the patient reader*. There is no charm offensive, no cursor sparkle, no welcome message. The brand voice — used only in tiny, highly considered captions — is third person, present tense, never declarative, never promotional. (e.g.: "*Magnitude 6.42 ± 0.04. Atmosphere stable. Observation runs 21:14 to 23:09 UTC.*") The mood is **pre-dawn observatory** — quiet, precise, slightly cold, deeply patient. Nothing is in a hurry. The user is not a customer; the user is a colleague who has walked into the dome at the wrong end of the night. The contrarian move: this is **Swiss design under blur-focus**. The classic Swiss school is razor-sharp at every layer. PPZZ.lu keeps the grid razor-sharp but treats the *imagery* (only the imagery) as if it had been observed through atmosphere — every star, every diagram, every generated field is rendered with deliberate, measured Gaussian softness that resolves to perfect clarity only when the user's pointer comes near. The grid is Zurich; the seeing is *seeing*. Two epistemologies, one wall. ## Layout Motifs and Structure The site is a **modular-blocks** composition, governed by a **strict 12-column Swiss grid** with a baseline-aligned vertical rhythm of **8px** (the document's universal *unit*, from which every padding, line-height, type size, and stroke is derived as an integer multiple). Margins and gutters: outer margin **48px** desktop / **24px** tablet / **16px** mobile; column gutter **24px**. The grid is **never invisible** — three hairline guides (0.5px, color **#2A2D34** at 18% alpha) run vertically down the page at columns 4 / 8 / 12, faintly, all the way through the document. They are not decoration; they are the document's spine, exposed. The page is composed of **eleven discrete modular blocks**, stacked top to bottom. Every block is a rectangle sized in whole columns (never partial: 4-col, 6-col, 8-col, or 12-col) and whole baseline units (so heights are 192px, 320px, 448px, 576px, 704px — multiples of 64). Blocks are placed in an **asymmetric but rigorously rational** layout: a 12-col block, then a 8/4 split, then a 4/8 split, then 6/6, then 12, and so on, so that the eye is led down the page in a measured zig-zag rather than a thoughtless single column. This is the **modular-blocks** seed enforced literally — not loose cards, but typographic *paragraphs in space*. **The eleven blocks (top to bottom):** 1. **Masthead.** 12-col, 192px tall. A single line of metadata at the top: `PPZZ.LU — STAR BULLETIN — VOL. XII — LUXEMBOURG`. Beneath it, the doubled wordmark **PPZZ** at clamp(8rem, 18vw, 16rem), set in Commissioner at weight 200, slightly condensed, with the ZZ printed in the **complementary** orange and the PP in the deep navy. No logo. No nav. The masthead *is* the nav. 2. **Index card** (4/8 split). Left: a vertical table of contents — eleven roman numerals I–XI with one-line block titles, baseline-aligned, set in Commissioner monospace numerals. Right: the day's *Sky-State* — five lines of small caps text reporting fictional but plausible atmospheric data (seeing, transparency, magnitude limit, lunar phase, civil dusk). 3. **Hero observation field** (12-col, 704px tall). A full-width **generative star field** rendered in Canvas/WebGL — see Imagery. This is the only block with image-dominant weight; even here, type runs as a tight caption strip across the bottom. 4. **Star catalogue table** (8/4 split). A long, dense, eight-column table of fictional star designations, RA/Dec, magnitude, spectral class, and observation date. Twelve rows. Right column is empty white space — the famed Swiss "lung." 5. **Diagram block** (6/6 split). Left: a single generated **azimuth/altitude diagram** (concentric circles + radial lines, plus a moving star marker). Right: a 280-word block of body text describing the diagram, set perfectly justified. 6. **Quote block** (12-col, 320px). One pulled sentence from the body — set at clamp(2rem, 5vw, 4rem) Commissioner Italic, breathing in 8 columns, with the remaining 4 columns held intentionally empty. 7. **Twelve-card module** (12-col grid of 3×4 cards). Each card is a small star observation: a 1:1 generated star portrait + four-line caption. 8. **Constellation block** (4/8 split). Left: small constellation diagram. Right: the etymology and observed history of that constellation, in three short paragraphs. 9. **Ephemeris strip** (12-col, 192px). A horizontal scroll of the next thirty days, with one tiny rendered moon icon per day showing its phase and the night's projected magnitude limit. 10. **Colophon** (8/4 split). Left: typographic colophon stating fonts, grid, and the renderer version. Right: a single rendered star at the optical centre of the right block. 11. **Footer** (12-col, 64px). One line, baseline-aligned: `PPZZ.LU / OBSERVATIONS RECORDED IN UTC / GRID 8 PX BASELINE / RENDERED IN BROWSER`. There is **no hero CTA, no pricing, no stat-grid, no testimonial carousel, no signup form.** The user scrolls one page, top to bottom, the way one reads a printed bulletin from masthead to footer. The grid does not break. The grid does not yield. The grid is the argument. ## Typography and Palette **Typefaces (Google Fonts only — three faces, intentionally narrow):** - **Commissioner** (variable: weight 100–900, slant axis, FLAR/VOLM optical axes available) — the **commissioner-versatile** seed taken at full strength. Commissioner is the entire typographic personality of the site. It is set across nine weights and both axes: - **Display: Commissioner 200, FLAR +1, VOLM +1**, used at clamp(8rem, 18vw, 16rem) for the `PPZZ` wordmark and at clamp(3rem, 6vw, 5rem) for block titles. The two flare/volume axes give the headlines a faint, almost-imperceptible humanist swell at terminals — Swiss without being mute. - **Subhead: Commissioner 600**, 24px / 32px line-height, all-caps, letter-spacing +0.08em, used for module labels (`I. INDEX`, `II. SKY-STATE`, etc.) - **Body: Commissioner 400**, 15px / 24px line-height, set ragged-right at 56 characters per line, with hyphenation enabled and orphan/widow control via JS. - **Caption: Commissioner 500**, 11px / 16px line-height, all-caps, letter-spacing +0.12em, for table headers and image captions. - **Italic pull-quotes: Commissioner Italic 300, slnt -10**, used once in the quote block. - **Tabular: Commissioner 450 with `font-variant-numeric: tabular-nums lining-nums`**, used in every table and ephemeris strip. - **Newsreader** (variable, optical-size axis 6–72) — used **only** for inline italic Latin and Greek scientific names within body text (e.g., *Alpha Lyrae*, *δ Cephei*). Optical size 14, weight 400, slant +0. This is the only departure from Commissioner, and it never appears in display. - **JetBrains Mono** (weight 400) — used **only** for raw coordinate strings (`α: 18ʰ 36ᵐ 56ˢ / δ: +38° 47′ 01″`) and for the optional `?debug` overlay that shows the live grid and baseline. **Palette (eight tones — strict complementary axis):** The palette is a literal **complementary** pairing on the color wheel: a deep cool-leaning blue against a precisely opposite warm orange, plus their two near-neutrals and the surrounding grays. This is the ascetic version of complementary — *one cold direction, one warm direction, nothing in between* — the Swiss way of using contrast. - **#0E1726** *Observatory Navy* — the document background and primary type color when used dark-on-light. Borrowed from photographs of the Sphinx Observatory at 4am. - **#F4F1EA** *Vellum* — the off-white "page" tone for body modules and the prevailing surface. Slightly warm so that the navy reads as cool. - **#E86A2C** *Sodium Orange* — the strict complementary partner of the navy on the HSL wheel. Used for: the `ZZ` glyphs in the wordmark; the moving star marker in diagrams; the underline of every linked term; the single "live now" dot in the ephemeris. Used in microscopic quantity (≤ 3% of any viewport). - **#1B2638** *Ink Shadow* — for hairline rules and the second-tier grid lines. - **#2A2D34** *Slate* — body text on Vellum. - **#7E8794** *Atmosphere* — captions, deactivated states, the soft halo applied around all blurred imagery. - **#C8B89A** *Parchment Dust* — the only "warm neutral," used as the table-row alternate band and the masthead's metadata bar. - **#FFFFFF** *Pure* — used **only** as the kernel of a generated star at the brightest pixel; never as a surface, never as a background, never as type. The palette obeys two rules. Rule one: **the orange exists only when looked at directly.** A block at rest contains zero orange; the orange appears only at the cursor's local hover area, where the **blur-focus** interaction (see Patterns) resolves. Rule two: **every color has a baseline-grid relationship.** Tones are not picked arbitrarily; each is tuned so that body text on its background hits exactly the same perceptual contrast (~7.4:1 on Vellum, ~12.8:1 on Navy) — the document feels even-toned because it is, mathematically. ## Imagery and Motifs **No photography. No stock illustration. No 3D render. No icon set.** Every image on PPZZ.lu is **generated in-browser** at runtime — this is the **generative-art** seed honored literally, and the **star-celestial** motif rendered exclusively through that generative pipeline. The site contains, in total, **four generators** (run client-side in a single shared Canvas/WebGL context) and nothing else. **Generator I — STAR-FIELD.** A **Voronoi-sampled star catalogue** painting an apparent magnitude distribution on a 2D field. Each star is a single point with: position drawn from a low-discrepancy **Halton sequence** (jittered, never grid-snapped); magnitude drawn from a **logarithmic falloff** (so most stars are dim, a few are bright, exactly as in a real sky); spectral color drawn from a four-color palette anchored on the page palette (Sodium Orange, Vellum, Atmosphere, Pure). Each star is rendered as a **radial micro-gradient** with two passes: an inner 1.5px white kernel, an outer 12–48px Gaussian glow. Rendering is at devicePixelRatio×, so on a Retina display each star is sub-pixel sharp at the kernel and sub-pixel diffuse at the glow. Density: **2,400 stars** in the hero block; **300 stars** in the small portrait cards; **40 stars** in the colophon. **Generator II — AZIMUTH/ALTITUDE DIAGRAM.** A **mathematical instrument illustration** — concentric circles at altitude 0°/15°/30°/45°/60°/75°, with radial lines every 15° of azimuth, plus an animated star marker following the path of fictional star *β PPZZ Lu* across the night. Rendered as **pure SVG** (no raster) with hairline strokes (0.5px). The star marker traces its arc over a 12-second loop, leaving a **3-second decaying ghost trail** behind it. **Generator III — CONSTELLATION DIAGRAM.** Eleven invented constellations, each formed of 4–9 stars connected by hairline lines. The constellations bear typographically-pleasing names that map back to the masthead glyphs: *Parallax Boreal*, *The Two Pillars*, *Zenithia Minor*, *The Lu*, *Bulletin Arc*, *Modulor Major* (a small homage to Le Corbusier and Müller-Brockmann), and so on. Rendered SVG, with the connecting lines drawn over a 1.6-second SVG path-draw on first-paint of each block. **Generator IV — MOON STRIP.** Thirty 32×32 moon icons in the ephemeris strip, each a real **astronomical phase calculation** for the next thirty days from system date, rendered with a hard terminator line and a faint atmospheric blur halo. **The recurring graphic motifs (used everywhere there is a rule, mark, or ornament):** - **The hairline.** A 0.5px stroke at 18% alpha is the only ornament. It draws block separators, the three vertical grid guides, table cell borders, and the perimeter of every diagram. Never thicker, never darker, never doubled. It is the typographic equivalent of a held breath. - **The micro-numeral stamp.** Every block carries a tiny roman numeral (`I.`, `II.`, `III.`...) in the top-left of its first column, set 11px Commissioner 500 all-caps with a leading zero where applicable. A second numeric stamp at top-right gives the block's grid coordinate — `[12 / 8u]` for "12 columns wide, 8 baseline units tall." - **The crosshair.** A single 14×14 px crosshair (`+`, hairline) marks the optical center of every diagram and every generated card. Faint, persistent, never animated. - **The asterism dot.** The only filled glyph: a 4×4 px Sodium Orange dot used to mark the currently-hovered row in any table, the current day in the ephemeris, and the live-tracking star in the azimuth diagram. **No logos. No badges. No icons. No emoji. No drop shadows. No gradients except inside generated stars.** The page contains exactly **zero raster assets** — every pixel is either type, hairline, generated-canvas, or SVG. ## Prompts for Implementation Build PPZZ.lu as **a single static document** — one HTML file, one CSS file, one JS module. No framework. No router. No SPA. The page renders top-to-bottom in one scroll, exactly as a printed bulletin would unfold if you held it from the top edge and let it fall to the floor. **The grid is real.** Set `body` to a CSS grid: `grid-template-columns: 48px repeat(12, 1fr) 48px; column-gap: 24px;`. Every block is a `grid-row` with explicit `grid-column` ranges. The 8px baseline is enforced via `--unit: 8px;` and every margin, padding, line-height, and height in the entire stylesheet is `calc(var(--unit) * N)` for integer N. Add a `?grid` query parameter that, if present, overlays the live 12-column grid and 8px baseline as JetBrains-Mono-labeled hairlines. (This is not a debug tool; it is the document's confession.) **The opening sequence (first 1.6 seconds).** On load: the masthead's `PPZZ` wordmark **path-draws** in (Commissioner is unicode-rendered, but the wordmark is also exported once as an inline SVG outline so the hairline-thin display weight can stroke-draw stroke-by-stroke over 1.2 seconds, then fill-fades to solid in the final 0.4s). Beneath, the masthead metadata fades in at +0.4s. The TOC index numbers tick in one-by-one (one per 80ms), each appearing with a 4px upward translate and a 200ms ease. The hero star field begins rendering at +0.8s, painting roughly 50 stars per frame at 60fps — so the field assembles visibly from sparse to dense over the next ~3 seconds, the way a long-exposure photograph builds. **Blur-focus is the master interaction.** This is the **blur-focus** seed deployed across the entire site as one unified rule: *imagery is rendered slightly blurred at rest; the cursor's local neighborhood is sharp.* Concretely: every generated canvas (star field, constellations, portraits) is composited under a `filter: blur(2.5px) saturate(0.85)` at rest. Above it, a **circular CSS mask** of radius 220px tracks the cursor and reveals a clear, non-blurred, full-saturation copy of the same canvas. The mask edge has a 60px feather. Effect: the user's gaze becomes a literal "seeing" — the small disk of clarity moves across the field of stars exactly as a telescope's field-of-view moves across the sky. On touch devices the mask follows the most recent tap and decays back to "all blurred" after 4 seconds. On `prefers-reduced-motion`, the mask is replaced with a static centered circle of clarity. **Modular block reveals.** Each of the eleven blocks animates in on `IntersectionObserver` (50% threshold). The animation is *exactly the same* for every block, by Swiss principle: a 240ms ease-out where (a) the block's hairline border draws from top-left clockwise around the perimeter (200ms) and (b) the block's content cross-fades in (240ms, +20ms stagger). No other in-block animation triggers on scroll. Animation budget is intentionally minimal — *style is restraint, not abundance.* **The diagrams animate continuously, but quietly.** The azimuth/altitude diagram's star marker traces a 12-second loop — slowly enough that a casual reader might not notice movement at all. The ephemeris strip's "today" indicator pulses (Sodium Orange dot, 1.6s breath, opacity 0.7→1.0→0.7). The hero star field has **no twinkle** at rest; once per ~9 seconds, a single random star somewhere in the field flares briefly to magnitude +1 over 600ms then decays — once, alone, like a real meteor. **Type kinetics: zero, except one place.** No words are animated, ever, except for the masthead path-draw at load. The pull-quote does not animate in. Body paragraphs do not animate in. Tables do not animate in. The page is **typographically still** — the only motion in the document lives inside the diagrams. This is deliberate: Swiss design holds type still and lets the *content* move. **Hover is microscopic.** Links underline 0.5px Sodium Orange on hover with a 120ms draw. Table rows shift their background to Parchment Dust at 24% on hover. Constellation lines brighten +20% within the cursor's blur-focus disc. Buttons do not exist; therefore button hovers do not exist. **Storytelling intent.** The user opens PPZZ.lu and is told nothing. There is no welcome, no positioning statement, no description of what this is. As they scroll, an image of the work — ongoing, patient, observational, recorded with care — accretes block by block. By the time they reach the colophon, they understand, without being told, that they have been reading an issue of a long-running bulletin maintained by an institution that cares about exactness. The site is **a long, slow argument for attention** — and it makes that argument by demanding attention, quietly, of the reader. There is **no CTA, no pricing block, no stat-grid, no testimonial carousel, no signup field, no footer link list, no social icon row.** The only outbound link is a small `↗ archive` in the footer that does nothing. The page exists for itself. **Reduced-motion mode.** If `prefers-reduced-motion: reduce`, the path-draw masthead becomes an instant fill, the IntersectionObserver reveals are disabled, the star-field meteor is removed, the moon strip and azimuth diagrams are static at their first frame. The blur-focus interaction is replaced by a single static blurred field with no clarity circle (so the document still has its observational mood, but no movement at all). The grid, the type, and the typographic argument remain unchanged — by design, those are the parts that *are* the page. **Performance discipline.** The entire site weighs under 180KB before fonts: one HTML (~22KB), one CSS (~28KB), one JS module (~46KB), four inline SVGs (~12KB), and the rest is the variable-font subset (~70KB Commissioner subset, ~24KB Newsreader subset, ~28KB JetBrains Mono subset). All canvas work is single-context, painted on demand. There are no images on the network. ## Uniqueness Notes **Six concrete differentiators against the existing CMassC corpus and against the broader catalog of "Swiss design" homages on the web:** 1. **Swiss layout used to *frame* generative art, not to replace it.** The corpus has Swiss-adjacent designs (corporate-grid, editorial), and it has generative art (10–13% of designs). What it does not have is a design where the entire visual content of the page is generated in-browser while the layout that holds it is rigorously Swiss — i.e., the contradiction is the point. PPZZ.lu sits at exactly that intersection: a document whose grid is Müller-Brockmann and whose every image is a runtime canvas painting. 2. **Commissioner deployed as the entire typographic system, not a Helvetica substitute.** "Swiss" sites on the web reflexively reach for Helvetica, Inter, or Neue Haas. PPZZ.lu uses **Commissioner** across nine weights and two optical axes (FLAR + VOLM) as a *humanist Swiss* — a typeface that thinks Swiss but feels written by hand. The frequency analysis shows commissioner-versatile at 3% — almost no other site in the corpus exploits Commissioner's variable axes; this one does so end-to-end. 3. **Blur-focus as a literal "seeing" metaphor, not as a generic glassy effect.** Where the corpus uses blur-focus (10%) it tends to be a backdrop-filter on a card. Here, blur-focus is a **circular cursor mask over a generated canvas**, and it is the entire interaction model — the user's pointer becomes a telescope's field of view. The blur is at rest; the focus is the local neighborhood; the metaphor of *atmospheric seeing* is enacted, not decorated. 4. **A complementary palette implemented with monastic restraint.** "Complementary" palettes typically split-screen the two colors. PPZZ.lu uses a single deep navy as the spine and a sodium orange as a local accent that **only appears within the blur-focus disc**. So the user's blur-focus circle is also where color emerges. At rest: no orange visible. On focus: orange resolves where the eye points. The complementary axis is *time-revealed*, not space-divided. 5. **An entire visual identity painted from four generators, with no raster assets.** PPSS.ee (paper-laminate skeuomorph) and PPUZZL.com (vintage photography duotone) — both nearby in the corpus — depend on either hand-drawn SVG or photographic raster. PPZZ.lu has neither. Every visible image is generated client-side from four mathematical procedures: Halton-sampled star fields, polar coordinate diagrams, low-edge-count constellation graphs, and lunar phase calculations. The page's payload contains zero `.png`, zero `.jpg`, zero `.webp`. This is unique in the corpus. 6. **The "elegant-sophisticated" tone played as Swiss-aristocratic, not as luxury-good.** The corpus has elegant-sophisticated at 3% (essentially unused), and where elegance appears in adjacent designs it tends toward art-deco gold-and-marble or fashion-lookbook avant-garde. PPZZ.lu reads "elegant" as **the elegance of a long-deliberated grid decision** — the elegance that comes from typographic discipline, baseline alignment, and a refusal to advertise. There is no gilt, no marble, no satin, no perfume-bottle photography. The elegance is in the math. **Chosen seed (from assignment):** *aesthetic: swiss, layout: modular-blocks, typography: commissioner-versatile, palette: complementary, patterns: blur-focus, imagery: generative-art, motifs: star-celestial, tone: elegant-sophisticated.* **Patterns deliberately avoided based on frequency analysis:** - **hand-drawn (86%)** — the corpus is saturated with hand-drawn aesthetics; PPZZ.lu is the strict mathematical opposite (every line is parametric, every point is computed). - **glassmorphism (56%)** — overused; here, blur is reserved for the canvas-imagery layer only, and it is Gaussian, not frosted-glass. - **photography (93% in imagery)** — the dominant imagery mode in the corpus; PPZZ.lu carries zero photographs and zero raster assets. - **warm palette (86%)** — overused; the dominant axis here is cold (Observatory Navy + Vellum), with warmth strictly confined to one micro-accent (Sodium Orange) that surfaces only in focus. - **gradient palette (86%)** — almost universal in the corpus; PPZZ.lu uses gradients **only inside generated stars** (the radial micro-gradient of a 1.5px kernel into a 48px glow). Every other surface is flat. - **parallax (90% in patterns)** — dominant; PPZZ.lu has zero parallax. Movement is reserved entirely for the animated star marker, the meteor flare, and the path-draw masthead. - **mono-typography (90%)** — overused; here mono is used in *one* role only (raw coordinates and the optional debug grid). The whole document's voice is humanist-sans (Commissioner), not monospaced. - **full-bleed and centered layouts (83% / 70%)** — the corpus default; PPZZ.lu is rigidly column-bound to the 12-col grid with persistent 48px outer margins, and is **asymmetric** in modular composition rather than centered.