Black Wolf Heating & Air — a site that books the truck.

The brief

Black Wolf is a fictional HVAC crew built to show how a local trade business should look online. The brief: answer the two questions every homeowner has — "how fast?" and "what will it cost?" — before they're asked, and make the booking form the loudest thing on the page without ever shouting.

No sliders, no stock trimmings, no "welcome to our website" copy. The work, the price philosophy, and the form.

The build

The visual system is warm paper, forest green and copper — Fraunces for the voice, Manrope for the work. An inline SVG icon sprite replaces icon fonts; photography carries real on-the-job weight.

• Six service flows, one funnel — furnace, AC, heat pumps, air quality, ductwork and maintenance plans; every CTA deep-links into the booking form with the service dropdown pre-selected via a data-service attribute.
• Cold-climate heat pump section — education instead of hype: load calculations, duct and electrical checks, Focus on Energy and federal incentive paperwork handled, and a side-by-side comparison before the customer commits.
• 24/7 emergency band — "It's not the cold. It's the wait." A full-width winter photo section with a tap-to-call number designed for a homeowner standing in a cold hallway.
• Four-step process page — tell us, pick a window, diagnose in person, fix it in writing — with a "the price you approve is the price you pay" guarantee note.
• Comfort Club plan card — a $16/month maintenance plan as a pricing card with a six-point checklist, feeding the same funnel.
• Hand-drawn SVG service map — Lake Winnebago, twelve towns, service radius, scale bar and north arrow, all vector. No map API, no external tiles, loads instantly.
• Validated booking form — seven fields with client-side validation, required-service guard, phone/ZIP patterns and an accessible status message announced on submit.
• FAQ with native accordions — six <details> elements answering real questions, including "should I repair or replace?" answered both ways.

What's real vs. demo

The design system