Fintech design systems

Design systems extracted from fintech and finance websites: payments, banking, investing, crypto and billing products. Trust is the brief, so expect careful color use, clear number typography, and forms and buttons designed to feel safe to press.

3 DESIGN.md examples in this category, from Klarna, PayPal and Stripe. Extracted from each site’s public pages, not official brand guidelines. New to the format? Read what a DESIGN.md is.

Klarna website preview
Finance & Fintech

Klarna

Klarna's design system features a sophisticated dark navy primary color (#0b051d) with bright accent colors including their signature pink (#ffa8cd). The system uses custom Klarna fonts alongside system fonts, emphasizes rounded corners (32px being most common), and maintains high contrast for accessibility. The design balances professionalism with approachability through generous spacing and clear typography hierarchy.

PayPal website preview
Finance & Fintech

PayPal

PayPal's Dutch homepage uses a bold, consumer-facing design anchored by a vivid sky-blue (#60cdff) hero section with ultra-heavy black display typography (PayPal Pro w900). The navigation is white with black text and two distinct CTA buttons — an outlined "Inloggen" and a filled black "Rekening openen". A dark navy announcement banner sits at the top. The overall language is high-contrast, pill-radius-heavy, and brand-typeface-driven, projecting trust and accessibility for a broad consumer finance audience.

Stripe website preview
Finance & Fintech

Stripe

Stripe's marketing homepage uses a tightly controlled design system (HDS — Stripe Design System) built around the variable font "sohne-var" at light weights (300–400), a deep navy-to-indigo brand palette anchored by #533afd (Stripe Indigo), and a signature full-bleed spectral gradient hero. Components are low-radius (4–6px), flat-to-minimal-shadow, and structured around an 8px base spacing grid. The overall tone is authoritative yet approachable — financial infrastructure communicated through confident typography and restrained color use.

Try it yourself

Don’t see the site you need?

Paste any URL to get a DESIGN.md from any website. Colors, typography, spacing, and tokens, ready for your AI workflow.