# Design Language for p9r.st ## Aesthetics and Tone `p9r.st` is a **grainy-textured tech tutorial chronicle** — imagine a dog-eared developer handbook from 2003 that's been scanned, grain-amplified, and then run through a glitch compositor. The aesthetic sits at the precise intersection of *vintage printed circuit board documentation* and *VHS-era broadcast artifacts*: warm grain baked into every layer, scan-line remnants cutting across typeset code blocks, and color gradients that shift like CRT phosphor decay. The tone is authoritative but intimate — a senior engineer writing margin notes directly into a printed manual, and those margin notes have *more personality* than the main text. The mood is **tutorial-as-archaeology**: every section feels like it was typeset once, printed on 60gsm offset paper, photocopied twice, and then scanned at 300dpi with the auto-contrast cranked too high. This is not nostalgia for its own sake — it is a *deliberate signal-to-noise compression* where the grain is metadata: the more grain, the deeper you've scrolled into the technical weeds. Gradient palettes shift directionally — section backgrounds slide from deep burgundy-charcoal at the top through warm amber-rust mid-page to cool verdigris-teal at the deepest sections, communicating depth-of-knowledge as literal visual descent. The grain overlay is SVG `feTurbulence`-based, seeded per-section so each chapter has a distinct texture fingerprint. Glitch-art intrusions appear exactly at section boundaries — horizontal color-channel splits, 2–4px vertical displacement artifacts, and brief RGB-channel separation that resolves as the reader's scroll velocity drops below a threshold. ## Layout Motifs and Structure The layout is a **strict vertical timeline** — a single 760px reading column positioned 64px left-of-center (intentionally asymmetric to echo the marginal annotation tradition of printed technical manuals). The timeline spine runs as a 2px rule in Verdigris Teal (`#4A9A8C`) along the column's left edge, with chapter-node diamonds at each section entry point. These diamonds animate their border in a slow looping draw on intersection. **Timeline anatomy:** - **Chapter nodes**: 14×14px rotated squares (diamonds), border-animated via `stroke-dashoffset` cycling at 3s. Each node has a printed-manual chapter number in Playfair Display SC small-caps. - **Content blocks**: each tutorial section is a 760px-wide card with a subtle paper-texture background (per-section grain seed), a left border that mirrors the spine color, and a top-right corner fold rendered in CSS `clip-path`. - **Margin zone**: a 200px right gutter hosts annotation "stickers" — hand-number callouts, mini diagrams, correction stamps ("REVISED", "DEPRECATED") in red — all rendered as slightly rotated `position: absolute` elements. - **Code fences**: full-width within the column, styled as teletype printout paper with tractor-feed holes rendered as SVG circles along both vertical edges, 24px pitch. - **Glitch seams**: at every section boundary, a 40px-tall horizontal strip renders the section-transition glitch — CSS `clip-path` slices with `mix-blend-mode: screen` and a brief color-channel split (red channel +3px left, blue channel +3px right) triggered by `IntersectionObserver` as the seam enters viewport. The full page reads as an unbroken vertical roll — no full-bleed hero, no nav hamburger, no sticky header. The only persistent UI element is a fixed-left thin progress wire (2px, gradient-fills as you scroll) and a chapter-jump strip of 8px-wide tab markers on the far right edge. ## Typography and Palette **Typefaces (Google Fonts only):** - **Primary display & chapter titles — `Playfair Display`** (700, SC variant for chapter labels). Used at 52–72px for H1, 36px for H2 chapter heads. The SC variant is reserved exclusively for chapter numbering (I., II., III.) and section stamps. Slight positive tracking (+0.02em) at display sizes. - **Body & tutorial prose — `Lora`** (400 regular, 400 italic for asides). 17px/1.75 line-height. Lora's slightly bracketed serifs reinforce the printed-manual register while remaining highly legible. Italic used for inline definitions and editorial asides mimicking handwritten corrections. - **Code & terminal — `JetBrains Mono`** (400, 500). 14px within code fences, 13px in margin annotations. Ligatures enabled. Used exclusively for all `` and `
` blocks.
- **Annotation stamps — `Special Elite`** (400). Google Fonts typewriter face used only for the margin "sticker" text ("DEPRECATED", "SEE ALSO:", correction arrows). Adds authentic manual-annotation register.

**Palette (gradient-shift system, top-to-bottom page journey):**

- **Charcoal Impression** `#1C1410` — deepest background base, section 1 bg
- **Burnt Manuscript** `#2E1A0E` — section 2 bg, timeline spine shadow
- **Rust Amber** `#7A3B1E` — section gradient midpoint, active chapter node fill
- **Verdigris Teal** `#4A9A8C` — timeline spine, border-animate color, code fence tractor holes
- **Tallow Grain** `#E8D9B8` — body text color, primary reading surface
- **Aged Cream** `#F2EAD0` — code block background, paper texture base
- **Glitch Red** `#D94F3A` — red channel in RGB split glitch, DEPRECATED stamps
- **Scan Blue** `#3A7BD9` — blue channel in glitch split, SEE ALSO annotation ink

**Gradient arc (CSS custom properties, applied to `body` background via `linear-gradient`):**
Top (`#1C1410`) → 30% (`#2E1A0E`) → 55% (`#4A3020`) → 80% (`#2A4A44`) → bottom (`#1A3030`). The page background itself is a gradient scroll — as the reader descends, the ambient warmth gives way to cool verdigris, signaling increasing technical depth.

## Imagery and Motifs

**Glitch-art** is the primary imagery register — but *disciplined glitch*, not random noise. All glitch effects are semantically motivated:

- **Section-boundary glitches**: RGB-channel splits that resolve into clean type as scroll velocity decreases. These are coded as CSS `filter: url(#glitch-filter)` SVG filter primitives — not GIF loops — so they are fully scroll-velocity-reactive.
- **Grain overlay**: Each section card has an SVG `` noise layer at 8–12% opacity, `baseFrequency="0.65 0.70"` with a unique `seed` per chapter. The grain is monochrome and multiplicatively blended so it reads as physical paper texture without obscuring type.
- **Tractor-feed code blocks**: `
` blocks have SVG-drawn tractor holes along both vertical margins (6px radius circles, Verdigris Teal stroke, 40% opacity). This is the signature motif unique to p9r.st — transforming code blocks into continuous-form printout paper.
- **Retro-patterns as decorative infrastructure**: the margin zone uses 1970s-style technical illustration hatching (SVG `` elements with diagonal 45° lines at 0.5px stroke) as the background for annotation stickers. Section dividers use a repeating dot-grid pattern (`radial-gradient` halftone) in Rust Amber at 6% opacity, 6px pitch.
- **Chapter node diamonds**: 14×14px rotated squares with `border-animate` — a continuously cycling `stroke-dasharray` draw that gives the timeline spine a pulsing "printing in progress" quality. Nodes that have been scrolled past switch to solid Rust Amber fill; current node strobes gently via `animation: pulse 2s ease-in-out infinite`.
- **Corner folds**: CSS `clip-path: polygon()` top-right fold on every section card, 24px×24px, exposing the Burnt Manuscript undercolor — like a page turned down at the corner in a reference manual.

## Prompts for Implementation

Build p9r.st as **a single long-scroll vertical timeline of technical chapters**, each chapter a discrete card with its own grain fingerprint and margin annotations. The reader experiences descending through strata of knowledge, the page's own color temperature shifting from warm to cool as they go deeper.

**Implementation spine:**

- **HTML structure**: `
` containing `
` elements. Each section gets a `data-seed` attribute (sequential integers 1001, 1002…) that drives the SVG feTurbulence grain.
- **Timeline spine**: a `position: fixed; left: max(32px, calc(50vw - 444px)); top: 0; bottom: 0; width: 2px` element filled with the same top-to-bottom gradient as the page body. Chapter nodes are `position: absolute` children at the correct `top` offset calculated in JS after layout.
- **Border-animate**: implement via SVG `` elements overlaid on each chapter card, with `stroke-dasharray` set to the full perimeter and `stroke-dashoffset` animated from full-perimeter to 0 over 4s on `IntersectionObserver` entry. Do NOT use CSS-only border tricks — SVG stroke gives sub-pixel control needed for the retro-technical look.
- **Glitch seams**: at each `
` boundary, insert a `
` — 40px tall, `overflow: hidden`, containing two absolutely-positioned copies of the adjacent section edge, offset ±3px on X in red and blue respectively via `mix-blend-mode: multiply` and `opacity: 0.6`. Activate via IntersectionObserver when the seam is 20% into view; deactivate after 800ms.
- **Grain textures**: inline one `` in `` with `` containing `` for each chapter seed, each with a `` and a `` to strip color. Apply as `filter: url(#grain-N)` via pseudo-element overlay at 10% opacity.
- **Tractor-feed code blocks**: wrap every `
` in a `
`. The wrapper has left and right `::before`/`::after` pseudo-elements rendered as SVG `background-image: url("data:image/svg+xml,...")` strips, 20px wide, containing the hole pattern.
- **Margin annotations**: each `
` may include `