Generative Assets · Industry demonstration
The ground opened up— how the Sumpline page was built.
Sumpline Hydro Excavation is a fictional Welshpool vacuum-excavation business. Its landing page has one job: turn “how much to expose this without breaking it” into a phone call with the hours, the tank loads and the traffic plan already on the screen. These are the notes — the palette with measured ratios, the drawing, the pricing model, and what changed across three passes.
01 — THE CONCEPTA section through the Swan coastal plain, at night.
The prospect is a civil contractor who has to prove four services before an HDD rig starts, a plumber hunting a sewer junction under a driveway nobody wants to break, a facilities manager with a stormwater pit nobody has opened in nine years. They do not want a brochure. They want to know what four holes cost and whether the truck will need a traffic plan.
So the page is a drawing of the job: a cutaway of Perth ground — grey sand over clay over limestone caprock — with the holes cut through it in a clean vacuum-rounded profile, the marked services picked out in their real utility colours, and a 1.7 m crew figure standing at the surface to hold the scale honest. Beside it stands the truck’s tank. That is the argument the trade actually cares about and nobody puts on a website: the water you cut with comes back into the tank, so the tank — not the hole — is what sends the truck away and back at $240 a load.
It is the wave’s dark site, and the direction is literal: this is what a job looks like under work lights. One warm thing (the clay ochre), one cool thing (the water), and everything else quiet.
02 — PALETTEArgued from a night dig, and measured.
Every ratio below was computed with WCAG arithmetic from the tokens actually shipped in index.html, not estimated. Two of them changed the build.
Strata fills carry their own measured label ink
Bone ink #E8E9E5 measured against every fill it labels. The depth fade darkens the deeper bands, which only lifts the ratio.
| Fill | Hex | Bone ink | Faded (mid-depth) |
|---|---|---|---|
| Topsoil | #3A342C | 10.08:1 | — |
| Grey sand | #4A4034 | 8.30:1 | — |
| Clay | #5A4433 | 7.46:1 | 9.00:1 |
| Reinstated road base | #45484A | 7.56:1 | — |
| Limestone caprock | #6A6558 | 4.76:1 | 6.29:1 |
| Slurry in the tank | #46392B | 9.16:1 | — |
| Tank shell | #2A3034 | 10.96:1 | — |
Two colours that decided how the drawing is labelled
Bone ink on the power red #C0392B measures 4.46:1 — under the floor. So no text is ever set on a service fill. Every service is labelled on the strata beside it in bone ink with a leader line in the service’s own colour, and a harness assert checks that no label bounding box intersects any service mark. Ground labels on gas (7.99:1), comms (13.58:1) and water (6.32:1) would have been legal; power has no compliant text pairing, so none of the four is labelled inside its pipe and the drawing stays consistent.
The ochre depth dimension and the “1.7 m” crew tag sit in the section’s gutters, which are strata fill — #DCAE5E on caprock measures only 2.84:1 raw (3.75:1 faded). Both carry a 3.4 px #141719 halo drawn with paint-order: stroke, so the ink the eye actually reads against is the ground at 8.80:1. The same treatment carries the service-area map: every suburb label is bone ink with a ground halo, and the two water-body labels are cut water, which measures 5.54:1 on the drawn ocean fill even before the halo.
03 — TYPEA door decal, a workshop manual, and a docket.
Chivo 900 for display. It is a grotesque with a blunt, working-vehicle weight to it — the argument was the lettering on the door of a vac truck, not a design magazine. It sets the headline, the enormous rest-state total, and every figure in the ledger, so a number always looks like the same kind of object wherever it appears.
IBM Plex Sans does all the work: body, chips, form, FAQ. It is legible at 16 px on a phone in the sun, which is where most of this traffic is, and it has enough character not to read as a system default.
IBM Plex Mono 500 appears in exactly one role and never leaks: docket strings. 5.5 H · 7258 L · 2 LOADS under the headline figure, the depth and crew tags in the drawing, and the tank labels. Monospace here is not decoration — a docket is a machine-printed artefact, and giving it the machine face is the difference between a quote and a receipt.
The typographic moment is the hero: the rest-state total set at 75 px against the night sky with the docket string running beneath it at .2em tracking, sitting directly under the headline in the same column. It is the one place the page raises its voice.
04 — THE DIGHow the signature is built.
No libraries. The whole page is inline CSS and about 700 lines of plain ES5 driving two hand-built SVG scenes, one requestAnimationFrame loop and a state probe. No canvas, no WebGL, no raster anywhere — the strata textures, the tank, the map and the icons are all drawn.
The view-fit frame
The section is a zoom-to-fit drawing, not a fixed picture. Its frame is holes × centre spacing + 2 m wide and depth + 1.6 m of surface and sky tall, so one hole at 0.6 m and twelve trench segments at 3.0 m are both drawn at whatever scale fits. The honest reference is the crew figure: always exactly 1.7 m in scene units, so it visibly shrinks as the dig deepens and widens. That is what stops a zoom-to-fit drawing from lying about size.
The pinned sky band is 1.6 m and the crew is 1.7 m, which clips a hard hat. The frame therefore carries 0.18 m of extra headroom above the pinned band — the only place the drawing departs from the specified geometry, and it is 0.1 m of it.
Where the light runs out
Below the deepest cut the strata keep going for another 1.1 m and then dissolve into the page’s own ground colour through a gradient. That does three things at once: it argues the concept (a work light only reaches so far), it gives the section no bottom edge to draw, and it lets the scene box be any height the layout wants without leaving a hole in the panel. Each stratum has its own texture — fine speckle for grey sand, sparse flecks and shrinkage curves for clay, nodules for the limestone caprock, angular aggregate for reinstated road base, root marks for topsoil — which is the quiet second read: the ground is five materials, not one brown fill.
The tank is the argument
Slurry is round(spoil × 1.4) — the water comes back. The gauge draws a 6,000 L vessel filling in clay ochre and stacks a second, third and fourth beside it as the volume passes each tank. Drawn vessels are capped at eight; where the computed count is higher the gauge prints the honest label “10 tank loads — 8 shown”. Ten is the real maximum anywhere on the grid (twelve pits at 2.4 m), so the cap is reachable and that string is live rather than theoretical.
Motion
The jet breathes at the nozzle — it lengthens and brightens on a 1.1 s cycle with an opacity floor of 0.55, so the signature is visibly alive at any capture instant rather than depending on where a screenshot lands in the loop. The slurry surface rocks in each filled vessel. The entrance stagger is driven from the animation loop rather than by inserting DOM after it starts, because a scene assembled after the loop begins can receive no paint invalidation in headless Chrome. Every control bumps an invalidation token before the state swap, so a rapid chip change cannot leave an in-flight frame closed over the old scene. Reduced motion parks the jet mid-pulse and the surface level, and never starts the loop at all.
05 — THE NUMBERSOne truck rate, one disposal rate, and no rounding.
The model is deliberately small enough to hold in your head, because a contractor who cannot reconstruct the number does not trust it.
Pinned anchors, GST inclusive. The truck rate includes the truck and two crew.
| Line | Rate | Multiplies |
|---|---|---|
| Truck & two crew, day | $296/h | Billed half hours, four-hour minimum |
| After hours or shutdown | $376/h | A rate swap, not a multiplier — same grid, same minimum |
| Slurry to a licensed facility | $240 a load | The actual load count, outside the minimum |
| Plant & consumables | $0 / $180 / $260 | Flat per job type, added once, outside the minimum |
| Traffic plan, suburban street | $420 | Flat, added once, outside the minimum |
| Road reserve / Main Roads | quoted | Price-less — the subtotal still prints |
Hours are raw = spoil ÷ cut rate + setup, then billed = max(4, ceil(raw × 2) ÷ 2). Soil is price-relevant only through the cut rate: grey sand 1,800 L/h, clay 1,100, reinstated road base 900, limestone caprock 600.
The rest state, worked
Eight 600 × 600 potholes to 1.8 m through clay, on a suburban street, day shift. Spoil = 8 × 36 L × 18 tenths = 5,184 L. Raw hours = 5,184 ÷ 1,100 + 0.5 = 5.213 → billed 5.5 h → $1,628. Slurry = round(5,184 × 1.4) = 7,258 L → 2 loads → $480. Traffic plan $420. $2,528. Every one of those figures is read back off the running page by the harness, not transcribed.
Integer safety by construction
Both truck rates are divisible by two, so a half-hour billing grid can never produce a fractional dollar; disposal, plant and access are whole dollars against whole-unit counts. An independent oracle enumerated the entire reachable control grid — 12,600 cells across four job types, four soils, one to twelve holes, thirteen depths, three access states and two shifts — and found zero non-integer money cells. The same enumeration confirmed the grid floor ($1,424, reachable at one hole, 0.6 m, sand, open site, day shift, and equal to the services grid’s “from” price), the per-job floors, the maximum load count of ten, and that a $0 computable subtotal is unreachable — which is why the quoted-state badge never needs a bare-quote string and prints “$2,108 + traffic management quoted” instead.
The depth cap, and what happens on the way back
Two different controls can cap the depth: limestone caprock stops the water at 1.8 m, and the pit boom and hose reach 2.4 m. Where both apply the tighter one wins, with a reason written for that cell rather than one reason stretched over two. A capped-away depth is remembered, and the unwind is deliberately partial:
The pinned unwind chain, driven in every pass. Start: potholing, 4 holes, 3.0 m, sand, open site, day shift.
| Action | Depth | Cap | Total |
|---|---|---|---|
| Start | 3.0 m | 3.0 m | $1,664 |
| Soil → caprock | forced 1.8 m | 1.8 m | $1,720 |
| Job → pit & sump | holds 1.8 m | 1.8 m | $6,604 |
| Soil → sand | partial unwind — holds 1.8 m | 2.4 m | $3,200 |
| Job → potholing | restores 3.0 m | 3.0 m | $1,664 |
Note the second row: forcing caprock makes the job dearer, not cheaper. Caprock cuts at a third the rate of sand, so the hours rise past the four-hour minimum that was previously binding. A pricing tool that only ever moves in the direction the customer expects is a tool that is hiding something. Stepping the depth explicitly while it is capped clears the memory — an explicit user choice always beats a remembered one.
Controls that refuse to lie
- The four-hour minimum is said out loud, on the docket, in the ledger and in the screen-reader mirror, with the reason: it takes about an hour to set up and an hour to wash out.
- Before You Dig plans are declared free. They are, they are the customer’s to lodge, and putting a line item on them would be the easiest $95 on this page. The refusal is the central honesty beat and it sits on all three surfaces.
- The estimate declares its own limit. If the ground is not what you said, the hours change on the day — the rate does not.
- The road-reserve state prints no invented number. A Main Roads corridor needs a traffic management plan Sumpline would not write and a permit it would not hold, so the badge prints the computable subtotal plus the quoted thing, wherever the total would appear.
06 — CONVERSIONWhy the page is shaped like this.
- The price is in the first screen, twice. The rest-state total is set enormous in the hero column and again on the spoil docket clipped beside the drawing. At 1200 px wide the headline, the figure, the call button and the whole cut — eight holes, the marked services, the crew figure and the depth dimension — are all inside the first 750 px. That band is the page’s entire commercial argument and it is asserted, not hoped for.
- The badge sits beside the drawing, not on it. The spec’s preferred anchor was the night sky above ground level. In practice the honest resolution was to reserve a measured column: the docket can then carry the full line-two template and its three declarations at any width without ever intersecting the section, the strata labels or the tank — which is the binding rule. Below 641 px it docks directly beneath the section and switches to the pinned short forms (“5.5 h · 2 loads”), while the ledger and the screen-reader mirror keep the full templates at every width.
- The signature hands off to the form. “Send this scope through” writes the configured job, hole count, depth, soil, access and shift into the enquiry textarea and the hole-count field. The lead arrives warm, and the customer never retypes what they just configured.
- The form asks for what a hydro-excavation job actually needs and nothing else: name, phone, site suburb, how many holes, and the scope. The Before You Dig reference is optional and labelled optional, because asking for a plan the customer has not lodged yet is how you lose the enquiry. There is no backend — a valid submit shows a designed confirmation that says plainly that nothing was sent.
- Every control either changes the price honestly or says why it cannot. The depth stepper disables at its cap with the reason printed underneath. The access chip that cannot be priced says so in the ledger and in the mirror.
- Emergency-shaped traffic gets a path. Cable strike, water main, a hole that has to be open before Monday: the sticky bar carries a call button on every phone screen, and the after-hours rate is on the page rather than saved for the invoice.
07 — THE THREE PASSESWhat each pass actually found.
The thumbnail showed a headline and an empty sky.
- The signature was below the fold in everything but name. At 1200 px the section box started at y=639 — technically inside the first 750 px, but the frame is drawn top-down with 1.6 m of sky first, so the visible band contained the crew figure and nothing else. The cut itself started at 782 and ended at 896. Four fixes together moved the cut bottom to 745: the hero was rebuilt as a two-row grid so the enormous total sits in the headline column instead of as a full-width block below it (the left column had been bottom-aligned and was wasting 84 px of empty space above the eyebrow), the section frame was top-anchored instead of vertically centred in its box, the hero padding and panel rhythm were tightened, and the lede was cut from five lines to four.
- The section box wasted half its height at 375 px. The box floor was 196 px while the drawing was 93 px, so a phone got a strip of drawing in a field of dead sky. The box now hugs the content and continues for a fixed 1.1 m of ground below the deepest cut.
- The headline’s em dash was orphaned on its own line, reading as a stray horizontal rule between the two clauses. Moved to lead the tagline, where it does the work it was written for.
- “Est. 2016 — nine years of Perth ground.” It is 2026. Ten.
- The colophon said it twice, appending the collection’s base attribution line after the fictional-business disclosure that already contains it. Replaced with the sentence that was actually missing: which strings on the page are placeholders and which are real.
- The badge docked below the tank at phone widths, not below the section. Reordered so the price lands directly under the drawing it prices.
Make the ground be ground.
- One speckle pattern was doing all five strata. Each band now has its own drawn texture — fine speckle for grey sand, shrinkage curves and coarse flecks for clay, nodules for limestone caprock, angular aggregate for road base, root marks for topsoil. It is the second read: nothing announces it, and a geotech notices immediately.
- A stretch-to-fill fed back on itself. The section spans both grid rows beside the docket and the tank, so sizing it from the tank’s laid-out bottom edge included its own previous height — the drawing grew a little on every render until it hit its cap. Caught by driving eight chip changes and reading the height each time. Replaced entirely: the deepest ground now dissolves into the page’s ground colour, so the scene box can stretch to any height with the legend pinned to its floor and no seam anywhere. Better answer than the one it replaced.
- A depth fade darkens the strata as they get further from the work light — which also lifts bone ink on the caprock fill from 4.76:1 to 6.29:1, the rare case where an atmospheric effect improves the contrast.
- Only the hole the hose is in is wet. It carries a water sheen down the near wall and a shallow slurry pool at the bottom. The drawing is a dig in progress, not a finished set of holes — second read, ten lines of code.
- The jet breathes instead of blinking. The cone now scales from the nozzle as well as changing opacity, so it reads as a stroke of water under pressure. Floor held at 0.55 opacity.
- Press and hold on the steppers. Getting from one hole to twelve should not be twelve taps. 420 ms to engage, then 110 ms repeats, with the trailing click swallowed so a hold does not overshoot by one.
375 px, the keyboard, and everything driven twice.
- Every form pattern proved by driving checkValidity on a deliberately invalid value, and every pattern additionally compiled under Chrome’s v-flag regex rules — an unescaped literal in a character class throws at validation time and leaves the field silently validating nothing. The scope field is guarded by required and minlength rather than a pattern, so it is driven as a required-empty case instead.
- 375 px masthead first. Wordmark right edge against call-button left edge, compared explicitly; the tagline drops below 560 px and the “Get a price” button below 620 px so the row never collides. No horizontal overflow on either page, with the guide’s tables inside scrolling wrappers.
- The service-area map had a black wedge down the middle of it — two open <path> elements drawing the freeway and the highway, stroked but never given fill="none", so each painted the triangle implied by closing its own outline. Every assert on the page was green; the map has no state to be wrong about. Only the screenshot found it. There is now an assert that no stroked path in that SVG resolves to a paintable fill.
- A label-collision sweep over the drawing and the map at native resolution: no scene label’s bounding box may intersect a service mark (bone on power red is 4.46:1 and the halo should never have to save it) and no two labels may overlap. Asserted, and looked at.
- Rapid fire. Nineteen stepper clicks and six chip changes dispatched in a single evaluate with no settle between them, then the state, the total and the drawn hole count asserted. Any control that rebuilds scene data invalidates the in-flight animation in the handler, before the state swap.
- Reduced motion renders a settled frame with the jet parked visible at 0.87 opacity and the loop never started; two screenshots a second apart are byte-identical.
- Keyboard drive of the chip radiogroups, landing on a definite state that differs from the rest state, plus visible focus rings on every control.
- The excess ornament removed: the second Sapience attribution sentence in the colophon (Pass 1) and, here, the vertically-centred dead sky the drawing had been sitting in since the first build. The page says each thing once.
Verification is a 246-assert headless harness against an independently reimplemented pricing oracle, plus a 69-check spec oracle that enumerates the full 12,600-cell control grid. Both are driven, not read: every figure quoted on this page was measured off the running build.
08 — LOCAL SEOWhat we’d implement for the real business.
The live page carries only WebPage, CreativeWork and BreadcrumbList schema that names itself a demonstration. Marking a fictional business up as a real local business would pollute a real index, and the reviews on the page are demonstration copy — they are never marked up as structured review data. For a real client we would ship the block below.
Schema.org has no excavation or utility-locating subtype, so the top-level type is LocalBusiness and the specialty is named through additionalType, knowsAbout and a real hasOfferCatalog — which is what actually earns the service-level rich results, not a guessed type token.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "LocalBusiness",
"@id": "https://sumpline.com.au/#business",
"additionalType": "https://www.wikidata.org/wiki/Q108192603",
"name": "Sumpline Hydro Excavation",
"description": "Non-destructive vacuum excavation across the Perth metropolitan area: service potholing, trench excavation through live corridors, pit and sump cleaning, and pier holes beside live services.",
"url": "https://sumpline.com.au/",
"telephone": "+61 8 9XXX XXXX",
"image": "https://sumpline.com.au/img/vac-truck-welshpool.jpg",
"priceRange": "$$",
"address": {
"@type": "PostalAddress",
"streetAddress": "Unit N, Example Road",
"addressLocality": "Welshpool",
"addressRegion": "WA",
"postalCode": "6106",
"addressCountry": "AU"
},
"geo": { "@type": "GeoCoordinates", "latitude": -31.99, "longitude": 115.95 },
"openingHoursSpecification": [
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
"opens": "06:00", "closes": "16:30" },
{ "@type": "OpeningHoursSpecification",
"dayOfWeek": "Saturday", "opens": "06:00", "closes": "12:00" }
],
"areaServed": [
{ "@type": "City", "name": "Perth" },
{ "@type": "AdministrativeArea", "name": "Peel region, Western Australia" }
],
"knowsAbout": [
"non-destructive digging", "vacuum excavation", "service potholing",
"AS 5488 subsurface utility information", "Before You Dig Australia",
"liquid waste disposal", "traffic management"
],
"hasOfferCatalog": {
"@type": "OfferCatalog",
"name": "Hydro excavation services",
"itemListElement": [
{ "@type": "Offer",
"itemOffered": { "@type": "Service", "name": "Service potholing" },
"priceSpecification": { "@type": "PriceSpecification",
"minPrice": "1424", "priceCurrency": "AUD",
"valueAddedTaxIncluded": true } },
{ "@type": "Offer",
"itemOffered": { "@type": "Service", "name": "Trench excavation" },
"priceSpecification": { "@type": "PriceSpecification",
"minPrice": "1604", "priceCurrency": "AUD",
"valueAddedTaxIncluded": true } },
{ "@type": "Offer",
"itemOffered": { "@type": "Service", "name": "Pit and sump cleaning" },
"priceSpecification": { "@type": "PriceSpecification",
"minPrice": "1684", "priceCurrency": "AUD",
"valueAddedTaxIncluded": true } }
]
},
"review": [
{ "@type": "Review",
"author": { "@type": "Person", "name": "(a real, consented customer)" },
"datePublished": "2026-07-14",
"reviewRating": { "@type": "Rating", "ratingValue": "5", "bestRating": "5" },
"reviewBody": "Four services proven before the bore. Nothing broken." }
],
"aggregateRating": {
"@type": "AggregateRating",
"ratingValue": "4.9", "reviewCount": "—",
"description": "fed from the live Google Business Profile, never hand-written"
}
}
</script>Beside the markup: a Google Business Profile with the Welshpool yard, the service radius and the after-hours attribute set; one service page per job type targeting the way this trade is actually searched (“potholing Perth”, “non destructive digging Kwinana”, “vacuum excavation near me”, “who can find my sewer junction”); and suburb pages only where there is a real completed job to put on them — thin doorway pages for forty suburbs are worse than none.
09 — FOR A REAL CLIENTWhat changes on day one.
- The rates come out of the job-costing system, not the HTML. AroFlo or simPRO for wet-hire job costing and dockets: the truck rate, the disposal rate and the plant fees live there, the estimator reads them, and a rate rise is one field, not a deploy.
- The enquiry becomes a job. The form posts into AroFlo or simPRO as a lead with the configured scope attached, so the office is not retyping a web enquiry into a scheduler.
- The truck tells the page the truth. Geotab or MTData on the vac unit gives real run sheets and travel time, which is what turns “we’ll get to you Thursday” into a date the customer can rely on. Outer-metro travel stops being a guess.
- Compliance is evidence, not a claim. Assignar for plant and crew compliance and HammerTech for site inductions — so the trust strip links to live currency rather than saying “inducted and white-carded” and hoping.
- Dockets and invoices. Xero, with the licensed-facility disposal dockets attached to the invoice — the promise the page makes about dockets is only worth anything if the pipeline actually attaches them.
- Their photographs. Every procedural drawing here is a placeholder for a real one: a hole open at 2 m with a gas main exposed and undamaged is the single best sales asset this business owns, and no illustration beats it. The section drawing stays, because a photo of a hole cannot show you the price.
- Real reviews, fed live. The Google Business Profile reviews feed replaces the demonstration testimonials, and only then does the review markup above go live.