Beacon

Item: Beacon
Rating: 7.3

Private dashboard that calculates your financial independence date.

findyourbeacon.app Save page

7.3/10MABTU rating

DESKTOP · 1440 × 4,983/ ↗

MOBILE · 390

Section outline · Home

01heroNavy band, serif with italic phrase, white button900
02stepsThree navy numbered cards796
03calculatorSliders beside result and projection chart918
04bentoQuote, charts, stats1,084
05faqAccordion list525
06ctaNavy band, centred serif, footer659

Rating · Home

Visual design7.5

UX & clarity7.7

Originality6.6

Craft & consistency7.5

Motion5.5

Performance & a11y8.0

This page scores 7.3; the site score weights the home page double.

Main colours

Mixed sections·off white background·muted

Typography

Playfair Displayheading · serif · google Interbody · sans · self-hosted

Stack & style

Editorial Corporate / clean Product-UI-led Bento grid FAQ accordion Process steps Stats band

Also: Netlify, Cloudflare, Google Analytics

Design DNA

Deep navy hero and closing band framing a pale blue-grey body. Headlines in a light serif with a key phrase in italic grey ('financial independence', 'One clear answer'), small uppercase eyebrows with a rule, sans body. Three navy step cards, a working calculator with sliders beside a result card and projection chart, a bento of a testimonial, a chart tile, '100%' and '2.3 years' stats and an accounts list, then a FAQ list beside a serif heading and a centred serif CTA.

Worth borrowing

Embed a working calculator with sliders and a live chart as the main proof on the home page.
Set the key phrase of every serif headline in italic grey to create a consistent voice.
Mix a quote, a chart tile and big stat numbers in one light bento for social proof.