pristine
Install
All examples

Persuade · Ledgerline

SaaS landing page

A landing page that went from gradient hype and fake stats to a hero you can use: pick a client payment and watch Ledgerline split it into what to move to tax savings and what's yours to spend.

Persona
Priya Raman, Freelance product designer
Their goal
Stop dreading quarterly taxes. She wants to know, in under a minute, whether this tool will tell her what to set aside and whether it's safe to connect her bank.
Lenses applied
clarify, delight, animate, harden, colorize, typeset, layout
/pristine polish src/pages/index.astro

Full pages. Scroll either one; they move together.

Before3.5/10

SaaS landing page before Pristine

After9.5/10

SaaS landing page after Pristine
Open before liveOpen after live

3.5/10 Level 2

Could be the landing page for any product. The hero says "Supercharge your finances" over a purple gradient, the proof is invented (10,000+ users, $2B+ tracked), and nothing on the first screen mentions taxes, which is the reason Priya came.

9.5/10 Level 10

The hero is the product: a $4,200 payment from Harbor & Pine split into self-employment, federal and Colorado tax, with the Q4 meter filling as you try $850 or $12,000 (which crosses into the 22% bracket). The feature tiles show real states: an import at 214 of 1,280, a bank that needs signing in again, a bounced invoice email, a coffee waiting to be sorted. Calm petrol-ink palette with a designed dark theme.

Scores

Every Dimension, before and after.

DimensionBeforeAfter
Persona fit310
Hierarchy & clarity410
Layout & spacing49
Typography49
Color & theming29
Consistency49
Responsiveness59
Motion & interaction39
Accessibility29
Copy210
Robustness & performance49

The critique

What the red pen found.

Vibe-code tells

  • Purple-to-pink gradient hero
  • Gradient text on the logo and step numbers
  • "Supercharge" and "AI-Powered" hero copy
  • Invented stats (10,000+, $2B+, 4.9★)
  • Fake customer logo strip
  • Six identical centered emoji feature cards
  • Decorative chart with no axes or values
  • Uppercase eyebrow kickers above every heading
  • Gradient letter avatars with star ratings
  • "Most Popular" card with a glow and scale(1.05)
  • transition: all 0.3s ease-in
  • *:focus { outline: none }
  • Gray text on a colored background
  • "Submit" button label
  • No dark mode

  1. P0 Lens: clarify

    The proof is made up

    "10,000+ freelancers", "$2B+ tracked", "4.9★" and a strip of logos Ledgerline can't back up. Priya is about to hand over bank access; one claim that smells invented costs the whole page its trust.

  2. P0 Lens: harden

    Focus is removed and contrast fails

    `*:focus { outline: none }` hides where keyboard users are. Body copy is #d1d5db and #c4b5fd on a purple gradient, well under 4.5:1 in places.

  3. P1 Lens: clarify

    The hero doesn't say what it does

    "Supercharge Your Finances with AI-Powered Bookkeeping" over a 100vh centered gradient. Taxes, invoices and bank sync don't appear until the third scroll.

  4. P1 Lens: layout

    The product shot is a decorative bar chart

    Rounded gradient bars with no axes, labels or values. It shows nothing Priya would actually see in the app.

  5. P1 Lens: distill

    Six identical emoji cards

    Centered icon, bold title and two lines of filler, six times. Nothing is ranked, so the one feature that matters to Priya, tax estimates, has the same weight as "Lightning Fast".

  6. P2 Lens: polish

    No dark mode, and the form says "Submit"

    No `prefers-color-scheme` handling. The final form button is labelled "Submit" and has no error, loading or success state.

The changes

Before, after, and why.

The report Pristine hands back after a run, with the real values from the two pages above.

LensBeforeAfterWhy
clarify<h1>Supercharge Your Finances with AI-Powered Bookkeeping 🚀</h1><h1>Your quarterly tax bill, worked out <em>every time you get paid.</em></h1>Names Priya's actual problem in the first line she reads.
delightStatic dashboard screenshot in a fake browser frame<figure data-pay>: radios for $850 / $4,200 / $12,000; split(4200) → move $1,281 (30.5%): SE $592, federal $504, Colorado $185; Q4 meter $2,780 of $3,412, $632 to goShe sees the one number she needs, for a payment like hers, before she signs up.
animatetransition: all 0.3s ease-in on cards; nothing moves when data changesSplit bar segments clip-path: inset(0 calc(100% - var(--a)) 0 0) transitioned 260ms cubic-bezier(0.23, 1, 0.32, 1); totals roll over 260ms; reduced motion swaps to a 150ms fadeMotion shows where the money goes when the payment changes, and nothing else moves.
clarifyEvery tile shows a happy-path checkmarkBank tile: Synced 2 min ago · Importing 214 of 1,280 · Meridian Savings needs sign-in + Reconnect · Banco Atlântico do Porto (EUR). Invoice tile: paid · 12 days late, 2nd reminder Fri Oct 24 · Email bounced · Sent, due Nov 19Shows how the product behaves when banks and clients don't, which is what she's worried about.
hardenGeneric ✓ icons in brand gradientMark.astro: 14px status marks ok / run (spinning arc) / warn / fail / idle (dashed), role="img" with aria-label; colour carries state onlySmall, precise marks read at a glance and still make sense without colour.
delight"AI categorizes everything automatically!"Fernwood Coffee Co. −$38.60 "Needs you" with Client meal / Personal buttons that resolve to "Meals, 50% deductible" + UndoShows the honest version of automation: it asks once, and lets her change her mind.
colorizelinear-gradient(90deg, #6366f1, #ec4899); v1 accent #4b3bc4--bg: #f8f7f3; --accent: #1d5a85 (petrol ink); dark --bg: #101417, --surface: #171c20, --accent: #86bde3, with its own segment and warning rampsMoves out of the default indigo family into a ledger-ink colour, and dark mode is designed rather than inverted.
typeset.hero h1 { font-size: 64px; font-weight: 800; } in 16 sizesFraunces Variable (opsz + SOFT 30, italic 460 for the emphasis), --t-h1: clamp(2.375rem, 1.6rem + 2.8vw, 4rem); tabular lining numerals on every amountA warm display face with a real italic gives the page a voice, and the money columns line up.
layout6 × .card { text-align: center; } with emoji icons12-column bento: tax chart 7 cols, bank sync 5, sorting 6, invoices 6; Q4 bar drawn as $2,780 solid + dashed $632 still to set asideRanks features by what Priya cares about and shows each one working.