Stripe
The reference point for fintech marketing design — white canvas with deep navy ink, a violet-blurple action color, and light-weight Söhne typography at editorial scale. Brand voltage comes from the famous animated gradient hero (pink/orange/yellow/violet stops), diagonally skewed section seams, and real product UI screenshots framed inside the marketing flow. Buttons are compact pills; everything else is rectangles with restrained 6–16px radii. The system reads as precision infrastructure with one expressive, painterly surface at the top of the page.
Works with
Claude Code·Cursor·Codex·Gemini CLI·Copilot·v0·Lovable·Bolt·Windsurf·Replit
Color Palette
Accent
Neutrals
Typography
display-hero
64px · 300 · 1.04
The quick brown fox jumps
heading-xxl
34px · 300 · 1.03
The quick brown fox jumps
heading-xl
28px · 300 · 1.07
The quick brown fox jumps
heading-lg
22px · 300 · 1.2
The quick brown fox jumps
heading-md
20px · 300 · 1.2
The quick brown fox jumps
heading-sm
18px · 300 · 1.25
The quick brown fox jumps
body-lg
18px · 300 · 1.4
The quick brown fox jumps
body-md
16px · 300 · 1.4
The quick brown fox jumps
body-sm
14px · 300 · 1.4
The quick brown fox jumps
quote
18px · 300 · 1.4
The quick brown fox jumps
caption
12px · 400 · 1.35
The quick brown fox jumps
code
14px · 400 · 1.5
The quick brown fox jumps
button
15px · 425 · 1
The quick brown fox jumps
nav-link
15px · 425 · 1.4
The quick brown fox jumps
Spacing & Shape
Spacing
| Name | Value | Preview |
|---|---|---|
| xs | 8px | |
| sm | 16px | |
| md | 24px | |
| lg | 32px | |
| xl | 40px | |
| xxl | 48px | |
| section-sm | 56px | |
| section | 64px | |
| section-lg | 96px |
Border Radius
| Name | Value | Preview |
|---|---|---|
| xs | 2px | |
| sm | 4px | |
| md | 6px | |
| lg | 16px | |
| xl | 32px | |
| pill | 99999px | |
| full | 99999px |
FAQ
- What colors does Stripe use?
- Stripe's core palette includes #533afd, #4032c8, #e8e9ff, #f5f5ff, #061b31. The full color set with usage roles (canvas, ink, surfaces, accent, semantic) is documented in the Stripe DESIGN.md.
- What font does Stripe use?
- Stripe's primary typeface is sohne-var. The complete type scale (sizes, weights, line-height and letter-spacing per role), with an open substitute where the original is licensed, is documented in the DESIGN.md.
- What is the Stripe design system?
- The reference point for fintech marketing design — white canvas with deep navy ink, a violet-blurple action color, and light-weight Söhne typography at editorial scale. Brand voltage comes from the f…