Mortgage Broker Website Template

About this mortgage broker website template

The 14 pages you get

Home /

The house filling course by course, the broker’s position, the products and the advice close.

Mortgage products /products/

The index — what kinds of loan, and who each suits.

Three product pages /products/…

Capital and interest, five-year fixed rate, and interest-only. Each a full route running the same gable over the same term — and interest-only is the control that never fills.

Mortgage rates /rates/

Current rates. The page people arrive on and the reason they come back.

Our fees /fees/

What the broker charges, published. In a market where "free" usually means commission, stating it is a differentiator.

Contact /contact/

A working form plus live tel: and mailto: paths.

Notes /notes/

A wired content collection — add an .mdx file and it appears here and in the sitemap.

Two worked articles /notes/…

Why your first five years barely move the balance, and put a reminder in six months before your fix ends. The second one is a remortgage lead generator disguised as advice.

Regulatory information & privacy /legal/ · /privacy/

Real routes — required for a regulated broker.

404 /404

Designed, not default. Keeps the navigation.

What is in the build

• A drawn house elevation whose 48 brick courses fill from the standard annuity recurrence, with scroll as the 300-month term
• A declared control: the interest-only product page, running the identical gable over the identical scroll and never filling past the deposit courses
• Three product routes that each demonstrate a different amortisation behaviour on the same drawing
• A published fees route, in a market where most brokers are vague about how they are paid
• A regulatory information route already built, which a regulated broker cannot launch without
• Epilogue with Azeret Mono, both self-hosted; a working enquiry form plus live tel: and mailto:
• Vitest and Playwright suites included in the repository

The design decision

Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 62 different worlds reading as one design system in different paint.

The world

Seven painted colours over a violet ground, four of them values of the same violet, with one warm ownership amber carrying the filled courses, the fee and the CTA and nothing else.

The mechanic

"The House Becomes Yours": one drawn house elevation rides the whole document, complete from frame one. Scroll IS the term — month 0 at the top, month 300 at the foot — and its 48 brick courses fill from the standard annuity recurrence, so the page starts as the bank's and ends as the buyer's.

Loud channel

Moving set-piece

Imagery. Graded by equity held

Type & palette

Epilogue · Azeret Mono

#4e4b6c #f2eef7 #ffb547

The control case

/products/interest-only/ runs the identical gable over the identical scroll and never fills past the deposit courses, then the balloon.

Who it is for

Built for whole-of-market and independent mortgage brokers and advisers. It suits a broker whose pitch is that they will explain what is actually happening to the balance. For financial planning, the financial-advisor build is the sibling; for insurance, insurance-agency.

Under the hood

• Astro 7 · static output, zero client framework
• Tailwind 4 · one @theme block holds the palette
• MDX content collections for the blog
• GSAP + Lenis for the scroll work, reduced-motion aware
• Self-hosted woff2 — no Google Fonts request
• Sitemap, canonicals and per-route meta wired
• Vitest + Playwright suites in the repository
• Zero third-party requests · strict CSP-ready

How to get started

1. 01 Accept the repository invite and clone it.
2. 02 Run npm install, then npm run dev.
3. 03 Replace the content in src/data/ with your own — that is where the brand, the copy and every list live.
4. 04 Swap the images in public/images/ and the palette in the @theme block.
5. 05 Run npm run build and deploy dist/ anywhere static.

Questions