# Design Language for pmt.moe ## Aesthetics and Tone pmt.moe is a **scholarly terminal artefact** — as if a 1970s academic research mainframe printed its own monograph and someone bound it with aged linen thread. The mood is that of a monastic scriptorium where monks have been replaced by Unix processes: patient, methodical, unhurried, deeply serious about its own obscure domain. The visual logic borrows from both worlds simultaneously: the green-phosphor glow of early CRT terminals layered over the texture of foxed, cream-tinted academic paper. These two surfaces coexist in productive tension — the digital bleeds into the analogue, and the analogue resists the digital. A scanline interference pattern pulses at 0.3 opacity over paper-grain texture. The feeling is not "retro" or "nostalgic" — it is **archaeologically specific**: this is what it looked like when the first networked computers lived in the same buildings as the last card catalogues. Tone is **scholarly-intellectual** without condescension — the voice of someone who has read every primary source and trusts you to keep up. No marketing language. No calls to action. The page argues, demonstrates, reveals. ## Layout Motifs and Structure The layout is a **marginalia codex** — a single vertical manuscript column (680px wide, centered typographically but offset 12% left of true center to simulate a binding gutter) with a live margin-annotation layer running alongside it. The margin is not decorative: it carries the secondary narrative — footnote expansions, cross-reference indices, running commentary rendered in a smaller monospaced face at 10px. **Structural layers (back to front):** 1. `position: fixed` — cream paper grain at full viewport, CSS `noise()` substitute via SVG `feTurbulence` with `baseFrequency="0.65"` and `stitchTiles="stitch"`, sepia-tinted `#e8dcc8`, opacity 1 2. `position: fixed` — scanline overlay: repeating linear gradient `rgba(0,0,0,0.04)` / transparent at 3px intervals, `z-index: 1` 3. `position: fixed` — subtle phosphor vignette: radial gradient from transparent center to `rgba(12, 18, 8, 0.35)` at edges, `z-index: 2` 4. Scrollable manuscript column — `z-index: 10`, background `rgba(232, 220, 200, 0.92)` 5. Margin annotation track — `position: sticky` within a two-column grid, right side, `width: 220px`, `z-index: 10` **Parallax is used sparingly and academically**: section dividers are horizontal rules that use `transform: scaleX()` on scroll — they appear to "unroll" from left to right as the section enters the viewport at a rate 0.4× the scroll speed. No full-bleed parallax heroes. The paper background itself has a barely perceptible `0.05× scroll-rate drift` giving depth without spectacle. **Section rhythm**: chapters are separated by a typographic ornament — a centered `❧` fleuron in `#7a6a52` at 18px, padded 48px top and bottom. No horizontal rules except the unrolling reveal dividers. ## Typography and Palette **Primary typeface — headings:** `Roboto Slab` — weight 300 for H1 (56px, tracked +0.02em), weight 600 for H2 (28px). The lightness of the thin slab contrasts with the density of the content beneath it. Letter-spacing on H1 is wide enough to feel like a book title on a spine. **Secondary typeface — body:** `Lora` — weight 400 at 18px / 1.8 line-height. Lora's ink-trap details and slightly calligraphic stroke variation perform beautifully against the paper texture. Paragraph indent 2em, no paragraph spacing (classical book typesetting). **Tertiary typeface — terminal/monospace:** `JetBrains Mono` — weight 400 at 13px for margin annotations, code blocks, and inline `` elements. This is the "machine voice" counterpoint to the manuscript body. **Palette — muted vintage with terminal phosphor accent:** | Role | Hex | Description | |------|-----|-------------| | Paper ground | `#e8dcc8` | Aged cream, foxed linen | | Deep ink | `#2a1f14` | Near-black warm brown, old iron gall | | Body text | `#3d2f1e` | Mid-brown, readable over paper | | Phosphor accent | `#4a7c59` | Muted moss-green, not electric | | Phosphor glow | `#6aab78` | Lighter moss for hover states, active links | | Rust annotation | `#8b4a2f` | Marginalia, footnote numbers, cross-refs | | Faded violet | `#5c4a6e` | Secondary accent, chapter numerals, blockquotes | | Rule grey | `#b8a898` | Dividers, table borders, muted UI chrome | | Vellum tint | `#f2ead8` | Card/callout backgrounds, slightly lighter | No pure white. No pure black. Every surface is organic and slightly off. ## Imagery and Motifs **Abstract-tech motifs rendered as marginalia glyphs:** The margin track carries small SVG illustrations — not decorative dividers but **index symbols** drawn in the style of medieval manuscript marginalia but depicting abstract computational structures: a directed acyclic graph rendered as a constellation with node labels in `JetBrains Mono`; a finite state machine diagram with hand-drawn arrow arcs; a Venn diagram with overlapping regions labelled in archaic abbreviations. **Paper aging effects:** - CSS `filter: sepia(0.15) contrast(1.08)` on the entire viewport wrapper - Random "foxing spots" — 12–20 absolutely-positioned `div` elements with `border-radius: 50%`, sizes 4–22px, color `rgba(140, 90, 40, 0.06–0.14)`, scattered via a seeded pseudo-random layout (deterministic positions, not random on each load) - Page-edge curl: a right-edge pseudo-element on the manuscript column, `::after`, with a `box-shadow: inset -4px 0 8px rgba(0,0,0,0.12)` and a subtle `linear-gradient` from transparent to `rgba(0,0,0,0.08)` — the page appears slightly lifted from its backing **Terminal glyph decorations:** Section openings use a `>_` prompt character in `JetBrains Mono`, `#4a7c59`, 14px, as a run-in before the first word of each chapter — echoing shell prompts without becoming a cliché. **Blockquotes as inset folios:** Quotations are styled as inset manuscript folios — left-bordered with a 3px solid `#5c4a6e` rule, background `#f2ead8`, padding 20px 24px, with a small `§` section sign in `#8b4a2f` float-right at the top-right corner. ## Prompts for Implementation Build this as a **single long manuscript that the reader unscrolls** — not a website with sections but an academic treatise that reveals itself line by line. Every implementation decision should serve the reading experience. **Layer construction order:** 1. Create the fixed paper/scanline/vignette stack first, before any content 2. Build the two-column grid: `grid-template-columns: 1fr 680px 220px 1fr` — the manuscript column and margin track are center-aligned but not symmetrically centered 3. Populate the margin track with `position: sticky; top: 120px` containers that update as sections scroll into view — use IntersectionObserver to swap margin content per section **Scroll-driven reveals (avoid generic parallax):** - Horizontal rule "unroll": on `IntersectionObserver` trigger, animate `transform: scaleX(0 → 1)` with `transform-origin: left`, duration 1.2s, `easing: cubic-bezier(0.16, 1, 0.32, 1)` - Body paragraphs: `opacity: 0 → 1`, `translateY: 12px → 0`, staggered per paragraph at 80ms intervals — subtle, not theatrical - Margin annotations: fade in at `opacity: 0 → 0.85` with 300ms delay after their associated body section enters view **Phosphor flicker (terminal authenticity):** - The `>_` prompt glyphs animate: a keyframe `@keyframes cursor-blink` that alternates opacity 1/0 at 530ms intervals (the exact blink rate of a VT100 terminal) - On page load, H1 text "types itself in" using a character-by-character reveal at 45ms per character — but only the H1, and only once; subsequent headings appear normally **Paper parallax (restrained):** - The `feTurbulence` SVG filter is applied to the paper background with `numOctaves="4"` and a slow `seed` animation: `animateTransform` on the `baseFrequency` attribute shifting from `0.65` to `0.67` over 8 seconds, looping — the grain breathes without moving **Do NOT include:** hero sections, navigation bars, progress indicators, sticky headers, floating action buttons, modal overlays, cookie banners, social share buttons, or any element that belongs to a web application rather than a manuscript. **Narrative structure (five chapters minimum):** 1. **Incipit** — The opening folio: domain name as manuscript title, date of composition, a one-line colophon in italic 2. **Prolegomena** — What this place is, stated plainly, in prose 3. **Apparatus** — Technical substance, the actual content of the domain 4. **Scholia** — Commentary, edge cases, known limitations, honest caveats 5. **Finis** — A closing colophon, not a footer — the `>_ EOF` prompt, and silence ## Uniqueness Notes **Chosen seed:** aesthetic: terminal, layout: centered, typography: slab-serif, palette: muted-vintage, patterns: parallax, imagery: paper-aged, motifs: abstract-tech, tone: scholarly-intellectual **Differentiators from all other designs in the registry:** 1. **The layout offset subverts centered without abandoning it.** The manuscript column is typographically centered on the reading axis but shifted 12% left of viewport center to simulate a physical codex binding gutter — a technique borrowed from book design, not web design. This is not "off-center" in the asymmetric-layout sense; it is *binding-aware* centering. 2. **Two typeface traditions in explicit dialogue.** `Roboto Slab` and `Lora` represent the slab-serif academic tradition; `JetBrains Mono` represents the terminal tradition. These are not mixed arbitrarily — they occupy distinct semantic registers (headings/body vs. machine-voice) and are never used interchangeably. The three-way typographic system has internal logic. 3. **Parallax is repurposed as a manuscript scroll metaphor.** Instead of the standard full-bleed parallax hero, parallax here is a 0.05× background drift and a 0.4× horizontal-rule unroll — both reference the physical act of unrolling a scroll or turning a page. The animation is archaeological, not cinematic. 4. **Foxing spots are deterministic, not random.** The aged-paper imperfections are computed from a seeded PRNG keyed to the domain name `pmt.moe` — the same "decay pattern" will appear on every device. The page has a specific, unchanging physical identity rather than a different random patina each load. 5. **Avoided overused patterns:** `centered` layout (84% frequency) is present but architecturally subverted via gutter offset; `parallax` (76%) is used only in minimal, semantically motivated forms; `terminal` aesthetic (32%) is combined with analogue paper texture to prevent it reading as a generic hacker terminal — the fusion is the differentiator.