How the Hartley & Marsh Legal demo was made

Counsel, not theatre

Most small-firm websites hide the price and hope the phone rings. This one argues the opposite: the process on one page, the price in the open, and a straight answer when you don't need a lawyer at all (JP certification is free at the library; Legal Aid WA on 1300 650 579 when money is tight). No scales of justice, no lion crests, no outcome promises anywhere — process and price only, which is both the honest register for legal marketing and the one that converts anxious first-time clients.

Parchment chambers daylight

Argued from the office, not a mood board: deed paper, the leather desk inlay, the brass door plaque, the bound law reports.

The spec's ink/line rule applied twice over: brass never sets body text on parchment (eyebrows and labels use the derived #7A5A20 brass-ink at 5.6:1), and on the counsel-green explorer panel the fee figures use a lightened #C9A45C brass-bright (5.3:1) while body copy runs in parchment tints.

Bookish authority, costs-agreement figures

• Libre Caslon Text — display and headings. Bookish authority with warmth; the italic carries the pull-quote ("The process on one page. The price in the open.").
• Source Sans 3 — body and UI. Clean, quietly professional, ≥16px on mobile.
• IBM Plex Mono — every fee figure, the eyebrows, phone numbers and the file-note stamp, set like lines from a costs agreement. The mono voice is the honesty device: whenever the page states money, it switches to the typeface of an invoice.

The Fixed-Fee Matter Explorer

Five matter chips (wills & estate planning, probate & estates, family-law first steps, employment advice, small-business agreements) drive a procedural SVG process timeline and a set of fee cards. The timeline is one dashed brass stroke over a muted track: selecting a matter re-draws it stage by stage via stroke-dashoffset, nodes lighting on a 180ms stagger; four HTML stage buttons (not SVG controls — cleaner keyboard access) jump the draw to any stage and swap the plain-language file note beneath. Per the W15 learning, the progress stroke uses butt caps and stays at opacity 0 until drawn length exceeds 1px, so no stray cap-dot ever renders at stage 1. When a matter reaches stage 4 of 4, a small brass wax-seal — "FIXED FEE · IN WRITING" — stamps onto the lead fee card, echoing the sealed deed in the hero illustration. The whole scene rests mid-demonstration: wills selected, timeline drawn to stage 2, the $440/$660/$850 cards showing, so the static thumbnail reads instantly. Every interaction updates window.__lawyer (matter, stage, displayed fees, seal, form status).

Conversion tie-in: choosing a matter (chip, "Book this matter", or any service-card link) pre-fills the appointment form's matter select — the demo interaction becomes a warmer lead. Deliberately, the form is not pre-filled at rest, so a fresh visitor's empty submit exercises all four required fields.

The fee model and its shape

Every figure on the page comes from one table, plausible for the 2026 Perth suburban market, and the explorer, services grid and FAQ all read from it:

Shape notes for QA: the couple pricing is deliberately sub-double (a real firm's shape — shared conference time), "from" prefixes mark scopes that legitimately vary, and court filing fees are hedged as an external authority's number rather than asserted — the Supreme Court of WA sets and revises them. No outcome language exists anywhere on the page; the only promises are process and price.

Why the page is shaped this way

• Above the fold at 375px: name + "fixed-fee … priced in the open" value line, Book CTA, and the Legal Practice Board registration chip — the three things an anxious first-time legal client checks before scrolling.
• Two CTAs, one intent: "Book an initial appointment" (primary) and "See fixed fees" (for the majority who need to trust the pricing before they'll book). The explorer is the persuasion engine; the form is the destination.
• Form fields: name, phone, suburb, matter select, optional note — the minimum a receptionist needs to book a conflict-checked first appointment. The note field is explicitly labelled "nothing here is legal advice yet". Confirmation renders locally and says so ("Demonstration form — nothing is sent"), phrased in the wave's confirmation lexicon.
• Mobile sticky bar: Call + Book, both ≥44px — a separating parent researching at midnight books; a probate executor calls.
• Honesty as conversion: the "When you don't need us" card (free JP certification, Legal Aid WA referral) costs two enquiries and earns fifty — it is the page's trust engine, not a loss.

What would change for a live firm

• Practice management: the form posts into LEAP, Smokeball or Actionstep intake with conflict-check fields; Settify for structured family-law intake; FamilyProperty for property matters.
• Searches & disbursements: InfoTrack integration so disbursements land itemised, matching the page's at-cost promise.
• Document automation: Josef or Checkbox driving the wills package from the intake data; Xero for the 6-minute-unit invoicing the copy promises.
• Content: real practitioner profiles and registration numbers, consented client reviews, and the firm's actual fee schedule replacing this demo's table.

Under the parchment

• Single self-contained file; Google Fonts the only external resource. No raster images: the chambers still-life (brass plaque, law reports, sealed deed, fountain pen), the Beaufort Street service-area map, and the timeline are all hand-built SVG; the plaque glint is a one-off Web Animations API sweep, motion-gated.
• Entrance choreography via IntersectionObserver on .reveal elements, gated on document.fonts.ready with a 1.2s fallback; without JS nothing is ever hidden (the hiding class is only applied under html.js).
• Reduced motion: reveals render settled, the timeline draws instantly, fee-card swaps are immediate, the glint never runs.
• SVG map mirrored by a plain-text suburb list; the timeline mirrored by HTML stage buttons and a text file-note — no information lives only in a picture.

Three passes, driven headlessly

Every pass drove the page in headless Chrome (puppeteer) and asserted output — form submits on fresh loads, the explorer against an independently reimplemented fee oracle, screenshots reviewed by eye at 1280 and 375.

← Back to the site · Generative Assets index