How the Daybreak Foods WA demo was made

Concept

Daybreak Foods WA is a fictional foodservice wholesaler working out of Canning Vale — the 4am run, the coolroom hush, invoices that match the order. The audience is café and restaurant owners sick of missed deliveries and surprise substitutions, plus caterers and institutional kitchens comparing suppliers. The page's single job is the trade-account form, and everything above it exists to make that form feel like a safe decision: the delivery-run planner answers "do you even come to my street?", the logistics card answers "on what terms?", and the honesty copy answers "will you mess me around?".

Palette — the dock at 4am

Per the collection's ink/line rule, the bright accents never carry small text. Body ink is the navy itself; secondary copy uses a derived #51607A (5.8:1 on coolroom white); tomato text demotes to a derived #A63325 ink (6.1:1); links use #24487E. On the navy hero, secondary copy is #B8C4D6 (8.2:1).

Type

• Sora (display) — modern logistics confidence; geometric enough for a company that runs on route codes, warm enough for a family firm.
• Karla (body/UI) — a clean workhorse at 16.5px that stays legible on a phone in a coolroom.
• JetBrains Mono — every number that matters: cut-off times, minimums, run codes, the logistics card. Terms set like a docket line are terms you expect to be honoured.

The signature — Delivery-Run Planner

A procedural SVG Perth metro map divided into five named zones (CBD & inner, coastal north, hills & east, south metro, Mandurah run). Each zone is an SVG <g role="button" tabindex="0" aria-pressed> — tappable, keyboard-operable (Enter/Space), and screen-reader labelled with its delivery mornings. Selecting a zone (or a suburb chip) plots that run in crate blue from the Canning Vale depot: the path's stroke-dasharray/-dashoffset animates over 850ms with a cubic ease-out, stop dots pop in as the line passes, and — after the draw — a tomato "truck" dot loops the route at 46 px/s via getPointAtLength, paused on document.hidden and parked entirely under reduced motion. Routes use butt caps, so no stray round-cap dot appears at zero drawn length (a W15 lesson). The logistics card re-renders in mono: your zone's mornings, the 5pm cut-off, the $150 minimum, free delivery over $300 ($25 metro fee under), the ring-first substitution policy and 14-day terms. At rest the page is mid-demonstration — south metro lit, chilled & produce selected, run plotted, countdown to the next 5:00pm cut-off ticking live.

Choosing a zone or suburb pre-fills the account form's suburb; category chips sync its interest checkboxes — the demo interaction becomes a warmer lead. The pre-fill fires only on user interaction, never at rest, so a fresh page load still validates every empty field. The planner exposes window.__wholesaler (zone, days, categories, form status, route state, interaction count) so QA gates on state, not wall-clock.

One source of truth

All logistics facts live in a single FACTS object; the card renders from it, and the FAQ, "Ordering, honestly" strip and footer repeat the same figures verbatim. The verification harness asserts the displayed card against an independently-typed facts table — never against the page's own object — across zones driven by dispatched MouseEvents and by keyboard.

Zone-day model (documented derivation)

The spec pins two anchors: CBD & inner runs six mornings, and Mandurah runs Tue/Thu/Sat. The rest is derived and held flat: south metro also gets six mornings because it is the depot's home zone (trucks start and end in Canning Vale); coastal north gets four (Mon/Wed/Fri plus a Saturday for weekend café trade); hills & east gets three (Mon/Wed/Fri — longest drive time per drop). There is deliberately no pricing gradient anywhere: a wholesaler's terms don't vary by zone, so the $150 minimum, $300 free-delivery threshold, $25 under-threshold metro fee, 5pm cut-off and 14-day terms are stated once and held identical on every surface. The flatness is the pricing statement.

Conversion decisions

• Above the fold at 375px: name, "foodservice wholesale, Canning Vale, Perth", the order-by-5-on-your-bench-by-7 promise, both CTAs and three trust lines — all before any illustration.
• Header tel: + mobile sticky bar: wholesale buyers ring; the sticky bar pairs "Call the depot" with "Open account" at ≥48px tap height.
• Form fields: business, contact, phone, email, suburb, venue type — what an accounts desk actually needs to open a trade account; interests arrive pre-ticked from the planner. Validation is inline per field with an error summary; the confirmation is local and honest ("your account manager would call you back within one business day… no details were sent anywhere").
• Reviews: three, plainly captioned as demonstration copy, each anchored in an operational detail (probe reading on the docket, 5:40am dock, ring-first substitution) rather than adjectives.
• The map is the service-area treatment: instead of a suburb list, the signature answers the service-area question interactively.

Honesty rules applied

• Colophon declares the fictional business plainly; reviews are captioned as demo copy.
• Phone is only the reserved (08) 9000 0240; address is suburb-level (Canning Vale); ABN and HACCP certificate are visibly placeholder-patterned (ABN 00 000 000 000, Cert. HACCP-0000).
• The only JSON-LD on the page is a WebPage block naming it a demonstration. No LocalBusiness/Review/AggregateRating markup with fictional data — that schema belongs to a real client, below.

Local SEO we'd implement for the real business

For a real wholesaler this schema would ship on the live site (with their real NAP, ABN and review feed), alongside a Google Business Profile for the depot, suburb-level landing content per delivery zone, and review harvesting from account managers' happiest kitchens:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "WholesaleStore",
  "name": "Daybreak Foods WA",
  "description": "Foodservice wholesale & distribution across Perth metro.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[real street address]",
    "addressLocality": "Canning Vale",
    "addressRegion": "WA",
    "postalCode": "6155",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": "...", "longitude": "..." },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "03:30", "closes": "13:00"
  }],
  "areaServed": ["Perth CBD","Coastal north","Hills & east","South metro","Mandurah"],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "[from real review feed]",
    "reviewCount": "[from real review feed]"
  }
}
</script>

What would change for the real client

Their photography (the dock at 4am is a real scene worth shooting), their live review feed, and real systems behind the form: Ordermentum or FoodByUs for trade ordering, Cin7 Core or Unleashed for inventory, MYOB Exo or Xero for accounts and 14-day terms, Routific/OptimoRoute feeding real run plans into the zone map, Geotab cold-chain telematics powering a genuine "probe reading on your docket" feature, and Power BI sales dashboards for the account managers. The planner would read live cut-offs and zone schedules from the routing system instead of a static table.

Techniques

• Single self-contained HTML file; the only external resource is Google Fonts. No libraries, no build step, no raster images.
• Procedural SVG throughout: the pre-dawn dock scene (gradient sky, twinkling stars, light cones, crate stacks, the DBF-0240 crate tag), the zone map, category glyphs on range cards.
• Route draw-in by dash offset in a rAF loop; truck runner by getPointAtLength; both cancelled cleanly on zone change and gated by prefers-reduced-motion.
• Load choreography gated on document.fonts.ready with a 1.2s fallback; content never stuck at opacity 0 without JS.
• Live 5pm cut-off countdown recomputed every 30s, skipped while the tab is hidden.

Iteration log