Typefaces
Three families, all served from Google Fonts, each with display=swap:
- Instrument Serif — display, by Rodrigo Fuenzalida and Jordan Egstad. A high-contrast Didone with a 2020s sensibility, used for headlines, the brand mark, and pull quotes.
- EB Garamond — body and editorial, by Georg Duffner. A revival of Claude Garamont’s 1592 specimen with old-style figures (
onum) enabled site-wide. - JetBrains Mono — instrument readouts, captions, eyebrows, code. Tabular figures (
tnum) enabled in tables and dataset displays. - Inter Tight — navigation labels, buttons, and small UI text. Used sparingly.
Variable-font axes are used where available; we set font-feature-settings rather than loading separate weight files.
Palette
The site’s palette is a calibrated-archival register: bone paper, lithograph ink, burnished ochre, deep brown, kraft, oxidized copper-green. There is exactly one accent color outside that register — a phosphor green used only for telemetry indicators (the live dot in the navigation, the cursor in the ribbon). The phosphor is deliberate: it is the one piece of 2026 in a building of 1920s air.
| Token | Hex | Use |
|---|---|---|
--paper | #ECE3CE | Page background; bone |
--ink | #1A1714 | Body type; rules |
--ochre | #B5763B | Brand mark; eyebrows; section dividers |
--rust | #6E2D17 | Inline links; pull quotes |
--kraft | #C0A57E | Secondary surfaces; ribbon stripes |
--copper | #5C7A6B | Schematic accents; oxidized green |
--phosphor | #6FCF6F | Telemetry-only accent (dot, cursor) |
Body text contrast against the paper background is 14.6:1, well above the WCAG AA minimum of 4.5:1.
Build & hosting
The site is a flat directory of .html files plus a single shared styles.css. There is no JavaScript framework. There is approximately 30 lines of inline JavaScript across the entire site (none on this page). There is no build step.
Hosting is on Cloudflare Workers Static Assets, with html_handling: "auto-trailing-slash" and not_found_handling: "404-page". The deploy command is a single npx wrangler deploy. Edge-cached HTML at max-age=3600, immutable static assets at max-age=31536000, immutable.
// wrangler.jsonc
{
"name": "hvac-archival-pittsburgh",
"compatibility_date": "2026-05-08",
"routes": [
{ "pattern": "hvac-archival-pittsburgh.ampifex.xyz", "custom_domain": true }
],
"assets": {
"directory": "./public",
"html_handling": "auto-trailing-slash",
"not_found_handling": "404-page"
}
}
Accessibility
The site targets WCAG 2.2 AA across the board, with a few specific additions:
- Semantic landmarks (
header,nav,main,article,aside,footer) on every page. - Skip-to-content link as the first focusable element.
:focus-visiblerings tuned to the persona (phosphor-green outline, not browser default), separate from:focusso that mouse users do not see them.- All non-decorative images carry meaningful
alt; decorative images carryalt=""androle="presentation". - All animation gated behind
@media (prefers-reduced-motion: no-preference). - Forms with associated
labelandautocomplete; errors surfaced viaaria-invalid.
Imagery
Photography on the site is sourced from Lorem Picsum via deterministic seed URLs, which means the same image renders consistently across pages and reloads. Where a real partner organization is named, we link to the organization’s own page rather than scrape its imagery. Inline SVG diagrams are hand-authored and embedded directly in HTML.
For the avoidance of doubt: the photographs of the team and shop on this site are placeholder-quality stand-ins for purposes of the demonstration brand site. The practice itself is described in prose; the photography is illustrative.
Standards we tried to meet
- HTML — semantic HTML5, W3C-validated (no validation errors at last check, 2026-05-08).
- CSS — modern with custom properties,
clamp()fluid type, logical properties, container queries. Nofloatlayouts, no flex-grow workarounds for grid problems. - Performance —
preconnectfor fonts,display=swap,loading=lazy+decoding=asyncfor offscreen images, dimensions on everyimg. - SEO — per-page
title+meta description, canonical URL, Open Graph + Twitter Card, JSON-LD where appropriate (LocalBusiness,Person,Article,FAQPage,Service). - Hosting — Cloudflare Workers Static Assets, edge-cached, with
404-pagehandling for missing routes.
A note for engineers
If you are reading this colophon because you are building a small site of your own and would like to know what we used: the answer is nothing exotic. HTML, CSS, three fonts, two megabytes of file, deployed to Cloudflare. The constraints were the persona, not the toolchain.