디자인 시스템
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
다운로드4
패키지 JSON 다운로드
DESIGN.mdSKILL.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.

프리뷰

새 창으로 열기 ↗

패키지 안의 토큰·컴포넌트 정의로부터 순수하게 합성된 파생 뷰입니다 (편집 콘텐츠 없음).

색상 (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

타이포그래피 (3)

display
sohne-var, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
body
sohne-var, 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
mono
'Source Code Pro', SFMono-Regular, Menlo, Consolas, ui-monospace, monospace
  • 48px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 32px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 24px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 18px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 14px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234
  • 12px다람쥐 헌 쳇바퀴에 타고파 The quick brown fox 1234

컴포넌트 (13)

Button

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

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

Input

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

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

Card

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

html
Hand-tuned CSS
1 props · 2 states · 5 tags · 2 소스
누락 상태: focus-visible, disabled

Badge

Compact pill with neutral, success, and magenta variants.

html
Hand-tuned CSS
1 props · 1 states · 8 tags · 2 소스
누락 상태: 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 소스
누락 상태: hover, focus-visible, disabled

Link

Purple inline link with underline-on-hover.

html
Hand-tuned CSS
0 props · 4 states · 3 tags · 2 소스
누락 상태: disabled

Hero

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

html
Hand-tuned CSS
0 props · 1 states · 7 tags · 2 소스
누락 상태: 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 소스
누락 상태: disabled

Footer

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

html
Hand-tuned CSS
0 props · 1 states · 6 tags · 2 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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 소스
누락 상태: 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.

어댑터 (6)

전체 파일 (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

버전