---
version: alpha
name: "Mortgage broker template by 8B"
description: "One-page mortgage broker site in white and zinc with an amber and ember glow, a held photo frame and a sideways rate timeline. Free HTML template by 8B, MIT."
colors:
  primary: "#18181b"
  secondary: "#62626b"
  tertiary: "#fc5f2b"
  accent-amber: "#ffb547"
  glow-cream: "#ffe3b3"
  surface: "#ffffff"
  surface-soft: "#f4f4f5"
  night: "#120d0a"
  caption: "#a1a1aa"
  hairline: "#e4e4e7"
typography:
  headline-lg:
    fontFamily: Host Grotesk
    fontSize: 3.25rem
    fontWeight: 400
    lineHeight: 1.06
    letterSpacing: -0.03em
  headline-md:
    fontFamily: Host Grotesk
    fontSize: 1.5rem
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: -0.015em
  quote:
    fontFamily: Host Grotesk
    fontSize: 2.125rem
    fontWeight: 400
    lineHeight: 1.22
    letterSpacing: -0.02em
  figure-xl:
    fontFamily: Host Grotesk
    fontSize: 4.5rem
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.04em
  body-md:
    fontFamily: Host Grotesk
    fontSize: 1.0625rem
    fontWeight: 400
    lineHeight: 1.55
  body-sm:
    fontFamily: Host Grotesk
    fontSize: 0.9375rem
    fontWeight: 400
    lineHeight: 1.5
  label-md:
    fontFamily: Host Grotesk
    fontSize: 0.875rem
    fontWeight: 500
    lineHeight: 1.35
  button:
    fontFamily: Host Grotesk
    fontSize: 0.9375rem
    fontWeight: 500
    lineHeight: 1.1
  wordmark:
    fontFamily: Host Grotesk
    fontSize: 1.625rem
    fontWeight: 600
    lineHeight: 1
    letterSpacing: -0.045em
rounded:
  row: 0.5rem
  field: 0.625rem
  card: 0.875rem
  full: 999px
spacing:
  section: 9rem
  gutter: 3.5rem
  frame-gap: 0.5rem
  container-max: 80rem
components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.surface}"
    typography: "{typography.button}"
    rounded: "{rounded.full}"
    padding: 0.875rem 1.5rem
    height: 3rem
  button-primary-hover:
    backgroundColor: "{colors.glow-cream}"
    textColor: "{colors.primary}"
  nav-bar:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    height: 4.5rem
  card-agreement:
    backgroundColor: rgba(255, 255, 255, 0.82)
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.card}"
    padding: 1.75rem
  badge-status:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.primary}"
    rounded: "{rounded.full}"
    padding: 0.3rem 0.7rem 0.3rem 0.35rem
  ledger-row:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    typography: "{typography.body-sm}"
    rounded: "{rounded.row}"
    padding: 0.9rem 1rem 0.9rem 2.25rem
  panel-dark:
    backgroundColor: rgba(18, 13, 10, 0.8)
    textColor: "{colors.surface}"
    typography: "{typography.label-md}"
    rounded: "{rounded.card}"
    padding: 1rem 1.125rem
  input-field:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.primary}"
    rounded: "{rounded.field}"
    padding: 0.8rem 1rem
    height: 3rem
---

# Mortgage broker template by 8B

## Overview

A one-page site for a mortgage adviser who compares the whole market and sells one thing: a free call. The idea is a number you can trust. The first screen shows an example agreement in principle on a glowing amber ground, and every later section backs it with evidence: a chart of 94 lenders, four steps from call to keys, a nine-row ledger of what the fee covers, four advisers and three client stories. The mood is calm, white and exact, with warmth reserved for the glow. It is meant for a small advice firm, not a bank.

## Colors

The page is white and zinc, with one warm family used sparingly.

- **Primary (#18181b):** body text, the dark buttons, the advisers section ground, the bank's dark line in the chart, the switch dots and the line that fills under them.
- **Secondary (#62626b):** secondary small text and the descriptions in the fee ledger.
- **Tertiary (#fc5f2b):** the ember of the glow, the chart lines other than the bank's, bullets and step markers, the round badge icon behind its white tick, the link underline on hover.
- **Accent amber (#ffb547):** the middle of the glow, the switch section's final ground, adviser specialities, the method index dots and the line in the offer panel's chart.
- **Glow cream (#ffe3b3):** the bright centre of every glow: the first screen, the button hover, the logo mark and the contact disc.
- **Surface (#ffffff):** page ground, the nav bar, the footer card, the form card and text on the dark sections.
- **Surface soft (#f4f4f5):** alternate ledger rows, the FAQ section ground and the form fields.
- **Night (#120d0a):** a warm near black for the contact section, the footer ground, the backing of the photo frames and the dark glass panels.
- **Caption (#a1a1aa):** muted one-line notes, such as adviser lines and photo chip subtitles.
- **Hairline (#e4e4e7):** rules, field borders, the pale start of the chart lines and the dimmed state of ledger and FAQ rows.

## Typography

Host Grotesk is the only typeface, loaded as one variable file for weights 400 to 600. Its neutral, slightly squared grotesque letters keep a financial page calm. Headings are regular weight, not bold, with tight tracking: about -0.03em on section headings, -0.015em on card titles and -0.04em on the large figures. Heading size is fluid: section headings run from 2rem on a phone to 3.25rem on a wide screen, and the offer figure from 3rem to 4.5rem. Labels and buttons use weight 500 at 0.875rem and 0.9375rem. Only the "keylight" wordmark is semibold, at 600 and -0.045em. Body text is 1.0625rem at a 1.55 line height, and small text is 0.9375rem. Nothing is set in capitals.

## Layout

Content sits in a container up to 80rem wide with a fluid gutter from 1.25rem to 3.5rem. Sections are separated by padding from 5rem to 9rem, scaled by viewport height. Most sections use two columns: headings and leads split 7 to 5, content splits 6 to 5 or 5 to 7. The method section holds a photo frame on the right while four steps scroll on the left. Advisers sit four across, stories alternate the photo side, and the contact section keeps a glow photo held beside the form. Below 960px every grid becomes one column, the nav links collapse into a Menu button and the advisers move to two across. On a phone the method photos fill the held stage and the step cards slide over them as dark glass.

## Elevation & Depth

Depth comes from glass and colour fields. The agreement card and the switch cards are white at 82 percent with an 18px backdrop blur and a long, soft shadow of the near black tinted at 45 percent. The photo chips, the method index and the offer panel are dark glass at 80 percent with a 16px blur. The form card and the footer card are solid white on the near-black ground, the form with the soft shadow and the footer card without it. Photos sit in frames with rounded corners, and the first screen's ground is a radial gradient from cream through amber to ember.

## Shapes

Corners are rounded in three sizes: 0.875rem for photos, cards and panels, 0.625rem for form fields and 0.5rem for ledger rows. Buttons, badges and the Menu button are pills or circles. The signature shape is the small ember dot, which returns as bullets, step markers and ledger markers; the logo mark is the same dot filled with the cream, amber and ember glow. Portraits are cropped 3 to 4, stories 5 to 4 and the offer photo 4 to 5. The adviser portraits animate from a narrow pill to the full rounded frame.

## Components

- **button-primary:** a dark pill, 3rem high; on hover a circle of cream, amber and ember rises from the bottom and the label turns dark.
- **nav-bar:** a white bar with four links, the wordmark in the centre, the phone and the button; it hides when you scroll down.
- **card-agreement:** the translucent card with a Ready badge, a large borrowing figure and five rows with ember dots.
- **badge-status:** a white pill, 0.8125rem at weight 500, with a white tick on an ember circle, used on the card and the photo chips.
- **ledger-row:** a rounded row with a term and a description, striped on alternate rows.
- **panel-dark:** dark glass for photo chips, the step index and the offer comparison.
- **input-field:** a zinc field, text at 1rem, with a hairline border and a dark outline on focus.

## Motion

The page loads GSAP with ScrollTrigger and SplitText, and Lenis for smooth scrolling. The idea is evidence arriving as you scroll: lines grow, photos wipe, portraits open and a timeline runs sideways, while the glow stays calm.

- **Opening:** on load the heading block rises in three beats and the card follows.
- **Market:** the 94 lines grow outward from the bank's dark line and turn from pale to ember, scrubbed with the scroll.
- **Method:** each step wipes its photo up over the previous one, which shifts up and dims; the index dot moves on.
- **Included:** the headline rises line by line, then the ledger rows light up in turn.
- **Advisers:** each portrait opens from a pill to a full frame, with a lag along the row.
- **Stories:** photos come up from dim and zoomed as they scroll in.
- **Switch:** the section is pinned while four panels run sideways, a line fills and the ground warms from white to amber.
- **Offer:** the photo settles, the glass panel rises and its line draws.
- **FAQ and contact:** rows light up in turn, and the glow disc rises behind the photo.

Easings are mostly linear for scrubbed scenes, with power2 for wipes and expo.out for the line-by-line headings. With reduced motion, Lenis, the entrance and scroll animations and the sideways pin are switched off and the page reads in full; the nav bar's hide on scroll and the hover transitions keep running.

## Do's and Don'ts

- Do keep the glow to the first screen, the button hover, the switch section and the contact disc.
- Do keep headings regular weight with tight tracking.
- Do use the ember dot as the only decorative mark.
- Do show real, checkable figures in the card and the ledger, and ask the owner for them.
- Don't add a second typeface or bold display weights.
- Don't add hard shadows, outlined cards or square corners.
- Don't tint the page ground; white and soft zinc carry the calm.
- Don't add photo overlays other than the dark glass chips.
- Don't invent rates, fees or regulatory claims.