Northline Strata Management — how this demo was built

Concept

Northline is a fictional Joondalup strata manager pitched at three people: the council chair fed up with a manager who doesn't answer, the developer handing over a new scheme, and the owner who ended up doing it all. It's a B2B page — calmer than the trade demos, still one CTA. The direction is a well-run lobby at 8am: pale-concrete ground, midnight-navy ink, verdigris-teal action, brushed-steel linework. The signature is the Scheme Ledger: an isometric block-plan of the scheme beside a levy notice that prices itself as you describe the scheme.

Palette — measured, not assumed

The spec's contrast figures were hypotheses; these are WCAG-arithmetic measurements from the shipped tokens. Base teal cleared 4.5:1 for both button labels and links, so the pre-minted pair (#176154 / #145448) is used for hover and for accent-coloured type rather than as a remedy. Steel is never a text colour — small steel-coloured copy uses steel-ink. Body text on the navy proposal band is #C9D2DE (10.2:1); the stamp and lot fills carry the argued teal as marks.

Type

Sora 700 for display — a plan-drawing geometric with a manager's clarity; it sets the wordmark, headings, the huge lot count and the badge figure. Inter for everything a council member has to read: body at 16.5px, the ledger at 13px with tabular numerals so the levy notice's right column lines up like a real one. The display moment is the lot count set huge and in words — "SIXTEEN LOTS, ONE PHONE NUMBER" — with the number word swapping live from the stepper (four → forty-eight, all in words).

The Scheme Ledger

Techniques

• Isometric plan, procedural SVG. A tiny projection helper (x−y across, (x+y)/2 − z down) draws boxes as three polygons — top, right face, left face — from world coordinates. Villas are boxes with a drawn hip roof, in paired rows facing a shared drive (blocks of up to sixteen; bigger schemes stack a second and third drive behind). Apartments are one building shell with the lots as window/balcony panels on the front face and drawn floor lines; low-rise gets a stairwell, mid-rise a lift overrun on the roof and a hatched pool deck with a teal water plane. Common property (drive, bin store, letterbox bank, pool deck) uses a steel diagonal hatch pattern whose period is rescaled per redraw so it reads the same at any zoom. The scene is fitted to the viewBox from its geometry bounding box; labels are added afterwards in world units so they stay ~10.5px regardless of scale.
• Lots light one by one. Each lot is a <g class="lot">; a token-guarded timer stack adds .lit with a CSS fill transition. Dual speed: 42 ms per lot (1.5 s cap) on the first draw, 12 ms (≈480 ms cap) after any control. Every handler bumps the token before the state swap, so a rapid-fire click run never lets a stale timer light the wrong plan. Fills live in CSS classes only — no presentation attributes on the same elements.
• The levy notice is HTML beside the plan (a real notice is a document, so it's set as one): dashed rules, tabular ledger, the includes line, and the price badge on the header carrying two lines — the annual figure and, only when a one-off is on, "+ $X one-off". Under 480px the badge drops to a tight variant so it never covers the plan.
• The "MANAGED" stamp presses onto the notice on a 3.4 s loop driven by rAF with the delta clamped at zero and capped at 50 ms: a 0.38 s eased press from scale 1.32/opacity 0.55 to 1/1, a 2 s hold, a 0.5 s lift back to 1.12/0.55, a short pause. Opacity never drops below 0.55 so the thumbnail always shows a stamp; reduced motion renders it pressed and still, and the loop pauses on document.hidden.
• Signature → form handoff. Scheme type, lots, add-ons and the estimate pre-fill the proposal message until the visitor edits it.

Pricing model (per lot, per year, GST inclusive)

Worked examples — measured from the running page against an independent oracle

The verification harness sets the full control vector for every scenario, then sweeps every scheme × {4, 6, 8, 10, 12, 24, 48} lots × every toggle state (168 cells) against the oracle, plus stepper bounds, keyboard radio navigation, a rapid-fire 24-click drive with no settle, the stamp's opacity floor, and the settled lit-lot count. 250+ asserts, zero spec corrections — every worked figure landed exactly.

Conversion decisions

• Above the fold at 375: name, "Strata management for Perth's northern suburbs — the scheme runs, you don't have to", the proposal button, the call button, and three trust chips (SCA member, audited trust account, since 2015). The masthead carries the phone; the mobile sticky bar carries call + proposal.
• The estimator sits directly under the hero so the plan and the price badge share the 1200×750 thumbnail with the headline — the commercial argument in one capture.
• Form fields: name, phone, scheme suburb, role (owner / council chair or member / developer — the three people the page is for), and a scheme-details textarea pre-filled from the ledger. Front-end validation with per-field messages and aria-invalid; the designed confirmation panel is hidden on load and on an empty submit and appears only after a valid submit — no fake network round-trip. A "What happens next" card beside the form answers the B2B objection: how long, what we read, when the council votes.
• Honest lines: the 6-lot minimum, the Act's ten-lot plan rule, and the hourly schedule are stated on the ledger and repeated in the grid and FAQ. The plan toggle explains why it's locked rather than silently disabling.
• Reviews are demo copy attributed to roles and suburbs, never named people; the FAQ answers the five questions councils actually ask (what a manager does, changing managers, who holds the money, the 10-year plan, how levies are set).

Local SEO we'd implement for the real business

The demo page ships only WebPage/WebSite/BreadcrumbList schema naming it a demonstration — fictional business data must not enter a real index. For a real strata firm we'd ship ProfessionalService (the exact schema.org organisation subtype for a management firm — not bare LocalBusiness, and not a specialty enumeration) with genuine NAP, hours, area served, the offer catalogue and real, consented reviews:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Northline Strata Management",
  "url": "https://www.example-strata.com.au/",
  "telephone": "+61 8 9000 0338",
  "email": "hello@example-strata.com.au",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[real street address]",
    "addressLocality": "Joondalup",
    "addressRegion": "WA",
    "postalCode": "6027",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.745, "longitude": 115.766 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "08:30", "closes": "17:00"
  }],
  "areaServed": ["Joondalup","Currambine","Clarkson","Butler","Alkimos","Kingsley","Hillarys","Wanneroo","Perth"],
  "priceRange": "$$",
  "memberOf": { "@type": "Organization", "name": "Strata Community Association (WA)" },
  "hasOfferCatalog": {
    "@type": "OfferCatalog",
    "name": "Strata management services",
    "itemListElement": [
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Villa & townhouse scheme management" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "260", "priceCurrency": "AUD", "unitText": "per lot per year" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "Low-rise apartment scheme management" }, "priceSpecification": { "@type": "UnitPriceSpecification", "price": "320", "priceCurrency": "AUD", "unitText": "per lot per year" } },
      { "@type": "Offer", "itemOffered": { "@type": "Service", "name": "10-year maintenance plan" }, "price": "1100", "priceCurrency": "AUD" }
    ]
  },
  "aggregateRating": { "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "[real count]" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "[real, consented reviewer]" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "[real review text]"
  }]
}
</script>

Alongside: a Google Business Profile at the real office, suburb-level service pages for the corridor (Joondalup, Clarkson, Alkimos), the "changing strata managers in WA" explainer as a ranking page, and FAQPage markup on the real FAQ.

What changes for the real client

• Their fee schedule replaces the demo anchors — the ledger model is a five-line function; the honesty rules (minimums stated in lots, the Act's ten-lot plan, no number on hourly work) stay.
• Owner portal & trust accounting: the proposal form posts to their CRM and the portal's lead endpoint — StrataMax, PropertyIQ or Urbanise depending on the platform they run — with Xero for the management company's own books. The estimate travels with the lead.
• Reviews feed from Google with consent; the trust strip carries the real SCA membership number, PI certificate and audit statement.
• Their photos of managed schemes can sit behind the plan; the procedural plan stays as the interactive piece.
• Handover pack download (a PDF of "how to change managers") gated behind the same form — a warm B2B lead magnet.

Iteration log