How Chalkline Pest Control was made

Palette — chalk, gum, and the enemy colour

Chalk #F5F3EBGround. The chalk line itself — calm, clinical, light.

Gum green #22342AStructure & primary ink. The eucalypt canopy every Perth backyard fights.

Threat ochre #B24A22Line/mark only — pest artwork, active galleries, threat highlights. The treated state never wears it.

Inspection slate #476E85Secondary — links, form focus, and the booked/treated state. The cool colour of a job done.

Per the ink/line split, ochre is never body text; copy runs in gum green on chalk (≈12:1), secondary copy in a derived ink #57655C (≈5.6:1), and link text in a darkened slate #38596D (≈6.5:1). Ochre appears as artwork strokes and one card heading at display size.

Type

Barlow Semi Condensed (500–700) carries the display voice — van-signage utility, field-manual headings, the small-caps zone labels inside the cutaway. Mulish handles body and UI at 16px+ — plain, legible, unpanicked. The typographic bravery moment is the field-guide card: the pest's name set large in ochre over a ruled specimen table, exactly like a plate caption in a naturalist's handbook.

Signature — the Cutaway House Inspector

A procedural SVG cross-section of a Perth home (760×560 viewBox): gabled roof void, kitchen with kickboard, stumped subfloor, perimeter garden beds, and a timber fence line. Five tappable zones (SVG <g role="button"> with keyboard handlers, mirrored by chip buttons for mobile and accessibility) each reveal that zone's resident pest drawn in threat ochre: rats tracking the roof void, German cockroaches behind the kickboard, termite galleries climbing a stump, coastal brown ants breaching the perimeter, red-backs on the fence rails.

The draw is done with pathLength="1" + stroke-dasharray animation — the mud lead literally climbs the stump. At rest the subfloor is pre-selected with a 12-second intro draw, so the static thumbnail catches the termite lead mid-climb; any interaction drops to a 1.4s draw. Pest groups toggle via a CSS class, never the hidden IDL property — SVG groups don't have one (a W13 lesson), and the stylesheet keeps the [hidden]{display:none !important} guard for the HTML form/confirmation swap.

Each zone surfaces a field-guide card: what it usually is in plain language, the treatment, an honest price that must equal the services grid floor for the same treatment ($189 general / $165 rodent / $275 termite inspection), and the season it peaks. "Book this treatment" pre-fills the enquiry form with the zone scenario. After a successful submit, a slate "Booked" badge lands on that zone and its outline turns solid slate — the treated/scheduled state deliberately never wears ochre. Second-read detail: a tiny bee near the garden bed opens a card explaining we refer bees to a swarm collector, never treat them. Live state is exposed at window.__pest (zone, pest, price, season, form status, prefill, booked).

Conversion decisions

Above the fold at 375px: brand eyebrow, h1 naming trade + area, call and book CTAs (48px targets) and the licence/insurance trust line — all inside the first viewport, verified headlessly.
Two paths everywhere: header tel: link (icon-only below 560px), hero call button, a large tel link beside the form, and a mobile sticky call/book bar. Pest jobs are phone jobs.
Form fields: name, phone, suburb, a service select mirroring the six services, and a free-text "what have you seen or heard?" — the sentence a technician actually wants. Front-end validation with per-field messages; the local confirmation uses the wave's contract lexicon ("Thanks — request received… we'd call you back within 2 business hours") and states plainly that the demo sends nothing.
Signature→form handoff: every field-guide card pre-fills the service and description, turning a curiosity tap into a warm enquiry, and the booked badge closes the loop visually.
Honesty as positioning: "we inspect first", bee referrals, the barrier-warranty FAQ explaining what warranties don't cover — trust copy a panic-marketing competitor can't paste.

Local SEO we'd implement for the real business

This demo page carries only WebPage schema naming it a demonstration — fictional structured data in a real index is dishonest markup. A real Chalkline would ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "PestControlService",
  "name": "Chalkline Pest Control",
  "telephone": "+61 8 XXXX XXXX",
  "url": "https://chalklinepest.com.au",
  "areaServed": ["Morley WA", "Dianella WA", "Bayswater WA", "Perth WA"],
  "address": { "@type": "PostalAddress",
    "addressLocality": "Morley", "addressRegion": "WA", "postalCode": "6062" },
  "openingHours": ["Mo-Fr 07:00-17:00", "Sa 08:00-13:00"],
  "priceRange": "$160-$4,800",
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187" },
  "review": [{ "@type": "Review",
    "author": { "@type": "Person", "name": "…real customer…" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "…from the live reviews feed…" }]
}
</script>

Plus: Google Business Profile with service areas, per-suburb service pages fed from one template, and review markup wired to a real feed — never hand-typed.

What would change for the real client

Their licence number, their reviews feed, and their booking flow. For WA pest operators that means wiring the form and reminder service into Formitize (the pest industry's standard for AS 3660 inspection reports and job forms), ServiceM8 or GorillaDesk for scheduling and recurring annual-treatment reminders, and SMS confirmation on booking. The Cutaway Inspector stays — pointed at their price list, with each card's treatment mapped to a bookable job type.

Iteration log

Pass 1 — Craft

375px screenshot showed the header phone number overflowing the viewport (right edge at 402px). Collapsed it to a 44px icon-only circular tel link below 560px; header now measures inside 375 and the sticky bar keeps the visible number.
Hero h1 wrapped to four ragged lines at 1440 — widened the measure from 14ch to 17ch for a balanced three-line setting.
Mobile screenshot caught the trust line ghosting through the 0.97-alpha sticky bar; made the bar fully opaque gum.
Map review: "Perth CBD" label collided with the Morley response rings and "Morley — home base" clipped the outer ring — moved the label below the river bend, tightened the ring to r=26, shifted the base label clear.
Removed a leftover ternary artifact in the roof zone's price data before it could ship.

Pass 2 — Depth

Added the booked state: submitting an enquiry pre-filled from a zone drops a slate "Booked" badge on that zone and turns its dashed ochre outline solid slate — the page's colour argument (ochre = threat, slate = handled) completed as a micro-interaction. Asserted headlessly: badge lands at translate(510 336) for the kitchen scenario, zone gains the booked class, probe reports booked:"kitchen".
Screenshot review of the booked state showed the badge tick crowding the label — widened the pill and re-spaced tick and text.
Second-read detail already in the build kept and verified: the tappable bee by the garden opens the swarm-referral card ("Ask about a bee referral" replaces the book button).
Card swaps get a 180ms fade; zone draw animations use a crafted cubic-bezier(.45,0,.2,1) rather than default ease.

Pass 3 — Hardening

Chanel rule: removed the hero's decorative chalk-line SVG — in the rendered screenshot it read as a stray mark, not a motif. The bee keeps the second-read duty.
Reduced-motion run verified settled: every termite path at dashoffset 0, all pops at opacity 1, subfloor card showing, no intro class — plus a screenshot reviewed by eye.
Final sweep: 27/27 headless asserts — every zone driven with pest/price/artwork asserted against the services grid, empty submit raises validation on all five fields, filled submit renders the contract-lexicon confirmation, FAQ opens, drive-then-diff liveness at 375, scrollWidth 375, sticky bar 48px targets, positive phone sweep (every (08) 9xxx number uses the 9000 exchange), WebPage-only JSON-LD, zero console errors across desktop, mobile and reduced-motion contexts.
Final copy read; guide numbers re-checked against shipped code (prices, draw durations, assert count).