How the Beaufort & Grand demo was made

Concept

Beaufort & Grand Property Co. is a fictional two-director real estate agency for Mount Lawley and its five neighbouring suburbs, aimed at owners of character homes weighing a sale and landlords tired of their property manager. The page has one job: book a free appraisal. The art direction is editorial heritage — the confidence of a beautifully typeset agency window card: limestone, iron lacework, one red SOLD dot — premium but local, never franchise-glossy.

Palette

Per the collection's ink/line rule, the two bright accents (SOLD red, verdigris) are reserved for marks — dots, rules, the price band, the lacework frieze — and each has a darker derived ink for any text duty. Body copy runs in charcoal and a softened #575D66.

Type

Libre Caslon Display carries the headlines — window-card serif authority, set at natural weight and generous size rather than bold. Libre Caslon Text (italic) appears only where a serif moment earns it: review quotes, the price lines on service cards, the h1's italic turn. Figtree does everything functional — UI, labels, forms, body — because an appraisal form is a tool, not a poem.

Signature — the Streetscape Appraisal Explorer

Six suburb chips, four property-type chips and a bedroom stepper drive a procedural SVG streetscape: a federation front with tuck-pointing and iron lacework for a character home, a parapet townhouse, a deco apartment block, a wide-fronted villa. Each facade is a <g> in one SVG, toggled by attribute — never the .hidden IDL property, which silently no-ops on SVG elements — with a [hidden]{display:none !important} guard. Facade strokes carry pathLength="1" so a single dash-offset animation redraws any facade in about a second regardless of path length; fills fade in behind the linework. Bedroom count adds real geometry: extra sash windows, an upper floor, a rear wing, a carport.

Beside the scene, a price-band gauge renders an example median band and days-on-market for the selection, computed from a small data table (base band per suburb×type at a reference bedroom count, ±12% per bedroom, rounded to $5k) — every card wears the honesty banner: "example figures for demonstration — a real appraisal uses live comparable sales." The band also derives a guide selling cost at the page's own 2.2% incl GST commission, so the signature and the services grid can never argue with each other. "Use this scenario" pre-fills the appraisal form, scrolls to it, and — the second-read detail — flips the streetscape's agency board from FOR SALE to a red SOLD dot. Live state is exposed on window.__realestate for QA.

Techniques

• Procedural SVG throughout — facades, hero window card, service-area map. No raster images anywhere.
• pathLength="1" dash draw-in with a crafted cubic-bezier; reduced-motion renders every facade settled and fully drawn.
• HTML/CSS gauge (positioned band + median marker) animated by left/width transitions on the same easing family.
• Vanilla JS state machine (~120 lines): chips, clamped stepper (apartments cap at 3 beds, townhouses at 4), band arithmetic, form validation, probe publishing. No libraries.
• Load choreography: one staggered hero rise gated on a .js class so no-JS visitors see everything instantly.

Conversion decisions

• Above the fold at 375px: name, "character homes… names are on the door" value proposition, appraisal CTA, and three trust marks (since 2014, licence styling, directors answer the phone) — all visible before the first scroll.
• Two phone paths: header tel: link and a fixed mobile bar (call in SOLD red, appraisal in limestone — the only place red is a surface, because a call button is the page's one emergency-grade action).
• Form fields mirror what an agent actually needs to prep an appraisal: suburb, type, beds, and the owner's goal (selling / switching managers / leasing / curious) — the goal select turns one form into four lead types without four forms.
• Explorer→form handoff: the scenario note carries suburb, type, beds and the example band into the form, so the enquiry arrives warm.
• Local confirmation only: submit validates in-page and renders a designed "we'd call you back within one business day" state; no fake network round-trip, and the demo says plainly that nothing was sent.

Local SEO we'd implement for the real business

This demo page ships only WebPage schema naming it a demonstration — fictional business data has no place in a real search index. For a real agency we would ship LocalBusiness (RealEstateAgent) markup like this, fed by their true NAP, licence number and live review stream:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "RealEstateAgent",
  "name": "Beaufort & Grand Property Co.",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "XXX Beaufort Street",
    "addressLocality": "Mount Lawley",
    "addressRegion": "WA",
    "postalCode": "6050",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.93, "longitude": 115.87 },
  "areaServed": ["Mount Lawley","Inglewood","Maylands",
                 "Bayswater","Bedford","North Perth"],
  "openingHours": ["Mo-Fr 08:00-18:00","Sa 08:00-16:00"],
  "priceRange": "Commission from 2.2% incl GST",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "132"
  }
}
</script>

Plus per-review Review markup streamed from their verified Google Reviews profile, suburb landing pages keyed to the six service areas, and Google Business Profile alignment on NAP and hours.

What would change for the real client

• CRM & listings: the appraisal form would write straight into VaultRE or Agentbox, and the sold/current stock strip would stream from their REA (realestate.com.au) and Domain listing feeds instead of illustrated examples.
• Property management: landlord enquiries route into PropertyMe or PropertyTree, and the management section would quote their real fee schedule and inspection cadence.
• Appraisal data: the explorer's example bands become live CoreLogic/REIWA suburb medians and true days-on-market, refreshed monthly.
• Their photography replaces nothing structural — the SVG streetscape stays as the interactive layer, with real campaign imagery in the sold stories.

Iteration log