Financial Design · 148 of 210

Trailhead Guide

Snow white, sky blue and marigold with a wide foothills photo and a guide that starts right in the hero. Made for loan officers who meet people at the kitchen table and tell them when to wait.

Built for Mortgage Refinance, HELOC / Home Equity. Sample business on the page, Horsetooth Home Loans, Fort Collins CO.

I Want A Site Like ThisOpen The Live Design
Trailhead Guide website design on a desktop
The first screen, “Should You Refinance? Or Wait?”

Colors

#f2b705
#0f2233
#e8eff6

Fonts

  • Alatsi
  • Albert Sans

Sections In Order

  1. Should You Refinance? Or Wait?
  2. Which Refi Fits?
  3. Four Reasons to Refinance in Northern Colorado
  4. When I Tell People to Wait
  5. One Loan Officer, No Call Center
  6. What Neighbors Say
  7. Refinance Questions

Built In

  • light-dark() dark mode
  • invoker commands dialog with @starting-style
  • same document view transitions on the guide steps
  • exclusive accordion FAQ
  • Tool on the page, Which refi fits guide
  • FAQ accordion
  • Click-to-call phone links
  • Form
  • Sticky header/bar
  • Photo lightbox (dialog)
  • Inline SVG graphics
  • View transitions

The Whole Page

Full page of the Trailhead Guide design

On A Phone

Trailhead Guide on a phone

More Financial Designs

Sodium Night website design
Sodium NightAuto Loans / Refinance
Window Sticker website design
Window StickerAuto Loans / Refinance
Term Sheet Cobalt website design
Term Sheet CobaltBusiness Loans / Merchant Cash Advance
Sagebrush Dusk website design
Sagebrush DuskCredit Repair

Next Design, Spa Tile and Brass All Designs

↑