Financial Advisor Website Template
Demo brand: MARLEDGE FINANCIAL PLANNING · Financial planning & advice · 15 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this financial advisor website template
A complete site for an independent financial planner: fifteen built routes including four life-stage service pages, flat-fee pricing, an approach page, a first-meeting booking route, terms, privacy and a two-post journal.
Deep blue-slate — the prospectus at midnight — with one gilt growth signal on the invested rail, the price and the CTA. Epilogue against Crimson Pro. Type is the loud channel, and specifically the generating ratio of the type scale.
The signature move is that the typography is the chart. One growth constant — 7% real, 1.967 per decade — generates the entire modular type scale, so every heading and figure is a term of one geometric series, doubling per decade down the client’s timeline. There is no line graph anywhere on the page. The control is the cash rail: the same £250 left uninvested, its figures shrinking decade by decade toward the legibility floor while the invested rail doubles.
The 15 pages you get
- Home
/ - The compounding type scale, the planner’s position, the plan and the meeting close.
- The plan, decade by decade
/services/ - The index, structured by life stage rather than by product. Which is how planning is actually sold.
- Four life-stage pages
/services/… - First home & getting started, family & protection, pension consolidation, retirement & drawdown. Each a full route matching a different searcher at a different age.
- Pricing
/pricing/ - One flat fee. The page that makes the percentage-fee argument concrete.
- Our approach
/approach/ - How the planning works. In advice, the method is the product.
- Book the first meeting
/contact/ - A working form with a pre-filled mailto: fallback and a live tel:.
- Journal
/journal/ - A wired content collection — add an .mdx file and it appears here and in the sitemap.
- Two worked articles
/journal/… - Why a percentage fee costs more than it looks, and why we plan in decades not years. Both are the firm’s commercial argument in long form.
- Terms & privacy
/terms/ · /privacy/ - Real legal routes, written.
- 404
/404 - Designed, not default. Keeps the navigation.
What is in the build
- A modular type scale generated from one real growth constant, so every heading and figure is a term in a geometric series — the typography is the chart, and there is no line graph
- A declared control: the cash rail, the same stake uninvested, shrinking toward the legibility floor as the invested rail doubles
- Four life-stage service routes rather than product pages, matching four different searchers at four different ages
- A flat-fee pricing route with the percentage-fee comparison already argued in the journal
- Growth, inflation, fee and doubling constants as named values in
src/data, so the whole page recomputes from your assumptions - Epilogue with Crimson Pro, both self-hosted; a working booking form with a pre-filled mailto: fallback and a live tel:
- 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
- Deep blue-slate — the prospectus at midnight, one gilt growth signal on the invested rail, the price and the CTA. Type is loud, specifically the scale's generating ratio; palette, set-piece and texture held quiet.
- The mechanic
- "The Type Compounds": one growth constant (7% real, 1.967 per decade) generates the whole modular type scale, so every heading and figure is a term of one geometric series — the typography is the chart, doubling per decade down the client's timeline. There is no line graph.
- Loud channel
- Display type
- Imagery. Chroma compounds per decade
- Type & palette
- Epilogue · Crimson Pro
-
#1d2733#eef1f5#e6ad48 - The control case
- The cash rail — the same £250 left uninvested, its figures shrinking decade by decade to the legibility floor while the invested rail doubles. Drawn, not labelled.
Who it is for
Built for independent financial planners, IFAs and advice firms selling to individuals and families. It suits a planner charging a flat fee and willing to argue why. For institutional or corporate advisory, the finance-consulting build is the firmer register; for mortgage broking, the mortgage-broker build.
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
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
I am regulated — can I add risk warnings and disclosures?
Yes, and the build expects it. Terms and privacy are real routes, and the footer carries space for registration and risk statements. Review the demo copy against your regulator’s rules before publishing: illustrative growth figures in particular are treated differently in different jurisdictions.
Can I change the growth assumption?
It is a named constant, and changing it recomputes the type scale, the figures and the doubling period together. That coupling is the point — the page cannot show one growth rate and be set to another.
Why no chart?
Because every advisor site has the same rising line and nobody reads it. Making the type scale itself compound puts the argument in something the reader cannot skip past.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
More professional services templates
HALLREN Counsel LLP
Corporate & litigation counsel
Loud
Moving set-piece
Sightline Capital
Financial advisory
Loud
Moving set-piece
WARDENBY
Estate agency / lettings
Loud
Imagery
Balsworth & Co.
Chartered accountancy practice
Loud
Display type
KEDWORTH & QUIRE
Independent insurance brokers
Loud
Texture