Type
Display and UI: Bricolage Grotesque, a variable grotesque by Mathieu Triay, optical-size and width axes used. Body text: Newsreader, a variable transitional serif by Production Type, optical-size axis used at 16 for body and 30 for pull-quotes. Monospace and readouts: Geist Mono, by Vercel.
All three are served via Google Fonts with font-display: swap and a single preconnected request to fonts.gstatic.com.
Palette
| Bone paper | #F4EBDA | Page background |
|---|---|---|
| Smoke charcoal | #1B1714 | Body text, footer |
| Rorbu red | #A0291C | Brand mark, accent |
| Ember orange | #D4521C | External-link affordance, pull-quote rule |
| Arc yellow | #FFC60B | Hi-vis caution, used sparingly |
| Rule | #C8B893 | Hairlines, dividers |
The palette is anchored in the painted-timber red of Lofoten rorbu fishing cabins (a deep oxide-iron red used on Norwegian coastal architecture for centuries) and the trades-floor orange of high-temperature ember. The arc-yellow hi-vis is from ANSI safety-orange's complementary partner; we use it only for active state and caution.
Layout grammar
Editorial canvas at min(1320px, 100% - 2.4rem). Body column at 60–75ch. Sticky chapter rail on detail pages. Bracket grid for the season pages. Field-record cards laid out as before/after pairs. The sticky page header uses backdrop-filter: blur(); falls back to opaque on browsers that don't support it.
Imagery
Topical and atmospheric photography is served via Lorem Picsum using deterministic seeds keyed to the page subject. Every <img> declares width and height to prevent CLS. Decorative imagery sets alt=""; meaningful imagery has descriptive alt text.
Hosting
Cloudflare Workers Static Assets, deployed via Wrangler v4. The site has no build step. URLs are served from public/ with directory-style trailing slashes (html_handling: "auto-trailing-slash"). Missing routes serve /404.html.
Accessibility
WCAG AA contrast on body text. Skip-to-content link as the first focusable element. Real <button> and <a> elements throughout. Tab order matches visual order. Focus rings are visible and rorbu-red. prefers-reduced-motion is honored on every animation.
Sources cited across the site
The site cites the National Fire Protection Association, ASHRAE, UL, the City of Houston Code of Ordinances, the Texas Department of Licensing and Regulation, the Texas Department of Insurance, the Houston Permitting Center, the Houston Health Department, the East End District, the U.S. Fire Administration, the Environmental Protection Agency, IKECA, ENERGY STAR, the U.S. Department of Energy, the Greenheck and CaptiveAire and Loren Cook hood OEMs, SmokeGen, Dwyer Instruments, and Lone Star College–North Harris. Every external link opens in a new tab and is marked with the ↗ glyph.
The fictional bits
Updraft Mechanical Co., its address, its founders, its team, its clients, its routes, its quoted prices, and its phone number are fictional. The codes, regulators, neighborhoods, transit lines, and standards bodies named are real. The site is a demo generated by the /generate-site skill in the Claude Code CLI.
Credits
Site generated 2026-05-08. Authored as a demonstration of contemporary brand-site practice anchored in real industry context. The writing voice is patterned after the column register of Farhad Manjoo ported to a hood shop. The visual language draws on the painted-timber vernacular of Norway's Moskenes Municipality on the Lofoten coast, and on the photographed-witness practice of the British sculptor Andy Goldsworthy. The bracket structure is borrowed from the MLS Cup playoffs.