Threshold

Best for

• Mortgage brokers. It's written to the best interests duty, responsible lending, APRA's buffer and debt-to-income settings, the comparison rate rules and the Home Guarantee changes from October 2025 (see "Lending: what we build in").
• Anyone helping people buy or borrow for a home:
  • customer-owned banks and lenders (Gather: a borrowing estimate and two of their loans compared)
  • conveyancers (Settle: cash at settlement with stamp duty and mortgage insurance, and fixed fees)
  • buyers' agents, property advisers, financial counsellors
• Audiences: first home buyers working out a deposit, families checking what they could borrow, and refinancers comparing their loan with an offer.

Less suited to: a car dealer (Forecourt), an accountant (Atelier or Signal), or a lender selling investments.

Personality and voice

Warm and transparent, the broker who shows you the commission before you ask.

• Headlines: "Your front door, within reach." · "The cash you'll need on the day." · "How we're paid, in dollars."
• Buttons: "See what you could borrow" · "Book a chat" · "How we're paid"
• Microcopy:
  • "Assessed at 9.09% (the 6.09% rate plus a 3-point buffer)."
  • "Stamp duty · First home concession, $24,584 off · $8,195"
  • "Paid by the lender, not by you. On this loan, about $4,420 upfront (0.65% of the loan)."
• Words to avoid: "pre-approved in minutes", "borrow up to" with no assessment, "lowest rate guaranteed", "free" without saying who pays, and anything that sounds like financial advice.

Colour

Measured contrast (WCAG).

• Open house:
  • ink on paper 16.2:1
  • muted on paper 5.9:1 (5.3:1 on well)
  • plum on paper 8.7:1 (7.8:1 on well, 7.6:1 on its soft fill, 9.4:1 on card), white on plum 9.4:1
  • ink on apricot 10.5:1; apricot text 6.6:1 (6.3:1 on its soft fill)
  • plum on the apricot step 5.6:1
  • ok 6.0:1, alert 6.0:1
• Lamplight:
  • ink 16.3:1
  • muted 7.4:1 (6.7:1 on card)
  • plum 9.1:1, text on plum 8.6:1, plum on its soft fill 8.2:1
  • apricot 11.1:1
  • the step fades to 60% so the lit words keep 3.6:1 on it, at headline size where AA asks 3:1
• Closing card: text 16.1:1, apricot em 10.9:1, ink on its apricot button 10.5:1.
• Example dials: teal (Gather), navy (Settle) and harbour green (Lantern) all meet AA, light and dark, and so does each closing card.

Typography

• Display: Spectral, 500–700 with italics. Headlines, the big figures.
• Body: Golos Text, 400–700. Reading, forms, buttons.
• Mono: Fira Mono, 400 and 500. Rates, dollars, percentages.

The signature move: the lit words turn plum italic and a warm apricot step slides in under them, like light under a front door.

Layout

• Frame: a 1200px wrap with a max(20px, 4vw) gutter. An ink top line with an apricot label; a sticky header with the front door mark; a tall arched doorway behind the hero, with warm light at its foot.
• Hero: copy on the left; the borrowing estimate on the right.
• Then: the deposit planner beside the scheme and stamp duty notes; the loan comparison; the commission card beside how it works; questions; and a dark closing card whose door swings open onto warm light.

Shape

• Friendly: --r-s 8px, --r-m 14px, --r-l 22px.
• Doorways: arches drawn in CSS for the mark, the tag, the hero, the page heads and the closing card.

Motion language

• Figures: the big numbers slide in when anything changes; the LVR bar grows and stripes above 80%.
• Comparison: the cheaper loan is outlined, with a "Costs less" label.
• Elsewhere: the step slides in under the headline, the closing card's door swings open, sections reveal with a 14px rise over 650ms, and the phone menu drops in.
• Motion switch in the footer ([data-motion-toggle], html.calm, remembered as site-motion, with the default from prefers-reduced-motion). Calm stops the step, the door and the slides (the door is shown open).
• Lamplight switch ([data-theme-toggle]), remembered as site-theme; theme-color follows.

Imagery and illustration

Your own team and your own office, and clients at their front doors with their permission. The template draws doorways so nothing is borrowed. No stock "happy couple with keys", no lender logos without permission, and no invented reviews.

Signature components

• Borrowing estimate: .borrow[data-borrow] containing script[data-borrow-data] (rate, buffer, years, dti, and optional floor, partner, child, cardPct for the living-cost floor and card limits), input[data-two], input[data-income] (two), input[data-spend], input[data-debts], input[data-cards], select[data-deps], output[data-for-input], [data-borrow-out], [data-borrow-sub], [data-borrow-lines] and [data-dti]. Take-home pay uses 2026–27 resident tax rates and the Medicare levy.
• Deposit planner: .deposit[data-deposit] containing script[data-dep-data] (duty as nsw or none, the Scheme's cap, fees, and optional fhbFull, fhbTop), input[data-price], input[data-dep], input[data-fhb], [data-lvr], .lvr-bar i, [data-cash], [data-dep-lines] and [data-dep-note].
• Loan comparison: .compare[data-compare] with data-for and script[data-cmp-data] (amount, years), containing .loan[data-loan] cards (data-up, data-monthly, data-annual) with input[data-rate], [data-repay], [data-cr] and [data-cost], then [data-cmp-verdict] and the warning.
• Commission card: .commission[data-commission] with data-for and script[data-com-data] (amount, upfront, trail, optional paidBy and varies wording), containing [data-com-amount], [data-com-up], [data-com-trail], [data-com-sum] and .com-duty.
• Supporting pieces: .plan-pair, .card, .facts (--n columns, or .stack), .notice, .side-box, .checks, .faq, .close-card (--close-bg, --close-em).

Multi-page kit

• Phone menu: .menu-btn[aria-controls] opens .site-menu. Escape, an outside click or choosing a link closes it, and Tab stays inside while it's open.
• Current page: aria-current="page", shown as a plum-soft pill.
• Inner pages: .page-head (warm light and a small doorway), .crumbs, a .tag and a smaller .h1.
• Fields: .field, .fields, .field-wide, fieldset.field-set, .check, .form-card, [aria-invalid="true"]; form[data-template].
• Tiles, segmented control, gate, slider, switch, tables: .choices, .seg, [data-gate], input.range, .switch[role=switch], .table.
• Events: borrow (loan, repay, dti, assess), deposit (loan, price, lvr, duty, lmi), compare (amount).
• Helper: Threshold.refresh(root), and Threshold.last, the latest detail of each event, for scripts that load afterwards.

Lending: what we build in

We checked these for Australian brokers in October 2026:

• The buffer and debt to income. APRA kept the serviceability buffer at 3 percentage points in May 2026, and lenders can make up to 20% of new loans at six times income or more. The estimate assesses at the rate plus 3 points and flags a ratio of six or more.
• The 5% Deposit Scheme. Since 1 October 2025, first home buyers can buy with a 5% deposit (2% for single parents) and no mortgage insurance, with no income caps and unlimited places, under price caps that depend on where they buy. The planner applies it when the buyer ticks first home, the deposit is 5% or more and the price is under the cap.
• NSW first home buyers. No transfer duty on homes to $800,000 and a concession to $1,000,000, for buyers who move in within 12 months and live there at least 12 months. The planner uses NSW's 2025–26 duty rates and says to confirm with Revenue NSW.
• Comparison rates. Every rate comes with a comparison rate worked out on a secured $150,000 over 25 years, and the prescribed warning.
• Best interests and commissions. Mortgage brokers must act in their clients' best interests and put them first in a conflict; the credit guide and credit proposal disclose commissions, which the commission card shows in dollars up front. Complaints go to the broker, then the Australian Financial Complaints Authority.
• Not advice. Every estimate says it isn't an offer or credit assistance, and documents are collected through a secure portal, never a web form.

These notes are design guidance, not legal or financial advice.

• APRA keeps macroprudential settings (APRA, 28 May 2026)
• 5% Deposit Scheme questions (firsthomebuyers.gov.au)
• First Home Buyers Assistance Scheme (NSW Government)
• Card surcharging to end on 1 October 2026 (RBA)

Do and don't

• Do show the assessment rate, not just the borrowing figure.
• Do show commissions in dollars, before anyone asks.
• Do put the comparison rate and warning with every rate.
• Don't call an estimate a pre-approval.
• Don't collect documents or account numbers in a web form.
• Don't put text on apricot in anything but ink.

Accessibility

• AA contrast throughout (measured above), a skip link and a 3px focus ring.
• Estimate and planner: every slider is labelled with its value shown beside it; the big figure, the debt-to-income ratio and the notes are announced as they change; each line is text.
• Comparison: each loan's rate slider is labelled; repayments, comparison rates and costs are text; the cheaper loan is marked in words, not just colour.
• Commission: dollar figures and the explanation are text, announced when the loan amount changes.
• Forms: labelled fields, errors listed in an alert, linked to and marked on each field.
• Testing: responsive to 360px, and tested with motion on and off, in Open house and Lamplight.

How to make it yours