Build guide · Site 226 · Industry Demos III

How Redsand Haulage was made.

Redsand Haulage is a fictional Kewdale freight & logistics operator built to show WA transport businesses what a conversion-focused landing page looks like when it's designed around one job: getting a quote request from someone who needs pallets moved tonight. Every visual on the page is procedural — SVG, gradients and type. No photography, no stock.

The concept

The direction is the run sheet — the operational calm of a well-run depot at 5am. Everything scheduled, nothing lost. The audience is the customer of the prospect: a wholesaler with six pallets for Geraldton, a builder waiting on a container ex Fremantle, a workshop that ships to Kalgoorlie every week. The page's single job is a freight quote request, so the signature interaction produces one, pre-filled.

Palette — argued from the depot

#F6F5F1Run-sheet white — the ground. Paper, not glare.

#20242AAsphalt ink — structure and body. The bitumen every kilometre is written on.

#B5492FPilbara red — LINE/MARK only. Route strokes, load markers, the CTA. Never body text.

#9A3A24Derived red-ink — the rare red text moment (error copy, route arrow) at ≥4.5:1.

#2E6B4FHighway green — WA signage green. Links, focus rings, delivered-state ticks.

Per the collection's ink/line rule, the bright accent never carries small text: pilbara red draws routes and fills the CTA; copy sits in asphalt ink, and the one red-text moment (form errors) uses the darker derived #9A3A24.

Type

ARCHIVO — EXPANDED, BLACK

Display. The width axis pushed to 118–125 gives the wordmark and headings the flat-fronted confidence of haulage signage — a truck door, not a tech logo.

Source Sans 3 — body & UI

A workhorse that stays legible at 16px+ on a phone in one hand, which is where most freight enquiries happen.

IBM PLEX MONO — KEWDALE → GER · 424 KM · $1,140

Every figure — kilometres, rates, con-note refs, the run-sheet strip — is set like a manifest line. The mono IS the brand's operational voice.

The signature — Freight Lane Estimator

Choose a lane (Perth metro, Bunbury, Geraldton, Albany, Kalgoorlie) and a load (pallet stepper 1–22, half load, full semi). A procedural SVG map of south-west WA — coastline, towns and highways drawn as paths — strokes the chosen route from Kewdale in pilbara red using a measured stroke-dasharray/dashoffset transition, while a manifest panel annotates distance, transit time and an honest rate range in the mono. A small load marker travels the active route on a rAF loop (paused when the tab hides, removed under reduced motion). The map towns are themselves clickable and stay in sync with the chips.

The arithmetic is one table and one function: pallet estimates are base × n for the low bound and round(low × 1.22 / 10) × 10 for the high bound, covering access and levy variance; half loads and full semis are honest per-lane ranges, with semis flagged POA. The cheapest metro-pallet output ($85) equals the services grid's "from $85/pallet" floor by construction — the QA suite asserts it against a data-floor attribute so the page can never argue with itself. A quiet line attaches "current fuel levy ~14% applies" to every estimate, and when a pallet total crosses the half-load floor the panel says so — the honest crossover a real operations desk would flag. At rest the estimator is mid-demonstration: Kewdale → Geraldton, six pallets, route drawn, rate showing.

Selecting any lane or load pre-fills the quote form (lane select + pallet count) and a mono banner in the form says what was carried over — the estimator turns a demo interaction into a warmer lead.

Techniques

Procedural SVG cartography: the WA lane map and the Perth metro coverage map are hand-plotted from real coordinates (lon/lat scaled to the viewBox), with white text halos via paint-order: stroke so labels stay legible over routes and zone boundaries.
Route drawing: getTotalLength() per path, dashoffset transitions for the draw-in, instant settle under prefers-reduced-motion.
Variable-font art direction: Archivo's wdth axis (62–125) loaded once and pushed per-element via font-variation-settings.
Zero-dependency interactivity: chips, segmented control, stepper, validating form and FAQ (<details>) are all vanilla DOM — no libraries, fast on 4G.
State probe: window.__transport exposes lane, load, computed rate and form status so QA gates on state, not wall-clock.

Conversion decisions

Above the fold at 375px: name, "pallets moved tonight" value prop, quote CTA and the fleet/insurance/2011 trust line — all visible before any scroll.
Two phone paths: header tel: (icon-only under 560px so the header never overflows) and a fixed mobile call/quote bar with ≥44px targets.
Form fields chosen for a freight desk: pickup suburb, delivery lane, pallet count and a freight description (weight/packaging/tail-lift) — exactly what an operator needs to give a firm rate on the first call-back. Company and email are optional; the phone is not.
Local confirmation, honestly staged: submit renders a designed "Thanks — request received / we'd be in touch" state with a demo ref, and says plainly that nothing was sent. No fake network round-trip.
Urgency without pressure: the "tonight's departures" manifest card shows free pallet spaces — a real freight behaviour (space is first-booked) rather than a countdown timer.

Local SEO we'd implement for the real business

This demo page ships only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real operator, we'd ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "additionalType": "https://schema.org/MovingCompany",
  "name": "Redsand Haulage Pty Ltd",
  "description": "Freight & logistics operator — metro pallet distribution,
    regional line-haul and container cartage across WA.",
  "telephone": "+61-8-9000-0226",          // the real number
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Kewdale",
    "addressRegion": "WA",
    "postalCode": "6105",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.98, "longitude": 115.95 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "05:00", "closes": "18:00"
  }],
  "areaServed": ["Perth","Bunbury","Geraldton","Albany","Kalgoorlie"],
  "aggregateRating": {                      // from the real reviews feed
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "A real customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from Google Business Profile via API."
  }]
}
</script>

Plus: Google Business Profile with service areas per lane, suburb-level landing sections for the metro corridors, and review syndication from the operator's actual Google reviews.

What would change for the real client

Telematics: live ETA and POD from Geotab or MTData — the "tonight's departures" card becomes real fleet data, not demo copy.
Freight management: quote requests land in Machship or TransVirtual as draft consignments; CartonCloud drives the cross-dock/warehousing side with customer portals for stock on hand.
Rating: the estimator's rate table swaps for the operator's live rate cards (including the actual monthly fuel levy figure) so the web estimate and the phone quote can never disagree.
Their proof: real fleet photography if they want it, their WAHVA accreditation number, ABN, insurance certificate of currency, and a live Google reviews feed replacing the demo quotes.

Iteration log

Pass 1 — Craft

Headless screenshots at 1440 and 375 reviewed by eye. Found and fixed: 375px header overflow (scrollWidth hit 486px — the full phone number can't share a row with the expanded wordmark; under 560px the tel link is now icon-only at 44px and the wordmark drops to 16px); the run-sheet strip clipped mid-item on mobile (space-between layout, hid the vehicle count, moved the time token behind a breakpoint); the sticky-bar call button wrapped to two ugly lines (nowrap at 14.5px). On the WA map the Esperance label ran off the viewBox edge (re-anchored end) and Kalgoorlie's km-line sat above its town name, clipping at the edge (restacked, shifted left). Metro-map suburb labels crossed the dashed rate-zone boundary — fixed globally with white text halos (paint-order: stroke) and the boundary dropped to 55% opacity.

Pass 2 — Depth

Made the map an input, not an echo: the four regional towns are clickable and sync back to the chips (driven headless — clicking the Bunbury town asserts lane state, chip aria-pressed and route class all flip). Added the manifest "stamp" micro-animation on rate change (skipped under reduced motion), the honest half-load crossover hint (6+ Geraldton pallets ≥ the half-load floor, so the panel says a half load usually wins), and the load marker that travels the active route. Second-read details: the run-sheet strip computes today's actual date, and the confirmation mints a fresh demo con-note ref per submit.

Pass 3 — Hardening

Full suite: 29 checks, 0 failures. Estimator outputs measured against hand-computed values (Geraldton 6 plt: 6 × $190 = $1,140 low, round(1,140 × 1.22/10) × 10 = $1,390 high — both matched the DOM; metro 1 plt low $85 === the services grid's data-floor; Kalgoorlie semi POA $2,300–$2,900). Empty submit raises six field errors with aria-invalid; filled submit renders the confirmation inside the wave's lexicon. 375px: scrollWidth exactly 375, sticky bar fixed with the tel target in the bottom 140px, h1 + ≥40px CTA + trust line above the fold. Reduced motion renders everything settled: hero at opacity 1, Geraldton route at dashoffset 0, truck marker hidden. Drive-then-diff liveness passed; zero console errors on both viewports; every phone occurrence swept as (08) 9000 0226. Copy consistency fix: the 5am run-sheet claimed "Geraldton departed 04:40", contradicting "line-haul departs every weekday evening" — now reads as the overnight run due in. Chanel rule: removed a duplicate helper line under the estimator CTA (the form's carried-over banner already says it).

Honesty notes

Redsand Haulage is fictional and the page says so in the colophon. The phone number uses the reserved (08) 9000 0xxx pattern; the ABN and WAHVA numbers are visibly placeholders; addresses stay suburb-level. Rates are argued from the 2026 WA freight market (metro pallet $85–$100; Geraldton line-haul ~$190/plt ad-hoc; full semis quoted as POA ranges) and are internally consistent across the estimator, the services grid and the FAQ. Reviews are demo copy, never structured data.