How the Fairbank page was made

01 · THE CONCEPT

The brief in three sentences

Fairbank Insurance Brokers is a fictional small commercial broking firm in Osborne Park that places business insurance for WA trades, builders, hospitality operators, couriers and allied health practices. The audience is the Wangara sparky whose builder client just asked for a $20M certificate of currency this afternoon, and the Joondalup physio setting up her own practice who is not sure what "PI" actually covers. The page has one job: turn "what does business insurance cost for someone like me" into a phone call with the covers, the limits and an indicative annual figure already on the table.

Everything about the art direction follows from one decision — this is a policy schedule, not a comparison site. Orderly, quiet, adult. Every section is a block on the schedule with its own rule and its own reference number in mono, and the signature is literally a schedule of cover drawn to scale.

02 · PALETTE

Policy paper, a broker's stamp, and the slate of a schedule table

Argued from the physical object the page imitates: warm policy paper for the ground, near-black warm ink for type, a deep desaturated oxblood that reads as a stamp colour rather than a decorative terracotta, and a slate blue doing most of the visual work in the cover bands. Every ratio below was computed with WCAG arithmetic from the shipped hex, then re-measured against the ground it actually sits on.

Eight band fills, eight measured label inks

The stack draws up to eight bands and each one prints a figure inside itself, so the label ink is chosen per band, not once for the whole chart. Every pair below was measured, not assumed.

Map labels are body-ink class, not accent: the service-area suburbs are set in #252220 with a land-coloured halo drawn through paint-order: stroke — 11.90:1 over the land fill and 9.91:1 where a label crosses the water. The oxblood is reserved for marks and rules; it never becomes small text on a coloured fill.

03 · TYPE

Two faces, and a third in exactly one role

Sora (600/700) carries the display — a geometric grotesque whose high-waisted figures make a large dollar amount look engineered rather than decorative, which is precisely the register a schedule of cover wants. Figtree is the workhorse: open apertures, 16px minimum on mobile, comfortable at 14px in dense ledger rows.

DM Mono (500) appears in exactly one role and never leaks out of it: policy and reference strings. Section numbers, limits, excesses, gridline values, the sheet header and the stamp's basis line. If it is a number that would be printed on a real policy schedule, it is mono; if it is prose, it is not.

The typographic moment is the stamp: the annual total set in Sora 700 with −0.035em tracking at clamp(28px, 2.7vw, 33px) — 32.4px at 1200, 28px at 1000 and on a phone — sitting on the oxblood in the sheet's upper-right margin with the basis line beneath it in 9.5px mono. It reads as something a broker pressed onto the page after the arithmetic was done — which is exactly what it is.

04 · THE SIGNATURE

The Cover Stack

An SVG schedule of cover drawn as a vertical stacked bar. Each active cover is a band whose height is proportional to that cover's annual premium, labelled inside the band with its section number, its cover name and its premium in mono. Behind the stack, gridlines every $1,000 run across the sheet and are labelled — they are the honest constant reference, and they visibly compress as the frame grows. Beside the stack, a schedule column lists each cover's section, limit of indemnity, excess and premium, aligned to its band by a leader line.

The second-read detail is that the schedule column and the stack are the same data set twice — and the band you hover lifts its schedule row (and its ledger row) with it. Once you notice that, the sheet stops being a chart and starts being a document.

The frame is measured in dollars, not pixels

The stack's frame is max($3,000, ⌈total ÷ $1,000⌉ × $1,000). At rest that is a $3,000 frame with four gridline values; at the largest reachable total in the model ($8,405) it is a $9,000 frame with ten. The gridline value never changes — only its pixel spacing does, which is the entire point of drawing it.

Drawn floor. A band draws at max(14 px, premium ÷ frame × plot height) so a thin band's label stays legible, and the band prints its real premium either way. The plot resolves to 320 px at 375, 480 px at 1000 and 500 px at 1200, so the 14 px floor is 4.4% of the frame on a phone and 2.8% on a desktop — that is the band below which the guard takes over. At rest the smallest band (tools & equipment, $180 against a $3,000 frame) is 6.0% and draws proportionally: the floor is a guard, not the normal case. It does bind for the same $180 line at the $9,000 ceiling frame, where the proportional height measures 6.4 px at 375 and 10.0 px at 1200.

Reconciling a dollar frame with a pixel badge

Because the stack's frame is set in dollars and the stamp's height is set in pixels, the two had to be reconciled explicitly rather than left to a fixed aspect ratio. The sheet's height is computed each draw as max(base aspect, (measured stamp height + 24 px) ÷ 0.18) — the stamp is measured with getBoundingClientRect() after its text is written, never assumed, so a longer basis line for a longer trade name grows the header strip instead of colliding with the top gridline. In practice the clearance term wins at every desktop width: at 1200 the stamp measures 94 px and the sheet resolves to 658 px against a base aspect of only 360 px; at 1000 it is 90 px and 634 px. A fixed aspect ratio would have put the stamp through the top of the stack at exactly those widths. Every sheet string is then fitted with getComputedTextLength() against the stamp's measured left edge, choosing the longest of two or three pinned candidates that actually fits, so the header never runs under the stamp at any width.

Motion

Bands tween toward their targets with an exponential ease, a = 1 − e^(−dt/τ), at two speeds: τ = 0.155 s with a 60 ms per-band stagger on the first draw (the entrance choreography), τ = 0.085 s with no stagger for every subsequent state change, so a toggle tap reads as snappy rather than as a replayed intro. At rest the settled stack breathes by less than a pixel and the stamp's ink flickers between 94% and 100% opacity like a stamp that has not quite dried. The rAF delta is clamped at both ends — dt = min(max(now − last, 0)/1000, 0.05) — because a vsync timestamp can precede the performance.now() that scheduled the frame, and a negative delta feeding a height is an error waiting for load. The loop pauses on document.hidden. Under prefers-reduced-motion the stack snaps to its settled frame and nothing moves at all.

05 · THE MODEL

What the numbers actually are

The model is additive per cover, with two scaling drivers.

Turnover runs $250k–$3,000k in $250k steps and drives a band index b = turnover ÷ $250k − 1 (b = 0 at $250k, b = 11 at $3m). Added to the base: public liability +$40 × b, professional indemnity +$60 × b, contents & stock +$25 × b, business interruption $240 + $50 × b, cyber $420 + $20 × b. Staff runs 0–20 and drives management liability at $520 + $25 × employees — multiplying the actual headcount, since nothing in this model bills a minimum count.

Commercial motor and tools & equipment do not scale with turnover, and the page says so where you can see it happen: "a van is a van — motor and tools are rated on the asset, not your turnover". Turning the turnover stepper visibly grows five bands while those two hold perfectly still. A control that quietly moved a number it has no business moving would be the dishonest choice; a control that visibly declines to move it is the trust signal.

All eight band factors are whole dollars against whole band indices, so every reachable cell is a whole dollar by construction. That was not assumed — the verification harness enumerated the full trade × turnover × staff × cover-subset grid (322,560 cells) and found zero non-integer premiums and zero non-integer totals.

Locks, disables and the memory model

Public liability is locked on for every trade — "no insurer will write the rest of the pack without it" — which is also why this signature has no empty state: the stack always draws at least one band. Professional indemnity is locked on for the allied health practice ("you can't practise without it") and forced off for the café and the courier ("PI covers advice and design — it isn't a cover a café or a courier buys"). Commercial motor is locked on for the courier ("the vehicle is the business"). Tools & equipment is forced off for the café and the allied health practice ("no tools cover here — your equipment sits under contents & stock"). Every locked or disabled toggle stays in the tab order, is marked aria-disabled, and prints its reason on the chip — a control that silently no-ops reads as a broken page.

Each toggle keeps one remembered value. When a trade change makes a toggle forced, the value immediately before that change is written to memory — but a toggle that was already forced writes nothing, so a force that makes a control compulsory never overwrites a memory held from an earlier force. When the toggle becomes free again the memory is restored and cleared, and any explicit click on a free toggle clears its memory. The four-step drive is asserted end to end:

The third row is the whole point: professional indemnity is made compulsory there, and the memory that already says "the user had it on" survives that force untouched — so the fourth step restores the user's original choice rather than an intermediate one the user never made.

Measured figures

• Rest state: $2,200 a year. Electrical contractor, $750k turnover (b = 2), 3 staff, public liability $840 + tools & equipment $180 + commercial motor $1,180. Drawn against a $3,000 frame.
• Grid floor: $760 a year — public liability alone for an electrical contractor at $250k turnover. That is the cheapest complete schedule anywhere in the model, and the services grid's "from" prices are the per-cover floors enumerated over the same grid: PL $620, tools $180, motor $780, PI $980, contents $260, business interruption $240, cyber $420, management liability $520.
• Ceiling: $8,405 a year — residential builder, $3m turnover, 20 staff, all eight covers. Draws a $9,000 frame.
• Worked cells the harness drives and asserts: café $1m / 6 staff / PL + contents + BI + cyber = $3,245; courier $500k / 2 staff / PL + motor + tools = $3,580; allied health $750k / 4 staff / PL + PI + contents + cyber = $3,190; residential builder $2m / 8 staff / all eight = $7,325.
• Note that the $620 public-liability floor is reachable (allied health at $250k) while the allied health practice's cheapest schedule is $1,960, because professional indemnity is compulsory for it. Cover floors and total floors are different questions and the page answers both.

Three things this page refuses to price

• Workers' compensation. "We place it for you, but we don't estimate it here — the premium comes off the WA gazetted rates and your own wages declaration." Any figure would be a guess dressed as a quote.
• Our commission. Not price-less so much as deliberately loud: "we're paid commission by the insurer, and any broker fee is disclosed in writing before you bind. Both figures are on your invoice." A broker page that buries this is telling you something.
• Claims handling. Quoted at nothing, because arguing the claim is what the commission already paid for.

06 · CONVERSION

Why the page is built this way

CTA placement. At 375px the phone number, the value proposition and the trust line are above the fold before the schedule is even mentioned — a sparky standing on site with a builder waiting wants a number, not a calculator. The calculator earns its place a scroll later, for the person who is comparing rather than panicking. The sticky bar carries both jobs (call / quote) and never leaves the bottom 140px.

Form fields. Name, phone, suburb, renewal date, trade, turnover, and what you need covered. Renewal date is the one field a broker genuinely needs and nobody else asks for — it decides whether this is a live opportunity this month or a diary note for October. Trade and turnover are selects rather than free text because they map straight onto the rating question. The brief textarea is pre-filled from the schedule you just built and marked as editable, so the enquiry arrives with the covers, the limits and the indicative total already in it: the signature is not decoration, it is lead qualification.

The confirmation is honestly a demo. It is hidden on load and on an empty submit, appears only after a valid filled submit, promises a callback within one business hour, and says plainly that nothing was sent. No fake network round-trip.

Trust before price. The trust strip sits between the covers and the reviews because for a financial-services page the licence, the association and the dispute scheme are the product's substrate. NIBA, AFCA, the General Insurance Brokers Code of Practice and the AFS licensing regime are real; the ABN, the AFSL number and the phone number are visibly patterned placeholders, and the page says once, plainly, that the business is fictional.

07 · LOCAL SEO

What we'd implement for the real business

The live page ships no business-shaped structured data at all — only a WebPage node that declares itself a demonstration. Publishing LocalBusiness and Review markup for a business that does not exist would be dishonest markup in a real index, so the schema we would ship for the real client lives here as a code sample instead. The top-level type is InsuranceAgency, a real schema.org LocalBusiness subtype and exactly right for a broking firm.

{
  "@context": "https://schema.org",
  "@type": "InsuranceAgency",
  "name": "Fairbank Insurance Brokers",
  "url": "https://fairbank.com.au/",
  "image": "https://fairbank.com.au/img/office.jpg",
  "telephone": "+61 8 9000 0385",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 4, 120 Hutton Street",
    "addressLocality": "Osborne Park",
    "addressRegion": "WA",
    "postalCode": "6017",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.9021, "longitude": 115.8175 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "08:00", "closes": "17:00"
  }],
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "AdministrativeArea", "name": "Western Australia" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Business insurance",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Public liability" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Professional indemnity" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Commercial motor" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Workers compensation" } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "68"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Dean R." },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Certificate of currency with the right limit in my inbox inside 35 minutes."
  }]
}

Alongside it, for the real client: a Google Business Profile with the Osborne Park address and service-area suburbs, one location page per suburb only where there is genuine local content to put on it, and FAQPage markup on the FAQ block — which is the one piece of structured data on this page that would be honest to ship as-is if the answers were the real firm's.

08 · INTEGRATIONS

What would change for the real client

• Broking system. The enquiry posts into JAVLN, Insight or a Steadfast platform as a new opportunity with the trade, turnover, headcount, renewal date and requested covers already mapped to fields — not an email a broker retypes.
• Rating. The indicative model on this page is a demonstration model. For the real firm the same interface would call the broker's own rating sheets or an underwriting agency's quote API, and the "indicative" language would tighten to "quoted, subject to underwriting" only where a real quote comes back.
• DocuSign for the Financial Services Guide, the broker authority and the duty-of-disclosure acknowledgement, triggered the moment a client says yes.
• Xero for invoicing and premium funding reconciliation; HubSpot or Freshsales for the renewal pipeline, with a task raised at 60, 30 and 7 days before each renewal date captured by this form.
• Google Business Profile and a real reviews feed replacing the demonstration reviews — which on this page are deliberately not marked up as structured review data.
• Their photography, their people, their actual claims stories. The procedural art here proves the layout carries without stock photos; the real site would keep the schedule and swap the illustration budget for a photographer.

09 · ITERATION LOG

Three passes

10 · VERIFICATION

How the numbers were checked

An independent oracle re-implements the pinned base premiums and band factors in separate code — it never calls the page's own pricing function — and the harness asserts the displayed figures against it at rest and across every worked example, the four-step trade force drive, the turnover drive, the staff drive and the frame drive. It also enumerates the entire trade × turnover × staff × cover-subset grid (322,560 cells) rather than spot-checking: every cover floor, the overall cheapest total, the largest reachable total, and the whole-dollar property of every reachable premium come out of that enumeration, and the prose above quotes it rather than the other way round.

Headless Chrome drives every chip, every stepper to both of its bounds, every toggle, the keyboard path, an empty submit, a filled submit and two rapid-fire bursts, with native-resolution screenshots reviewed at 375, 1000 and 1200 for label collisions and badge coverage. Zero console errors, zero failed requests.