§ 01 · Type
Three families. The display face is Allerta Stencil by Matt McInerney, distributed via Google Fonts under the SIL Open Font License. We picked it for the same reason a sign-painter would — legibility at distance, the stencil-bridge cuts that match the way a chandlery stencils a hull number.
The body face is Saira, the variable cut, by Omnibus-Type. It is a workmanlike sans with a slight technical character at the lower weights. We use weights 350 (body), 500 (UI), and 600 (emphasis); the variable axis is set with font-variation-settings: "wdth" 100.
The mono face is JetBrains Mono, used for codes (NEC, ABYC, NMEA), dates, hull numbers, and field notes. The choice is intentional: mono in this site is not "decoration", it is "the data has a fixed-width meaning here."
§ 02 · Palette
Seven colors. Five neutrals and two accents.
| Survey paper | #F2EDE2 — the paper of a marine condition-survey report. |
|---|---|
| Tar black | #14161B — body text and structural ink. |
| Drydock zinc | #8E8F84 — secondary text and rules. |
| Diesel | #23262C — deep surfaces, footer, image grounds. |
| Fuchsin warning pink | #C72869 — the accent. Used as a statement, not as a field. The color of the carbol-fuchsin step in the Ziehl–Neelsen stain, which was one of the random Wikipedia articles that grounded this design. |
| Signal blue | #1A537F — links and the harbor map's water. |
| Chart-edge ochre | #B68B3D — reserved. |
The choice to use fuchsin as a statement accent and zinc as the dominant neutral is the answer to a brief about a working-class marine industrial trade in 2026. The accent draws the eye to the codes and the cautions; the neutrals carry the work.
§ 03 · Imagery
The photographic plates are placeholders. They are pulled from Lorem Picsum with deterministic seeds, so the same person on the crew page is the same image every load. In a production deployment they would be replaced with photographs by a working New Bedford waterfront photographer — the obvious referent is Phillip Mello, whose work is held by the New Bedford Fishing Heritage Center and the Library of Congress.
The harbor map on the home page is an inline SVG that we drew in a text editor. It is schematic, not survey-accurate; for the survey-accurate harbor see NOAA chart 13218.
§ 04 · How it's built
The site is hand-written HTML5 and CSS3, no framework, no build step. The single JavaScript file (reveal.js) is twenty lines and gates a small reveal-on-scroll on prefers-reduced-motion: no-preference.
The site is hosted on Cloudflare Workers Static Assets, deployed via Wrangler. Custom domain electrician-fleet-newbedford.ampifex.xyz is provisioned by Cloudflare DNS automatically.
Type loads from Google Fonts with display=swap; preconnect hints in the head trim first-paint. Every <img> has explicit width and height to prevent layout shift. The CSS uses color-mix(), aspect-ratio, and clamp() — modern, but well within current browser support.
Accessibility: skip-link, landmark roles, single h1 per page, contrast tested at 4.5:1 on body text, :focus-visible styled, all motion gated behind prefers-reduced-motion. Forms are real <form> elements with autocomplete and labels; we are not pretending to wire a backend.
§ 05 · Privacy
The site uses no analytics, no tracking pixels, no third-party JS, and no cookies. The only third-party requests are to Google Fonts (CSS + woff2). See privacy for the full statement.
Sources & further reading
- Allerta Stencil, Matt McInerney via Google Fonts.
- Saira variable, Omnibus-Type.
- JetBrains Mono.
- Ziehl–Neelsen stain on Wikipedia (palette grounding).
- Garden sculpture on Wikipedia (form grounding).
- Hoffman Estates, IL on Wikipedia (atlas-IA grounding).
- Phillip Mello at the New Bedford Fishing Heritage Center, American Folklife Center, Library of Congress.
- Cloudflare Workers Static Assets documentation.
- WCAG 2.1 Quick Reference.