Explorer
KNOW-PAT-167

SaaS Finance — Patterns UI/UX pour fintech et finance

Domaine
web-uiux
Type
pattern
Priorité
P2

Parent : [[INDEX-WEB-UIUX]]

SaaS Finance — Patterns UI/UX pour fintech et finance

Patterns observés sur les sites de fintech, banques, crypto, trading, et gestion financière. Extrait du corpus Godly (73 sites classifiés).

Quand utiliser cette fiche

  • L'utilisateur demande un site dans le domaine : saas-finance
  • Mots-clés détectés : saas, fintech, finance, dashboard, crypto, ui-patterns

Références visuelles (top sites)

Site URL Views
Superpower https://superpower.com 60 876
Diagram https://diagram.com 43 750
Notion https://notion.so 43 119
Limitless https://limitless.ai 39 750
SuperHi https://superhi.com 38 034
Cosmos https://cosmos.so 37 807
Phantom https://phantom.app 36 948
Atlas https://atlascard.com 36 815
Family https://family.co 36 353
Acctual https://acctual.com 34 327
Stripe Sessions https://stripe.com/sessions 29 728
Vercel Ship https://vercel.com/ship 28 929
Pipe https://pipe.com 23 974
Resend https://resend.com 21 233
Wise Design https://wise.design 20 135

Patterns observés (scraping de 21 sites)

Layout

  • Hero section : 86% des sites
  • CTA visible : 71% des sites
  • Grid layout : 62% des sites
  • Dark mode : 29% des sites
  • Sections moyennes : 7.0 par page

Typographie

  • Fonts body : Nb international pro webfont (1x), NotionInter (1x), __greycliff_d64c0a (1x), __haasGrotText_7ea857 (1x), cosmosOracle (1x)
  • Fonts headings : sohne-var (81x), Monument Grotesk (77x), NotionInter (13x), Family (13x), aBCFavorit (12x)

Couleurs dominantes

  • Backgrounds : rgb(255, 255, 255) (6x), rgb(0, 0, 0) (6x), rgb(25, 25, 24) (1x), lab(100 0 0) (1x), rgb(247, 250, 252) (1x)
  • Texte : rgb(0, 0, 0) (5x), rgb(255, 255, 255) (3x), rgb(24, 24, 27) (1x), rgba(0, 0, 0, 0.95) (1x), rgb(17, 17, 24) (1x)
  • Boutons (bg) : rgb(255, 255, 255) (8x), rgb(0, 0, 0) (3x), rgba(255, 255, 255, 0.1) (1x), rgb(17, 17, 17) (1x), rgba(20, 20, 20, 0.5) (1x)

Composants récurrents

  • Hero avec titre principal + sous-titre
  • Section features / bénéfices
  • Témoignages / social proof
  • Pricing / CTA final
  • Footer avec liens et newsletter

Animations

  • Hover effects sur boutons et liens
  • Scroll-triggered reveals
  • Parallax et micro-interactions
  • Transitions fluides entre sections

Anti-patterns à éviter

  • Ne pas copier un design sans adapter au contexte client.
  • Éviter les layouts surchargés qui nuisent à la lisibilité.
  • Toujours tester le responsive.

Méthode d'extraction