← Back to Skills / Marketplace / fintech
SKL · 20PRO

Fintech.

Numbers as first-class citizens. The visual language of Stripe, Wise, and Mercury — where design precision and financial confidence are indistinguishable.

● Live preview · Fintech demo
● This is real CSS, not a screenshot
↗ New tab
01 · The Vibe

Fintech design has one job no other style has: make people feel safe handing over their money. The best fintech interfaces — Stripe, Wise, Revolut — communicate trust, precision, and control all at once. Numbers are always legible. Actions are always confirmed. Nothing surprises you. That feeling of total reliability, built into every pixel, is actually the product.

● Looks Like
StripeWiseRevolutMercuryBrexRampThe financial products people actually trust with real money
02 · Best For / Avoid If
+ Best For
+Payment products and financial platforms
+Banking and money management apps
+Investment and trading interfaces
+Expense tracking and accounting tools
+Any product where users need to feel confident before taking a financial action
+B2B financial infrastructure products
× Avoid If
×Your product has nothing to do with money — this aesthetic says "serious financial product" and creates mismatched expectations
×You need warmth and approachability as primary values — Fintech's precision can feel cold to users who aren't financially confident
×Your audience expects a casual or playful tone
03 · Design Philosophy
01

Numbers are first-class citizens

Every numeric display in a fintech interface is treated like the most important element on screen. Large, legible, precisely formatted — amounts always have the right decimal places, currencies are always labeled, positive and negative values are instantly distinguishable by color and sign. The typography of numbers gets as much thought as the typography of headlines.

02

Trust is built through consistency

Users decide whether to trust a financial product in the first thirty seconds, and they make that call based on whether it feels professionally made. Consistent spacing, consistent component sizing, consistent behavior across all interaction states — these aren't design polish. They're trust signals. Every inconsistency is a small withdrawal from the user's confidence.

03

Confirmation prevents catastrophe

Fintech design builds confirmation and reversibility into the interaction model at the structural level, not as an afterthought. High-stakes actions have confirmation steps. Completed transactions have clear success states with receipt-style summaries. The interface always answers three things: what just happened, can it be undone, and what comes next.

04 · Use With Claude / Cursor
Claude
01Open your Claude project
02Click 'Add files' in the Project Knowledge panel
03Drop in SKILL.md and DESIGN.md
04Start a new chat in the project — Claude follows the spec
Cursor
01Place SKILL.md and DESIGN.md in your repo root
02Open .cursor/rules and add @SKILL.md @DESIGN.md
03Restart Cursor for the rules to apply
04Build normally — Cursor references both files per request
★ PRO TIP

Before building with Claude Code, drop SKILL.md and DESIGN.md into Claude Design first. Use it to generate mockups and nail the visual direction — then hand those references to Claude Code. You'll get significantly higher quality output than going straight to code.

05 · Watch Out For
! WARNING
Low contrast on number displays
Small, low-contrast financial data is the most common and most damaging mistake in fintech UI. Make every number larger than you think it needs to be, and never display an amount in a color with less than 4.5:1 contrast.
! WARNING
Missing confirmation flows
Claude often skips the confirmation and success states when building fintech screens. Ask explicitly for the confirmation step before every destructive action, and a success state after every completed transaction.
! WARNING
Green and red used decoratively
In fintech, green means credited and red means debited. If Claude uses green for a promotional banner, it creates a real conflict with the color that means money moved. Keep these colors functional, not decorative.
! WARNING
Cramming the transaction view
Financial data is complex and the temptation to show everything at once is real. Lead with the most important number — the balance, the amount, the total — and let secondary detail live one tap away.
● 07 · Download

Two files. That's it.

Drop them into your Claude project or Cursor rules and build normally. No CLI, no package manager, no setup.

UNLOCK WITH PRO →