Crewline Labour Hire — how this demo was built

Site 344 in the Generative Assets collection, Wave 37 (Industry Demos XXVI). A construction and civil labour-hire landing page for Perth, built as a B2B conversion page around one signature: the Crew Board.

Concept

Crewline Labour Hire is a fictional Welshpool labour-hire company supplying labourers, trades assistants, ticketed operators, qualified trades and leading hands to Perth builders, civil contractors and site managers — "ticketed crews, on site by seven". The audience is the site manager who lost two labourers on Friday, the civil contractor staffing a three-week pour, the shopfitter needing a TA for a fortnight. The page has one job: a crew request with head-count, roles, shift and days already priced, so the phone call is a confirmation rather than a negotiation.

Art direction is the site gate at 6:45am — slab-grey ground, bitumen ink, hi-vis orange, galvanised-steel linework — deliberately blunt and tabular, "a whiteboard at the site office with the crew written up". Every visual is procedural: the site scene, the crew figures, the whiteboard, the metro map are all SVG and CSS. No raster images.

Palette — measured, not assumed

Contrast ratios were measured from the shipped hex tokens with WCAG relative-luminance arithmetic in Pass 1 (a small Node script), not read off the spec. The spec's hypotheses held: bitumen labels on the base hi-vis orange measure 5.43:1, so the pre-minted deeper fill #D95A12 (4.27:1 with bitumen labels — worse, because the label is dark) was not needed and the base orange ships on every button. Orange copy on the ground fails by design (2.62:1) and never appears — every accent-coloured word uses orange-ink #A8420A.

• Slab
  #EDEEF0Page ground — a cured slab, not a cream. Bitumen on it: 14.23:1.
• Bitumen
  #1C1F24Body ink, ledger, footer, sticky bar. Slab on it: 14.23:1.
• Hi-vis
  #F26B1DCTAs and buttons with bitumen labels, vests, marks. Bitumen on it: 5.43:1 (base kept; deeper fill unused).
• Orange-ink
  #A8420AEvery accent-coloured word on the ground or on white. On slab 5.25:1 · on white 6.09:1.
• Galvanised steel
  #5C6670Grid rules, formwork and whiteboard linework, map dots. Lines only. On slab 5.04:1 (not used for small type).
• Steel-ink
  #414952Secondary copy, captions, map labels. On slab 7.87:1 · on white 9.13:1.
• Whiteboard
  #F7F7F5The board surface. Bitumen on it 15.41:1 · orange-ink 5.68:1.

Hi-vis on bitumen (the ledger's total, the sticky-bar call button) measures 5.43:1 — the same pair reversed. Light steel #C9CDD2 on bitumen (ledger sub-lines) measures 10.34:1.

Type

Barlow Condensed 700 for display, headings, the whiteboard and every number — the site-signage condensed that reads through a windscreen. Barlow 400/500/600 for body and controls. Scale is deliberate: hero h1 at clamp(2.55rem → 4rem), the display moment "FIVE ON SITE BY SEVEN, ALL WEEK" at clamp(2.2rem → 4rem) in condensed caps with the head-count word in orange-ink, section h2s at ~2–3.1rem, body 17px, mobile body never below 16px. The bravery is the live display line: the number word and the day phrase are rewritten by the board ("Twenty-one on site by seven, for four weeks"; "No one on site by seven, yet — add a crew").

The Crew Board

Techniques

Inline SVG (viewBox 720×440) for the site scene: slab in false perspective with a timber formwork edge and orange pegs, a site office with a CREWLINE sign, a crane jib with a swinging hook, a site gate with a mesh pattern fill, a forklift and a ute as toggled props. Crew figures are built at runtime with createElementNS — head, hard hat, vest with two reflective stripes, arms, legs, shadow — with role variants: a tool belt for TAs, an orange hat stripe for qualified trades, a white hat and clipboard for the leading hand, a forklift drawn beside operators. Each figure is TWO nested groups: an outer <g transform="translate()"> for slab position and an inner .fig group that CSS scales up from its feet — the W16/W17 rule that a CSS transform must never share an element with an SVG transform attribute. Figures fill 24 slots (4 rows × 6) front row first, so the first heads land at the formwork edge where the eye is.

The whiteboard is HTML laid over the artwork by CSS grid (grid-area:1/1 on both the SVG and the board) so the panel grows to whichever is taller; from 640px up it hangs at the top-left of the scene, below 640px it stacks under the scene and the SVG's viewBox is cropped by JS to the right-hand 444 units so the slab fills the phone width. The price badge is a two-line block on the board: line 1 the job total ("$11,920 · JOB TOTAL"), line 2 "= $2,384 a day". Zero heads with the leading hand off is a designed price-less state: the badge reads "add a crew to price it", line 2 is removed (not blanked), the board reads "— on site by seven", the ledger prints no dollar figure — never $0.

Dual-speed redraw (W21): the first draw staggers figures at 70 ms (1.5 s cap), every later change at 16 ms (500 ms cap). Every control handler bumps a drawToken BEFORE the state swap; the pop-in class and the settled timer both check the token, so a rapid-fire drive (labourers 0→8, shift 10, days 20 in one evaluate) settles at $92,800 with exactly eight figures and no in-flight residue. The crane hook swings by rAF with dt = min(max(now − last, 0)/1000, .05), amplitude 5.5° + 1.2° harmonic, always fully opaque (a never-invisible floor), pauses on document.hidden, and parks at 3° under reduced motion where the figures also appear without transition. Probe: window.__labourhire carries state, total, perDay, heads, priceless, note and settled.

Pricing model (per worker-hour, GST inclusive; super, workers' comp, insurances and PPE included)

Job total = (Σ heads × rate + 110 if leading hand) × shift hours × days + 95 × days if vehicle. Line 2 = total ÷ days — integer by construction because every line is per-day × days; totals display to the whole dollar.

Worked examples — measured from the running page against an independent oracle

Conversion decisions

• Above the fold at 375: wordmark, "Construction & civil labour hire across Perth — ticketed crews, on site by seven", Request a crew + Call buttons, and the trust line (white card verified · same-day swap · super and comp in the rate) all inside the first 812px; the scene follows.
• Click-to-call everywhere: header phone with the "· before 9pm" cue at desktop, an icon-only 44px button at 375 to keep the masthead in one row, and a mobile sticky bar whose call button carries the after-hours line: "Call before 9pm — crew short for tomorrow?". The same line repeats as a dark pill under the hero and inside the confirmation panel, because that is the moment a labour-hire phone actually rings.
• Request form fields: company (B2B — the invoice goes to an entity), name, phone, site suburb, start date, an optional induction/start-time field, and the crew request textarea pre-filled from the board (W12 handoff: crew, shift, days, ute, estimate, "project rate please" from ten days). Pre-fill stops the moment the user edits the textarea. Front-end validation only; visible focus rings; a designed confirmation panel hidden until a valid filled submit — it echoes the head-count, total and per-day figure and the after-hours line. Nothing is sent and no round-trip is faked.
• Rates grid = the board's anchors: six cards, the labourer card carrying the "$232 a call" floor that equals the board's cheapest priced output; the sixth card is the honest price-less line for regional/FIFO/night crews.
• Trust strip: est. 2012, placeholder ABN, RCSA membership, $20M public liability + workers' comp, tickets verified, same-day swap — all demo copy on a page declared fictional.
• Reviews: three, written as site managers talk (a Friday-night call staffed by Monday in Cockburn, the Osborne Park fit-out TA kept eleven weeks, the Baldivis builder who books the same four every slab). Not marked up as review schema.
• Service area: a procedural SVG metro map — coast, hatched metro shading, the Swan, eleven named suburbs and the Welshpool star — with "regional by arrangement" noted in the map and the copy.
• FAQ: the five questions the trade actually gets: how fast (honest: labourers same-day before 9pm, tickets and trades usually next day), what's in the rate, who supervises, what if they don't suit, weekends/regional/FIFO.

Local SEO we'd implement for the real business

The live page emits only WebPage / WebSite / BreadcrumbList schema naming it a demonstration — fictional business data must not enter a real index. For a real labour-hire client the page would carry this (values illustrative):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "EmploymentAgency",
  "@id": "https://www.example-labourhire.com.au/#org",
  "name": "Crewline Labour Hire",
  "description": "Construction and civil labour hire across Perth — labourers, trades assistants, ticketed operators, qualified trades and leading hands.",
  "url": "https://www.example-labourhire.com.au/",
  "telephone": "+61 8 9000 0344",
  "email": "crews@example-labourhire.com.au",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit 0, 0 Example Road",
    "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": "Perth metropolitan area" }
  ],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday","Sunday"], "opens": "05:30", "closes": "21:00" }
  ],
  "priceRange": "$$",
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Labour hire charge-out rates",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "General labourers" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "58", "priceCurrency": "AUD", "unitText": "worker-hour" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Ticketed operators" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "78", "priceCurrency": "AUD", "unitText": "worker-hour" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Qualified trades" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "92", "priceCurrency": "AUD", "unitText": "worker-hour" } }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "63" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Client name (from the review feed)" },
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Six through the gate at 6:50 Monday after a Friday-night call."
    }
  ],
  "sameAs": [ "https://www.google.com/maps/place/…", "https://www.linkedin.com/company/…" ]
}
</script>

Alongside: a Google Business Profile category "Labour hire agency" with the depot pin, suburb-level service pages for the corridors the crews actually run (Kewdale/Welshpool industrial, Osborne Park, Wangara, Cockburn), a review feed pulled from Google, and the FAQ marked up as FAQPage only when the answers are the client's real ones.

What changes for the real client

• The board becomes a live request: the crew request posts to their labour-hire platform — Entire OnHire or FastTrack360 — as a job order with roles, head-count, shift and dates, so allocations see it in the same screen they roster from. Charge-out rates come from the platform's rate cards (per client, per award), not from constants in the page.
• Rostering: if they run Deputy for shifts and timesheets, the request creates the shift shells and the "names and ticket numbers the night before" email is generated from the roster, not typed.
• Accounts: weekly invoicing off signed timesheets flows to Xero; the "one invoice a week" promise on the page is then a system fact.
• Their photos, their crews, their reviews: the drawn scene stays as the brand's illustration style or gives way to site photography; reviews come from the Google feed; the trust strip carries the real ABN, labour-hire licence number and insurer's certificate of currency.
• Compliance surface: a ticket-verification statement linked to their actual process (white card, HRW licence checks, VOC records) — the thing that wins a tier-one contractor's approved-supplier form.

Iteration log

← Back to the site · Generative Assets index