How the Slabline Stone page was built

The proof element: a material chooser, not a configurator

Most trade estimators ask you to configure one thing and then show you one number. This one shows all four materials at once, at the same scale, and keeps them on screen while you move the controls — because the visitor's real question is not "what does my kitchen cost" but "which of these can I have, and what is the difference".

Four controls: benchtop area (a slider in tenths of a square metre, 1.0 to 20.0), sink cutouts, waterfall ends, and a 40 mm mitred front edge. Four bars update together, normalised to the dearest of the four, so the bar lengths compare materials on this kitchen and never one kitchen against another. Above them, a plan strip redraws the bench with the cutouts, the waterfall ends and the mitred edge you actually chose, so every control changes the drawing as well as the price.

The arithmetic, held in integers

Every per-square-metre rate is a multiple of ten and the area is held in whole tenths, so billedTenths × (rate + mitre) / 10 is exact whole-dollar money in every one of the 13,752 reachable cells — 3,438 control vectors × four materials — with no floating-point cents anywhere. The verification harness asserts Number.isInteger on all four outputs across the whole grid, re-derives every figure from an independently written oracle, and drives 702 of those cells in a real browser to prove the shipped page computes what the oracle does.

Scenario	Quartz	Granite	Porcelain	Sintered
6.2 m², one undermount sink (rest state)	$4,134	$4,506	$5,126	$5,622
6.2 m², mitred, one sink, two waterfall ends	$5,838	$6,210	$6,830	$7,326
2.8 m² laundry (billed at the 4 m² floor)	$2,480	$2,720	$3,120	$3,440
4.0 m² (the floor exactly — same figures)	$2,480	$2,720	$3,120	$3,440
11.5 m², mitred, two sinks, one waterfall end	$9,570	$10,260	$11,410	$12,330

Rates: quartz $620/m², granite $680/m², porcelain $780/m², sintered $860/m², all supplied, templated, cut, edged, delivered and installed. Undermount sink cutout $290 each; 40 mm mitred edge +$120/m²; waterfall end $480 each; 4 m² minimum billed area. The cheapest figure the chooser can produce — $2,480 — is exactly the services grid's "smallest job we quote", so the page never argues with itself.

The give-away — two of them

On the rest kitchen, $1,116 separates the granite from the sintered stone. The page draws that gap as a hatched band extending the granite bar to the sintered bar's length, labels it, and then says in words: the granite is the one we would put in a rental, and we would rather sell you that. A stone shop talking a customer down $1,116 is the most credible sentence on the page, and it is computed, not claimed — the band and the figure move together with every control.

The second give-away is placed before the slider, not after it: the 4 m² minimum is stated as a floor at the top of the card, so a laundry-only enquirer learns in one line that this shop is probably not their cheapest option — before they have spent thirty seconds discovering it.

Palette — measured, not estimated

Every stone page in Perth is black and gold. This one is quarry paper, a wet-slate band and one chromatic note: the teal of the water that runs over a bridge saw. Ratios below are read from the same row of contrast-w55.log as the hex beside them.

paper #F4F2EEground · ink 15.32:1

panel #E4E1DAcards · ink 13.11:1

band #232A2Ea slab under the saw · paper 13.02:1

ctaTeal #1B6B63every CTA · paper 5.64:1

ctaTealHover #134E48pressed · paper 8.49:1

slabGranite #5A544Egranite bar · paper 6.68:1

slabPorcelain #D8D4CCporcelain bar & bench · ink 11.59:1

muted #4E5459secondary copy · 6.86:1

sawTeal #1B6B63eyebrows, links, marks · 5.64:1

alertRed #A3301Ainvalid fields · 6.27:1

mapLand #EAE7E0map · label 13.87:1

mapWater #C3D2D4ocean & river · label 11:1

Two colours were minted during this build and both were added to contrast-w55.mjs and re-swept before use, per the wave rule. ctaTealHover #134E48 — the pressed state of the teal CTA — measures 8.49:1 against the paper-on-dark label. alertRed #A3301A, the invalid-field ink, measures 6.27:1 on paper and 5.37:1 on panel; it is never the only signal, because an invalid field also gets a 2 px border, an aria-invalid flag and a written sentence. The teal itself was also promoted from a token to a ground, because the primary CTA is filled with it: paperOnDark on ctaTeal measures 5.64:1. The sweep now runs 118 declared pairs with zero failures.

The four bar fills are all declared grounds carrying their own declared ink — quartz on panel, granite on slabGranite, porcelain on slabPorcelain, sintered on band — and they happen to run light to dark in the same order as the prices, which is a second read rather than a decision anyone has to make.

Type

Archivo at 700 and 800 with tightened tracking carries the display: it has the squared-off, engineered feel of a cut edge without tipping into brutalism, and it holds a long headline at 375 px in four lines. Source Sans 3 is the workhorse at 17 px, above the 16 px mobile floor because this page's reader is doing arithmetic in their head. Every figure in the estimate card, the chart and the guide's tables is set in font-variant-numeric: tabular-nums, so the four material rows align on the dollar and the numbers do not shuffle as they change.

Techniques

Two files, no libraries, no build step, no raster images, no network requests beyond the Google Fonts stylesheet. The site page is about 54 KB of HTML with every byte of its CSS and JavaScript inline.

The chart and the bench plan are one inline SVG, authored statically in the markup. JavaScript only ever mutates attributes on elements that already exist — nothing is inserted into the drawing after load, which is what stops an SVG scene going unpainted under a headless renderer.
SVG children are toggled by the hidden ATTRIBUTE, never the IDL property. el.hidden = true on an SVGElement sets a plain expando that reflects to nothing; the sink cutout, the mitre strip and the two waterfall tabs all use setAttribute/removeAttribute against the [hidden]{display:none!important} guard, and the harness asserts both the attribute and the computed display.
The plan strip is a schematic, and says so by omission. A 1.0–20.0 m² slider is a 20:1 span, so a proportional bench would be 18 units wide at the bottom of the range and unreadable. The strip therefore draws the options — cutouts, waterfall ends, mitred edge — at a constant width, and carries no scale bar and no dimension arrows; the square metres are printed as a figure on the line above it, where they cannot be misread as a measurement off the drawing. The bars are where the proportional argument lives.
The bar tween is wall-clock only. A single requestAnimationFrame loop reads performance.now() against a start timestamp — there is no per-frame delta accumulator anywhere, so a thin frame budget cannot leave the drawing half-finished at the screenshot instant. The entrance grow is gated on a cold-load flag and a resize can never re-enter it.
One ambient animation. The teal rule under the estimate heading is a CSS mask that slides one 40 px period every 3.4 seconds — a saw kerf running. It is the only motion at rest, it never drops below full opacity, and prefers-reduced-motion stops it in CSS while matchMedia makes the bars draw at full length with no tween at all.
The service-area map is a hand-drawn SVG: a coastline path, the Swan River as a stroked path in the water colour, a dashed extent ellipse and twelve suburb marks. Below 700 px the five secondary labels are dropped and the rest scale up to stay above 11 rendered pixels; every suburb is also named in running text under the map, so nothing is only available to someone who can read a small label.
The form validates in the browser, and confirms locally. No fetch, no fake latency, no spinner pretending to be a network. On a valid submit the form is replaced by a confirmation panel that repeats the estimate back and says plainly that nothing was sent anywhere.

Three iteration passes

Pass 1 — Craft

Driven, not read: the form was submitted empty and filled, the chooser driven to all five worked scenarios, the sticky bar tapped at 375.

The control read-outs were shouting. .ctrl > .lab carries text-transform:uppercase for the label, and the value span inherited it — so the card printed "6.2 M²", "NONE" and "20 MM PENCIL EDGE". Caught by looking at a 1200×750 capture rather than by any assert; fixed with text-transform:none on the value.
The chart was below the fold at 1200×750. The estimate card spent 560 px on an eyebrow, a heading, a three-line minimum note and four stacked controls before the drawing began, so the thumbnail — the collection's sales asset — showed a slider and nothing else. The sink and waterfall controls were paired into two columns, the minimum note cut from three lines to two, the card padding, gaps and headline sizes tightened, and the h1's desktop ceiling dropped from 3.3 rem to 2.88 rem. The drawing now opens well inside the frame.
A duplicate id. The service-area section and the area slider were both id="area"; the section became #servicearea. Nothing visibly broke, which is exactly why it needed a scan rather than an eye.
Copy read end to end for Australian English and for the voice the concept asks for — someone who measures for a living. "Unlock", "seamless" and "elevate" appear nowhere; every claim on the page is either a price the model computes or something the business does.

Pass 2 — Depth

The give-away is a shape, not a sentence. The hatched band physically extends the granite bar to the sintered bar's length and carries the live figure, so the money the customer keeps sits at the same scale as the prices, where the eye already is. Driving the chooser to its extremes found the narrowest band the grid can reach — 4 m² at the floor, mitred, two sinks, two waterfall ends, where the gap is $720 and the band is 46 px of a 352 px track. The label was moved to sit above the band rather than inside it, and an assert now proves at that exact cell that it clears the bar above and stays inside the frame.
Two read-outs deleted. The sink and waterfall controls each printed their value beside the label — duplicating the highlighted chip, and, once the two controls were paired into columns, reading as though "1" belonged to the next label along. The selected chip is the read-out; both spans went, and the JavaScript that fed them with them.
The floor's justification moved to where it bites. The short statement of the 4 m² minimum stays above the slider, but the reason for it — a laundry top still takes a template, a slab, a truck and two people, and a small local shop will very likely beat us on it — now appears in the note that fires when the visitor actually goes under 4 m². Better placement, and two fewer lines above the fold.
The second read. The four bar fills run light to dark in the same order as the four prices, without any legend saying so — the drawing ranks the materials by cost before you have read a figure.
Motion timing. The cold-load grow runs 620 ms on a cubic ease-out; every later change runs 300 ms. The first draw is choreography, every one after it is feedback, and they should not be the same length.

Pass 3 — Hardening

A real 375 px defect, and the check that missed it. The wordmark's sub-label is white-space:nowrap, so it overran its own flex box and printed straight through the phone number — while the box's own right edge stayed politely inside the viewport, which is exactly why the first version of the collision check passed. The sub-label is now hidden below 540 px (the hero eyebrow says the same thing two lines later), and the check takes the widest of the wordmark's box and every rendered child. Then the rule was put back and the check was watched to fail.
Chart type at 375, twice. A fixed viewBox scales its own type with its container: at 375 the chart renders at about 0.64, so 13 user units landed at 8 CSS px. The sizes are re-set in user units below 640 px and the long caption swaps for a short one. The first attempt changed nothing, because the media query was declared before the base sizes at equal specificity and lost on source order — found by an assert that measures rendered CSS pixels rather than by reading the stylesheet.
A map label ran through another one. "BIBRA LAKE — the workshop" crossed "Canning Vale". It is now two lines beside the marker, five secondary suburb labels are dropped below 700 px, and every suburb is named in running text under the map so nothing is lost. A pairwise label-overlap assert was added — and its first version passed a page that was still colliding, because getBBox() ignores CSS transforms; it now measures in rendered space.
A colour caught before it shipped. The teal "the workshop" sub-line, in its first position, would have crossed the coastline onto the water fill, where saw teal measures 4.05:1 and is a forbidden ground. It was moved inland rather than re-tinted, and rather than the fill being lightened to suit it.
The phone pattern was compiled, not eyeballed. pattern="[0-9 \+\-]{8,20}" escapes the parentheses and the hyphen, because a pattern that is invalid under the v flag is silently discarded and the field then accepts anything. The harness compiles it with v and types "ring me maybe" into the field and asserts the submit is refused.
The ornament that went. The chart carried two caption lines saying one thing. It is one line now, and a shorter one again below 640 px.
Reduced motion confirmed in the headless renderer: the saw rule stops, and the bars are painted at full length on the first frame rather than tweened from zero — a settled scene, never a blank one.
The green was tested rather than believed. The harness runs 173 checks. Nine defects were then planted into the page one at a time — a second h1, a banned LocalBusiness block, a curly-quoted attribute, a wrong per-m² rate, a v-invalid phone pattern, the SVG hidden IDL property in place of the attribute, a console.error, a real street address in the footer, and the masthead rule put back — and every one was caught, with the file restored and hash-verified after each.

What this page declined to publish

The engineered stone prohibition is real regulation, so it gets the carve-out treatment: three facts, each checked at the source during this build, and nothing beyond them.

Verified and published, all three from Safe Work Australia's engineered stone ban page (safeworkaustralia.gov.au), read on 8 September 2026:

On 1 July 2024 the Commonwealth and all states and territories made it an offence to carry out work involving the manufacture, supply, processing or installation of engineered stone benchtops, panels or slabs.
On 1 January 2025 those products became prohibited imports.
Engineered stone does not include sintered stone or porcelain products, provided they do not contain resin.

Declined:

Any silica percentage. The source defines engineered stone by a crystalline silica threshold and the page does not repeat it. A percentage on a fabricator's page invites the reader to apply it to a product in front of them, which is a judgement we are not qualified to hand them.
Any product or brand name. Naming a slab as compliant or non-compliant is a claim about a specific supplier's specific product, and it can change without us.
Any characterisation of what another supplier may still hold or sell. Transitional arrangements exist in the regulation; whether they cover a particular contract is a legal question and the page says so.
Any legal advice at all. The regulation panel ends with one sentence: we fabricate, we do not advise.
The wording was also tightened rather than simplified. The concept brief allowed "the prohibition does not apply to porcelain or sintered stone"; the source qualifies that with provided they do not contain resin, so the qualifier is on the page. Where the source is more careful than the brief, the source wins.

Figures the wave's oracle does not license

Every dollar on the site page belongs to a cell check-w55.mjs enumerates, or to the model those cells pin, and the harness re-derives all of them against an independently written oracle. Five non-money figures are the fictional business's own and are named here so nothing is smuggled past:

"since 2009" in the trust line — the concept asks for years in the trade; the oracle enumerates money only. Stated as a founding year rather than a count, so the page never asserts an arithmetic it has not checked.
"10 to 14 days" from template to install in the FAQ — the concept requires that question answered, and a duration is unavoidable. It is presented on the page explicitly as the business's own commitment, not an industry figure.
20 mm and 40 mm slab and mitred-edge thicknesses — trade vocabulary, and 40 mm is named in the rate card the oracle does license.
The slider's 1.0–20.0 m² range. The wave oracle names twelve cells; the slider can reach 13,752. Reimplementing the same function from the same anchors is not a licence, so the resolution is the harness: the shipped model is driven in a real browser and compared cell by cell against an independently written oracle, and the two extremes the page relies on — the 4 m² floor, and the sintered row being strictly the dearest in every cell, which is what the bar normalisation assumes — are proved by sweep rather than assumed.
Hours, ABN and registration — visibly patterned placeholders, declared as such in the footer.

Why this converts

Written for the business owner deciding whether to commission one of these

The visitor arrives with one question — what can I actually have, and what does it cost — and the page answers it above the fold, with their own kitchen's area, before it asks for a phone number or a showroom appointment. The four materials stay on screen together rather than one at a time, so the page reads as a model the customer can drive rather than a pitch they have to sit through, and the CTA is repeated at the point of every answer instead of once at the bottom. The form asks for four things only — name, phone, suburb, and the job in the customer's own words — because every extra field is a lead you did not get, and the estimate the visitor has just built travels with the enquiry so the callback starts halfway through the conversation. The trust line above the fold does not say "quality workmanship": it says how long the business has been cutting, that the saw is its own, and that the measure is free with no appointment attached — three checkable claims instead of three adjectives. And the page gives money away on purpose, twice, printing the $1,116 the customer keeps by taking granite over sintered and stating the 4 m² minimum before the slider rather than after it, which is the single most credible thing a trade website can do and the reason a visitor believes the other numbers.

Local SEO we would implement for the real business

This demonstration ships WebPage and CreativeWork schema only, because marking up a fictional business with LocalBusiness and fabricated reviews would put dishonest structured data into a real index. For a real fabricator, with their own name, address, phone number and reviews they actually collected, we would ship this — and register the same NAP against Google Business Profile, Bing Places and the Australian directories that still feed local packs.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "@id": "https://example.com.au/#business",
  "name": "Slabline Stone",
  "description": "Stone benchtop fabrication and installation — template, cut, edge, deliver, install.",
  "url": "https://example.com.au/",
  "telephone": "+61 8 0000 0000",
  "priceRange": "$$",
  "image": "https://example.com.au/img/workshop.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "<the workshop's own address>",
    "addressLocality": "Bibra Lake",
    "addressRegion": "WA",
    "postalCode": "0000",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.0000, "longitude": 115.0000 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:00", "closes": "16:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:00" }
  ],
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "AdministrativeArea", "name": "Perth metropolitan area, Western Australia" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Benchtop fabrication",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Porcelain benchtop, supplied and installed" },
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "price": "780.00", "priceCurrency": "AUD",
          "unitCode": "MTK", "unitText": "per square metre"
        } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.8", "reviewCount": "112"
  },
  "review": [
    { "@type": "Review",
      "author": { "@type": "Person", "name": "A real, consenting customer" },
      "datePublished": "2026-08-14",
      "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
      "reviewBody": "Templated Tuesday, installed the following week. The join landed where they said." }
  ]
}
</script>

Two rules we would hold the real client to. aggregateRating and review must be reviews the business genuinely holds and can show, pulled from their review platform rather than typed into the template — Google penalises invented review markup and a fabricator's reputation is the asset. And priceSpecification only goes in if they are willing to keep it current: a stale rate in structured data is worse than no rate, because it is the number that shows up in the result.

What would change for a real client

Photography. Every visual here is procedural because that is the collection's constraint. A real fabricator's page leads with slab photography and installed kitchens — the drawn chart stays, because it does a job a photo cannot, but it sits beside real slabs rather than instead of them.
The enquiry actually goes somewhere. The form posts to the workshop's job management system rather than confirming locally. For this trade that is usually ServiceM8, Simpro, Tradify or AroFlo; larger fabricators run Moraware Systemize for slab inventory and job tracking, and the estimate the visitor built maps straight onto a Systemize job with the area, cutouts and edge profile already populated.
The template measure books itself. A live calendar — Calendly, Acuity, or the scheduler already inside their job system — turns "we will ring you back" into a date on the page, which is a measurably better conversion than a callback promise.
Reviews come from a feed. Google Business Profile reviews pulled live rather than written, which is also what makes the Review schema above legitimate.
Pricing comes from their rate card, and stays current. The chooser reads its rates from one small configuration object; a real build wires that to the fabricator's own rate table so a rate rise is one edit, not a page rebuild. If a client is not willing to publish rates at all, the same element still works answering in ranges — but we would argue hard for the figures, because publishing them is the whole reason this page converts.
Analytics on the chooser, not just the page. Which material each visitor lands on, what area they enter, and whether they submit — that is a rate-card and stock-holding signal the business can act on, and it is free once the element exists.