01 Context
The client is a custom home builder in BC's Fraser Valley, nearly two decades into the trade, whose reputation moves the way reputations in that trade actually move: a finished house, a neighbour's question, a referral. The craft is envelope and finish work — cedar, fiber-cement, the details a passerby notices without knowing why. What the firm did not have was a web presence that carried any of that weight.
The buyer this site serves is making a seven-figure trust decision, and usually starting from a phone in a driveway. That buyer is not comparing coupons; they are looking for evidence that a firm is established, careful, and unhurried. So before any code was written, the engagement produced a positioning document with one governing line: quiet authority over hard selling. The work is the hero. Everything else on the site either serves that posture or does not ship.
That document is not a mood board. It is a set of hard rules the build enforces — and most of this study is about what enforcing prestige actually looks like in code.
02 The Constraint
Two constraints defined the engagement, and both were about honesty.
First, the firm had zero published reviews. The standard playbook for contractor sites — star ratings, testimonial sliders, an invented "rated by hundreds" line — was unavailable without fabricating it, and fabricated trust was banned outright: no invented quotes, no review or rating structured data, anywhere, ever. The site had to make a prestige argument with nothing borrowed. What the firm could truthfully lead with: longevity, materials knowledge, and the portfolio itself.
Second, the portfolio was the proof, and most of it had not been photographed. The slot registry in the codebase enumerates roughly 130 photo positions; when the drop-in phase began, eleven were shot. A site whose entire argument is "look at the work" had to launch before most of the work could be shown — without ever displaying a stock photo, an AI-generated stand-in, or a visible placeholder.
Underneath both sat performance gates of the boring, non-negotiable kind: Largest Contentful Paint under 2.5 seconds on mobile, cumulative layout shift under 0.1, Lighthouse scores of 90 and up. A slow, shifting page reads as carelessness, and carelessness is the one thing this buyer is screening for.
03 The System Engineered
The stack is deliberately conventional: Next.js on the App Router in strict TypeScript, Tailwind CSS v4 with a CSS-first token theme, framer-motion, deployed on Vercel. Nothing exotic — the engineering budget went into discipline, not novelty.
Positioning compiled into rules. The prestige posture is written down as operating instructions every contributor, human or agent, must obey: no published pricing, no urgency or response-time promises, no "free quote" language, no financing page without owner confirmation. Exactly one conversion path exists — a quiet "Enquire" in the header and tap-to-call on mobile, with a minimal form on the contact page only. We rejected the lead-gen pattern of a form embedded in every section, because a firm that does not need to convince you does not ask on every screen. Enquiries flow through a server action into the firm's CRM, so API credentials never reach the client bundle.
A design system built on subtraction. The first typographic direction — thin serif on cream — was thrown out for reading like template output. What replaced it is an architectural register: a characterful grotesk set heavy for display, a humanist grotesk for body, and a monospace used like an architect's stamp — kickers, section indices, figure captions, uppercase and letterspaced, never body copy. Color is structural rather than decorative: a warm paper-and-ink neutral field, a single forest green owning every action, a navy pulled from the brand mark used only as flat structural bands, and a cedar tone rationed to numerals. The anti-pattern list is a QA fail condition, not a suggestion — system fonts, purple-on-white gradients, pill buttons, uniform card grids, carousels, centered-everything layouts — any of them fails review.
Motion held to a token table. One orchestrated entrance per page, a single easing curve, staggers capped at 0.24 seconds so groups never drag. The homepage hero opens with an occlusive curtain: panels lift off the image course by course, like siding rows going up. That effect was chosen because it covers rather than unmounts — the LCP image paints immediately underneath, so the signature moment costs nothing against the paint metric. Parallax exists only as a depth cue, transform-only and capped near 22 pixels, two or three placements per page. Scroll-jacking, autoplay video, and carousels are banned, and reduced-motion preferences resolve to static and fully visible — never hidden content.
An image pipeline that makes photography a data drop. Every image position is a registered slot: aspect ratio, alt text, responsive sizes, and LCP priority live in one registry, and the single image primitive reserves its exact aspect-ratio box whether or not a real photo exists yet. Sections that depend on photography render only when their image does — so the site never ships a placeholder, and adding the next batch of photos is a data operation, not a code change, with zero layout shift by construction. On the encoding side, a sharp-based script cover-crops each master to its slot's registered aspect with focus-point positioning, then emits AVIF and WebP at four breakpoints. Byte budgets are enforced mechanically: hero variants step AVIF quality down until they fit under 200 KB on desktop and 80 KB on mobile, heroes carry a tiny blurred inline placeholder, and the LCP image is preloaded from the document head. Even the cache policy is a decision — photo filenames are stable, so the CDN policy is deliberately not immutable: a week at the edge with background revalidation, so a re-encoded photo goes live without a purge.
Honesty enforced as build failure. Every business fact — services, cities, contact details — lives in one typed content module that pages, structured data, navigation, and the sitemap all read from. Facts the owner had not yet confirmed are marked as blockers, never guessed. The production build fails loudly if the canonical site URL is unset, because a guessed fallback would ship hundreds of canonical tags and schema IDs pointing at a host nobody controls. The structured-data layer carries the same rule as the copy: JSON-LD on every page, and no review markup until real reviews exist.
04 What Changed
What shipped is a feature-complete site that builds clean: a full page inventory — homepage, deep service pages, a service-area page, about, process, FAQ, contact — each carrying page-level metadata and a structured-data graph, with security headers set at the platform edge and the accessibility and reduced-motion guarantees above. More precisely, what shipped is a system in a deliberate partial state: the photographed portions are live, the unphotographed sections are authored, wired, and invisible, and nothing anywhere is faked.
That partial state is the point. The site is built to absorb the firm's photo library as it is shot — each new batch runs through the encoder, lands in the registry, and switches on the sections that were waiting for it, at pre-budgeted byte sizes and with no layout movement. New service areas and services are data entries against existing dynamic routes, gated by the same standing rule that thin templated pages do not ship. The prestige argument gets stronger with every shoot, and the system holds the same standard on day one thousand as on day one.
Details that would identify the client have been withheld; every technical claim above is observable in the build.