How the Wideboard Shearing Co. page was made

01The concept

Wideboard Shearing Co. is a fictional shearing and crutching contractor working out of Northam into the central and eastern wheatbelt. Its customer is a grower with a number in their head — 2,000 head, three stands — and a question the phone can't answer quickly: how many days, and what does it cost?

The page has one job: turn "have you got a team free" into a booked run, with the days, the tally and the cost already worked out before anyone picks up the phone. Everything else on the page — the trust strip, the reviews, the map — exists to make the number credible.

The hard part of that job is a piece of arithmetic growers already do in their heads and contractors are often vague about: a stand does roughly 140 head a day on a full shear, so the run length is ceil(head ÷ (stands × tally)) and the last day is nearly always a short one. Most quotes hide that. This page puts it in the largest type on the screen.

02The palette, and why

Argued from the shed itself: galvanised iron, jarrah boards worn dark, greasy wool gold, and the blue of the shed's own steel. A warm grey ground well below cream in value, a condensed grotesque, and a gold/steel-blue accent pair with no terracotta anywhere — deliberately clear of the three palettes AI design defaults to.

Every ratio below was computed with WCAG arithmetic from the shipped hex and measured again in Pass 1. The rule the collection enforces: the accent is for lines and marks, and body text gets its own ink token.

Scene fills, measured against the body ink

Service-area map labels are body-ink-class text, so they are set in #221E19 with a paint-order: stroke halo in the ground colour wherever they cross a ring or a fill. The "lines only" tokens never label the map.

03Type

• Archivo Narrow 700 — display. A condensed grotesque with the bones of stencilled shed and bale signage. It carries the headline, the day count and every price figure.
• Asap 400/500/600/700 — the workhorse. Body copy, controls, form labels. Slightly humanist, easy at 17px on a phone in a shed doorway.
• Roboto Mono 500 — one role only: tally and day strings. 2,000 HEAD AT $4.60 · LAST DAY 320. Numbers that have to line up, set in the one face that lines them up.

The typographic moment is the hero stamp: the day count set enormous — 5 DAYS — with the tally string running beneath it in mono at wide tracking, and the money on the third line. It is the only place on the page where a number is allowed to be that big, and it is deliberately the day count rather than the dollar figure: days are what a grower is actually booking.

04The signature — the Board

An SVG plan of a shearing shed drawn across the page. The catching pens run along the back wall, one behind every stand; the board is the jarrah strip across the middle with a shearer and a sheep at each stand and a chute down to the counting-out pens; the wool table, the press and the pressed bales sit at the wool-room end; and the empty race runs out at the far end, which is where the run docket hangs.

Beneath the shed a day strip counts the run out — one column per day, each filled in wool gold to that day's tally, with the last column part-filled to the honest remainder. Change the stands and the board redraws and the strip visibly shortens. Change the head count and the strip grows.

How it is built

The whole scene is one <svg> with seven groups — shed, pens, board, wool room, stands, day strip, labels — assembled synchronously in a single draw function. The entrance choreography is not a class toggle or a staggered DOM insertion; it is a progress value advanced inside the animation loop that owns the scene, because a group inserted after the loop starts can receive no paint invalidation in headless Chrome while every DOM assert stays green.

The geometry is solved, not guessed. The frame width is 2·pad + woolRoom + stands×standWidth + race, and the race is widened from the measured width of the docket so the docket always lands over empty floor rather than over a stand or the wool table. The binding contract is a rectangle-intersection assert — the docket's box never intersects the pens, the board, the wool room, the stands or the day strip — checked at 375, 1000 and 1200. Below 641px the docket drops out of the scene and docks directly beneath the artwork, and the race narrows to its minimum so the shed itself gets bigger on a phone.

Motion is deliberately small: the comb travels across each sheep on a staggered cycle, the fleece on the wool table breathes, and the final column of the strip pulses. Nothing ever drops below 0.55 opacity, so the signature is visibly alive at any capture instant rather than being phase-tuned to one. The frame delta is clamped at zero as well as capped, and the loop stops when the tab is hidden.

05The arithmetic

Rates are held as integer cents and divided by 100 exactly once, at display. This is not fastidiousness: 400 * 4.6 evaluates to 1839.9999999999998 in IEEE doubles, and a naive toFixed(0) hides that until a later comparison fails. The price function asserts Number.isInteger(cents) before it returns, and the verification harness re-checks it on every driven scenario.

Worked figures, measured from the running page

The estimator's cheapest output — $560 — is exactly the "from $560" floor printed in the services grid, so the page never argues with itself. Every figure above was re-derived by an oracle written separately from the page's own code: 1,156 checks over the full 3 × 30 × 4 × 3 grid, with zero non-integer cells and zero disagreements with the pinned spec.

Three designed behaviours worth naming

• The stands chip is price-neutral by design. More stands is a shorter run, not a cheaper one — the rate is per head. The page says that out loud beside the control rather than letting a grower discover it. It is not neutral in the 100–250 km zone, because keep follows the days: the same job on four stands saves one day of keep, which the ledger itemises.
• The day strip is capped at 14 columns. Longer runs draw 13 real days plus an overflow column reading "+ N more days", while the docket and the ledger still carry the honest total. The longest run reachable on the stepper grid is 43 days, and 99 of the 360 head × job × stands combinations exceed the cap — it is genuinely exercised, not decoration. The cap can be triggered by either control, so the unwind is partial: from 12,000 head on 2 stands (43 days) moving to 6 stands still gives 15 days and the overflow column stays; only dropping the head count to 8,000 clears it.
• Beyond 250 km is a designed quoted state. The badge prints the computable subtotal plus the quoted thing — "$9,200 + travel and keep — quoted" — never a bare "quoted" and never an invented travel figure. The declaration appears everywhere the total appears: the docket, the ledger and the plain-text mirror.

06Conversion decisions

• The phone is in the header at every width, and the sticky bar carries it on mobile. Most of this traffic is a grower standing in a paddock. Call is the primary action; the form is for the ones who want the numbers first.
• The signature sits in the hero, not below it. At 1200×750 — the exact viewport the collection's thumbnails are captured at — the shed, the day strip and the price docket are all on screen with the headline. A calculator below the fold is a calculator nobody runs.
• The price lives inside the artwork. The docket hangs on the race wall in the drawing, and the total also prints in the hero column, so the commercial argument survives being screenshotted.
• Four controls, not ten. Job, head, stands, distance. Everything else a real quote depends on — shed condition, mob condition, timing — is a conversation, and the conditions docket says so instead of pretending a form field can capture it.
• The form asks for seven things and only five are required. Name, phone, nearest town, head count, job. Stands and the week are optional because a grower who doesn't know yet should not be blocked. The "Send this run through" button hands the Board's current scenario to the form so the enquiry arrives warm — but only on click, never on load, so an empty submit is genuinely empty.
• The confirmation is honest about being a demo. It is hidden on load and on an empty submit, appears only after a valid filled submit, and says plainly that nothing was sent anywhere. No fake network round-trip.
• Every number the page shows, it can defend. The tally figures are the ones the days are quoted on, the last day is stated before booking rather than discovered on the Friday, and the one figure the business genuinely cannot know — travel beyond 250 km — is declared as quoted rather than guessed.

07Local SEO we'd implement for the real business

This demonstration deliberately ships no LocalBusiness, Review or AggregateRating structured data. The business is fictional, and fictional structured data in a real search index is dishonest markup. The live page emits only WebPage, CreativeWork, WebSite, BreadcrumbList and ListItem, each naming the page as a demonstration.

What we would ship for a real shearing contractor

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://wideboardshearing.com.au/#business",
  "name": "Wideboard Shearing Co.",
  "description": "Shearing, crutching and lamb marking contractor based at Northam, working the central and eastern wheatbelt of Western Australia.",
  "url": "https://wideboardshearing.com.au/",
  "telephone": "+61 8 9XXX XXXX",
  "email": "office@wideboardshearing.com.au",
  "image": "https://wideboardshearing.com.au/img/board-northam.jpg",
  "logo": "https://wideboardshearing.com.au/img/logo.png",
  "priceRange": "$$",
  "currenciesAccepted": "AUD",
  "paymentAccepted": "Bank transfer, EFT",
  "foundingDate": "2004",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Lot 00 Example Road",
    "addressLocality": "Northam",
    "addressRegion": "WA",
    "postalCode": "6401",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.653, "longitude": 116.667 },
  "areaServed": [
    { "@type": "City", "name": "Northam" },
    { "@type": "City", "name": "York" },
    { "@type": "City", "name": "Cunderdin" },
    { "@type": "City", "name": "Wongan Hills" },
    { "@type": "City", "name": "Corrigin" },
    { "@type": "City", "name": "Merredin" },
    { "@type": "City", "name": "Kojonup" }
  ],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "06:00", "closes": "19:00"
  }],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Shearing services",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Full shear" },
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "price": "4.60", "priceCurrency": "AUD",
          "unitText": "per head", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Crutching" },
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "price": "1.40", "priceCurrency": "AUD",
          "unitText": "per head", "valueAddedTaxIncluded": true } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Shear with an AWEX-registered classer" },
        "priceSpecification": {
          "@type": "UnitPriceSpecification",
          "price": "5.15", "priceCurrency": "AUD",
          "unitText": "per head", "valueAddedTaxIncluded": true } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "38",
    "bestRating": "5", "worstRating": "1"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "R. Trethewey" },
    "datePublished": "2026-10-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Two thousand through a three-stand shed in five days, exactly as booked. Tally sheet in my inbox every evening."
  }]
}
</script>

Alongside it: a verified Google Business Profile with the Northam service area and the two travel rings, the six town names in real page copy rather than a footer keyword list, and a review feed the client actually owns. The ratings and the review above are illustrative — on a live build they would be generated from the client's real review data, never authored.

08What would change for a real client

• Their photos. A real shed, a real board, real bales. The SVG plan would stay — it is the thing that answers the question — but the hero and the reviews would carry photography.
• Their tallies. The 140/420 figures are the honest planning numbers a contractor quotes on. A real build would set them from the client's own season data, and could vary them by shed once there is history.
• A real run sheet. The enquiry form would post into whatever the client already runs — most contractors we would build this for are on a spreadsheet, a phone and a whiteboard. The realistic first step is a shared calendar plus a form that lands in it.
• Named integrations. Woolclip (Australian Wool Innovation's digital wool book) and AWEX eBale for the clip data and bale identification; Xero or Employment Hero for Pastoral Award payroll and shed-hand timesheets; Deputy for team rostering across sheds; AgriWebb where the grower already keeps their mob records. The Board would read tallies back from Woolclip rather than asking the grower to count twice.
• Their reviews. The three on the page are demonstration copy. A real build pulls the client's Google reviews and marks them up with the LocalBusiness schema above — which is exactly why this demo does not.

09The three iteration passes

Each pass drove the interactive elements and asserted the output — not just loaded the page. Empty submit and filled submit, every chip and stepper, the signature driven to known values, a rapid-fire drive with no settle between clicks, both halves of the partial unwind, and native-resolution screenshots at 375, 1000 and 1200.