How Brightwork Was Made — Guide

Concept

Brightwork Commercial Cleaning is a fictional after-hours commercial cleaner based in Belmont — offices, medical suites, gyms and strata common areas across the Perth metro. The audience is an office or practice manager whose current contractor keeps no-showing, and a strata council comparing quotes. The page has a single job: get a walkthrough quote booked, because commercial cleaning is never honestly priced off a webpage — and saying so out loud is the trust play.

The art direction is "the building at 9pm": nightshift navy, warm lit windows, the quiet pride of a floor done before anyone arrives. Premium facilities services, not a mop-and-bucket flyer.

Palette — argued from the night shift

Nightshift navy

#141C28 · ground

The CBD after close. Dark enough that lit windows read as warmth, blue enough to never feel like a void.

Foyer ivory

#EDE9E0 · body ink

The lit lobby. All body copy is set in this — 14.9:1 on the navy ground. The line/mark accent never carries a paragraph.

Citrus

#D9A72E · line/mark only

Lit-window gold and the citrus note of a cleaned surface. Floor tiles as they finish, the sweep dot, CTAs, price marks. 8.1:1 on navy, so short marks pass — but it never sets long text.

Eucalyptus mist

#5E9E8A · secondary

The disinfectant green. Completed ticks, form focus and links — brightened to #79BCA7 where it sits as small text on navy to hold ≥4.5:1.

Supporting tokens: card navy #1B2534, raised navy #233047, hairline #2A3850, muted ink #ABA89D (6.7:1 on ground — captions and secondary copy only, never below 0.85rem body scale).

The signature — Night-Shift Scope Builder

Space-type chips, an 80–1,200 m² area slider and frequency chips drive a procedural SVG floor plan. The plan is a serpentine grid of tiles — the route a cleaner actually walks — and tiles flip to citrus as the sweep dot passes, with room outlines (meeting room, treatment rooms, lobby, studio) and furniture blocks redrawn per space type. The grid's column count scales with the slider (6 columns at 80 m² up to 16 at 1,200 m²), so size is something you see, not just read. A task manifest updates per frequency and space type, and the estimate renders live. At rest the page is already mid-demonstration: a 300 m² office at three visits a week, two-thirds swept — and when the floor completes, a "signed off — 11:42pm" stamp holds for a beat before the next set begins.

Everything is vanilla: no libraries, one rAF loop that pauses on document.hidden, tiles painted incrementally (only newly-cleaned cells touch the DOM each frame), and prefers-reduced-motion renders the plan fully swept and settled with the sign-off stamp showing. "Use this scope in the quote" copies the configured scenario straight into the walkthrough form — the demo interaction becomes a warmer lead.

The pricing model (so the numbers are checkable)

Space type	Base / visit	Rate / m²	Floor (80 m², weekly)
Office suite	$55	$0.50	$95 / visit
Medical & allied	$85	$0.75	$145 / visit
Gym & studio	$60	$0.75	$120 / visit
Strata common areas	$48	$0.50	$380 / month

per-visit = base + rate × m² · monthly = round-to-$5(per-visit × visits/week × 52 ÷ 12). Strata is presented monthly (that is how strata contracts are actually let), so its card leads with the monthly figure. Worked anchors: 300 m² office × 3 visits/week → $55 + 0.50×300 = $205/visit; $205 × 3 × 52÷12 = $2,665 → $2,665/month. Every "from" price in the services grid is the exact floor of the matching builder scenario — office $95/visit, medical $145/visit, gym $120/visit, strata $380/month — so the page can never argue with itself. Frequency deliberately doesn't move the per-visit rate: that variation is real but building-specific, which is exactly why the copy says the final price is set at the walkthrough.

Techniques

Procedural SVG floor plan — tile grid, room outlines and furniture built per space type in JS; serpentine cell ordering doubles as the cleaning route; incremental class-toggle painting keeps the frame budget flat.
Procedural hero towers — four SVG buildings with randomised window grids; ~26% start lit in citrus. Second-read detail: stray office lights go out one by one as the night runs on, while Brightwork's crew floor glows brighter and climbs a storey every twelve seconds.
Procedural SVG service-area map — the Swan River as a stroked path, twelve named suburbs, the Belmont depot ringed in citrus, and an honest "stylised — not to scale" stamp.
CSS-only choreography — one staggered entrance keyed on document.fonts.ready with a 900ms fallback timer; content is never left at opacity 0 if JS fails, and reduced-motion skips the transition entirely.
No libraries at all — the only external resources are the two Google Fonts. Fast on a 4G phone, which is where a cleaning enquiry happens.
State probe — window.__cleaning carries space, m², frequency, per-visit, monthly, sweep progress and form status, updated on every interaction, so QA gates on state rather than wall-clock.

Conversion decisions

Above the fold at 375px: nameplate, trade + area in the h1, walkthrough CTA, call button and the police-cleared/insurance trust line — all before the first scroll.
Walkthrough quote, not instant quote: commercial cleaning quoted sight-unseen is a lie prospects have been burned by. The builder gives an honest ballpark, then converts its scope into the form via the "use this scope" handoff — a warmer lead than a bare form fill.
Form fields mirror what a real walkthrough booking needs: name, phone, suburb, space type, rough m², preferred frequency. Nothing that belongs at the walkthrough (access, alarms) is asked early — the placeholder text says so.
Sticky mobile bar pairs "Call now" with "Walkthrough quote" — office managers browse at their desk, strata chairs at 9pm on the couch; each gets their channel, both ≥44px.
The hourly honesty line ("our teams cost $46–$52/hr fully insured and superannuated — cheap quotes cut exactly that corner") sits directly under the estimate, pre-empting the cheapest competitor before procurement does.
Local confirmation only: submit validates client-side and renders a designed "we'd call you back within one business day" state that plainly says it's a demo — no fake network round-trip, no spinner theatre.

Local SEO we'd implement for the real business

This demo deliberately ships only WebPage schema naming itself a demonstration — fictional LocalBusiness or Review markup in a real search index would be dishonest. For a real client, we'd ship this (with their real details, real review feed, and per-suburb service pages):

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://brightworkcleaning.com.au/#business",
  "name": "Brightwork Commercial Cleaning",
  "description": "After-hours commercial cleaning for offices,
    medical suites, gyms and strata across Perth.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit X, XX Example St",
    "addressLocality": "Belmont",
    "addressRegion": "WA",
    "postalCode": "6104",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.96, "longitude": 115.93 },
  "areaServed": ["Perth CBD","West Perth","East Perth","Subiaco",
    "Belmont","Victoria Park","South Perth","Osborne Park","Cannington"],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "18:00", "closes": "02:00"
  }],
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled live from the client's Google Business Profile."
  }]
}
</script>

Plus: Google Business Profile with service categories per suburb, review acquisition wired into job completion, and location pages for the suburbs that actually convert.

What would change for the real client

freshops (Perth-built cleaning-operations platform) — rostering, site checklists, and time-and-attendance proof per visit; the "same team, same nights" claim becomes a live report the client can open.
ServiceM8 — the walkthrough form feeds straight into job cards, quotes and the client's approval flow instead of an inbox.
Deputy — award-compliant rostering for the night crews; the $46–$52/hr honesty line comes from real loaded labour rates.
Xero recurring invoicing — monthly contracts (strata especially) bill themselves; consumables itemised at cost on the same invoice, exactly as the FAQ promises.
Real photography of real crews would join the procedural art, not replace the floor-plan builder — the builder is the thing competitors' brochure sites don't have.

Iteration log

Pass 1 · Craft

Full headless sweep (42 asserts) on first run: empty submit flagged all five required fields (aria-invalid ×5, no confirmation, probe form:'invalid'); filled submit rendered the "Thanks — request received / we'd call you back within one business day" state; every chip, the slider, the FAQ accordion, the sticky bar and the scope→form handoff driven as dispatched MouseEvents, never el.click().
Oracle check — the pricing model re-implemented independently in the harness, never asserting the page against its own function: office 300 m² ×3 displayed ≈$205/visit · ≈$2,665/month; medical 500 m² ×5 displayed ≈$460/visit · ≈$9,965/month; office 1,200 m² ×5 ≈$655/visit · ≈$14,190/month. All matched to the dollar, as did the four grid floors ($95/$145/$120 per visit, $380/month strata).
Screenshot review caught what the asserts couldn't: on the service-area map the "Perth CBD" label ran into "East Perth" — moved East Perth's label above its dot; the trust strip wrapped its fourth item alone to a second row — switched to an auto-fit grid; form placeholders read too dim — lifted from #6E6C63 to #83816F.

Pass 2 · Depth

Added the fresh-wipe trail: the last three cleaned tiles glow at double strength before settling to the standard clean tint, so the frontier reads as wiping, not toggling. (Sweep pace ≈2 minutes per floor means the 66% rest state never completes inside a 7-second thumbnail settle.)
Micro-interactions: the estimate figure flashes citrus for a beat whenever its value changes (suppressed under reduced motion), and chips compress 4% on press.
Mobile screenshot review: the wordmark's "Commercial Cleaning" sub-line wrapped at 375px — hidden below 480px; the plan header's caption crowded the "Tonight's set" readout — stacked below 560px.
Drove a space-type change mid-sweep and asserted the plan rebuilt (tile count 42 → 112 across the slider range) with the probe's perVisit/monthly updated in the same interaction.

Pass 3 · Hardening

Chanel rule: the sweep frontier had three emphasis devices stacked — dot, halo and fresh trail. Removed the halo; the dot and trail carry it better alone.
375×812 verified by probe and screenshot: scrollWidth = 375, wordmark and call button fully inside the viewport box with no overlap, h1 + primary CTA above the fold, sticky bar fixed at the bottom with both tap targets at 56px.
Reduced-motion via CDP emulation (not just the media query): plan renders fully swept (56/56 tiles clean), sign-off stamp showing, entrance settled at opacity 1, no sweep loop started — zero console errors in all three browser contexts.
Final cross-surface read: the $95/$145/$120/$380 floors, the $205/$2,665 worked example and the $46–$52/hr honesty line agree across hero, builder, grid and this guide; the reserved-phone sweep found only (08) 9000 0234 in every occurrence.

How Brightwork was made — the building at 9pm