Fintech app design
Trust through restraint. The accent is reserved for money in motion; calm reads as careful.
- Typeface ·
- Restrained neo-grotesque, low contrast (Inter, IBM Plex Sans, Söhne)
- Hero ·
- 36–48px
- Body ·
- 15–16px
- Numerals ·
- Tabular lining — mandatory; pick a font with disambiguated 0/O & 1/l
Soft (8–12px) — approachable but composed
Pick one and apply it to every card, button, input, and modal. Mixing sharp and round corners is the #1 tell of un-designed UI.
Maximum restraint — accent only for CTAs, positive trend, active balance. Green/red for up/down, never decoration.
Medium-low. One number dominates each card. Whitespace signals care.
Numbers first — hero balance 48px with 24px unit (2:1). Currency and dates recede.
Spring (confident Toss bounce on CTAs) or Silk for balances. Never bouncy on real money changing.
Balance hero, transaction list with status dot, KPI with trend, period toggle, spend donut.
Avoid in fintech & banking
- rainbow palettes
- gradients on amounts
- fake precision ($8,400.0000)
- floating shadows
- motion that delays seeing a balance
Build it with StyleSeed
StyleSeed bakes this judgment into 74 rules your AI reads automatically. For fintech & banking, start from the Toss / Stripe skin and the spring motion seed.