Landing page

Halstead Mechanical

An emergency caller needs a number a person answers. A bidding contractor needs evidence before spending a call. Splitting those into two sites doubles the maintenance for a company with no marketing staff, so I built this one-page concept in 2026 to carry both. Halstead Mechanical is an invented company and no figure on the page belongs to a real business.

Open the live site Back to landing pages
Client
Halstead Mechanical (an invented contractor)
My role
Research, design and front-end development
Year
2026
Format
One-page site, plus a process document
Process
halstead-mechanical.netlify.app/process
First screen of the Halstead Mechanical concept: a dark petrol hero over a photograph of rooftop air handlers at dusk, the headline "When the chiller goes down at 2 a.m., call us.", a call button and an estimate button, a roof plan panel with four rooftop units where one is selected, and an orange emergency strip underneath with a live Columbus clock and the phone number.
The first screen. The photograph is a real rooftop and the roof plan on top of it is drawn, and that pairing repeats down the page. The four units are clickable and the panel below reads out capacity, age and status.
  • Two routesAn emergency caller reaches the number in the first two screens, a bidding contractor reaches the evidence before the form
  • Nine container queriesThe layout responds to the width of the page itself, so the same markup lays out correctly inside a scaled frame
  • One HTML fileAbout 115 KB, hand-written, no framework and no build step

About the project

Two people arrive at a mechanical contractor's site and they want opposite things. One is a facility manager standing in a plant room with something broken, on a phone, who wants a number a person answers and a promise about how long. The other is a general contractor or owner's rep pricing a job, on a desktop, who wants to know whether this contractor handles the scope, the size and the delivery method before spending a call. Splitting into two sites doubles the maintenance for a company with no marketing staff, so both routes run down one page.

The split happens in the first screen and again in the strip underneath it. The urgent route never passes through a form: it gets a filled call button in the hero, a full-bleed emergency strip with a live Columbus clock, and a triage that turns a symptom into a verdict and a short list of what to have in front of you before you dial. The planned route answers the size question before it reaches the form, with four projects carrying square footage, tonnage and delivery method, then a chart of measured response times, then the counties covered.

The art direction is a drawing sitting on top of every photograph. The hero is a rooftop air handler at dusk with the roof plan laid over it. The plant room photograph sits directly above the building section that labels what is in it. The photographs show the weather, the scale and the wear of real equipment, and the drawings add the unit tags, dimensions and callout numbers. Both use the same petrol and cream colors.

Halstead Mechanical is not a real company. I invented it for the constraints: two intents on one page, a phone layout that has to work in a room with bad light, and enough technical specificity that a facility manager would believe it.

Section by section

The page, top to bottom.

  1. Halstead hero: a petrol gradient over a photograph of rooftop air handlers under a dark sky, the headline "When the chiller goes down at 2 a.m., call us.", a description of the services, a red Call button and an outlined Request an estimate button, and a dark roof plan panel showing RTU-1 to RTU-4 with RTU-3 highlighted in yellow and a readout giving 45 tons, installed 2006, tagged for replacement.
    Hero and emergency stripThe headline names the emergency the visitor is in. Two primary actions sit in the first screen because the page serves two intents, with the call button filled in the alert color and the estimate button outlined beside it. The roof plan is drawn in SVG over the photograph, and its four units are clickable. The strip underneath is the only full-bleed alert color on the page, and its clock shows Eastern time, where the company is, whatever time zone the visitor is in.
  2. Halstead entry section: the heading "Call us, ask for a quote, or put the building on a plan" with three cards headed Emergency service, Installation and replacement, and Service agreements, each with a short paragraph and an action.
    Three ways inEmergency, a project, ongoing upkeep, named the way a visitor names them. Each card states what happens next and carries its own action, so the section works as a decision. The emergency card is the only one with a filled button and a tinted ground.
  3. Halstead services section: the heading "HVAC, plumbing and controls on one contract", four cards headed HVAC, Plumbing, Building automation and Maintenance each ending in a specification line, a numbered list of four callouts, and on the right a photograph of a mechanical room above a line drawing of a building section with numbered bubbles.
    What the company doesFour trades on one contract, each card ending on a rule with the figure that matters for that trade: equipment size, pipe size, protocols, buildings covered. Beside them a photograph of a plant room sits directly above a drawn building section, and the four numbered callouts under the cards highlight the matching part of the drawing on hover or tap.
  4. Halstead triage section: the heading "Check how fast this needs a technician", six buttons reading No cooling, No heat, Water or a leak, Alarm on the controls, Ice on the unit and Noise or vibration, and a panel below headed Call now with an explanation, three things to have ready and a red Call button.
    TriageSix symptoms, each one producing a verdict, a short checklist and an action. The action swaps between a phone link and the estimate form depending on how urgent the verdict is. One symptom is open at rest so the panel is never an empty half of the section.
  5. Halstead projects section: the heading "Four buildings from the last two years" and four cards, each with a photograph of a building above a square footage figure, a year, a project name, one sentence of scope and a line giving tonnage and delivery method.
    ProjectsFour buildings from the last two years. Square footage in Archivo with tabular numerals, then the scope in one sentence, then tonnage and delivery method on a rule at the foot of every card. Those are the figures a contractor uses to work out whether this company works at their size.
  6. Halstead response section: the heading "How long it takes us to get there" and a panel with three horizontal bars reading 47 min for emergency business hours, 1 hr 8 min for emergency nights and weekends, and 3 hr 48 min for a same day service call, on an axis from zero to four hours, with the figures 340 buildings on a service agreement, 60 technicians on our own payroll and 1974 as the year the company started.
    Response timesMedian time from the call to a technician on site, drawn as three bars on one scale that fill when the panel comes into view. The two emergency rows are in the alert color and the routine row is not, so the chart encodes urgency as well as duration. Three figures underneath give the size of the operation.
  7. Halstead service area section: the heading "The counties we cover" and a schematic map of seven counties with Franklin selected in teal and a red dot marking the shop in Hilliard, beside a panel reading Franklin County with drive time, buildings under contract, emergency cover and a list of towns.
    Service areaSeven central Ohio counties drawn as buttons in an inline SVG, each one tabbable, driving the readout beside it. Selection is carried by the readout as well as by the fill, so it does not depend on color alone.
  8. Halstead estimate section: the heading "Tell us what you are working on" with a list of what happens next business day, within the week and with the quote, beside a form with work type buttons reading Install, Service and Controls, a building and size field, an email field and a yellow Request an estimate button. Below it a dark footer laid out as a drawing title block with the contractor name, licence numbers, dispatch number and the year founded.
    Estimate and title blockThree fields and a required work type, because a dropdown of building types loses the sentence the estimator wants. Beside it, what happens after you send it, in three rows with a time on each. The footer is set as a drawing title block, which is the one place the industrial reference is literal.

A second document at /process shows how the page was made: the brief, the user flow, the wireframe beside the finished build, the decisions and the component system. The finished page runs live inside the document.

  • A user flow diagram splitting into an urgent route reaching an emergency band and a technician assignment, and a planned route reaching the services and projects and then a qualified inquiry.
    The split happens in the first screen and again in the strip under it. The urgent route never passes through a form.
  • The wireframe of the page structure in gray, with the finished page beside it running in full color inside the document.
    The wireframe on the left and the finished page beside it, running live inside the document.
  • Four note cards headed The hero carries two primary actions, The form sits at the end of the page, The three entry points are named the way a visitor would name them, and A drawing sits on top of every photograph.
    Each of the four decisions follows from the split in the flow.
  • A component system panel: nine color swatches with their roles, a table of measured contrast ratios, a type scale in six sizes, six button states and a ten step spacing scale.
    The swatches, the contrast table and the spacing scale are read out of the stylesheet when the document is built, so it cannot claim a color the page does not use.
  • A tablet frame and a phone frame showing the live page at 768 and 390 pixels, beside a table listing nine container widths and what changes at each one.
    Both frames are the live page at their own widths. The page lays out on container queries, which is what makes that work inside a scaled document.

On a phone

The page on a phone. The facility manager with something broken is in a plant room holding a phone, so this is the layout that was designed first.

  • Halstead on a phone: the concept notice, the header with the phone number and a full-width estimate button, the headline over the rooftop photograph and a full-width red Call button.
    The phone number and the estimate button sit above the navigation, so the two actions are reachable before anything else loads.
  • Halstead on a phone: the heading "HVAC, plumbing and controls on one contract", a paragraph, then the HVAC and Plumbing cards stacked with their specification lines.
    The four trade cards go one per row and each keeps its specification line on a rule at the foot, whether the heading above ran to one line or two.
  • Halstead on a phone: the heading "Check how fast this needs a technician", six symptom buttons wrapped over three rows, and the start of the Call now verdict panel.
    The symptom buttons wrap onto three rows, and the verdict opens directly underneath them.
  • Halstead on a phone: the heading "Four buildings from the last two years" and the first project card with its photograph, 218,000 sq ft, the project name and the scope.
    Project cards go one per screen and the square footage stays the first thing read, above the name.
  • Halstead on a phone: the heading "Tell us what you are working on", the three rows of what happens next, and the work type buttons at the start of the form.
    What happens after you send it moves above the form, so the form is the last thing on the screen.

What went into it

Design

  • Petrol blue, warm cream and safety yellow, with a hot orange used only on the emergency route. Yellow marks the next action anywhere on the page, so a visitor who learns the orange once can find the emergency route again without reading.
  • One theme on purpose. A contractor's page is read in daylight on a phone in a plant room, so the page stays light whatever the visitor's system is set to.
  • Archivo set at a width of 112 for display, IBM Plex Sans for text and IBM Plex Mono for labels and every figure. The type scale has four sizes.
  • Every image slot pairs a photograph with a drawing: the roof plan over the hero, the building section under the plant room. The drawings sit on their own ink tokens.
  • Dark appears twice, on the hero and on the footer. Everything between them alternates white and cream, and every band sits on one of three padding steps.
  • Contrast was computed from the color tokens: 14.8 to 1 for headings on the page ground, 11.7 to 1 for text on the yellow button, 12.5 to 1 for the headline on the dark ground.

Build

  • One HTML file, about 115 KB, with hand-written CSS and JavaScript. No framework and no build step on the page itself, though a small Python script assembles it from the token, base and section stylesheets.
  • Nine container queries, so the layout responds to the width of the page itself. That is what lets the same markup lay out correctly inside the scaled device frames in the process document.
  • The roof plan, the building section and the county map are inline SVG with no raster and no text baked in. Every clickable part is a real button with aria-pressed, so they work by keyboard.
  • The triage maps six symptoms to a verdict, a checklist and an action, and swaps the action between a phone link and the form depending on the verdict.
  • The response chart fills on IntersectionObserver, and a bar past 72 percent of the track moves its value inside itself and waits for the fill to land before it appears.
  • The clock shows Eastern time through Intl, so the 24 hour claim is checked against the hours the company keeps.
  • Every image slot keeps its drawing underneath the photograph, so a missing file falls back to the drawing. The page still reads with images turned off.
  • The build refuses to write the file if a class in the markup has no rule, or if an em dash, an en dash or an exclamation mark reaches visible copy.
  • Deployed on Netlify.

Tools used

  • HTML & CSS
  • JavaScript
  • SVG
  • Python
  • Google Fonts
  • Netlify
Live site Back to landing pages