Electrical
Wrenfield Electric Co.
Every circuit in your house should be boring.
The brief
Electrical is the trade where the customer understands least and the stakes are highest. A homeowner can see a leak and hear a furnace. They cannot see a loose neutral, and the difference between a nuisance and a fire is invisible from outside a wall.
So the site opens by asking what they are noticing rather than announcing who the company is. Nine observations — a breaker that keeps tripping, lights that flicker, something warm to the touch — each routed to what it usually means, how urgent it honestly is, and what the company would actually do about it.
The art direction is a working drawing. Carbon ink on a warm-neutral sheet, everything on a hairline grid, and exactly one chromatic accent: copper, which marks the live path and nothing else. The recurring motif is a single-line diagram that traces itself across the page as you scroll.
Build spec
- Palette
- Carbon, warm-neutral sheet, copper — one accent, used only for the live path
- Typography
- Space Grotesk · IBM Plex Sans · JetBrains Mono
- Routes
- 22
- Client JS
- ~11 KB
- CLS
- 0
What it actually does
- 01
Symptom router
Nine things a homeowner can actually observe, each turned into an explanation, an honest urgency and the right page. A real tablist with arrow keys — and every panel renders server-side, so it still works with JavaScript off.
- 02
Load estimator
“Will my panel take it?” answered properly: service size, floor area and what is already electric, against the rating with the 80% line marked. It says on screen that it is an estimate and that a permit needs the real calculation.
- 03
Claims gated in config
Licence number, certifications, dealer status and star rating are all null and marked do-not-invent. The site renders the blank and explains it rather than filling it in.
- 04
Ten written service pages
Repair, breakers, panels, EV chargers, generators, surge, lighting, devices, rewiring and commercial — each with its own scope, pricing explanation and FAQ schema.
- 05
A safety page with no instructions
What to do first, the seven symptoms that mean stop and call, and an explicit statement that this site will not tell you how to work on a live circuit.
The signature interaction
More screens
Measured, not claimed
Lighthouse, mobile emulation, production build. Homepage.
Next
Want a build like this for your business?
Same process, same standard, written for your trade instead of electrical.