Build notes · site 455 · Wave 59

How Manifest Risk Consulting was built

Manifest Risk Consulting is a fictional Welshpool consultancy preparing dangerous goods storage licence applications, amendments and site risk assessments across Perth and regional WA. Its customer is a farm, workshop, depot or small manufacturer holding a letter, an insurer’s question or a new tank. The page has one job: price the application, show what the certificate does, and say plainly that the customer may lodge it themselves.

Palette: a steel store and a diamond placard

Slate and cool steel greys carry the page, hazard orange marks what matters, and true placard red and yellow appear only as drawn fills inside the site plan — never behind a word. Ratios below are from contrast-w59.log (declared tokens) and from this build’s own measurements (colours minted during the build).

Ground#F3F4F6Page ground. Ink 16.65:1, muted 7.39:1, accent 5.50:1 on it.

Surface#FFFFFFCards, form, footer. Ink 18.32:1, muted 8.13:1, accent 6.06:1.

Ink#11151AHeadings, figures, diamond numbers. Forbidden on band (1.06:1).

Muted#4A5059Body copy and ledger labels. 7.39:1 on ground; forbidden on band (2.14:1).

Slate · CTA#1D2B36Every primary button, with ground text at 13.15:1. The licence bar segments.

Hazard orange#A84300Eyebrows, quote rules, marks. 5.50:1 on ground, 6.06:1 on surface; never on band (2.87:1).

Band#141B22The Sapience band. Carries only #F3F4F6, at 15.78:1.

Placard red#C8202AMinted. Drawn fill only, 5.68:1 against white; no text sits on it.

Placard yellow#F5C400Minted. 1.64:1 against white, so every yellow diamond is cased in ink.

Field edge#7C838CMinted. Input, stepper and chip borders: 3.83:1 on surface, 3.48:1 on ground.

Soft#EEF0F3Minted. Alternative-price box, WA land fill. Ink 16.05:1, muted 7.12:1.

Shed#E3E6EAMinted. Shed and driveway fills on the plan. Ink labels at 14.64:1.

Also minted and measured: hover slate #2A3A47 (ground text 10.63:1), error tint #FFF3EA (accent 5.55:1), hairline #D6DAE0 (decorative only, 1.40:1 — it never carries meaning), map ocean #DCE4EB (1.29:1 against land, so the coast carries a #7C838C stroke at 3.83:1; the ocean label is muted at 6.33:1 on it) and river #9FB4C6 (2.14:1, decorative; every suburb label crossing it wears a white halo and reads at ink contrast).

Type

Saira Semi Condensed 600/700 for headings, the wordmark, the price and the plan labels. It reads as signage — the lettering on a store door — and its condensed figures keep $4,590 on one line in a 280 px answer column. Noto Sans 400/500 for everything a person reads at length: the ledger, the quoted regulator sentences, the FAQ. Tabular numerals throughout so the ledger’s cents align.

The proof element: the application estimate

Two steppers (storage areas 1–10, classes stored 1–6), a new-licence or amendment toggle, and three presets for the worked examples. The model is held in cents: $1,350 base, $260 per storage area after the first, $180 per class after the first, amendments at 60 % applied as ×6/10 on a whole-dollar subtotal so every intermediate is an exact integer, and one rounding, to $10, at the figure the customer acts on. The ledger prints every line to the cent, so the amendment line reads $1,386.00 above an estimate of $1,390. Both chips carry their own price at all times, and a box under the ledger prints the other option with its difference and an honest isSubstitute:false reason.

The drawing is a site plan built in inline SVG on every render: a dashed yard fence with a gate gap, a shed and office, and one placard-style diamond per storage area — red or yellow outer fill, a white inset line, a white centre carrying the area number. Diamonds carry numbers, never class numbers or symbols. Under the yard, a five-segment bar draws the five-year term of a storage licence, with the orange marker at the start for a new application and inside the term for an amendment (no claim is made about what an amendment does to the term). Two hand-tuned layouts — 640×284 and a portrait 360×330 — are chosen by the drawing’s own width so labels never drop below legible size at 375, and a resize only redraws when the layout changes. The entrance (diamonds drop, bar segments grow) is CSS keyframes, wall-clock by nature, gated on a cold-load flag and absent under reduced motion.

Worked example	Arithmetic, as the ledger prints it	Estimate
Farm · 2 areas, 3 classes, new	$1,350.00 + 1 × $260.00 + 2 × $180.00	$1,970
Workshop · 1 area, 1 class, amendment	$1,350.00 × 60 % = $810.00	$810
Manufacturer · 6 areas, 5 classes, new	$1,350.00 + 5 × $260.00 + 4 × $180.00	$3,370
4 areas, 2 classes, amendment	($1,350.00 + 3 × $260.00 + $180.00) × 60 % = $1,386.00	$1,390
Full grid, 120 cells	matches `figures-w59.mjs` cell by cell; monotone in both steppers; amendment always cheaper	$810 – $4,590

Where the page argues against its own sale

A full-size Lodge it yourself — $0 from us card sits directly under the estimate at desktop and straight after it on a phone, at the same border weight as the estimate card. It quotes the department twice, verbatim, and names neither sentence as ours:

“Companies may engage the services of an accredited consultant to more quickly progress their licence applications through the approval process.”WorkSafe — Role of accredited dangerous goods consultants

“The accredited consultant must place achievement of these requirements ahead of the commercial interests of the licence applicant.”Same page

It ends in two things the reader can do today: WorkSafe’s dangerous goods licences page, and the free ten-minute phone read. A one-line version (“Or lodge it yourself: $0 from us”) sits inside the estimate card in every state, and the probe carries lodgeYourself.fromUs = 0.

Verified at source, 13 September 2026

Both pages were re-fetched before any sentence was written, and every quotation on the site was copied from them: Dangerous goods licences and Role of accredited dangerous goods consultants, both titled “WorkSafe – LGIRS”. Neither page spells out the department’s full name in its content — they say “the department” and “the department’s Chief Officer” — so the site does exactly the same and attributes quotes to WorkSafe.

What this page declined to publish

Quantities. No manifest, placard or licensing threshold of any kind. Whether a site needs a licence is sent to WorkSafe and the phone read.
Government fees. The licences page links a schedule of fees and charges; the site says so and prints no figure.
Processing times. Neither page states one, so the FAQ says we will not guess it.
Class names and numbers. The estimate counts classes; it never names one, and the diamonds carry area numbers.
Regulation numbers. Only the regulation title the licences page itself quotes in its site-licensing sentence appears, inside that quotation.
What happens without a certificate. The page quotes what a certificate does and does not infer the opposite.
What an amendment does to the licence term, and which changes need an amendment. The FAQ quotes the one certificate form that serves both and sends the question to the phone.

Iteration log

Every pass drove the estimate to the worked examples and the form through empty, junk and filled submissions in headless Chrome, and asserted the printed text rather than the model. The harness finished at 41 of 41.

Pass 1 · Craft

The thumbnail lost the licence bar. At 1200×750 after 7 s the yard and diamonds were in frame and the five-year bar was cut at the fold. Two causes, found one after the other: the preset chips wrapped to two rows in a 254 px column and the subline and first ledger label each wrapped; then, with those fixed, the card’s second row was still sized by the answer column while the controls column ended about 140 px higher. Presets moved into the card header, labels shortened, and the “as an amendment” box moved under the licence chips at ≥1024 px, with mobile source order unchanged. The bar’s bottom edge is now asserted inside 750.
The headline wrapped differently on two runs. max-width:15ch on a heading whose first two words are exactly fifteen characters gave four lines on one render and six on the next. The cap is gone at desktop; the headline sets in three lines.
Map labels. Hazelmere’s label sat on the Swan and against Bayswater’s, the ocean label straddled the coastline, and on the state map Perth collided with Bunbury. Labels moved, the ocean label now runs vertically inside the water, and both maps are capped at 460 px so their labels stop growing to 18 px on a wide screen.
Small type. Year labels under the licence bar rendered at 9.6 px and went up a size; the accreditation reference no longer breaks across two lines at 375.
Driven and asserted: farm $1,970 with the ledger to the cent; workshop $810 from $1,350.00 × 60 %; manufacturer $3,370; four areas, two classes, amendment by the steppers $1,386.00 to $1,390; the grid ends at $4,590 and $810 with the steppers disabled. Empty submit flags seven fields and focuses the name; a phone of “ring me maybe” is refused; a filled form confirms locally and carries the estimate. Two failures on the first run were the harness, not the page: no-break spaces in the class sentence, and a triple-click that did not clear the junk phone.

Pass 2 · Depth

Micro-interaction on the drawing. Stepping areas up drops in only the diamond that was added, identified by its slot rather than its index, so a resize or a renumber never replays anything. One step from the farm preset is asserted to animate diamond 3 and nothing else.
The ledger shows its working as it changes. Lines whose amount moved, and the headline figure, take a brief warm tint; one step is asserted to tint only the areas line.
Second read. The yard is labelled for the preset you started from and becomes “Your site” once you move off it; the plan states the classes across the areas; the SVG description is rewritten on every render so a screen reader hears the count and which marker the licence bar carries.
Driven through three more states at 1200 and 375 (workshop amendment, ten areas and six classes, manufacturer) and three defects fixed from the clips: at ten areas “9 ×” broke away from “$260.00”, so the ledger labels were shortened; the amendment total label wrapped, so “ex GST” moved into the subline; and the portrait layout numbered diamonds 9 and 10 above 1 to 8, so diamonds are now numbered in reading order after they are placed.

Pass 3 · Hardening

One ornament removed. Each review carried a row of five hazard diamonds. It was decoration, and on demo copy it also implied a rating. Gone; the cards keep an orange top rule.
Tap targets. Preset chips were 36 px tall; they are 44 px below 1024, and every control, sticky-bar link and FAQ summary at 375 is asserted at 44 px or more.
Rest and layout. The probe is identical at 7 s and 15 s. The breakpoint selectors that hide the masthead button and tagline are asserted to match something, and the proof card’s computed grid column is asserted to be 2 at 1200 rather than judged by eye.
Keyboard and motion. Tab reaches the area stepper with a visible 3 px orange ring. Under reduced motion there are no entrance classes, the probe is settled at load, nothing is below full opacity, and a step pops nothing. A resize does not re-enter the entrance.
375. No horizontal overflow on either page; the headline, primary button and trust line finish above the sticky bar (577 against 606); the bar is a nav owning a real tel: link and an anchor to the form. Zero console errors at 375, 768 and 1440.
Honesty and final copy read. Both files scanned for curly-quoted attributes, stray phone numbers, class numbers, quantities, fees and processing-time wording: clean. Two sentences tightened against the source: the lodge-it-yourself card now says nothing on the two department pages we quote requires a consultant, rather than “the department’s page”, and the how-it-works step uses the page’s own phrase, “the requirements of the relevant regulations”.

Why this converts

For the owner deciding whether to hire Sapience

The phone number and a “Book a site visit” button are in the header, in the hero and in a sticky bar on every phone, because this customer usually arrives holding a letter and wants a person, not a menu. The estimate answers the question they are embarrassed to ask — what will this cost me — before they ring, and its ledger shows every dollar, so the figure reads as a model rather than a mood. The site plan draws their own yard back at them, one diamond per store, which turns an abstract compliance job into something they recognise as theirs. The lodge-it-yourself card quotes the regulator saying a consultant is optional, and a business willing to print that is one a cautious operator believes about everything else. The form asks only what a consultant needs for the first call, including what is stored in plain words, and it carries the estimate with it so nobody has to explain themselves twice.

Conversion decisions in brief: the CTA says “site visit” rather than “quote” because the price is already on the page; the secondary CTA is the free phone read because the first question is often whether a licence is needed at all; the trust line leads with the accreditation reference because the certificate is the product; and the form has a “Not sure yet” option on new-versus-amendment so an honest answer never blocks a submission.

Local SEO we would implement for the real business

The live page carries only WebPage markup naming it a demonstration. For the real consultant we would ship business markup like this — shown here as a code sample, deliberately not live, with every value a placeholder until the client supplies it.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "[Client business name]",
  "description": "Dangerous goods storage licence applications, amendments and site risk assessments by an accredited consultant.",
  "telephone": "[client phone]",
  "url": "https://[client-domain]/",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[client street address]",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "areaServed": [
    { "@type": "State", "name": "Western Australia" },
    { "@type": "City", "name": "Perth" }
  ],
  "openingHours": "Mo-Fr 07:00-17:00",
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Licence application services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "New storage licence application" }, "price": "[from price]", "priceCurrency": "AUD" },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Licence amendment" }, "price": "[from price]", "priceCurrency": "AUD" }
    ]
  },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "[verified client name]" },
      "reviewRating": { "@type": "Rating", "ratingValue": "[1-5]" },
      "reviewBody": "[verbatim review from the client's Google Business Profile]"
    }
  ]
}
</script>

Alongside it: a Google Business Profile in the services-area-business mode (no public street address), suburb pages only where the client actually visits, and FAQ copy that keeps quoting WorkSafe rather than paraphrasing it.

What changes for the real client

Their accreditation. The real accreditation reference and the classes it covers replace DGC-0000, and the estimate’s class stepper is capped to what they are accredited for.
Their chemical register and SDS software. If they already keep client registers in a tool such as Chemwatch or ChemAlert, the “what is stored” field becomes an upload or a lookup, and the class count pre-fills from it.
Their CRM. The enquiry, with its estimate, lands as a lead in HubSpot, Freshsales or Pipedrive instead of a local confirmation.
Their job management. A booked site visit opens a job in Simpro or AroFlo with the storage areas as job lines, so the visit sheet is written before anyone drives.
Their accounts. The accepted estimate becomes a Xero quote with the same line items to the cent; regional travel is added as its own line.
Their proof. Real reviews from their Google Business Profile, and procedural site plans can stay — they photograph better than a stock image of a drum store.

Techniques

One self-contained HTML file per page, no libraries, Google Fonts only. Inline SVG built with createElementNS for the site plan and both maps (the WA outline and metro coastline are projected from longitude and latitude at render time). CSS keyframes for a single cold-load entrance. A state probe, window.__dangerousgoods, exposes the inputs, every ledger line, the pre-rounding figure, the rounded total, the alternative with isSubstitute, and the lodge-it-yourself branch.