Design system
web
v1.0.0
90/100

Stripe Fintech UI Kit

@dante · Fintech & Crypto

Payment-infrastructure design system with signature purple-to-magenta gradients, weight-300 sohne-style headlines, blue-tinted layered shadows, and tabular-numeral metrics.

HTML/CSS
React
shadcn/ui
Tailwind
#developer
#fintech
#gradient
#marketing
Stripe Fintech UI Kit
Downloads4
Download package
DESIGN.mdSKILL.md

Overview

Stripe Fintech UI

Visual Theme

Stripe's design language is fintech recast as a luxury type foundry: a clean white canvas, deep-navy headings (#061b31), and a saturated #533afd purple that anchors every interactive surface. The voice is technical and warm at once — confident enough to use weight-300 for hero headlines while a competitor would reach for 700.

Typography

The signature is sohne-var running at weight 300 with the OpenType ss01 stylistic set globally enabled. Display sizes (48–56px) use aggressive negative tracking (-1.4px at 56px, -0.96px at 48px) so headlines compress into engineered blocks. Body text stays at 300/400 with normal tracking. Tabular numerals (tnum) are mandatory in any financial context — pricing tables, metrics, dashboards — so digits align like a well-organized spreadsheet. Source Code Pro is the monospace companion at 12px / line-height 2.0 for code blocks and technical labels.

Color

Primary purple (#533afd) carries every CTA and link, with #4434d4 for hover and #b9b9f9 for soft borders and disabled tints. Headings render in deep navy (#061b31), labels in #273951, body in slate #64748d. Dark brand sections use indigo #1c1e54, never pure black. Ruby (#ea2261) and magenta (#f96bee) are decorative-only — gradients and hero halos — and never appear on buttons or links.

Elevation

The shadow system is the most copied — and most copied-poorly — element of Stripe. The signature is a two-layer formula: a far blue-tinted layer (rgba(50,50,93,0.25) 0px 30px 45px -30px) plus a near neutral layer (rgba(0,0,0,0.1) 0px 18px 36px -18px). Together they produce a parallax depth that feels chromatic, not just deep.

Layout

Max content width sits around 1080px. Hero sections are centered single-column; feature sections grid into 2–3 columns. White and dark-brand sections alternate to create rhythm. Border-radius stays conservatively in the 4–8px band — no pills, no harsh edges. Spacing is dense at the small end (every 2px from 4–12) reflecting precision-oriented financial UI.

Code-as-Hero

Stripe's most distinctive hero pattern is a code sample on a purple-to-magenta gradient panel. Treat code blocks as marketing surfaces, not afterthoughts: gradient background, traffic-light dots, monochrome syntax highlighting in white/lavender/magenta, and the elevated shadow.

Preview

Open in new tab ↗

Derived view rendered server-side from package tokens and components — no authored copy.

Colors (20)

stripePurple
#533afd
purpleHover
#4434d4
purpleDeep
#2e2b8c
purpleMid
#665efd
purpleLight
#b9b9f9
borderSoftPurple
#d6d9fc
borderDashedPurple
#362baa
deepNavy
#061b31
darkNavy
#0d253d
brandDark
#1c1e54
white
#ffffff
labelSlate
#273951
bodySlate
#64748d
borderDefault
#e5edf5
ruby
#ea2261
magenta
#f96bee
magentaLight
#ffd7ef
successGreen
#15be53
successText
#108c3d
lemon
#9b6829

Typography (3)

display
sohne-var, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
body
sohne-var, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234
mono
'Source Code Pro', SFMono-Regular, Menlo, Consolas, ui-monospace, monospace
  • 48pxThe quick brown fox jumps over the lazy dog 1234
  • 32pxThe quick brown fox jumps over the lazy dog 1234
  • 24pxThe quick brown fox jumps over the lazy dog 1234
  • 18pxThe quick brown fox jumps over the lazy dog 1234
  • 14pxThe quick brown fox jumps over the lazy dog 1234
  • 12pxThe quick brown fox jumps over the lazy dog 1234

Components (13)

Button

Primary purple CTA, ghost outline, and disabled neutral. Conservative 4px radius.

html
Hand-tuned CSS
1 props · 6 states · 10 tags · 2 sources

Input

Form input with deep-navy text, slate label, and purple focus ring.

html
Hand-tuned CSS
2 props · 5 states · 6 tags · 2 sources

Card

White card with soft border and signature blue-tinted layered shadow.

html
Hand-tuned CSS
1 props · 2 states · 5 tags · 2 sources
Missing states: focus-visible, disabled

Badge

Compact pill with neutral, success, and magenta variants.

html
Hand-tuned CSS
1 props · 1 states · 8 tags · 2 sources
Missing states: hover, focus-visible, disabled

Heading

Display, section, and sub headings — weight 300 with negative tracking.

html
Hand-tuned CSS
1 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Link

Purple inline link with underline-on-hover.

html
Hand-tuned CSS
0 props · 4 states · 3 tags · 2 sources
Missing states: disabled

Hero

Centered headline + body + dual CTA with ruby-to-magenta gradient halo.

html
Hand-tuned CSS
0 props · 1 states · 7 tags · 2 sources
Missing states: hover, focus-visible, disabled

Nav

Sticky white nav with backdrop blur, 14px links, purple CTA.

html
Hand-tuned CSS
0 props · 3 states · 6 tags · 2 sources
Missing states: disabled

Footer

Brand-dark footer with white text and purple link hover.

html
Hand-tuned CSS
0 props · 1 states · 6 tags · 2 sources
Missing states: hover, focus-visible, disabled

Stat

Tabular-numeral stat block for trust bars and KPIs.

html
Hand-tuned CSS
0 props · 1 states · 5 tags · 2 sources
Missing states: hover, focus-visible, disabled

PaymentField

Stripe-style card-number / expiry / CVC composite field with brand chip.

html
Hand-tuned CSS
0 props · 3 states · 7 tags · 2 sources
Missing states: hover, disabled

CodeBlock

Stripe's signature gradient-panel hero code sample, SourceCodePro at 12/2.0.

html
Hand-tuned CSS
1 props · 1 states · 10 tags · 2 sources
Missing states: hover, focus-visible, disabled

MetricsCard

Dashboard preview card with tabular metric, sparkline, success badge.

html
Hand-tuned CSS
0 props · 1 states · 8 tags · 2 sources
Missing states: hover, focus-visible, disabled

DESIGN.md

Stripe Fintech UI

Visual Theme

Stripe's design language is fintech recast as a luxury type foundry: a clean white canvas, deep-navy headings (#061b31), and a saturated #533afd purple that anchors every interactive surface. The voice is technical and warm at once — confident enough to use weight-300 for hero headlines while a competitor would reach for 700.

Typography

The signature is sohne-var running at weight 300 with the OpenType ss01 stylistic set globally enabled. Display sizes (48–56px) use aggressive negative tracking (-1.4px at 56px, -0.96px at 48px) so headlines compress into engineered blocks. Body text stays at 300/400 with normal tracking. Tabular numerals (tnum) are mandatory in any financial context — pricing tables, metrics, dashboards — so digits align like a well-organized spreadsheet. Source Code Pro is the monospace companion at 12px / line-height 2.0 for code blocks and technical labels.

Color

Primary purple (#533afd) carries every CTA and link, with #4434d4 for hover and #b9b9f9 for soft borders and disabled tints. Headings render in deep navy (#061b31), labels in #273951, body in slate #64748d. Dark brand sections use indigo #1c1e54, never pure black. Ruby (#ea2261) and magenta (#f96bee) are decorative-only — gradients and hero halos — and never appear on buttons or links.

Elevation

The shadow system is the most copied — and most copied-poorly — element of Stripe. The signature is a two-layer formula: a far blue-tinted layer (rgba(50,50,93,0.25) 0px 30px 45px -30px) plus a near neutral layer (rgba(0,0,0,0.1) 0px 18px 36px -18px). Together they produce a parallax depth that feels chromatic, not just deep.

Layout

Max content width sits around 1080px. Hero sections are centered single-column; feature sections grid into 2–3 columns. White and dark-brand sections alternate to create rhythm. Border-radius stays conservatively in the 4–8px band — no pills, no harsh edges. Spacing is dense at the small end (every 2px from 4–12) reflecting precision-oriented financial UI.

Code-as-Hero

Stripe's most distinctive hero pattern is a code sample on a purple-to-magenta gradient panel. Treat code blocks as marketing surfaces, not afterthoughts: gradient background, traffic-light dots, monochrome syntax highlighting in white/lavender/magenta, and the elevated shadow.

Adapters (6)

  • adapters/tokens.css

    text/css

    Download
  • adapters/shadcn-registry.json

    application/json

    Download
  • adapters/tailwind.config.js

    text/javascript

    Download
  • adapters/react/index.ts

    text/typescript

    Download
  • adapters/html/index.html

    text/html

    Download
  • adapters/html/styles.css

    text/css

    Download

All files (11)

  • DESIGN.mdtext/markdown
  • SKILL.mdtext/markdown
  • tokens/colors.jsonapplication/json
  • tokens/typography.jsonapplication/json
  • tokens/components.jsonapplication/json
  • adapters/tokens.csstext/css
  • adapters/shadcn-registry.jsonapplication/json
  • adapters/tailwind.config.jstext/javascript
  • adapters/react/index.tstext/typescript
  • adapters/html/index.htmltext/html
  • adapters/html/styles.csstext/css

Versions