Marri Ground Environmental

Build notes · Wave 59 · site 452

How the Marri Ground page was built

Marri Ground Environmental is a fictional flora survey and clearing permit consultancy in Gidgegannup. The page is for a landowner with a house site, shed pad, fence line or track to clear, or the contractor waiting on one, who has heard “you might need a permit” and doesn’t know who decides. Its single job: say plainly that DWER decides, show the three steps and what each costs, and make the $450 first step the easy yes.

Why this converts

  1. The primary call to action appears in the masthead, the hero and a sticky mobile bar, and it asks for the smallest fixed-price step, $450, so the first yes is small and never commits anyone to the rest.
  2. The estimate prices each of the three steps separately and draws the clearing to scale on a 40 hectare block, so a landowner sees their own job moving rather than a brochure.
  3. The step 1 card says “we stop there” and prints exactly how much less that is than all three steps, which turns the honest steer into the reason to book.
  4. The trust line under the hero button is specific (a base, a year, a count of blocks), and DWER’s own sentences sit beside the price and again in a dark band, so the page borrows the regulator’s authority instead of asking to be trusted.
  5. The form asks only for what finds the lot and sizes the job (locality, local government, what to clear, rough hectares) and carries the estimate in, so the callback starts from the customer’s own numbers.

Palette

A survey report, bush canopy and the red gravel under it. Marri leaf green carries every call to action; laterite marks survey lines and the environmentally sensitive area flag and nothing else, so it reads as a drawn mark rather than a warning. Declared ratios are pasted from the wave’s contrast sweep; colours minted during the build were measured with the same formula and are listed below them.

Ground #F2F3EEink 15.01:1 · muted 7.03:1
Surface #FFFFFFink 16.74:1 · muted 7.84:1
Ink #1A1F1A15.01:1 on ground
Muted #4C544B7.03:1 on ground
Marri leaf #2F4A2ACTA fill · #F2F3EE text 8.82:1
Laterite #8C3B1Emarks only · 6.82:1 on ground
Band #1E2A1D#EEF1EA text 13.11:1
Tint #E9EDE2 (minted)ink 14.09:1 · muted 6.60:1
Plan pasture #E6EBDD (minted)ink 13.78:1 · muted 6.46:1
Clearing fill #F1E8DA (minted)laterite 6.27:1 · canopy #5B7650 4.17:1
Map shire #D7E0CC (minted)ink 12.29:1 · #CFDAC2 11.52:1
Map ocean #DDE4E2 (minted)muted 6.08:1

No text sits on primary, accent or band except the declared reversals. Error states use ink and a 2 px ink border rather than a new red, because a red beside laterite would muddy the one mark colour the drawing depends on.

Type

Literata 600

A report’s serif. Headings, prices and the step amounts, with tabular figures so a total doesn’t jitter as the slider moves.

Work Sans 400/500

A plain, open workhorse at 16–17 px for body, labels and form fields. Nothing about a permit page should feel clever.

The proof element: a three-step estimate with a block plan

Three inputs: area to clear (0.1–20 ha in tenths), vegetation (degraded or intact bush), and whether the clearing is inside an environmentally sensitive area (no, yes, not sure). Step 1 is a fixed $450 desktop check. Step 2 is the survey: $2,200 plus $190 a hectare degraded or $380 intact, plus a $1,100 targeted search when the answer is yes or not sure. Step 3 is a fixed $1,650 permit or referral preparation. The total is rounded once, to the nearest $10, and the sum line only mentions rounding when it happened.

The model holds the area in integer tenths, so every line item is exact dollars (0.1 ha degraded is $19, not $19.000000000000004), and the ledger always reconciles. The same function drives the probe window.__clearingpermits, which exposes the inputs, each step’s figure, the raw sum, the total, the stop-at-step-one branch with isSubstitute:false and its reason, and the drawn geometry.

The plan is inline SVG. The block is 1,000 m by 400 m (40 ha) drawn at 0.576 px per metre, so a dashed 1 ha reference square is 57.6 px on a side. The clearing is a 1.8:1 rectangle whose drawn area is exactly the hectares chosen, anchored at the road frontage with a track to it; its tag prints the real dimensions. Survey transects are laterite lines, indicative in count. Degraded ground draws scattered paddock trees; intact bush draws dense canopy from a Halton sequence, so the pattern is even and identical on every visit. Yes draws a hatched ESA polygon with a flag; not sure draws the same outline dashed and unfilled; no removes it by toggling the SVG hidden attribute.

Worked exampleStep 1SurveyStep 3TotalStop at step 1 saves
2 ha degraded, ESA no$450$2,580$1,650$4,680$4,230
5 ha intact, ESA not sure$450$5,200$1,650$7,300$6,850
0.5 ha intact, ESA no$450$2,390$1,650$4,490$4,040
0.1 ha degraded, ESA no (floor)$450$2,219$1,650$4,320$3,870
20 ha intact, ESA yes (ceiling)$450$10,900$1,650$13,000$12,550

Every row was driven in headless Chrome and read back from the page’s text and probe. All 1,200 reachable cells (200 slider positions × 2 vegetation × 3 ESA answers) were swept against an independent formula and for a total that never falls as the area grows. The floor equals the services grid’s “full package from $4,320”.

Where the page argues against its own sale

Step 1 is drawn as a full-size card at the same weight as the other two: $450, and we stop there if the desktop check says a referral or an exemption is the door to try first. The card under the total prints what stopping saves in every state, says a desktop check is not a substitute for a survey when a permit is the right door, and ends in two buttons that carry the choice into the form. “Not sure” is priced as yes, with a line saying the $1,100 comes off if the check finds the clearing is outside an ESA.

The regulator is quoted rather than paraphrased. These sentences were re-read on DWER’s native vegetation clearing permits page at wa.gov.au (last updated 1 July 2026) on the day of the build:

“You need a permit to clear native vegetation unless you either have an exemption or we determined you did not need one during the clearing referral process.”

The page also quotes, verbatim from the same page, that DWER is the primary regulator administering the clearing provisions of the EP Act, that some exemptions do not apply within declared ESAs, and that exempt clearing may still need other state or federal approvals.

Declined to publish

Iteration log

Each pass drove the estimate to the five rows above, submitted the form empty, with junk in the phone field and filled, and checked 375, 768, 1200 and 1440 wide in headless Chrome. The first headless run found one build bug before the passes began: the state probe was undefined because the first render published state before the form variables further down the script had been assigned.

Pass 1 — Craft

  • The answer was out of the thumbnail. At 1200 wide the total sat at 821–855 px, below the 750 px frame. The total now sits directly under the plan and above the step cards: 619–653 px.
  • The transects re-drew on every change. Moving the slider inside the first two seconds restarted the line animation, so a screenshot caught half-drawn lines. The draw class is now only applied to lines created on the cold load, and a check asserts every transect is fully drawn after each re-render.
  • The masthead broke at 375. The wordmark ran under the Call button and the button text wrapped to two lines. Under 400 px the call button is a 44 px phone icon and the CTA doesn’t wrap; a check asserts the three masthead items don’t overlap.
  • The fold was 7 px from failing. The trust line finished at 595 px against a sticky bar at 602. A shorter eyebrow moved it to 580.
  • Step cards misaligned. “Permit or referral prep” wrapped and pushed $1,650 below the other two amounts, and “20.0 ha × $380” wrapped in step 2. The heading is now “Permit or referral” and the survey column is 1.22 times wider.
  • Copy. The sum line read “a round $10 already”; it now shows rounding only when it happens (0.1 ha: $4,319, rounded once to $4,320). The hero stat “$0 for the next step if you stop” became “5 working days to a written answer”. The masthead button’s flex gap split “Book the” from “$450 check”.
  • A minted colour failed. Light canopy #7D9670 on the clearing fill measured 2.67:1 for a mark; trees inside the clearing now use #5B7650 (4.17:1) and #3F5A37 (6.34:1).

Pass 2 — Depth

  • The plan proves its own scale. The area tag now prints real dimensions (2.0 ha · 190 × 105 m). Checks assert width × depth equals the area within 1 % and the drawn pixel area equals hectares × 10,000 × 0.576² within 1 px², for all five rows.
  • A north arrow and the 1 ha square are the second read: a landowner can hold their own shed pad up against the square.
  • One micro-interaction. The total settles in with a 0.38 s lift when its value changes, never on the first draw and never under reduced motion.
  • Form errors say what’s wrong. An empty phone now reads “We need a number to ring you back”, and junk reads “doesn’t look like a phone number”. The summary names the fields (“5 things to fix: your name, phone, locality, local government, what to clear.”), and focus moves to the first one.

Pass 3 — Hardening

  • The desktop section links had never rendered. The nav’s base display:none sat after the media query that showed it and won on source order, so no width ever saw it. The base rule now comes first, the nav appears from 1,100 px, and a check asserts four non-overlapping masthead items at 1,100, 1,200 and 1,440 with no horizontal scroll.
  • Chanel rule. The hero’s pull line (“If the desktop check says stop, you stop at $450”) repeated the stop card word for word. It’s gone; the argument lives once, beside the number.
  • Laterite discipline. The eyebrow dot and the map’s base star were laterite, which the palette reserves for survey lines and the ESA flag. Both are marri leaf now (9.84:1 on white).
  • Typed input. Typing 25 into the area box clamps to 20.0 and changes the total’s text; typing 0 clamps to 0.1 and prints $4,320. Arrow keys move between chips, re-price the estimate and show a 3 px focus ring.
  • Checks watched firing. A sticky bar grown to 260 px makes the fold check fail, as it should, and a planted price that no step can produce fires the dollar scan. The scan itself was wrong first: it read a trailing comma as part of a figure, so it was fixed and then planted against. It fired once more, on this log, which had quoted the planted price and so published it; the line no longer names it.
  • Held clean. The phone pattern compiles under the v flag and rejects “ring me maybe” natively. No overflow at 375, 768 or 1,440. Reduced motion shows the finished frame immediately. The 1200 × 750 capture at 7 seconds shows the block plan whole and the $4,680 answer at 619–653 px, and its figures are unchanged 3 seconds later. Every dollar figure on both pages belongs to the licensed set, the only JSON-LD is WebPage, and there are no curly-quoted attributes. Pages weigh about 69 KB and 25 KB.

Local SEO we would implement for the real business

The live page carries only a WebPage schema naming it a demonstration, because structured data about a fictional business in a real search index is dishonest markup. For a real consultancy we would ship the block below, filled with the business’s own verified details and reviews pulled from its Google Business Profile, plus one landing section per local government served.

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "[Business name]",
  "description": "Flora and vegetation surveys and native vegetation clearing permit and referral preparation for rural landowners.",
  "telephone": "+61 8 9000 0000",
  "url": "https://www.example.com.au/",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[Street address, from the client]",
    "addressLocality": "[Locality]",
    "addressRegion": "WA",
    "postalCode": "0000",
    "addressCountry": "AU"
  },
  "areaServed": ["City of Swan", "Shire of Mundaring", "Shire of Chittering", "Shire of Toodyay", "Shire of Northam", "Shire of York", "Shire of Serpentine Jarrahdale"],
  "openingHours": "Mo-Fr 07:30-16:30",
  "makesOffer": [
    { "@type": "Offer", "name": "Desktop constraints check", "price": "450", "priceCurrency": "AUD" },
    { "@type": "Offer", "name": "Permit or referral preparation", "price": "1650", "priceCurrency": "AUD" }
  ],
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "[Verified reviewer]" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "[Review text exactly as published on the Google Business Profile]"
  }]
}

What changes for the real client

Notes against the spec

The concept listed the service area as the “Shires of” Mundaring, Swan, Chittering, Toodyay, Northam, Serpentine Jarrahdale and York. Swan is a city, not a shire, and Gidgegannup sits inside it, so the page names the City of Swan and six shires. Every figure on the page reproduces the wave’s figures script exactly; no arithmetic disagreement was found.