TRUESCALE Build notes The site Index
Weighbridge verification · Welshpool

How the Truescale page was built

Truescale Weighing Services is a fictional Welshpool business that verifies, calibrates and repairs weighing instruments across the Perth industrial corridor and out to the Wheatbelt, and sells none. Its customer is a site manager at a quarry, a recycler, a grain receival or a transport depot whose ticket sets what somebody pays. The page has one job: get that manager to book a verification before their certificate date passes — and to tell the ones who do not need a verification at all, in full size, that they do not.

The proof element

One lightweight readout, four controls, and an answer that is visible before you scroll. You tell it whether the weight sets a price somebody pays, which instrument it is, how many months ago it was last verified, and the interval printed on your own certificate. It returns a verdict string, a timeline drawing and, where a verification is actually needed, a price.

The interval is a field, not a constant, and that is the whole design decision. It is read off the customer's paperwork and defaults to 12 months, so the calculator is correct whether or not a statutory interval exists — and, as the next panel sets out, one does not.

Sets a priceLast verifiedIntervalInstrumentVerdictPrice
No6 months12WeighbridgeNo trade verification required— none quoted
Yes0 months12WeighbridgeDue in 12 monthsfrom $890
Yes9 months12Platform scaleDue in 3 monthsfrom $180
Yes11 months12WeighbridgeDue in 1 monthfrom $890
Yes12 months12WeighbridgeDue this monthfrom $890
Yes13 months12WeighbridgeOverdue by 1 monthfrom $890
Yes14 months12WeighbridgeOverdue by 2 monthsfrom $890
Yes20 months12Axle scalesOverdue by 8 monthsfrom $420
Yes7 months6WeighbridgeOverdue by 1 monthfrom $890

Singular and plural are separate branches and both are asserted: Due in 1 month and Overdue by 1 month never print an "s". The whole reachable grid — 2 answers × 3 instruments × 4 intervals × 24 month positions, 576 cells — is driven in a headless browser against an oracle written separately from the page's own code, and every cell's verdict, price and months-left is compared.

The argument against our own biggest sale

Answering no to the first question is not a dead end and not a footnote. It produces a full-size verdict card reading No trade verification required, with the reason beside it: an instrument that is not used to determine a price does not need trade verification, nobody will fine you for it, and we will not quote you for one. We will still calibrate it if you want the number to be right, and that is a different, cheaper job.

That branch prints no price at all. The card's price line is removed, the drawing loses its bands, its due tick and its marker, and the harness asserts that there is not a single dollar sign anywhere inside the card. Sliding a quote in underneath the refusal would have undone the only sentence on the page a competitor cannot copy.

What was verified, and what we refused to publish

This trade sits under a real regulator, so every claim about it was checked at the National Measurement Institute's own pages before it was written, and the ones that could not be checked were left off the page rather than softened.

Verified at industry.gov.au before publication

The licensing scheme is the servicing licence. Servicing licensees, and the verifiers nominated under their licence, test and verify measuring instruments used for trade, and each verifier marks every instrument they verify with the servicing licensee's verification mark. Their reference standards must carry a current Regulation 13 certificate.

What makes a weighing instrument suitable for trade. The National Measurement Act 1960 requires it to operate within the limits of error permitted under the regulations and to be pattern approved.

What a weighbridge owner must do. Have an NMI-approved type, have a servicing licensee verify it, have a servicing licensee verify it again after each repair or adjustment, keep it clean and in working order, and take responsibility for it weighing correctly at all times. NMI's advice is that it should be tested regularly.

Approaches. A trade weighbridge's approaches must comply with regulation 3.4 of the National Trade Measurement Regulations 2009 — named on the page, never quoted from.

Scope. Trade measurement law applies where measurement determines price; equipment not used for trade does not need NMI approval. That is the licence for the whole "no" branch of the proof element.

Refused — not published anywhere on either page

A statutory re-verification interval. There is no fixed periodic interval published for these instruments. Verification is required before first use and again after any repair or adjustment; the rest is the owner's duty to weigh correctly and NMI's advice to test regularly. So the page does not state an interval — it asks for one, defaults it to the commonest answer of 12 months, and says in two places that the number comes off your certificate and not off us. The spec anticipated this outcome, and the calculator ships unchanged because the interval was designed as an input.

Any penalty figure. Nothing sourceable, so nothing printed. The card carries a refusal directly beside the price instead: what a lapse costs is a matter for NMI's trade measurement inspectors, and we will not publish a number we cannot source. The page never implies a prosecution, and it says plainly that anyone quoting a fine on a sales page is guessing.

NATA accreditation, a real servicing licence number, and a verification mark. The footer carries a visibly patterned SL0000 and ABN 00 000 000 000, and no three-letter verification mark is invented anywhere.

The trade vocabulary is real and used the way the regulator uses it: certificate of approval, limits of error, national instrument test procedures, eccentricity and repeatability, verification mark, seals, certificate of verification, direct versus end-and-end weighing.

Palette

A certificate is a document about a number, so the room is a laboratory, not the customer's yard. No diamond plate, no hazard stripes, no heavy-haulage orange. Every pair below was measured with WCAG arithmetic and each token is used only on the grounds it was measured against.

Instrument grey#F4F6F6The page ground. Cool, flat, slightly instrument-panel; body ink reads 16.21:1 on it.
Panel#E5E9E9Service tiles, reviews and the verdict card. One step down from paper so the card sits without a shadow doing the work. Ink 14.37:1.
Graphite band#161D22The four-step strip and the footer. Reversed paper reads 15.7:1 on it; nothing else is allowed on this ground.
Calibrated teal#0E6675The CTA fill and every drawn mark. Reversed paper 6.1:1 on the button; as a mark it reads 6.1:1 on paper and 5.6:1 on map land.
Teal ink#0C5F6DThe darker twin, for teal-coloured type — eyebrows, "from $" anchors, the in-date verdict. 6.74:1 on paper.
Due ochre#8A5308Carries "due" and only "due". Overdue verdicts and field errors, 5.83:1 on paper. Alarm red would have overstated a $890 job.
Mark ochre#96590AThe overdue segment of the certificate strip and its DUE AT label. A mark token at 5.19:1 on paper, 4.6:1 on panel.
Ink#131A1EBody copy and every map label. 16.21 on paper, 14.9 on map land, 11.88 on map water.
Muted#48545ASecondary copy on paper (7.19:1) and panel (6.38:1) only. It is not licensed on map fills, so nothing on the map uses it.
Map water#C7D7DCThe Indian Ocean on the service-area map. Its only text is body ink, haloed, at 11.88:1.

Hairlines are #C6CFCF on light grounds and #303A40 on the graphite band — each is a line token at ~1.46:1, deliberately, and neither ever carries type.

Type

IBM Plex Sans at 400/500/600 for everything that is read, and IBM Plex Mono at 400/500 for everything that is measured — certificate numbers, month counts, the scale on the timeline, licence and ABN patterns, price anchors, map labels. Splitting the two faces by that rule means the page tells you which numbers came off a document before you have read a word.

Plex has genuinely good numerals and a technical, un-fussy voice that suits an instrument business; tabular figures are on everywhere a weight, a month or a dollar appears, so nothing shifts sideways when the verdict changes from "1 month" to "12 months". The scale is deliberate rather than 16/24/32: 11.5px mono eyebrows, 15.5–16.5px body, 18px tile headings, a 21–33px section scale, and a single display step at clamp(28px, 6.3vw, 50px) for the h1 with the verdict string one step under it.

Technique

Two files, no libraries, no build step, no raster images. Every visual is drawn: the certificate timeline is inline SVG whose geometry is written by JavaScript, and the service-area map is inline SVG geography with HTML labels positioned over it in percentages so their type size stays readable at 375 as well as 1440.

The certificate timeline

A 24-month axis in a 400×140 viewBox. The in-date span is a teal line from month zero to your interval; the rest of the axis is the ochre overdue span; a tick and a DUE AT n label sit at the interval, and a marker with its own n MONTHS AGO label sits at today. All four move by attribute writes, and both labels are clamped so they can never leave the frame at the ends of their ranges.

On the non-trade branch the drawing is not merely greyed out: the two spans, the due tick and the marker are removed and a plain rule is shown with NOTHING FALLS DUE over it. That toggling is done with setAttribute('hidden','') and removeAttribute against a [hidden]{display:none!important} rule — hidden is an HTMLElement property and does nothing at all on an SVG element, which is a defect that leaves every state assert green and only the pixels wrong.

Motion

One tween: the marker slides to its position over 900 ms on cold load and 220 ms on every change after that. It is driven by performance.now() deltas against a fixed start time, never by adding a per-frame increment — headless Chrome services animation frames only when one is requested, so a frame accumulator can be several seconds behind the wall clock at the instant the preview screenshot is taken. While the tab is hidden the start time is shifted rather than the progress advanced, so returning to the tab resumes rather than jumps. Under prefers-reduced-motion the loop never starts and the finished frame is painted immediately, checked in the harness by emulating the media feature and reading the marker's coordinate.

State probe

window.__weighbridge carries every input and every derived figure — the verdict string, the months left, the price, whether the price line is showing, and a settled flag — so the harness asserts on the model rather than on pixels, and the thumbnail check can re-read every numeric field eight seconds after the capture instant to prove nothing is still moving.

Iteration log

Pass 1 · Craft

The answer was outside the frame that sells the page

Every pass drove the proof element across its full grid and drove the enquiry form empty and filled. This one found four things.

  • The verdict sat at y 866 at 1200 wide — outside the 1200×750 preview entirely — because all four controls were stacked above it. Re-cut the card to question → drawing → verdict → the remaining controls, then trimmed the card's spacing again once it fitted. Measured at 1200 wide, the timeline now ends at y 440, the verdict at y 536 and the price line at y 707 — all of it, and the headline, inside the same 750 px frame with room to spare rather than by four pixels.
  • The timeline's labels were rendering at 8–10 px. The SVG was authored on a 460-unit viewBox inside a 386 px card, so every label was being scaled down by a sixth on desktop and by a quarter at 375. Re-cut to a 400×140 viewBox with larger type, and dropped a redundant "months" caption that was sitting on top of the VERIFIED label at phone widths.
  • At 375 the hero's trust line finished 23 px below the top of the sticky call bar — a fold measured against the viewport is not the fold, because the bar takes the bottom of it. Shortened the headline and the trust line, tightened hero spacing under 520 px, and re-measured: headline, primary CTA and trust line now each finish above the bar.
  • The price read from $890 with the whole phrase set in mono, which broke the sentence. Only the figure is mono now.
Pass 2 · Depth

The map was drawing its labels through its own rings

  • Every suburb label was centred on its own tick mark, so the words sat across the marker, the drive-time rings and the coastline — three separate collisions, none of which any state assert can see. Redrawn: a teal square at each site, the label lifted clear above it, and a map-land halo behind the type instead of a solid chip, so the rings stay continuous underneath. A label-collision assert now runs at 375, 560, 768, 1000, 1200 and 1440 and also checks no label escapes the map box.
  • Added the second read on the non-trade branch: the drawing does not just lose its price, it loses its bands, its due tick and its marker, and says NOTHING FALLS DUE instead. A visitor who flips the first question twice sees the page change its mind properly rather than blank a number.
  • Added the sector chips under the hero — quarries, recyclers, grain receival, concrete plants, transport depots, waste transfer — which fill the hero's left column at desktop and answer "do you do my kind of site" without another paragraph.
  • Gave every section a scroll-margin-top, because the sticky masthead was covering the heading of whichever section the CTAs jumped to.
Pass 3 · Hardening

Two invisible buttons, and a harness that could not have seen them

  • The Sapience band's two links were rendering as empty white boxes. .band a (specificity 0,1,1) beat .btn-d (0,1,0), so paper-coloured text was sitting on a paper-coloured fill at 1:1. The markup was right, the text was right, and every assert on the page was green. Fixed with .band .btn-d, and then a standing check was added that walks every text-bearing element, resolves the first opaque ancestor background, and fails on any measured ratio under its WCAG floor — the check fires on that exact defect when it is planted back in.
  • On the non-trade branch the months slider and the interval select were still live and still computing a number nobody would ever be shown. A control must either change the answer honestly or say why it cannot, so both are now disabled with the reason printed under them — no interval applies to an instrument that is not used for trade — and the "we do not quote fines" line is dropped there too, because the verdict above it already says nobody will fine you. Both come back live, and the refusal returns, the moment the answer flips back to yes; that unlock is asserted, not assumed.
  • Drove junk into the phone field rather than only good data: the pattern attribute compiles under the v flag (its parentheses and hyphen are escaped) and correctly rejects "ring me maybe". A v-invalid pattern is silently discarded by the browser and the field then accepts anything, which looks exactly like a working form.
  • Re-read the whole state probe eight seconds after the preview instant and compared it field by field with the reading at the instant itself — identical, so the page is genuinely at rest when it is photographed.
  • Checked the layout at 375, 560, 768, 1000, 1200 and 1440: no horizontal overflow at any of them, the proof card's computed grid-column is the hero's second column at 1200 rather than merely looking like it, and the mobile reading order is still masthead → hero → services → proof → how → reviews → map → FAQ → form → footer.
  • Then eighteen defects were planted into the two files one at a time and the harness was watched failing on each, with the file restored byte-for-byte after every run: a second h1, a curly-quoted class attribute, a banned LocalBusiness block, a real street address, a plausibly-real phone number on each page, a missing colophon on each page, plural-only month wording, a price slipped under the no-trade verdict, a per-frame animation accumulator, the proof card knocked out of the hero column, a console error on load, a v-invalid phone pattern, two map labels stacked on one point, a sticky bar with no tel: link, and the invisible band buttons. Eighteen fired. A green suite that has never been seen firing is not evidence — and one of the eighteen initially reported as passing turned out to be a plant that had failed to apply, which is its own reminder to read what the harness actually did.

Local SEO we would implement for the real business

This page ships only WebPage and CreativeWork schema, because Truescale does not exist and putting fictional business data into a real search index is dishonest markup. For a real client we would ship the block below — a LocalBusiness subtype (ProfessionalService is the honest choice for an industrial servicing trade) carrying the service catalogue with its real price floors, plus Review and AggregateRating — alongside a claimed and completed Google Business Profile, service-area targeting on the drive-time bands rather than a suburb list, and a review request built into the job-completion email.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "@id": "https://truescale.example.com.au/#business",
  "name": "Truescale Weighing Services",
  "description": "Trade verification, calibration and repair of weighbridges, platform scales and axle scales across Perth and the Wheatbelt.",
  "url": "https://truescale.example.com.au/",
  "telephone": "+61 8 XXXX XXXX",
  "priceRange": "$$",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit N, Real Street",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.99, "longitude": 115.94 },
  "areaServed": [
    { "@type": "City", "name": "Perth" },
    { "@type": "AdministrativeArea", "name": "Wheatbelt, Western Australia" }
  ],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "06:30", "closes": "16:00"
  }],
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Weighing instrument services",
    "itemListElement": [
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Trade verification of a weighbridge" },
        "priceSpecification": {
          "@type": "PriceSpecification",
          "minPrice": 890, "priceCurrency": "AUD" } },
      { "@type": "Offer",
        "itemOffered": { "@type": "Service", "name": "Trade verification of a platform or pallet scale" },
        "priceSpecification": {
          "@type": "PriceSpecification",
          "minPrice": 180, "priceCurrency": "AUD" } }
    ]
  },
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "38"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A real, consenting customer" },
    "datePublished": "2026-08-14",
    "reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
    "reviewBody": "Weights on the deck the morning after we rang, and the certificate the same afternoon."
  }]
}
</script>

Two rules we hold to on live sites: aggregateRating and review are emitted only from reviews the business has actually received and can evidence, and the FAQ section gets its own FAQPage block only when the answers on the page match the answers in the markup word for word.

What would change for the real client

Why this converts

For the person deciding whether to hire us

The first thing a visitor sees on a phone is the headline, one line of what you do, a call button and a licence line — and on a laptop they also see a finished answer to the question they arrived with, which is why the preview tile for this page shows a verdict and a price rather than a menu of services.

The proof element asks four things a site manager can answer without leaving their desk, and one of them is the interval off their own certificate, so the page never has to pretend to know a number about their business that it cannot know.

The form asks only for the five fields that let you ring back and price the job — name, phone, site suburb, instrument, last certificate date — and everything else is optional, because each extra required field on a trade enquiry form costs enquiries and this one is already carrying the calculator's answer into the callback.

The trust strip is a licence pattern, the weight of test metal on the truck and a single sentence saying we sell no instruments, which is worth more here than a row of logos: it tells a buyer why our advice about their twenty-year-old bridge is different from the advice on the supplier's page ranking above us.

And the page turns work away in full size — if your scale does not set a price, it says so, says nobody will fine you, and does not quote you — because a page that is visibly willing to lose one sale is the reason the reader believes the other numbers on it.