How the Tag Board was built

Build notes for Tagline Test & Tag — a fictional Canning Vale test & tag business — and the pricing signature that hangs its estimate off the bench as a test tag.

Concept

Tagline Test & Tag is a fictional electrical test & tag operator: appliances, leads and boards tagged to AS/NZS 3760, RCD trip tests, emergency and exit light discharge tests, 3-phase gear and asset registers for Perth workplaces, from Canning Vale across the metro and Peel. The audience is the office manager whose lease says “tested and tagged”, the workshop foreman with sixty tools and an audit next month, the childcare director, the site supervisor on quarterly runs. The page has one job: a site-visit booking with the counts and extras already priced — B2B, utilitarian, the wave's dark site.

Landing page only, plus this guide. Every pixel is procedural: SVG, CSS gradients and one rAF loop — no raster images anywhere.

Palette — argued from the switchboard room

Graphite switchboard, a yellow test tag, blue cable sheath, white fluoro. Body copy sits at ≥4.5:1 on every ground it lands on; the accent hues are split into a line/mark token and a text-ink token so a mid-tone accent never carries small copy.

Measured contrast (WCAG 2.x arithmetic from the shipped tokens, Pass 1)

Every hypothesis in the spec landed within 0.7 of the measured figure; the yellow is deep enough on graphite that the pre-minted lighter ink was only needed as a courtesy on the raised ledger notes.

Type

Signature — the Tag Board

A drawn SVG workbench in a switchboard room (700×420 viewBox; 700×470 at mobile widths so the enlarged tag has floor to hang into). Everything on it is a state of the estimator:

• Appliances line up on the bench in two rows from a 24-slot grid; the kind of silhouette follows the site chip (office: laptops, monitors, kettles · workshop: drills, grinders, coiled leads · school & childcare: laminators, kettles, fans, urns · construction: coils, boards and drop saws on a concrete slab). Leads & boards alternate coils and power boards on the shelf under the bench (cap 10). RCDs populate the DB-1 switchboard on the wall (cap 6); exit lights are green running-man boxes above the bench (cap 6); 3-phase gear is red plug-and-socket pedestals at the right (cap 4). Every capped group prints its true count on a blue count tag with “· 24 drawn” when the count exceeds the cap.
• The PAT tester on the bench runs a loop: its lead re-routes to each item in turn (a cubic path recomputed per clip) and a small tag scales onto the item; the readout counts “PASS 01 … PASS 34”, holds, then resets. The fluoro glow breathes between opacity 0.78 and 1.0 — the scene never drops below the 0.55 floor. The rAF delta is min(max(now − last, 0)/1000, .05).
• Toggles draw their marks: after-hours hangs a wall clock at 6 pm; the asset register puts a white QR sticker on every tag.
• The price badge is drawn as a test tag hanging on a string off the bench front — total, site + retest interval, and the “guide only — AS/NZS 3760” line. Below 640 px the tag is redrawn at 1.6× on the taller stage with the two fine-print lines dropped (the mobile-tight variant); at 1000 px it sits at 1× without touching the leads shelf or the pedestals (the mid-width check).
• Second read: on a construction site the tags on the items are painted in the current quarter's colour (AS/NZS 3012 convention: Dec–Feb red, Mar–May green, Jun–Aug blue, Sep–Nov yellow) and the caption says so — a declaration, not a rule. Micro-interaction: the hanging tag swings once whenever the total changes.
• Chip and stepper changes redraw snappy (14 ms stagger, 480 ms cap) after the first draw's 60 ms / 1.4 s entrance; the tester loop is token-invalidated in every handler before the state swap.

Pricing model (from the pinned anchors)

Worked examples — oracle vs page (measured from the running code)

Iteration log

Conversion decisions

• Above the fold at 375: name, “Test & tag, RCD and exit light testing across Perth workplaces — tagged before smoko”, Book a site visit + Call, and the AS/NZS 3760 trust line — all before the fold with the sticky bar below.
• Click-to-call in the header (icon-only under 600 px, number from 600 px) and a two-button sticky bar on mobile: Call · Book. No emergency line — test & tag is scheduled work; the promise is a same-day certificate, not a 9 pm callout.
• Form fields: name, phone, site suburb, site-type select (office / workshop / school or childcare / construction / other) and a textarea pre-filled from the Tag Board with counts, extras and the estimate — the warm-lead handoff. Front-end validation with visible focus rings and inline reasons; the confirmation panel is hidden on load and on an empty submit and appears only after a valid one (“Thanks — request received. We'd call you back within one business hour…”).
• Services grid mirrors the board exactly: “from $150 · $6/item, $5 from 50, $4 from 200”, $10 / $12 / $18, $1/item, +$120, and one designed price-less line (microwave leakage & thermal imaging — quoted per site).
• Trust strip pairs the real standard with placeholder-patterned credentials (ABN 00 000 000 347, est. 2016, $20M PL — demo copy). Reviews are declared demo copy in the section intro.

Local SEO we'd implement for the real business

The live page carries only WebPage + BreadcrumbList schema naming it a demonstration — fictional business data must not enter a real index. For a real client we would ship the block below (a ProfessionalService, the exact schema.org organization subtype for a test & tag operator), plus a Google Business Profile with the service area, service-suburb landing sections and a reviews feed marked up only from genuine, consented reviews.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Tagline Test & Tag",
  "description": "Electrical appliance test and tag to AS/NZS 3760, RCD testing, emergency and exit light testing and asset registers for Perth workplaces.",
  "url": "https://www.example-testandtag.com.au/",
  "telephone": "+61 8 9000 0347",
  "image": "https://www.example-testandtag.com.au/images/bench.jpg",
  "priceRange": "$150 – $1,500",
  "address": { "@type": "PostalAddress", "addressLocality": "Canning Vale", "addressRegion": "WA", "postalCode": "6155", "addressCountry": "AU" },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.07, "longitude": 115.92 },
  "areaServed": [ "Perth", "Canning Vale", "Welshpool", "Osborne Park", "Malaga", "Rockingham", "Mandurah", "Peel Region" ],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification", "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"], "opens": "07:00", "closes": "17:00" }
  ],
  "hasOfferCatalog": {
    "@type": "OfferCatalog", "name": "Test & tag services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Appliance test & tag (AS/NZS 3760)" }, "priceSpecification": { "@type": "PriceSpecification", "price": "150", "priceCurrency": "AUD", "description": "site minimum; $6 an item, $5 from 50, $4 from 200" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "RCD push-button and trip-time test" }, "price": "10", "priceCurrency": "AUD" },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Emergency and exit light 90-minute discharge test" }, "price": "12", "priceCurrency": "AUD" }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "112" },
  "review": [
    {
      "@type": "Review",
      "author": { "@type": "Person", "name": "Real customer name (with consent)" },
      "datePublished": "2026-06-14",
      "reviewRating": { "@type": "Rating", "ratingValue": "5" },
      "reviewBody": "Sixty tools, the leads and four RCDs done between six and eight before the crew clocked on."
    }
  ]
}
</script>

What changes for the real client

• Job system: the booking form posts into ServiceM8 or AroFlo as a quote request with the Tag Board's counts as line items; the technician's completed job flows back as the certificate email.
• Register: PAT-tester exports (Seaward PATGuard, Metrel) imported into the client's asset register so the QR on each tag resolves to a live history page; next-due dates drive the re-book reminders.
• Accounts: invoices and the after-hours line into Xero; the $150 minimum and volume tiers become Xero item codes so the website and the invoice never disagree.
• Their photos of the bench and the crew where the drawn scene sits, their genuine reviews feed, their real ABN, licence and insurance details, and the ProfessionalService schema above.

Techniques

• Inline SVG scene with per-kind silhouette factories, slot grids, and a state-driven redraw with a firstDraw flag for dual-speed choreography; CSS transitions on nested groups only (SVG presentation attributes are never CSS-animated on the same element).
• One rAF loop for the tester clip cycle and the fluoro breath; token invalidation in every handler; document.hidden pause; reduced-motion settles to a fully tagged static frame.
• Procedural metro map (coastline, river hints, freeway spine, 15/30/45 km rings) as an SVG with named suburbs, Canning Vale starred, Peel named.
• State probe window.__testandtag: state vector, total, item line, rate, note flags, declaration text, badge lines, drawn counts, tag colour, settled.