01 Context
The client advises individuals and business owners in the Vancouver area on strategic insurance and wealth protection — a category where the product is not a policy but judgment: which exposures actually matter, which coverage would actually pay out, which instruments are worth their complexity. Their positioning is built on one argument, repeated with discipline: there is a gap between what a policy document says it covers and what happens during a real claim, and most of the industry avoids talking about that gap because it is hard to explain.
They came to us with a strong identity — a wordmark, a dark brand card, and a concept document that laid the philosophy out in plain language — and no website to carry any of it. The engagement ran about four weeks in spring 2026: an initial build to establish the visual system, then a full second pass once the concept document was finalized. That second pass is where the site's copy architecture and most of its engineering discipline took final shape.
02 The Constraint
The buyer this firm wants is exactly the buyer that financial marketing has spent decades teaching to flinch. Someone with real assets and real legal exposure has already seen the stock-photo handshakes, the vague performance language, the urgency buttons. For that reader, polish that tries too hard is indistinguishable from a sales funnel — and since the product here is discretion, a website that oversells contradicts the product on contact.
That converts into three operational requirements. First, every sentence on the page must survive a skeptical read: no promised outcomes, no superlatives doing the work that specifics should do. Second, the page has to feel physically precise, because scroll jank undercuts a brand claim about precision faster than any paragraph can rebuild it. Third, restraint cannot become invisibility — the site still has to function as marketing: discoverable in local search, structured as an argument, and ending in a contact motion a serious prospect will actually complete.
03 The System Engineered
A direction chosen against two alternatives. Three visual directions were drafted in exploration: a fortified neo-brutalist treatment built on exposed grids and monumental type, an orbital space-age system of radial layouts and instrument-panel interactions, and a cinematic direction — deep navy atmosphere, polished chrome structure, a single restrained blue accent. The brutalist direction was set aside because intimidation is the wrong register for a firm selling calm judgment; the orbital one because novelty ages badly and reads as decoration. The cinematic direction won on a specific property: its palette is deliberately narrow, and narrowness reads as control. The blue accent appears only at decision points — navigation states, section labels, the call to action — so attention lands where a decision is being asked for and nowhere else.
Typography as the authority layer. Headings are set in a classical serif with Roman-inscription proportions; body text in a light geometric sans; section labels in wide-tracked uppercase, the register of a formal document rather than an advertisement. The polished-metal headline treatment is a CSS gradient clipped to the text — the entire visual identity is type, color, and hairline borders, with no decorative imagery to date the site or slow it down. Backgrounds are pre-encoded WebP photography held behind heavy navy scrims, present as atmosphere rather than subject.
Motion stripped to the platform. The first build shipped with a React animation library. The rebuild cut it from the page entirely — a decision made against a checklist item that read, in effect, reduce animation weight and keep the bundle small. What replaced it: CSS keyframes for the hero's entrance, and a roughly fifteen-line IntersectionObserver hook that fades each section up once as it enters the viewport, then disconnects its observer. The navigation bar's solidify-on-scroll state comes from a single passive scroll listener. Nothing hijacks the scrollbar, nothing loops, and a global reduced-motion rule collapses every animation to effectively zero duration for visitors who ask for that. The standard this serves: motion at reading pace signals composure; motion that performs for you signals a pitch.
A copy system that argues instead of promising. The page is one linear narrative — philosophy, protection, investments, process, contact — and every section advances the same claim-gap argument. Product cards state mechanics, not adjectives: statutory contribution limits, maturity guarantee ranges, creditor-protection features, who a structure is actually designed for. The engagement process is presented as four concrete steps, including one devoted to stress-testing the policies a prospect already owns. An educational-only disclaimer is standing copy under the contact form and in the footer, not buried legalese — for this audience, visibly refusing to overclaim is itself a trust signal. A dedicated legibility pass late in the build raised every small text size on the page one step, 49 edits site-wide, on the principle that fine print anywhere undermines a brand built on plain language.
A contact form built like the firm's own process. The form is three deliberate steps — identity, then a service-selection grid, then an optional message with a review summary — with inline validation per step and free navigation backwards. The review step exists on purpose: a firm whose pitch is "we map everything before recommending anything" should not end its own site with a fire-and-forget form. Confirming what you are asking for before you send it mirrors the discipline being sold.
Boring, fast delivery. The site is a static Vite build — React 19, TypeScript, Tailwind 4 over an oklch token palette — served by a small Express process with an SPA fallback. Fonts load through preconnect hints with swap behavior; imagery ships as WebP from a CDN. Discovery is handled structurally: a FinancialService JSON-LD entity, canonical and locale-scoped social metadata, and a heading hierarchy that matches how the services are actually searched for in the region.
04 What Changed
What shipped is a single-page site that holds a difficult register: authoritative without being loud, marketing that a marketing-averse buyer can read without flinching. Its engineered properties are checkable in the build — no animation library in the render path, motion done in CSS and one small observer hook, a reduced-motion fallback, WebP assets behind scrims, static delivery behind a minimal server, and a copy layer where every product description carries its mechanics.
The structure has already absorbed growth once: mid-engagement, the investment lineup expanded from four vehicles to six, and the change landed as new cards in an existing grid plus two entries in the form's service list — no redesign, no new sections. That is what the system is built to carry going forward: more products, more exposure categories, and more argument, added at the speed of writing a card rather than the speed of redesigning a site.
Details that would identify the client have been withheld; every technical claim above is observable in the build.