How the Plumbline Certification page was made

The concept

One practice’s own fee, and nobody else’s.

Plumbline Certification is three registered building surveyors certifying residential work across the Perth metro. Their buyer is an owner-builder, a small builder or a homeowner with an addition, who has just been told they need a certificate before a building permit can be issued and cannot find out from anybody what that costs or how long it takes.

The page has one job: get drawings sent in. Everything on it is arranged so a frightened owner-builder can read a fee and a turnaround in about eight seconds, then hand over a set of plans without ringing anybody. The proof element answers in two units at once — dollars and working days — because a certifier’s customer is always waiting on both.

The thing that makes it more than a price list is the refusal. Getting a permit costs more than this practice’s fee: there is an application fee charged by the permit authority and there are levies the state adds. Those are set by other people and they move. So the page does not print them, says so where the reader can see it, and shows exactly which of the three stages Plumbline actually owns. Refusing to invent a number is the most persuasive paragraph on the page.

The proof element

Three controls, one card, two answers.

Work type, service, turnaround. Sixteen cells in total, and every one of them was re-implemented in a separate oracle script from the concept prose and diffed against the shipped page cell by cell — fees, working days, the result card text, the title block on the drawing and the stage strip, all four surfaces, all sixteen cells.

Work	Our fee	Inspections add	Standard	Priority
New single dwelling	$1,150	+$620	8 working days	4 working days
Addition or alteration	$780	+$420	6 working days	3 working days
Patio, carport or shed	$420	+$180	4 working days	2 working days
Pool and barrier	$340	+$140	3 working days	2 working days

Priority multiplies the fee by 1.35 and rounds to the nearest ten dollars, and halves the working days rounded up. The rest state — an addition with inspections on standard turnaround — is $1,200 and six working days, and that is what the thumbnail captures. The cheapest cell on the whole grid is $340, which is exactly the services grid’s lowest “from” price; the dearest is $2,390. Both were found by sweeping the grid, not by reading a cell somebody chose by hand.

Why the card answers in two units

A certifier’s customer is never only asking about money. They are standing between a designer who has finished and a permit that has not started, and the question underneath “what does it cost” is almost always “when can my builder pour”. Publishing the fee alone answers half of it and invites a phone call to get the other half. So the card sets them as a pair, on one line: the dollars in Spectral, the days in Public Sans caps beside them, separated by a hairline rather than stacked, so the eye takes both as a single answer.

The sentence that costs the seller money

Two of them, both swept rather than asserted. Adding site inspections never changes the turnaround — the inspections run against the builder’s programme weeks after the document has gone out — proven across all eight work-type and turnaround vectors, and the inspection term in the turnaround function is a real number that happens to be zero, so the sweep tests arithmetic rather than a function against itself. And if the builder has not got a slab date, take standard: priority costs thirty-five per cent more to buy days the customer is not going to use. A page that argues against its own dearer option reads as a model rather than a mood.

The free drawing read is the highest-value offer on the page

It is the only thing on the page priced at zero and it is deliberately given a block of its own in the hero column. The reason is commercial, not generous: the moment a set of drawings arrives, this practice is in the job. The alternative — a form that asks for a phone number and promises a callback — converts worse, because the reader has to decide to buy before they have any evidence the seller is competent. Reading the drawings for nothing puts the evidence first and the invoice second, and the page says exactly that.

The palette

Drawing paper, print blue, approval stamp.

Three colours off the only object this business actually produces. Every hex and every ratio below is quoted from one row of the wave’s measured contrast sweep, never from memory, and no colour was minted during the build.

Paper#F4F4F1The page ground. Body ink measures 15.9:1 on it.
Panel#E5E6E2Cards and map land. Ink 13.98:1, secondary ink 6.44:1.
Ink#171A1915.9:1 paper · 16.92:1 sheet · 12.47:1 on the done stage.
Secondary ink#4C51507.33:1 paper · 7.8:1 sheet. Forbidden on every stage fill.
Prussian#1B3A5CCTA ground and drawing line. Paper reversed 10.55:1; as ink 10.55:1 on paper, 11.22:1 on the sheet, 8.27:1 on the done stage.
Prussian hover#15304CPaper reversed 12.22:1.
Band#152029Sapience band and the sticky bar. Paper reversed 15:1.
Stamp red#A3232BThe approval mark and the current stage, nothing else. 6.73:1 paper · 7.16:1 sheet · 5.76:1 on the current stage.
Sheet#FBFBF9The drawing sheet. A hair whiter than the page, which is what makes it read as paper on paper.
Stage — done#CBDCE8Ink 12.47:1, prussian mark 8.27:1.
Stage — now#F5DED8The only stage that carries stamp red: 5.76:1. Ink 13.62:1.
Stage — next#E5E6E2Deliberately the plainest of the three. Ink 13.98:1.
Title-block rule#9AA3A8Hairline only, on the sheet: 2.48:1. It never carries a word.
Hairline#C3C6C11.57:1 paper · 1.38:1 panel. Lines only.
Field border#676C6BA mark, not text: 4.84:1 paper · 4.26:1 panel.
Map water#C6D4DCCarries no text at all — every suburb label sits on land.
Map coast#516C7AA mark: 4.44:1 on land, 3.67:1 on water.
Sheet note#171A19 at 78% → #494B4AThe small notes on the drawing: 8.49:1 on the sheet, measured as the blend rather than as the token.
Chip sub-label#F4F4F1 at 86% → #D6DADC8.26:1 on prussian, 9.47:1 on the hover. Do not take it lower.

Two rules the palette enforces that no eye would catch. Stamp red appears in exactly two places — the approval mark on the drawing and the middle stage of the strip — because it is the colour of a decision, and a page that uses it for decoration cannot use it for meaning. And the secondary ink is forbidden on every stage fill and on map water, so the stage cards and the map carry full-strength ink instead. Both were caught by reading the sweep rather than by looking.

The technique

The drawing sheet is laid out in real pixels, not in viewBox units.

The signature is a stylised drawing sheet: a plan of the selected work on the left, a title block that fills with the work type, the scope and the fee, and a rubber stamp carrying the turnaround in working days. It is inline SVG, generated as a string and written in one synchronous pass — assembled in one go rather than staggered into the DOM, because an SVG scene assembled after the animation loop starts can receive no paint invalidation in headless Chrome, which is the renderer that takes the thumbnail.

The important detail is the coordinate system. The viewBox is not fixed: it is recomputed on every draw as 0 0 W H where W is the element’s measured CSS width. That makes one SVG unit exactly one CSS pixel at every viewport, so an 8.5px label on the drawing is 8.5px on a phone and 8.5px on a 1440 monitor. A fixed viewBox would have rendered the title block at about four pixels at 375. When the sheet itself measures under 430px — which is every phone — it turns portrait, the title block moves to the bottom-left and the stamp drops down beside it, so the plan keeps the full width of the sheet.

Motion is one thing only: the stamp’s outer ring is an asymmetric dashed circle that turns about eleven degrees a second. It is driven from performance.now() on every frame — an absolute wall-clock angle, never a per-frame accumulator, because headless Chrome services animation frames only when a frame is requested and a capped delta accumulator would have the stamp barely moved at the seven-second thumbnail instant. The loop stops on document.hidden and restarts on the way back, and under prefers-reduced-motion the ring is written once at zero degrees and no loop starts at all.

The one micro-interaction is the stamp press: changing any control sets a wall-clock timestamp, and for the next 240 milliseconds the loop scales the whole stamp group from 1.055 back to 1 on an ease-out curve. It is applied by writing the transform attribute from inside the loop rather than by a CSS class, because a stylesheet transform rule silently discards an SVG element’s transform attribute — the state would have been right and the pixels wrong.

The second read. Three numbered hold points are drawn on the plan and repeated as a list underneath it: on an addition they are the junction with the existing house, the new roof and what has to be opened up to be seen; on a pool they are every gate, where the barrier meets the house, and anything climbable beside it. They change with the work type, they turn the drawing into a legend as well as a picture, and they are the page’s quiet claim to competence — this is a practice that knows what it is looking for before it arrives.

The three passes

What each pass actually found.

Pass 1 — Craft

The fee overflowed its own title block. The title block divided its height into three equal rows, but the fee row carries a 26px serif figure and needed forty-six pixels, so $1,200 was drawn below the block’s bottom border. Found by looking at a 2× clip of the drawing, not by any assert — every state check was green because the state was correct. Rows are now 31/31/46.
The stamp sat on top of the title block. Its radius was derived from the title block’s width, which said nothing about the vertical space available above it. It is now clamped by the actual band height between the frame and the title block, so it can never touch either.
The stamp said “CERTIFICATE OUT IN”, eighteen characters at 8.5px, and the ends ran outside the inner ring. Cut to CERTIFICATE, and the two lines below it were pulled in and detracked.
The drawn sheet finished four pixels below the thumbnail line. The sheet’s bottom measured 754px at 1200 wide against a 750px contract. The wide aspect went from 0.585 to 0.55 and it now finishes at 735.
The trust line was below the fold at 375 at 718px against a 667px viewport, because the registration strings were inside it. Split into a bold trust sentence that stays above the fold and a quieter registration line under it, and the hero subline was cut by a sentence.
The masthead cleared by 0.6 of a pixel at 375. The wordmark’s right edge and the phone link’s left edge were effectively touching. The phone-width breakpoint moved from 399 to 429 and now also shrinks the logo mark and tightens the row gap.
Three tap targets were under 44px — the masthead phone link and the masthead button. Both raised.
The service-area boundary had a dent in it. The dashed polygon ran through both Cannington and Canning Vale, producing a notch that read as a drawing error. Cut to five vertices; Cannington is now inside the line, which is what it should have been.
Two map labels sat over water. Fremantle and Melville were anchored to the left of their dots, which put the words across the coastline — and body ink on map water is not a declared pair in the palette. Both re-anchored right, and the map now carries no text on water at all.
Two colours in the drawing were stamp red and had no right to be: the junction line on the addition and the pool gate. Stamp red is reserved for the approval mark and the current stage. Both are prussian now.
The desktop hero column ran about three hundred pixels short of the proof column. Filled with the free-drawing-read block, which was the strongest thing on the page that had nowhere to live.

Pass 2 — Depth

Added the three hold points. Each work type now carries three numbered marks on the plan and a matching three-item list under the sheet. They are descriptive, never normative — what a surveyor looks at, not what a rule requires — which keeps them clear of the real-regulation line.
Added the stamp press. Changing a control now presses the stamp: 1.055 back to 1 over 240ms, driven from the loop by attribute rather than by CSS, so the transform attribute survives. It never goes below full size, so the stamp is legible at any capture instant.
Added zone marks to the sheet frame — the tick divisions every real drawing sheet carries and nobody reads. Four across and three down on desktop, three and four on a phone.
Made the stage strip live. The middle stage now prints the current fee and the current working days, so the strip is not decoration: it is the answer, restated in the one place the reader is looking when they find out the permit fee is not included.
Drove the whole sixteen-cell grid in the browser and asserted four surfaces per cell — the state probe, the result card text, the title block on the drawing, and the stage strip — because a number that reaches the probe and not the drawing is a page arguing with itself.

Pass 3 — Hardening

Form inputs had outline:none on focus. The soft box-shadow ring was there, but a keyboard user got no real outline. Added an explicit :focus-visible rule that restores the page’s 3px prussian ring on every input, select and textarea.
Enumerated every selector inside a media query and asserted each one matches at least one node — thirty-six of them. A compound selector that matches nothing is syntactically perfect, semantically dead and invisible to every state probe.
Drove the phone field with junk. The pattern is compiled with the v flag in the checker, because that is what browsers do and a pattern that is legal in Node can throw at checkValidity and leave the one field that has to be right silently unvalidated. Typing “call me maybe” is rejected by the browser and by our own handler, flags that field and no other, and never reaches the confirmation.
Resized across the narrow/wide switch six times and confirmed the sheet redraws, keeps its stamp and its sixty marks, and lands back on the wide layout with the answer intact.
Confirmed the loop stops on document.hidden and restarts on the way back, with no console error either side.
Re-derived every number in the rendered body copy against the model: eight dollar figures and four working-day figures, all licensed, no strays. A prose figure written from memory inside honest arithmetic is still a wrong number.
Checked the sticky bar against the submit button at 375. Thirty pixels of clearance.
The sticky bar was sitting on the trust line at 375. The above-the-fold assert measured against the 667px viewport and passed at 621px — but the fixed bar owns the bottom sixty-six pixels, so the real fold is 601 and the second line of the trust sentence was underneath it. Caught by looking at the capture, not by the assert. The headline’s minimum size went from 31px to 28px and the hero’s vertical rhythm tightened on phones only; the trust line now finishes at 595, six pixels clear, and the assert compares against the bar rather than the viewport.
Removed one ornament. The sheet had corner registration ticks and zone marks doing the same job; the corner ticks are gone. The blended paper-at-88% in the Sapience band went too — it was an undeclared blend, and full paper at 15:1 is both cleaner and honest to the sweep.

What this page refused to publish

The declines, in full.

This is the highest-risk page in the wave. Building certification sits directly against real regulation, real statutory charges and a real registration scheme, and every one of those is a number a demonstration page could get wrong with somebody’s name on it. The rule we worked to: if we cannot verify it, we do not publish it and we do not soften it either. Each of the following was considered, and declined.

The building permit application fee — set by each permit authority, different between local governments, and revised. The page states that it is charged at cost and prints no figure, no range and no percentage.
Every state levy on a building permit — not named, not rated, not thresholded. The page says “levies the state adds to a building permit” and stops there.
Any statutory timeframe — how long a permit authority has to decide an application, how long a certificate remains valid, any notice period. The only durations on the page are Plumbline’s own working days.
Any building classification — no class letters or numbers anywhere, on either page. The four work types are described in the customer’s own words instead: a house, an addition, a patio, a pool.
Any code or standard clause — no National Construction Code reference, no Australian Standard number, no clause, no table. The drawing carries no dimensions and no scale for the same reason.
Any registration rule — who has to be registered at what level to certify what. The page names its own registration string, visibly patterned as Reg. BS-0000, and says nothing about the scheme behind it.
The statutory name of the certificate — described only as “the certificate your permit authority asks for before it issues a building permit”. Plain customer language was expressly allowed; the formal term was not worth the risk of getting the surrounding claim wrong.
Whether a given job needs certification at all — and whether work already started can be certified. Both are the permit authority’s call, and the FAQ says so rather than guessing.
Any pool barrier inspection interval, and any claim about what a barrier must or must not do. The drawing marks “anything climbable beside the barrier” as something we look at, which is a description of our work and not a statement of a rule.
Any insurance requirement that attaches to residential building work.

What is left is the honest half. Plumbline’s own professional fee, Plumbline’s own turnaround in working days, and a plain statement of which charges belong to somebody else. Every figure on the page is one of those, and the page is stronger for the subtraction — the reader can tell the difference between a business that knows its own numbers and one that is guessing at everybody’s.

Local SEO

What we would ship for the real practice.

This page emits only WebPage, CreativeWork and a BreadcrumbList, and it names itself a demonstration inside them. Publishing LocalBusiness or Review markup for a business that does not exist would put fictional data into a real index, so we do not. For a real client the schema below is what would go on the page on day one, with their registration, their hours and their genuine reviews behind it.

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "additionalType": "https://en.wikipedia.org/wiki/Building_inspection",
  "name": "<Practice name>",
  "description": "Registered building surveyors certifying residential work across the Perth metropolitan area.",
  "url": "https://<domain>.com.au/",
  "telephone": "+61 8 <real number>",
  "email": "office@<domain>.com.au",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "<real street address>",
    "addressLocality": "Osborne Park",
    "addressRegion": "WA",
    "postalCode": "6017",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": "<lat>", "longitude": "<lng>" },
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "AdministrativeArea", "name": "Perth metropolitan area" }
  ],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "08:00", "closes": "16:30"
  }],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Certification services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "New single dwelling certification" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Addition or alteration certification" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Pool and barrier certification" } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "<from the live reviews feed>",
    "reviewCount": "<from the live reviews feed>"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "<real reviewer>" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "<their words, pulled from the reviews feed>"
  }]
}

Alongside it: an FAQPage block generated from the seven questions already on the page, a Google Business Profile wired to the same NAP strings, and per-suburb landing pages for the eighteen areas in the service list — each one carrying this practice’s own fee table, because the fee is the thing people search for and nobody else publishes it.

For the real client

What changes on day one.

Their fee table becomes the source of truth. The four base fees, the four inspection adders, the four turnarounds and the priority multiplier live in one object at the top of the script; on a real build they come out of the practice’s own schedule and get edited in one place, not fourteen.

The form becomes a job. Right now the confirmation is local and nothing is sent. For a real practice the enquiry lands in whatever they already run — most Perth certifiers are on a document-management stack of some kind, and the ones that are not are on email and a spreadsheet. The two integrations that pay for themselves fastest are a file-upload step that puts the drawing set straight into their job folder at the moment of enquiry, and a link straight out to the permit authority’s own lodgement portal at the end of the process, so nobody retypes an address.

Their photographs replace nothing. This page has none by design — the collection is procedural throughout — but a certifier is one of the few trades where that is arguably the right answer anyway: their product is a document, and a drawn sheet says more about competence than a stock photo of a hard hat.

The reviews come off a live feed and get marked up properly, which is the point of the schema panel above. The three on the demonstration page are written copy and are labelled as such on the page itself.

The declines stay declined. Even for a real practice, we would keep the permit fee and the levies off the page and keep the at-cost statement. It is the paragraph that makes the fee above it credible, and a real practice has more to lose from a stale number than a fictional one does.

Plumbline Certification — how the page was made