Fireline · build notes View the site Index

Generative Assets · Industry demonstration 441

How the Fireline firebreak page was built

A lead-generation page for a fictional Perth Hills slasher, aimed at one person: the semi-rural block owner who has just opened a fire hazard reduction notice from their shire and does not own a tractor.

The concept

Fireline Block & Firebreak Co. cuts perimeter firebreaks and slashes blocks across Mundaring, Chidlow, Gidgegannup, Parkerville, Sawyers Valley, Bickley and Roleystone. The page has one job — book a break before the inspection — and one enemy: the block-clearing upsell that prices a whole hectare when the notice only asks for a strip around the boundary. Everything on it, including the drawing, exists to make that difference visible and to price both sides of it in the same frame.

Why this business, and why now

Search for a firebreak contractor in Perth and a local government's own contractor list turns up ahead of most operators. The trades that do rank sell block clearing by the acre. That is a real gap: the buyer's question is "what does the strip cost", and nobody ranking is answering it.

Palette

Bleached summer grass, burnt break, machine olive. Every pair below was measured with WCAG arithmetic before it was used, and each token is only painted on the grounds it was cleared for — the sweep prints every other pairing as forbidden, with its ratio.

DFES red is banned here by argument, not by taste. This is not the fire brigade, and alarm red on a page selling a $340 job overstates the job — it would read as fear, and fear is what the block-clearing quote is already using. Ember appears once, on the under-minimum notice, and nowhere else.

Type

Archivo 600/700 for display. It is a grotesque with enough width to hold a date and a dollar figure without looking municipal, which matters on a page whose headline is about a letter from a shire. Source Sans 3 400/600 carries the body at 16.5px on mobile, and the estimate card runs tabular figures so the ledger's cents column does not jitter when you change a chip.

The one moment of typographic nerve is the answer row: a 46px figure set flush against a 14px caption on the same baseline, so the price reads as the headline and the sentence explaining it reads as a caption on a photograph.

The proof element: a perimeter-strip estimate

Three controls — block size, what you need cut, and what the ground is like. The model treats the block as square, which is the honest simplification for a page that has not seen your title: the perimeter is 4·√A and the strip area is that perimeter times the break width. Whole-block slashing, when it is asked for, covers the block minus the strip, so no square metre is billed twice.

BlockScopeGroundBoundaryBreakQuote
1,000 m²Break onlyFlat126 m379 m²$280
2,000 m²Break onlyFlat179 m537 m²$280
4,000 m²Break onlyFlat253 m759 m²$340
4,000 m²Break + blockFlat253 m759 m²$860
1 haBreak onlyFlat400 m1,200 m²$540
1 haBreak + blockRough400 m1,200 m²$2,630
2 haBreak + blockRough566 m1,697 m²$4,980

Rates: $0.45/m² of cut break, $0.16/m² of open block, ×1.35 for slopes, scattered trees or limestone, a $280 minimum attendance, and the quote rounded to the nearest $10. All twenty reachable cells were re-derived by an independently written oracle in the verification harness and driven in a real browser; the shipped figures matched every one.

The number that costs us the sale

A break-only cut on flat ground stays under the $280 minimum all the way up to 2,680 m² — the page sweeps for that threshold from its own shipped model rather than carrying it as a typed constant. Below it, the estimate stops selling and says so at full size, in ember, directly under the price: there is only about $170 of cutting on a 1,000 m² block and our minimum attendance is $280. The break here is 379 m² — a hired brushcutter and two hours of your Saturday will pass the inspection. The card also prints what fraction of the block the break actually is — 19% of an acre, 8% of two hectares — because that percentage is the entire argument against the whole-block quote the visitor has probably already been given.

How the drawing is made

One inline SVG, assembled synchronously in the markup and only ever updated by attribute, never rebuilt. The break is a closed four-point path stroked at the true relative width of the cut — three metres of a 32 metre side is a visibly fat band, three metres of a 141 metre side is a hairline, and that contrast is the point. The entrance runs the stroke's dash offset from the full perimeter to zero over 1.1 seconds of wall-clock time, with the price docket fading in over the last third; when it finishes the dash attributes are removed entirely, because a dashed closed path does not miter its own closure in Chrome and leaves a notch in the top-left corner. Redraws after a chip tap never re-enter that entrance, and the whole thing is a one-shot: at seven seconds the page is at rest and every figure the probe exposes has stopped moving.

What this page declined to publish

No shire's width, date or penalty appears anywhere

Firebreak requirements are set by each local government and they differ between shires. Nothing on the page states a required width, a compliance date or a penalty amount, because none of those could be verified against the relevant local government's own publication or against dfes.wa.gov.au while it was being built. The Bush Fires Act 1954 is named, with no figure attached to it. The three-metre break in the estimate is labelled throughout as our default cut — an input, not a rule — and the FAQ says plainly that the width and the date that apply are the ones printed on the reader's own notice, and asks them to send a photo of it. That is both the safe construction and the better sales line: it turns the enquiry into "send us your notice", which is a warmer lead than a form fill.

Local SEO we would implement for the real business

The live page carries only WebPage schema naming itself a demonstration — publishing fictional business data as structured data would be dishonest markup in a real index. For a real Fireline we would ship the block below. HomeAndConstructionBusiness is the honest type here: GeneralContractor implies building work this operator does not do, and there is no slashing-specific subtype, so the parent type plus a precise hasOfferCatalog does more for a query like "firebreak slashing Mundaring" than a wrong subtype would.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "@id": "https://fireline.example/#business",
  "name": "Fireline Block & Firebreak Co.",
  "url": "https://fireline.example/",
  "telephone": "+61 8 XXXX XXXX",
  "priceRange": "$$",
  "image": "https://fireline.example/img/slasher-mundaring.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "…",
    "addressLocality": "Mundaring",
    "addressRegion": "WA",
    "postalCode": "6073",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.90, "longitude": 116.16 },
  "areaServed": [
    { "@type": "City", "name": "Mundaring" },
    { "@type": "City", "name": "Chidlow" },
    { "@type": "City", "name": "Gidgegannup" },
    { "@type": "City", "name": "Parkerville" },
    { "@type": "City", "name": "Sawyers Valley" },
    { "@type": "City", "name": "Bickley" },
    { "@type": "City", "name": "Roleystone" }
  ],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"],
    "opens": "06:00", "closes": "19:00"
  }],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Firebreak and slashing services",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Perimeter firebreak cutting" },
        "priceSpecification": {
          "@type": "PriceSpecification",
          "priceCurrency": "AUD", "minPrice": 280,
          "description": "Minimum attendance"
        } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Whole-block slashing" },
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "priceCurrency": "AUD", "price": 0.16,
          "unitCode": "MTK", "unitText": "square metre"
        } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Access track cutting" },
        "priceSpecification": {
          "@type": "PriceSpecification",
          "priceCurrency": "AUD", "minPrice": 420
        } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "68",
    "bestRating": "5", "worstRating": "1"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Rob T." },
    "datePublished": "2026-11-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Notice arrived on the Monday, Fireline cut it on the Thursday…"
  }]
}
</script>

Alongside it: a Google Business Profile with the primary category set to a landscaping or land-clearing category rather than "contractor", the seven service suburbs as service areas rather than a shopfront address, seasonal posts timed to when the notices go out, and review requests sent from the job-management system the day the invoice is paid — the aggregateRating block above is only legitimate when it is generated from reviews that actually exist.

What would change for a real client

Iteration log

Pass 1 — Craft

  • The estimate's answer landed at y=999 at 1200 wide, well outside the 1200×750 thumbnail. Reordered the card to head → controls → answer → drawing → ledger, stripped a sub-heading and a two-line hint, cut the size chips from two rows to one by moving the acre equivalents into a single line of prose under them, and re-cut the drawing's desktop viewBox from 480×300 to 480×210 with the dimension caption moved above the block. The answer now finishes at 561 and the whole drawing, badge and scale bar sit inside the frame.
  • The ledger printed line items to the whole dollar and a total rounded to $10, and on a 1,000 m² rough break-plus-block the lines summed to $370 against a quoted $360. Rounding to the dollar first and to ten second is not the same operation. Fixed by printing the lines to the cent, which reconciles on all twenty reachable cells — asserted, not assumed.
  • The break ring was a <rect> with a dash array, which leaves an unfilled half-band notch at the top-left corner where two butt caps meet. Rebuilt as a closed path and, at rest, the dash attributes are removed entirely so the closure gets a real miter join.
  • Selecting "break + whole block" at two hectares made the break invisible: the interior hatch was nearly as dense as the solid ring, so the drawing lost the only distinction it exists to draw. Thinned the paddock hatch and added a pale hairline along the inner edge of the strip, shown only when the block behind it is being cut.
  • At 375 the service-area map clipped "Roleystone" and the "Darling Scarp" caption off the left edge, and the scarp itself was outside the crop while the legend still described it. Widened the mobile crop to include the scarp and moved the caption inside it.
  • The Kalamunda label was drawn on top of the Helena River line. Moved the label below its dot and lifted the river.
  • The desktop headline broke as three lines with "it." alone on the last. Capped the hero column's headline measure so it breaks cleanly after "date on".

Pass 2 — Depth

  • Added the figure the whole page is arguing about: the break as a percentage of the block, computed live and printed under the drawing — 19% of an acre, 37.9% of a 1,000 m² block, 8.5% of two hectares. It is the single most persuasive number available and it was missing.
  • Choreographed the price docket into the same wall-clock loop as the break: it fades up over the last third of the cut, so the drawing reads as "cut the break, get the price" rather than as two unrelated elements appearing at once. Nothing animates from CSS on an element that also carries the attribute, which is how SVG opacity animations quietly die.
  • Wrote the hero's second argument — everyone up here quotes block clearing by the acre; your notice asks for a strip — as a bordered note directly under the trust line, so the page names the practice it is breaking above the fold rather than implying it in the estimate.
  • Moved the under-minimum notice from the bottom of the card to directly beneath the price. A refusal that sits under the number is a demonstration of how the business quotes; the same words at the bottom of a card are small print.
  • Priced both scopes on the two option buttons at all times, so the option you did not choose is on screen at the same size as the one you did — at 1,000 m² both read $280, which is the most honest moment on the page.
  • Added a note under the ledger stating that areas are rounded for display and that the quote rounds to the nearest $10, after noticing that a reader multiplying the rounded area by the printed rate would land two cents away from the printed line.

Pass 3 — Hardening

  • Drove the full grid in a real browser: five block sizes × two scopes × two terrains, asserting the total, the displayed total, the docket total, the boundary, the strip area, both cost lines, the below-minimum flag, the visibility of the notice and its inverse, and both option prices in every cell. Then a rapid-fire drive — six control clicks dispatched in a single evaluate with no settle between — to prove no redraw races a stale closure.
  • Submitted the form empty (confirmation stays hidden, four fields raise a message and an aria-invalid), submitted it filled (confirmation appears, form hides, the caller's name and number are echoed), and typed junk into the phone field to prove the pattern attribute actually compiles — (, ) and - are all escaped inside its character class, because a pattern that fails to compile is discarded silently and the field then accepts anything.
  • Checked 375, 768 and 1440: no horizontal overflow at any of them, no element right edge past the viewport, the masthead's wordmark clear of the phone chip, and the h1, the primary CTA and the trust line all finishing above the sticky bar rather than merely above the viewport fold.
  • Asserted every visible map label at both 375 and 1440 against the map frame, against every other label, and against every suburb dot. Three real collisions at 375 that were invisible at 1440 — Mundaring over Sawyers Valley, Roleystone over the scarp caption, and three labels sitting on their own dots — were only found because the labels are sized to render at a constant 12 px, which makes them larger in user units the narrower the map gets.
  • Asserted the price docket's bounding box never intersects the drawn block at 375, 768, 1200 and 1440.
  • Re-read every probe field seven seconds after load and again eight seconds later to prove nothing is still moving at the instant the thumbnail is captured, then opened the generated 1200×750 JPEG and looked at it.
  • Ran the page with prefers-reduced-motion: reduce emulated: the break is drawn complete on the first frame, the docket is opaque, no loop is started, and the estimate reads the same.
  • Removed one ornament — the sub-line under the estimate's heading — because the card earns its clarity from the controls, not from a sentence explaining that there are three of them.

Why this converts

A block owner with a notice in their hand has one question — what does this cost — and this page answers it above the fold, in three taps, without an email address. It then does the thing almost no trade website will do: it prices the job you did not ask for beside the one you did, and on a small flat block it tells you to hire a brushcutter instead of booking us, which is the sentence that makes every other number on the page believable. The phone number is a real tap target in the masthead and again in a bar that follows you down the page, so the visitor who has decided in ten seconds never has to hunt for it. The enquiry form asks for four things, not eleven, and the copy repeatedly asks for a photo of the notice — which turns a cold form fill into a lead the operator can quote from without a site visit. Everything on it is drawn rather than photographed, which means it can be rebuilt for your trade, in your colours, with your numbers, this week.