Stripe design system
Stripe's website (stripe.com) uses a light interface with #533afd as its primary color and sohne-var as the main typeface. designlang measured 14 font sizes from 8px to 56px, 13 spacing values, 5 corner radii.
Stripe colors
The brand roles and neutrals stripe.com renders, with how many elements use each one.
Brand colors
- Primary
#533afd899 uses - Secondary
#e5edf557 uses - Accent
#ffe0d12 uses
Neutrals
#0000002,620 uses#50617a330 uses#ffffff181 uses#64748d172 uses#7d8ba414 uses#1010106 uses#f2f7fe1 uses
Backgrounds
#ffffff#e5edf5#f8fafd#0d1738#f2f7fe
Text colors
#00000021:1 on #ffffff#533afd6.19:1 on #ffffff#061b3117.37:1 on #ffffff#ffffff1:1 on #ffffff#64748d4.75:1 on #ffffff#81b81a2.39:1 on #ffffff#000eff8.38:1 on #ffffff#2d256413.46:1 on #ffffff
Contrast checks (WCAG 2.1)
Text and background pairs found together on the page; 79% of them pass.
| Text | Background | Ratio | Result |
|---|---|---|---|
#ffffff | #e3ecf7 | 1.19:1 | Fails AA |
#ffffff | #533afd | 6.19:1 | AA |
#635bff | #ffffff | 4.7:1 | AA |
#533afd | #ffffff | 6.19:1 | AA |
Stripe fonts and type scale
Every font family and size in use, read from computed styles rather than the CSS source.
Font families
- sohne-var: sans, most text (2,408 elements)
Body text: 16px at weight 400, line height normal.
Weights in use: 400, 300, 500.
Type scale
| Size | Weight | Line height | Tracking | Used on |
|---|---|---|---|---|
| 56px | 300 | 57.68px | -1.4px | h2 |
| 48px | 300 | 55.2px | -0.96px | h1, em, span, p |
| 32px | 300 | 35.2px | -0.64px | h2, p, h3, span |
| 26px | 400 | normal | normal | div, h3, span, q |
| 22px | 300 | 24.2px | -0.22px | h3, p |
| 20px | 300 | 28px | -0.2px | p |
| 18px | 300 | 25.2px | normal | p, div, span |
| 16px | 400 | normal | normal | html, head, meta, link |
| 14px | 400 | 14px | normal | button, svg, path, a |
| 12px | 400 | normal | normal | div, span, p |
| 11px | 300 | 16px | normal | div, span |
| 10px | 300 | 15px | 0.1px | div, span |
Spacing and radii
Spacing scale
Corner radii
- 1px
- 4px
- 8px
- 16px
- 100px
Medium radii lead, with a few larger ones. 5 distinct box shadows.
Motion
The motion reads as responsive.
Durations
xs: 100mssm: 200msmd: 300mslg: 500msxl: 800ms
Easing
- custom (53 uses):
cubic-bezier(0.45, 0.05, 0.55, 0.95) - ease-out (549 uses):
cubic-bezier(0.25, 1, 0.5, 1) - ease-in-out (9 uses):
ease - linear (45 uses):
linear - steps (10 uses):
steps(1)
Design system audit
designlang scores how consistently a site uses its own values. How the audit works.
Overall
Components found: buttons (73), cards (245), links (176), navigation (86), footer (124), modals (19).
By category
| Color Discipline | 80/100 |
|---|---|
| Typography Consistency | 92/100 |
| Spacing System | 100/100 |
| Shadow Consistency | 100/100 |
| Border Radius Consistency | 90/100 |
| Accessibility | 79/100 |
| CSS Tokenization | 100/100 |
- 3 WCAG contrast failures
- 52% of CSS is unused — consider purging
- 6133 duplicate CSS declarations
Download the tokens
The files designlang wrote for stripe.com. Run it yourself for a fresh read: npx designlang stripe.com.
The core values as CSS variables
:root {
--color-primary: #533afd;
--color-secondary: #e5edf5;
--color-accent: #ffe0d1;
--color-background: #ffffff;
--color-text: #000000;
--color-neutral-1: #000000;
--color-neutral-2: #50617a;
--color-neutral-3: #ffffff;
--color-neutral-4: #64748d;
--font-primary: "sohne-var", sans-serif;
--radius-sm: 1px;
--radius-md: 4px;
--radius-lg: 8px;
}Read stripe.com yourself
Run the free CLI to get these tokens, plus a Tailwind config, a shadcn theme and rules for Cursor and Claude.
Quick answers
What font does Stripe use?
What are Stripe's brand colors?
How do I use the Stripe design system in my own app?
Is this the official design system?
Measured from the public pages of stripe.com on 21 May 2026. Stripe is a trademark of its owner; designlang is not affiliated with it. More: the full Stripe brand kit, the token extraction guide and the markdown version of this page.