Hartwell Glasshouse: building a bespoke-orangery brand

Hartwell Glasshouse Co is a speculative bespoke-orangery brand for the Surrey commuter belt — hardwood conservatories and garden rooms in the £42,000+ bracket, sold end-to-end from design through sign-off. Concept work. The brief we wrote ourselves: how does a builder of slow, expensive, made-for-life objects communicate craft on a homepage that loads in two seconds?

Most conservatory builders default to lifestyle photography over white UPVC. We wanted to do the opposite — let the visual language of the site itself read as architectural before a single product photograph appears. Below are the design choices that made that work.

The drafting-frame photo hover

Every project photo on the site sits inside a thin black frame with dimension labels in the corners — a deliberate quote of the language of architectural drafting. On hover, the frame's corner ticks extend outward by a few pixels and the dimension labels fade in. It's a small interaction but it does heavy lifting: it tells the visitor, without saying so, that the people behind this brand draw before they build.

Technically it's a CSS-only effect — the frame is a wrapper element with absolutely-positioned corner SVGs, and the dimension labels are opacity-0 by default and lift to 1 on :hover over a 250ms ease. No JavaScript involved. It performs well on mobile because the hover state degrades to a permanent visible state on touch devices — the labels just stay on.

The page-transition sweep

Internal navigation between pages — homepage to a Surrey area page, area page to a project case study — triggers a top-down sweep transition. A solid panel painted in the warm patina accent colour sweeps from the top of the viewport to the bottom over 600ms, then back upward as the new page mounts behind it. The page state machine handles the timing so the panel only releases when the new route is fully hydrated; we never see the underlying content flash through.

The lesson there: page-transition sweeps on heavy-JS sites must sync to the actual pathname change, not a fixed timer. Otherwise the panel lifts before the new page is painted and you get a worse FOUC than if you'd had no transition at all. Hartwell uses a four-phase state machine (idle / in / hold / out) so the transition feels deliberate rather than mechanical.

Typography and the warm-patina palette

One display serif (Fraunces, optical-size dialled in to the larger range) and one body sans (Inter, light weights for body, regular for UI). The display serif carries the editorial weight — paragraph openers, project titles, area-page headers — while Inter handles everything functional.

Ink colour is a warm near-black #1A1614 rather than pure black. The single accent is a soft patina green-grey that picks up the oxidised-copper tone from real-world weathered lead flashings on hardwood orangeries. Applied sparingly on underlines, the transition sweep, and the enquire CTA. Cream paper background #F5EFE6rather than white — pure white reads cold against the patina, the warm cream reads like aged paper, which fits the "we've been at this for a while" story.

Area pages as luxury signal

The site has per-area landing pages — Weybridge, Cobham, Esher, Oxshott, Surbiton — each with a specific local hook (planning notes for that conservation area, photos of completed work nearby, area-specific enquiry form). These exist for SEO but they do a second job: they signal that the studio knows the postcodes its prospects live in. For a £42k purchase, geographic specificity reads as competence.

Each area page reuses one component (with different content via a CMS-style data file) so adding a new area is one entry in an array. The reusability is invisible to the visitor — but it lets the studio scale local SEO across the commuter belt without rebuilding the page each time.

Communicating value at £42k+ without scaring

Most premium-build sites either hide pricing entirely (forcing the enquiry conversation) or display it boldly (filtering out tyre-kickers). Hartwell uses a third approach: a single line — "Projects typically run from £42,000"— appears once, late on the homepage, framed in the same drafting language as the project specs. It's factual, not promotional. The framing tells the visitor what to expect before they enquire, which qualifies the conversation without making the site itself feel transactional.

What we'd change for a real builder

• Real project photography — concept uses AI-generated interiors. Real builds have specific timber grain, real glazing reflections, and weather patina that AI tends to over-smooth.
• A process page— for a slow-build product, the journey from first sketch to sign-off is itself a sales asset. We'd add a timeline page laying out the 16-24 week process so prospects feel held through the wait.
• Live area indicator— the concept has fictional phone/postcode. A real builder would pull current capacity from a CRM ("currently quoting in Weybridge / Cobham, March 2027 slots") so the area pages stay honest about who they can serve when.

The bigger lesson

Hartwell is the case for letting visual language do half the qualifying work. A site with editorial serifs, drafting-frame photos, and a measured patina palette will lose the tyre-kickers before they reach the enquiry form — and the prospects who do enquire arrive already half-sold on the brand's level. For a £42k+ build, that screen-out is more valuable than incremental traffic. The website doing the early qualification is the website earning its keep.