# Design Language for pmt.moe ## Aesthetics and Tone `pmt.moe` is a **PneuMatic Tube** dispatch terminal — the brass-and-felt control desk of a fictional municipal pneumatic post office that has been quietly forwarding little capsules of mail beneath a port city since 1898 and somehow still works. "pmt" is unpacked as **P**neumatic **M**ail **T**ube; ".moe" is the receiving spur that delivers each capsule to a soft, padded landing tray. The mood is **nostalgic-retro skeuomorphism taken completely seriously** — not a flat "vintage filter" but a genuinely *built* object: dimensioned brass plate, recessed bakelite buttons that travel when pressed, a felt-lined message drawer, a glass pressure gauge with a real needle that wavers, and a routing board of riveted conduit. Everything on the page is a part of one machine. The tone is unhurried, slightly proud, faintly mechanical — the voice of an old dispatch clerk who knows every junction by sound. Warm gaslight, the hiss of compressed air, the *thunk* of a capsule arriving. There is dust in the felt and a thumbprint of green oxide where the lid is always opened. It is cozy the way a well-worn workshop is cozy: nothing is sleek, everything is *trustworthy*. ## Layout Motifs and Structure A deliberate **Z-pattern** mapped onto the geometry of an actual control desk, read top-left to bottom-right the way a clerk's eye crosses the panel: - **Top-left — the Maker's Plate (callsign block):** an engraved brass header plate, screwed at all four corners, reading `PMT // MUNICIPAL PNEUMATIC DISPATCH` with a serial number and a tiny pressure rating stamped in the corner. This is the entry node of the Z. - **Top-right — the Pressure Gauge cluster:** a circular glass-faced gauge (live SVG needle) plus three smaller dials (LINE PSI, CAPSULES IN TRANSIT, SPUR TEMP). The eye sweeps right along a riveted top rail to reach them. - **The diagonal — the Routing Conduit:** a thick brass pipe runs diagonally across the desk from the plate down toward the drawer, with branch junctions, bolted flanges, and little flap-valves. Each junction is a content stop. The capsule (a brass-and-leather cylinder) physically travels this pipe as you scroll — the pipe IS the scroll track. - **Bottom-left — the Junction Index:** a vertical column of labeled flap-valves (`ARRIVALS`, `MANIFEST`, `THE CLERK`, `LINE MAP`, `LOST & FOUND`) — these are the page's sections, each a brass tab you can flip open. - **Bottom-right — the Felt Landing Tray (`.moe` spur):** a padded, felt-lined drawer at the terminus of the conduit where the final capsule drops with a soft settle. This closes the Z. Grid: a coarse 8-column **bolt grid** — every column gridline is marked by a visible rivet head, and panels snap to rivets, never to invisible margins. Full-bleed brass desktop background; no centered hero, no card grid, no bento. Edges of the desk are beveled and catch a highlight. The whole composition is fixed-ish — the desk stays, the conduit and capsule are what move. ## Typography and Palette **Fonts (all on Google Fonts):** - **Display / engraved plates:** **Poiret One** — thin art-deco geometric capitals, the look of 1920s enamel signage and pneumatic-station nameplates. Used for the Maker's Plate, gauge labels, big section titles. Tracked wide at 0.16em, often etched (inset text-shadow) into brass. - **Secondary display / numerals:** **Limelight** — heavy deco slab for dial numbers, PSI readouts, capsule serials. High-contrast, theatrical. - **Body / labels / clerk's notes:** **Cutive Mono** — a typewriter monospace with just enough warmth; reads like carbon-copy dispatch slips. Set at 15px / 1.7, 0.01em. All small labels (`PSI`, `SPUR`, `RTE`) are uppercase Cutive Mono at 0.22em tracking. **Palette — honeyed-neutral, eight values:** - `#1C1610` — Drawer Shadow (deep umber-black, recesses, the inside of the tube) - `#2E2418` — Worn Bakelite (button bodies, dark trim) - `#7A5A2E` — Aged Brass Base (pipe bodies, plate ground) - `#B8893E` — Polished Brass (rivets, flange rings, highlights on metal) - `#E8C77E` — Honey Gaslight (lit edges, glow from the gauge lamp, hover sheen) - `#F2E6C8` — Manila Slip (paper labels, drawer felt-paper, body text background) - `#6E7B5E` — Oxide Verdigris (the green thumbprint, patina in crevices, accent only) - `#C24A2E` — Dispatch Red (the single alert/active color — a capsule in transit, the "send" stamp, the wavering danger-zone on the gauge) White is never used; the lightest surface is Manila Slip. Black is never used; the darkest is Drawer Shadow. ## Imagery and Motifs No photography, no character illustration. Everything is **rendered metal, glass, felt, and paper** built from CSS gradients, SVG, and procedural texture: - **Brass-texture system:** every metal surface is a stack — a base honey gradient, a fine vertical brushed-grain SVG noise at ~6% opacity, a broad diagonal specular sweep that follows the cursor, and crevice-darkening at panel seams. Brass *reacts* to the pointer like real polished metal. - **Rivets & flanges:** hundreds of small circular bolt-heads (radial-gradient discs with a tiny cast shadow) march along every edge and pipe. Flanges are concentric brass rings with eight bolts. - **The Capsule:** the recurring hero object — a cylinder, brass end-caps + a leather-wrapped midsection (a leather-texture SVG: pebble grain + burnish + stitch line), with a little brass index ring. It rides the conduit, spins slightly, and arrives in the felt tray. - **Glass gauges:** circular faces with a beveled glass dome (highlight arc), printed deco numerals, a red needle, and a faint internal lamp glow in Honey Gaslight. - **Felt:** the landing tray and drawer interiors are deep-pile felt — a dense short-fiber SVG-noise texture in a muted moss, with a soft inner shadow so things visibly *sink* into it. - **Circuit/conduit motif:** the routing pipework is the page's "circuit board" — branch lines, T-junctions, flap-valves, and pressure-relief whistles, all bolted, all functional-looking. Tiny etched route codes (`R-7`, `SPUR-3`) sit beside each junction. - **Paper slips:** manila dispatch tickets with perforated edges, a typed route, and a rubber-stamp impression (slightly rotated, ink-bled) for timestamps. ## Prompts for Implementation Build `pmt.moe` as **one HTML page, one CSS file, one ES module** — no framework, no build step. The page is a slow scroll-pace ride of a single brass capsule through a pneumatic dispatch desk; the story is "a letter is received, routed, read by the clerk, and delivered to the soft `.moe` spur." There is **no CTA, no pricing block, no stat-grid, no feature-grid, no testimonial, no logo wall, no signup, no FAQ, no chatbot, no cookie banner, no team page**. **Document order (top to bottom = the conduit, head to terminus):** 1. **The Maker's Plate** — engraved brass header, screws torquing very slightly on load (a 0.4° settle), serial number counting up once on first paint. 2. **Pressure Gauge cluster** — needle idles with a faint Brownian waver; on scroll it ticks up as "pressure builds"; the lamp behind the glass brightens. 3. **Capsule loaded** — a brass capsule clunks into the breech at the top of the diagonal conduit (a short drop + squash-and-settle). 4. **The conduit ride** — as the user scrolls, the capsule travels the diagonal pipe; at each **junction flap-valve** it pauses, the valve flaps open with a hinge spring, and a manila slip slides out bearing that section's content (ARRIVALS = intro, MANIFEST = what this is, THE CLERK = the about voice, LINE MAP = an SVG schematic of the whole pipe network the user has been riding, LOST & FOUND = the misc/footer). 5. **The Clerk's desk insert** — a felt blotter with a typed slip and a rubber stamp that thuds down (rotate + ink-bleed) when it enters view. 6. **The Felt Landing Tray** — the capsule reaches the terminus, drops into deep moss felt with a soft sink (inner-shadow deepens, fibers compress around it), the lid clicks, and a tiny verdigris thumbprint fades in on the brass nearby. **Interaction & animation:** - **ripple** is the signature pattern: pressing any bakelite button sends a faint pneumatic *pressure ripple* down the nearest pipe segment (an animated radial along the path) — and arriving capsules send a ripple through the felt. - Bakelite buttons travel ~3px on press with a tightening inner shadow; a soft *thunk* (subtle scale + shadow, no audio required). - Brass specular sweep follows the cursor across all metal panels. - Gauge needles use spring easing; capsule travel is tied to scroll progress with a slight overshoot at each stop. - `prefers-reduced-motion`: capsule jumps instantly between junctions, needles snap, no ripples — the desk still reads as a desk. - Performance/accessibility are out of scope; prioritize the *built-object* illusion. Bias hard toward the full-screen, single-machine narrative: the visitor should feel they are operating one beautiful old apparatus, not browsing a website. ## Uniqueness Notes Differentiators from the corpus: 1. **Skeuomorphism as the entire premise, not an accent** — skeuomorphic appears in only ~4% of designs and is usually one button or card. Here the whole page is a dimensioned, riveted, felt-lined brass machine with reactive metal surfaces. Pairs skeuomorphic with **leather-texture imagery (~2%)** for the capsule and **marble-free honeyed-neutral palette (~4%)**. 2. **The conduit IS the scroll track** — a literal diagonal pneumatic pipe that a physical capsule rides; section content is delivered by flap-valves dispensing manila slips. Diagonal-sections layout (~5%) fused with a true **Z-pattern (~3%)** read across a control-desk geometry — neither pattern is common, and the combination is unseen. 3. **A "circuit" motif rendered as Victorian pipework** rather than PCB traces — bolted T-junctions, pressure-relief whistles, etched route codes — turning a tech-coded motif into a brass-foundry one. 4. **Engraved deco typography** — Poiret One + Limelight *etched into metal* with inset shadows, paired with carbon-copy Cutive Mono for dispatch slips. Poiret/Limelight/Cutive together do not appear in the references; mono-as-clerk's-typewriter reframes the over-used mono category as a physical artifact. 5. **No white, no black, no photography, no character art, no CTA/stat/pricing furniture** — the page is a closed diegetic object: receive → route → read → deliver. Chosen seed/style: `aesthetic: skeuomorphic, layout: z-pattern, typography: art-deco-display, palette: honeyed-neutral, patterns: ripple, imagery: leather-texture, motifs: circuit, tone: nostalgic-retro`. Avoided per frequency analysis: hand-drawn (96%), glassmorphism (81%), photography imagery (98%), card-grid (91%), centered (83%), gradient/warm generic palettes, parallax+cursor-follow+spring+magnetic default pattern stack (kept only a tasteful cursor-specular and spring needles, leaned on the underused **ripple** instead), mono-as-default-tech-font (recontextualized).