# Design Language for p9.rs ## Aesthetics and Tone p9.rs is a love letter to the **9P protocol** — the everything-is-a-file philosophy of Plan 9 from Bell Labs — reimagined through a Rust systems lens. The site behaves like a living **mounted filesystem**: every section is a "directory," every paragraph a "file" you `cat`, every interaction a small protocol message (`Tversion`, `Tattach`, `Twalk`, `Tread`) flickering at the edges. The tone is **dry, precise, quietly playful** — the humor of an OS that names its window manager `rio` and its mascot a cyan bunny. Not retro-kitsch terminal nostalgia; instead a *clean, almost clinical experimental layout* where text is treated as a structured stream, columns can be opened and tiled like Acme panes, and the cursor leaves a faint chord-click halo. Think: the calm of a research lab notebook, the wit of a man page, the rigor of a wire-format spec sheet. Cold light, warm intent. ## Layout Motifs and Structure - **Acme-style tiled columns.** The page is built from vertical panes separated by draggable-looking "tag bars" (thin horizontal strips with mono labels like `/p9/intro` `Del Snarf Get`). On wide screens, 2–3 columns sit side by side; on narrow screens they stack but keep their tag bars. - **The mount tree as navigation.** A persistent left rail renders a directory tree (`/`, `/dev`, `/proc`, `/net`, `/man`) — clicking a node "walks" to it: the corresponding column scrolls into view and its tag bar highlights cyan. No hamburger, no hero CTA. - **Wire-format margin.** A narrow right gutter streams faint hex/ASCII dumps of the "9P messages" being exchanged as you scroll — purely decorative, monospaced, ~12% opacity, like a packet capture running alongside. - **No hero block, no pricing, no stat grid.** The opening "screen" is a single `cat /p9/README` rendered as a typed-out file with a blinking block cursor, framed by its tag bar. Content unfolds as you "open" more files. - **Asymmetric, deliberately uneven** column widths (golden-ish ratios like 38/62), echoing how real tiled editors never give equal space. ## Typography and Palette **Typefaces (all Google Fonts):** - **Headings / tag bars / file paths:** `IBM Plex Mono` — the closest living relative to the Lucida-ish bitmap aesthetic of Plan 9, but crisp at scale. - **Body / "file contents":** `Inter` — neutral humanist sans for readable prose, set tight (line-height ~1.45). - **Accent display (section numerals, the big `9P` glyph, oversized type experiments):** `Space Grotesk` — slightly mechanical, good for the experimental oversized-type moments. **Palette:** - `#0c1116` — deep slate-black background (the "screen"). - `#e8edf2` — near-white foreground text. - `#5fd7d7` — **Plan 9 cyan**, the signature accent (Glenda's color, the highlight bars, active mount node, cursor halo). - `#1d2730` — panel/column surface, one step up from the background. - `#2b3946` — tag-bar fill and hairline borders. - `#f2c14e` — warm amber, used sparingly for "modified/unsaved" markers and inline `[!]` annotations (the one warm note against all the cool). - `#7c8a99` — muted blue-grey for secondary text, the hex-dump gutter, timestamps. ## Imagery and Motifs - **Glenda the bunny** — abstracted to a minimal 2-line cyan vector outline, appearing once, small, in the footer ("`/dev/glenda`"), winking via a 1-frame CSS animation on hover. - **The 9P message ladder** — a vertical SVG diagram of client↔server arrows (`Tattach → Rattach`, `Twalk → Rwalk`) used as a section divider; arrows draw themselves on scroll. - **Directory tree glyphs** — `├─ └─ │` box-drawing characters used literally as structural decoration, in mono. - **Block cursor** (`▮`) — the recurring micro-motif: blinks at the end of every "live" line, becomes the loading state, becomes the bullet point. - **Hex/ASCII rain** — the right-gutter packet dump; subtle, never animated fast enough to distract. - **Hatched "rio" desktop texture** — a faint 45° single-pixel cross-hatch (like the classic Plan 9 grey desktop) behind the body, at ~4% opacity. - No photography. No gradient meshes. No glassmorphism. Flat surfaces, hairlines, and text. ## Prompts for Implementation - **Open with a typewriter `cat /p9/README`:** full-viewport-height column, tag bar on top (`/p9/README` … `Del Snarf | Look Get`), the file body types itself character-by-character with a blinking `▮`, ending on a steady cursor. This *is* the story's first page — let it breathe; no buttons. - **Make the mount tree functional and tactile:** clicking a node should animate a "walk" — a brief cyan pulse traveling down the tree path, then a smooth scroll + tag-bar highlight on the target column. Use `IntersectionObserver` to keep the tree's active node in sync with scroll position. - **Columns should feel draggable** even if resizing is just decorative: tag bars get a `cursor: col-resize`-ish affordance, a subtle lift/shadow on hover, and the hairline between columns brightens to cyan. - **The right gutter packet stream:** generate plausible 9P frame bytes (size, type, tag, fid, name…) and scroll them slowly; on each new "section enter," flash one line cyan as if that `Tread` just completed. Keep it ≤12% opacity so it reads as ambient instrumentation. - **Section dividers = the message ladder SVG**, with `stroke-dashoffset` path-draw animation triggered on scroll; stagger the `Tx → Rx` arrow pairs by ~120ms. - **Cursor halo:** a small faint cyan ring that follows the pointer with a soft spring lag; on click, a quick "chord" ripple (two concentric rings). Restrained — this is a lab, not a disco. - **Typography experiments:** allow one or two oversized `Space Grotesk` moments — e.g. the literal characters `9P` rendered huge, half-clipped by a column edge, with the hex dump flowing "through" the negative space of the glyphs. - **Prefer narrative, immersive scroll over conversion UI.** AVOID: CTA-heavy layouts, pricing blocks, stat-grids, testimonial carousels, cookie-banner-style hero overlays. - **Reduced-motion:** if `prefers-reduced-motion`, skip the typewriter (show full text), freeze the packet stream, disable the cursor halo, and reveal dividers statically. - **Performance/accessibility are out of scope here** — optimize for the *feel* of mounting and reading a remote filesystem. ## Uniqueness Notes - **9P-protocol-as-interface metaphor:** the entire site is structured as a mounted filesystem with tag bars, `cat`-ed files, a walkable mount tree, and an ambient wire-format packet stream — a conceit I did not see in the reference designs, which lean on generic "terminal" tropes (green-on-black, fake prompts) rather than the actual *protocol* and *Acme tiled-column* model. - **Plan 9 cyan (`#5fd7d7`) + Glenda** as a deliberate, sourced palette/mascot choice, against a cool slate-black — distinct from the warm/gradient-heavy norm (98% warm, 95% gradient in the corpus); this is flat, hairlined, single-accent, *cool*. - **Acme-style draggable tag bars and asymmetric tiled columns** as the core layout — neither the dominant `card-grid` (90%) nor `centered` (83%) nor `full-bleed` (88%) pattern; it's a `broken-grid` / `modular-blocks` hybrid driven by an OS-windowing metaphor. - Chosen seed/style: **experimental type layout** (underused in the corpus) — expressed via oversized half-clipped `9P` glyphs, box-drawing-character structure, and text-as-stream composition. - Reference avoided patterns from frequency analysis: NO hand-drawn (96%), NO glassmorphism (80%), NO photography (98%), NO warm/gradient palette, NO card-grid, NO hero-dominant CTA layout, NO bento-box. Embraces the genuinely rare: flat single-accent cool palette, mono-led typography in service of a protocol metaphor, and an experimental type layout.