Harkness Auto & Tire

Every package ladder has the same weak rung. The entry tier is where studios stop designing and start assembling, because the margin is thin and the client rarely knows the difference. Harkness exists because I did not want that to be true of mine. It is a fictional shop, labelled as a concept everywhere it appears, built to the exact scope a real Trailhead client gets: three primary pages, with contact and legal assumed.

The concept came out of the trade rather than a design gallery. A garage's world is enamel signage, torque numbers, work orders on a clipboard, and a bay door that frames the mountains behind it. So the palette is sign navy and cream, the type is heavy and industrial rather than delicate, and the interface borrows from the objects a shop already uses: signs, spec strips, and a counter.

The hero was the hard problem. An auto shop runs year round, and its weather is the whole customer conversation: winter tires, mountain passes, minus twenty mornings, road salt. So the signature became one year on one corner of the building, and the point it makes is that the shop is the fixed thing while the weather moves. A twenty-second clip was generated at a locked camera, checked for drift across all 481 source frames, sampled to 72 frames, and scrubbed by scroll with adaptive blending between neighbours so the year moves like a year rather than a slideshow.

Legibility over a photograph that changes every frame is a new problem, and it produced a law worth keeping. Two scrims, not one: a mood scrim that reacts to each frame's measured brightness, and a tight fixed pool under the headline. Text contrast cannot be allowed to depend on the season, so the pool never moves. Measured across the whole year with the headline hidden so only the photograph is graded, the accent's worst frame reads 6.59 against a 3.0 requirement, and removing the pool as a control drops it to 1.23, which is how I know the gate can fail.

The commercial layer is the part a shop owner would actually care about. Ten jobs carry real numbers, the shop rate is published, parts are at cost plus twenty percent, and diagnosis is credited against the work. There is a sample invoice on the page, numbered and itemized, so a stranger can read a whole bill before they ever receive one. That is the answer to the industry's oldest complaint, and it costs nothing but nerve to publish.

The build also taught two measurement lessons that now travel to every project. A broken-image check built on the browser's own loading flag flagged eight healthy images, because that flag reads false for anything lazy-loaded below the fold, so the honest gate fetches and decodes every referenced URL instead. And an interactive card painted blank while reporting perfect geometry, because a React re-render was wiping a class the scroll-reveal system had set, so interactive state now lives on a data attribute where the two systems cannot fight.

The shop, the town, the family, and the phone number are invented. The system is real, and for a working garage the same build takes their photography, their prices, and their booking path, with the hero showing their building through their year.