Colophon · the site you are reading

A note on form, on type, and on what holds this page up.

The site itself is a deliberately quiet document. Standalone HTML and CSS. No build step. No JavaScript framework. Three Google Fonts, one CSS file, hand-authored. Hosted at the edge by Cloudflare Workers Static Assets.

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.

Palette tokens
TokenHexUse
--paper#ECE3CEPage background; bone
--ink#1A1714Body type; rules
--ochre#B5763BBrand mark; eyebrows; section dividers
--rust#6E2D17Inline links; pull quotes
--kraft#C0A57ESecondary surfaces; ribbon stripes
--copper#5C7A6BSchematic accents; oxidized green
--phosphor#6FCF6FTelemetry-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-visible rings tuned to the persona (phosphor-green outline, not browser default), separate from :focus so that mouse users do not see them.
  • All non-decorative images carry meaningful alt; decorative images carry alt="" and role="presentation".
  • All animation gated behind @media (prefers-reduced-motion: no-preference).
  • Forms with associated label and autocomplete; errors surfaced via aria-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. No float layouts, no flex-grow workarounds for grid problems.
  • Performance — preconnect for fonts, display=swap, loading=lazy + decoding=async for offscreen images, dimensions on every img.
  • 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-page handling 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.

References

  1. Cloudflare Workers Static Assets. developers.cloudflare.com/workers/static-assets.
  2. Google Fonts — Instrument Serif. fonts.google.com.
  3. Google Fonts — EB Garamond. fonts.google.com.
  4. Google Fonts — JetBrains Mono. fonts.google.com.
  5. W3C Markup Validation Service. validator.w3.org.
  6. Web Content Accessibility Guidelines (WCAG) 2.2. w3.org/TR/WCAG22.
  7. Lorem Picsum. picsum.photos.