# Design Language for p9r.dev ## Aesthetics and Tone p9r.dev is read aloud as "pager" — and the entire site is built as a working tribute to the late-1990s alphanumeric pager: the belt-clip beeper, the dot-matrix LCD strip, the numeric code lexicon (143 = "I love you", 07734 = "hello" upside-down, 911 = "call now"). The site is the lobby of an imaginary present-day "paging exchange" — a tiny dispatch desk that still routes terse messages across a continent the way it did in 1998, and treats that constraint as a design philosophy: *say it in fewer characters, and it carries further.* The mood is **nostalgic-retro pixel-art with an engineer's deadpan** — equal parts museum vitrine and still-running switchboard. Reference points: the segmented green-grey LCD of a Motorola Advisor pager, the bubble-grid casing of a Tamagotchi, the chunky 3-D bevels of Windows 98 dialog chrome, the warm amber glow of a 1980s digital alarm clock seen at 3 a.m., and the scan-line shimmer of a CRT. It is **friendly but never cute** — the copy is brisk and confident, like a dispatcher who has done this a thousand times. Nothing here apologizes for being low-resolution; the whole site argues that 7×5 dot characters are a *feature*, that the LCD's two-shade palette is *enough*, that a message worth sending fits on one line. There is no marketing froth. No "sign up free." No testimonial carousel. The page behaves like a device you found in a drawer that still, miraculously, turns on — and the visitor's job is to press the buttons. ## Layout Motifs and Structure **Split-screen primary frame.** The viewport divides into two unequal vertical zones, locked at a 38 / 62 ratio: - **Left zone — "The Handset" (38%):** a full-height illustrated pixel-art rendering of a pager handset, drawn in CSS box-shadow sprites and SVG `shape-rendering: crispEdges`, occupying the left rail like a fixed instrument panel. Its LCD strip is a *live* element — it displays whatever the right zone is currently "transmitting." Below the LCD: four chunky beveled buttons (READ · NEXT · MENU · ⌫) that double as the site's only navigation. The handset has a subtle 2° tilt and a soft floor shadow, as if propped against the bezel. - **Right zone — "The Tape" (62%):** a single vertical scroll styled as a continuous **dot-matrix message tape** — content arrives as discrete "pages" (in the beeper sense: one received message = one page), each rendered inside a rounded-rect "message bubble" with a timestamp, a sender ID, and a body capped at ~120 monospace characters. Pages are separated by a perforated-edge divider (the kind on continuous-feed printer paper). **Pixel grid as the unit of everything.** All spacing, all radii, all line weights snap to an 8px base grid that is *visibly drawn* — a faint 8px dot-grid sits behind the whole page like engineering graph paper, and elements click into it with a hard 1-step snap rather than smooth easing. **No hero, no sections-as-marketing.** The top of the tape is simply the first message ("WELCOME TO THE EXCHANGE"). There is no separate "About" block, no "Features" grid, no pricing tier wall, no CTA band. The exchange's story is told strictly through the sequence of messages on the tape — a narrative delivered the way a pager would deliver it: one buzz at a time. **Bottom-anchored status line.** A 24px-tall monospace status bar runs across the full width at the very bottom: `EXCHANGE: ONLINE · QUEUE: 0 · SIGNAL: ▮▮▮▮▯ · 07734`. It is the page's heartbeat and never scrolls away. ## Typography and Palette **Type system — Google Fonts only:** - **`VT323`** — the LCD/pixel display face. Used for every "device" surface: the handset's LCD strip, the message-tape body text, the status line, all timestamps and sender IDs. It is a true bitmap-derived monospace; at 18–22px it reads like a screen, at 64px+ it reads like a stadium scoreboard. Tracking: `0.02em` at body, `0.12em` for the status line. - **`Press Start 2P`** — the "casing/label" face, used *sparingly and large*: the handset's molded brand label, page numbers (`PAGE 03`), button captions, and the single biggest headline at the top of the tape. Never used below 12px (it becomes unreadable mush — that limit is part of the discipline). Always uppercase, `line-height: 1.6` to give the chunky glyphs air. - **`Space Mono`** — the "operator's notes" face for the rare longer passage that genuinely needs more than one line (a short explanatory paragraph, a code-lexicon legend). It is the only face here with lowercase and italics; it signals "the human dispatcher is talking now, not the machine." **Palette — a deliberately tiny, two-mode LCD set plus warning accents:** - `#0B0F0A` — **Carbon Black**: the page backdrop and all "off" pixels; the matte body of the handset. - `#1B2417` — **Deep Olive**: the unlit LCD substrate (the green-grey "glass" before the pixels light up); also the perforated-divider color. - `#9CCB3B` — **Phosphor Green**: the primary "lit pixel" — message text, the glowing LCD, active button state. The hero color, used at full strength only on text and thin strokes. - `#D7E8A6` — **Pale Phosphor**: the high-intensity pixel (bold words, the currently-selected button, the "new message" flash). - `#F2A33C` — **Amber Alert**: warning/emphasis pixels — the `911` codes, the queue counter when non-zero, link hover states. Borrowed from amber LED clocks; appears on no more than ~5% of any screen. - `#5A6B47` — **Dim Sage**: 3-D bevel highlights and the 8px engineering dot-grid behind everything; the "pressed-but-disabled" gray. - `#E2E2DC` — **Bone**: reserved exclusively for the molded `Press Start 2P` brand label on the handset casing — the one place a near-white appears, like injection-molded plastic lettering. Gradients are essentially banned; the only "gradient" allowed is a 3-step dithered ramp (ordered Bayer-matrix dithering, drawn as a tiled SVG pattern) used for the LCD's faint backlight bloom and for the handset's plastic sheen. Color transitions happen by *dither*, never by smooth blend. ## Imagery and Motifs - **The pixel-art handset itself** is the centerpiece illustration: a ~3:7 portrait device, ~14px "pixels" at desktop scale, with a recessed LCD window, a perforated speaker grille (a 6×4 dot pattern), four bevel-edged buttons, a belt-clip silhouette behind it, and a tiny status LED that pulses Phosphor Green on each new message. Built entirely from CSS (`box-shadow` sprite technique) and crisp SVG — zero raster images. - **Dot-matrix lettering** rendered as actual glowing dots: headline words can optionally be drawn as 7×5 dot characters using an SVG `` of circles, so the visitor sees the *mechanism* of the type. - **Perforated continuous-feed paper edges** as the divider between message-tape pages — two columns of round holes running down the page seams, with a hairline tear line. - **The beeper-code lexicon** as recurring decoration: small Amber numerals (`143`, `911`, `07734`, `121` = "call me", `831` = "I love you" in count-of-letters) float in the margins of the tape like marginalia, each with a hover tooltip translating it. The footer status line ends on `07734` permanently — "hello," upside down. - **Signal-strength bars** (`▮▮▮▮▯`) appear as a live motif in the status line and as section-progress indicators — five-bar towers that fill as you scroll. - **CRT scan-line + faint barrel-vignette** as a full-page overlay at ~4% opacity, plus an extremely subtle 2px horizontal "roll" line that drifts down the screen once every ~12 seconds, like an old monitor's vertical hold slipping. - **Button-press skeuomorphism:** every interactive element has a real 2-state pixel bevel — a 3px Dim Sage top/left highlight and a 3px Carbon Black bottom/right shadow that *invert* on press, with a 1-step inset shift. No soft shadows anywhere. ## Prompts for Implementation Build p9r.dev as **one HTML file, one CSS file, one ES module** — no framework, no build step. The page is a roughly 75-second experience: a visitor "receives" a sequence of pager messages that, read in order, tell the story of the exchange and what it is for. It is a *device simulation*, not a landing page. There is **no CTA band, no pricing table, no stat-counter grid, no testimonial carousel, no email-capture modal, no feature comparison, no logo wall, no cookie banner, no chat bubble**. **Story structure — the message tape (right zone), 7 pages, top to bottom:** 1. **PAGE 01 — `WELCOME TO THE EXCHANGE`** — the only `Press Start 2P` headline, drawn as glowing dot-matrix characters that "type in" dot-by-dot on load (each dot fades from Deep Olive to Phosphor Green with a 1-step, not eased, flicker). Below it, one `Space Mono` line: "we still route short messages the old way. read on." 2. **PAGE 02 — `WHY SHORT?`** — a single VT323 paragraph, hard-capped at 120 chars, on the discipline of brevity. An Amber `831` floats in the margin (tooltip: "8 letters, 3 words, 1 meaning — 'I love you'"). 3. **PAGE 03 — `THE LEXICON`** — a compact two-column code legend in VT323 (`143 → I love you`, `121 → call me`, `911 → urgent`, `07734 → hello`, `404 → not here`), each row's number in Amber. 4. **PAGE 04 — `HOW IT WORKS`** — three terse VT323 lines, each prefixed with a signal-bar glyph, describing send → queue → buzz. 5. **PAGE 05 — `THE QUEUE`** — a live-feeling fake transmission: three short messages "arrive" 1.2s apart while this page is in view, each accompanied by the handset LED pulse and a soft 1-frame screen flash to Pale Phosphor. 6. **PAGE 06 — `OPERATOR'S NOTE`** — the one genuinely human moment: a short `Space Mono` italic passage (lowercase) from the imaginary dispatcher, breaking the machine voice. 7. **PAGE 07 — `END OF TAPE`** — a perforated tear-off, then the status line's `07734` enlarges briefly and flips 180° to reveal it spelling "hello," then settles back. No "get started" button — just the device, idling. **The handset (left zone) behavior:** - The LCD strip **mirrors whatever tape page is currently centered in the viewport** — its text is the current page's title, scrolling marquee-style if longer than the LCD width, in VT323. - The four buttons are the *entire* nav: **READ** jumps to PAGE 01; **NEXT** advances to the next page with a hard scroll-snap (no smooth scroll — a single discrete jump, like flipping to the next message); **MENU** toggles a small overlay listing all 7 page titles (styled as a pager's menu list, one highlighted row); **⌫** scrolls back one page. Each press: invert the bevel for 90ms, emit a tiny "click" (Web Audio, a 40ms square-wave blip at ~880Hz — respect `prefers-reduced-motion`/sound by gating behind a small speaker-icon mute toggle in the status bar, default *on* but obvious). - The status LED on the handset pulses Phosphor Green once per "received" message and stays dim otherwise. **Motion vocabulary — strictly stepped, never smooth:** - All entrances use `steps()` timing functions or discrete keyframes — elements *snap* into the 8px grid in 2–4 frames; nothing tweens continuously. - The dot-matrix headline "types" dot-by-dot. Marquee text on the LCD moves in 1px integer steps at ~12fps for an authentic LCD-refresh stutter. - The CRT roll line drifts every ~12s. A faint, slow flicker (±3% brightness, ~0.8s period) on the whole LCD. - Scrolling between pages is **scroll-snap-y mandatory**, one page per snap zone — the tape feels like a ratcheting mechanism, not a smooth river. - Hover on margin code-numerals: the numeral brightens Carbon→Amber in one step and a VT323 tooltip slides up 8px (one step). - Respect `prefers-reduced-motion`: kill the roll line, the flicker, the auto-arriving messages (show all three immediately), and the headline type-on (show it fully lit). **Layout / CSS notes:** - Lock the split at 38vw / 62vw on desktop. On narrow screens (<760px): the handset becomes a *fixed top bar* — just the LCD strip and the four buttons in a row — and the tape takes the full width below it. - Draw the 8px engineering dot-grid as a tiled `radial-gradient` background in Dim Sage at ~12% opacity behind the whole page. - Use `image-rendering: pixelated` and `shape-rendering: crispEdges` everywhere relevant. No `border-radius` larger than 8px except the message bubbles (16px) and the handset corners (24px) — and even those should *look* faceted, achieved with stepped multi-stop conic masks rather than smooth curves where feasible. - The dithered backlight bloom: a tiled 4×4 Bayer-matrix SVG pattern, scaled up, masked over the LCD region only. - Everything is keyboard-operable: arrow keys ↑/↓ = ⌫ / NEXT, Enter = READ, M = MENU. **Tone of copy:** brisk, confident, dispatcher-deadpan. Short declaratives. Never "you'll love" — instead "here's how it works." The site should feel like operating equipment, not reading a brochure. ## Uniqueness Notes **Differentiators from other designs in this codebase:** 1. **The domain name *is* the entire concept and the entire UI.** "p9r" → "pager" → a literal working pager simulation. No other site in the corpus turns its leetspeak/numeronym domain into a functioning skeuomorphic device that doubles as the navigation. The handset's LCD is a live mirror of scroll position; the four physical buttons are the only nav — there is no conventional menu, no hamburger, no top bar of links. 2. **Two-shade phosphor LCD palette + dithering instead of gradients.** Against a corpus that is 95% gradient and 98% warm, this is a near-monochrome Phosphor-Green-on-Carbon-Black scheme where the *only* sanctioned color transition is ordered Bayer dithering. No smooth blends exist anywhere. Amber appears on ≤5% of any screen, strictly as alert/emphasis. This is a hard, deliberate constraint, not a default. 3. **Strictly stepped motion — anti-easing.** The corpus is 91% parallax / 85% spring / 81% magnetic — all about smooth, organic, weighted motion. p9r.dev does the opposite: every animation uses `steps()`, every scroll is `scroll-snap mandatory` one-page-at-a-time, the LCD marquee stutters at 12fps, headlines render dot-by-dot. The whole feel is *ratcheting mechanism*, not *fluid web*. 4. **Pixel-art aesthetic (only ~3% of corpus) fused with split-screen layout (only ~2%) and a nostalgic-retro/dispatcher-deadpan tone (~2%) — none of the dominant card-grid, hand-drawn, glassmorphism, pastoral-romantic conventions.** Built entirely from CSS box-shadow sprites and crisp SVG: zero raster images, zero photography (vs. 98% photography in the corpus). 5. **Narrative-as-pager-messages.** The site's story is delivered as 7 discrete "received pages," with a faked live transmission queue and a real beeper-code lexicon as recurring marginalia (`143`, `831`, `07734`). No CTA band, no pricing wall, no stat grid, no testimonials, no email capture — the page ends not with "sign up" but with the status line flipping `07734` upside-down to spell "hello." **Chosen seed / style:** `90s pixel art playful` — *aesthetic: pixel-art, layout: split-screen, typography: bebas-bold (via Press Start 2P / VT323 bitmap display faces), palette: monochrome (two-shade phosphor LCD + amber accent), patterns: typewriter-effect (dot-by-dot, stepped), imagery: line-illustration (CSS pixel-sprite handset), motifs: retro-patterns (dot-matrix, perforated feed, scan-lines), tone: nostalgic-retro.* **Avoided patterns from frequency analysis:** no card-grid (90%), no full-bleed hero (88%), no glassmorphism (80%), no hand-drawn (96%), no photography (98%), no warm palette (98%), no gradient (95%), no parallax (91%), no cursor-follow (89%), no spring/magnetic motion (85%/81%), no pastoral-romantic tone (35%). Reused only `mono` typography (94% — but here as a *bitmap LCD* face, not a code editor) and the `split-screen` layout (a deliberately underused 2%).