How Progress Line Payment Claims was built

Palette

The colour of a cleared payment and the red of an OVERDUE stamp, on a neutral that reads like a statute page. Red marks deadlines only: the day-15 cell, the rules above both dates, the late warning. Ratios are from contrast-w60.log; the tints added during the build were measured with the same formula and are listed with their pairs.

Two non-text additions: field borders #7A817C at 3.99:1 on white (above the 3:1 floor for control boundaries), and map water #DDE6DF, which never carries a word — every map label sits on land.

Type

The drawn claim page uses Spectral italic for the statutory sentence so it reads as quoted law inside a document, and the calendar counts use Spectral numerals so “15” looks like a count, not a date.

Techniques and the claim clock

No libraries. Inline SVG for the calendar, the claim page, both maps and every icon; CSS grid for the layout; one wall-clock animation. The page is about 70 KB.

Conversion decisions

• The CTA names the small step. “Book the $390 claim check” appears in the masthead, the hero, the clock card, the form button and the sticky bar. Inside the card the label follows the amount, so an $86,000 claim reads “Book the $690 claim check”.
• The clock sits beside the headline at desktop. Its answer and the whole calendar are inside the 1200×750 frame. On a phone it follows the services grid, per the lead-gen order.
• The caveat sits above the date. “Counts Monday to Friday — public holidays aren’t deducted here; we check your exact dates” is read before the due date, not after it. The Christmas example exists to show why.
• Six form fields. Name, phone, trade, amount owed, completion or last invoice date, and what happened. Amount and date pre-fill from the clock until the visitor edits them, so nobody types a figure twice. Validation is front-end with a count of things to fix and focus on the first; a junk phone number is refused.
• The free route gets full size. The $0 card sits beside the clock at desktop and directly after it on a phone. It quotes the SBDC, gives the sentence with a copy button, and says plainly that an adjudication application is not a like-for-like swap — in Building and Energy’s words, not ours.

What the page quotes, and what it declined to publish

Quoted verbatim, re-read at source on 14 September 2026: the SBDC’s The Act applies to contracts entered on or after 1 August 2022., the four elements of a claim, the six-month sentence, the 15-business-day sentence, the adjudication fee sentence and the exact claim sentence; and Building and Energy’s To apply for adjudication in these circumstances, you must act quickly. Different timeframes and requirements apply depending on the circumstances., placed after the three circumstances that page lists.

Not published because they weren’t verified for this build: adjudicator fee caps, nominating-authority fees, the retention trust threshold, response or determination timeframes, pay-when-paid rules, suspension rights, how the Act defines a business day, and any success rate. The page never implies a guaranteed payment, and the reviews name a trade and an invoice, never an outcome.

Local SEO we’d implement for the real business

The demonstration ships only WebPage JSON-LD naming itself a demonstration, because structured data for a fictional business would be dishonest markup. For a real Progress Line, this is what we would put in the head — with their real details, and reviews pulled from a verified source, never typed in:

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "[Business name]",
  "description": "Security of Payment claims and adjudication applications prepared with subcontractors and suppliers.",
  "telephone": "+61 8 0000 0000",
  "url": "https://[domain]",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[Unit N, NN Example Street]",
    "addressLocality": "[Suburb]",
    "addressRegion": "WA",
    "postalCode": "[0000]",
    "addressCountry": "AU"
  },
  "areaServed": ["Perth", "Western Australia"],
  "openingHours": "Mo-Fr 07:00-17:00",
  "makesOffer": {
    "@type": "Offer",
    "name": "Payment claim prepared and checked",
    "price": "390",
    "priceCurrency": "AUD"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "[Verified customer]" },
    "reviewBody": "[Imported from the business's review platform]"
  }]
}

What would change for the real client

• Document intake. A secure upload for the contract, invoices and variations, landing in the client’s file store (SharePoint or Google Workspace) with the claim clock’s dates attached.
• Accounts. A Xero connection so overdue invoices surface as candidate claims, with the amount and the invoice date pre-filled.
• Booking. Calendly (or Microsoft Bookings) for the free ten-minute contract read, straight from the CTA.
• Signing and dates. DocuSign for the engagement letter; the schedule due date written to the customer’s calendar with an SMS the business day before.
• Pipeline. Enquiries into HubSpot or Freshsales with trade, amount and both dates as fields, so follow-up is by deadline rather than by who rang last.
• Holidays. A maintained WA public holiday table behind the clock, reviewed by the business, before the page stops saying it doesn’t deduct them.
• Reviews. Their own Google reviews, trade and invoice size only, pulled from the source.

Iteration log

Pass 1 — Craft

• The adjudication toggle had never rendered.ctl label{display:block} (0,1,1) beat .tog{display:flex} (0,1,0), so the switch collapsed to an inline element and its thumb sat over the word “Add”. Every state assert was green; the screenshot was not. Rewritten as .ctl .tog.
• Map labels collidedMalaga’s “our office” ran into the Midland dot, and a dashed ring cut through “Osborne Park”. Midland moved, and the ring became a shaded circle (ink on it 15.08:1) that no label has to dodge.
• The $0 card was 150 px taller than the clock beside itThe four elements became a two-column list, and the two substitute chips moved under their headings instead of wrapping beside them. The template sentence stopped being a flex row that split its own full stop onto a new line.
• Mobile rhythmAbout 70 px of dead space between the services grid and the clock card cut to about 32 px. Drove the form empty (four fields flagged, focus on name) and filled (confirmation with Sun 14 Feb 2027 and $390), and the clock to both worked examples: 60 of 60.

Pass 2 — Depth

• Examples you can press“Served 18 Dec”, “A late claim” and “Tiler, $18,400” replaced a tagline in the card header, so the clock gained three states without growing at desktop. The Christmas one exists to show the holiday caveat earning its place: Fri 8 Jan 2027 on weekdays, with the note to ring.
• Second-read detail on the drawn claimTurning on the adjudication application clips an “+ ADJUDICATION APPLICATION” slip to the drawn page, toggled by attribute. Driven on and off, and its bounding box measured at zero when off.
• An example button that forgot itselfOn re-reading, the handler that clears the pressed example on a manual edit was also bound to the toggle, so adding an adjudication application un-pressed “Served 18 Dec” although the dates hadn’t changed. Unbound; the drive asserts it. QA grew to 69 checks.

Pass 3 — Hardening

• The QA green was tested, not believedFive defects were planted into the served page through request interception, one run each: the sticky bar grown to 260 px, a second h1, input and click events swallowed inside the clock, a console error, and the proof card forced full width at desktop. Every one failed the check it should: trust line under the bar, two headings, all eight worked-example drives, three console-error checks, and computed grid-column 1. The first attempt at this printed nothing at all, because the screenshot folder didn’t exist yet, so a silent run was treated as a failed run, not a pass.
• A false alarm, fixed in the copy rather than the checkThe street-address scan flagged this guide for a cloud storage product whose name ends in a street-type word. It isn’t an address, but the wave sweep uses the same pattern, so the sentence now names Google Workspace.
• 375 pxThe three example buttons wrapped to two rows and orphaned one. Below 560 px they now share one row with the “Try:” label dropped, each at least 40 px tall. The trust line finishes 118 px above the sticky bar at 375×667; no horizontal overflow at 375, 768 or 1200.
• Keyboard, hidden tab, reduced motionTab reaches the visually hidden adjudication checkbox with a visible ring on its switch, and Space adds the application ($2,240). Faking a hidden tab mid-reveal settles the calendar at once. Reduced motion paints the finished calendar on first frame. Every breakpoint rule that hides or moves something now asserts it matches at least one element.
• One ornament removedThe services tiles lifted their border on hover although they aren’t links, which promised a click that went nowhere. Removed. Final read: 100 QA checks and 24 arithmetic checks green; the six-month warning drives to “Served 1 day after the six-month mark” with the stamp drawn, and clears at Sun 14 Feb 2027 exactly.