Typography
scale ratio 1.196- Söhnecss: sohne-vardisplay + body300 40099%
- Source Code Procss: SourceCodePromono500 7001%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Söhne | 56px | 300 | 1.03 | -0.025em |
| headline | Söhne | 32px | 300 | 1.1 | -0.02em |
| title | Söhne | 26px | 300 | 1.12 | -0.01em |
| body | Söhne | 16px | 300 | 1.4 | 0em |
| body-sm | Söhne | 11px | 300 | 1.455 | 0em |
| mono | Source Code Pro | 12px | 500 | 2 | 0em |
Type scale
Aa8Aa9Aa10Aa11Aa12Aa14Aa16Aa18Aa20Aa22Aa26Aa32Aa48Aa56
- Body size
- 16px / 1.4
- Display size
- 56px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.37:1
- Muted on bg
- 6.30:1
- Accent on bg
- 6.19:1
- Dark mode
- none
Declared accent tokens
- --hds-color-accent-charm-bg#533AFDpainted
- --hds-color-input-bg-accent#533AFDpainted
- --hds-color-accent-icon-solid#533AFDpainted
- --hds-color-accent-surface-solid#533AFDpainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 10
- 11
- 12
- 14
- 16
- 20
- 24
- 32
- 40
- 64
Corner radii
46pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 127px
Components
exact computed valuesbutton-primary
Contact sales
- backgroundColor
- #533AFD
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 11.5px 20px
- height
- 40px
- fontFamily
- Söhne
- fontSize
- 14px
- fontWeight
- 400
button-secondary
Sign up with Google
- textColor
- #533AFD
- rounded
- 4px
- padding
- 14.5px 24px
- height
- 48px
- fontFamily
- Söhne
- fontSize
- 16px
- fontWeight
- 400
- border
- 1px solid #B9B9F9
card
- rounded
- 6px
- padding
- 0px
- backgroundColor
- #E5EDF5
Layout & motion
- Container
- 1266px
- Grid columns
- 4
- Hero
- left-over-media+media-below
- Navigation
- top-static+transparent
- Page height
- 14,649px
- Easing
- cubic-bezier(0.25, 1, 0.5, 1)
- Durations
- 240ms 300ms 500ms 800ms
- Transitions
- 407
- Keyframes
- 2
- Stack
- next.js
Page sections (13)
section labels are heuristic
01nav
03logos?
04feature detail?The backbone of global commerce
05feature detail?Transform your enterprise with agile financial infrastructure
06logosLe Monde improves local and international payments with Stripe.
07feature detail?Build a foundation for your startup that enables faster growth
08logos?
09feature detail?Make your SaaS platform a complete financial operating system
10logos
11code sample?Reliable, extensible infrastructure for every stack.
12features?What's happening
13footer
How Stripe compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.20×: flatter than 83% of indexed sites (median 1.28×).
- Container
- 1266px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 17.4:1: lower than 53% of indexed sites (median 17.6:1).
- Page length
- 14,649px: longer than 91% of indexed sites (median 8,217px).
- Corner radius
- Mostly 4px, shared by 24 of 274 indexed sites (9%).
- Söhne
- One of 4 indexed sites that load Söhne (1%).
- Source Code Pro
- One of 4 indexed sites that load Source Code Pro (1%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Stripe use?
Stripe uses Söhne (loaded as "sohne-var") for headings and body text. Source Code Pro (loaded as "SourceCodePro") is used for code.
What are Stripe's brand colors?
Stripe's website uses a light scheme: background #FFFFFF, surface #E5EDF5, text #061B31, muted text #50617A and borders #E5EDF5.
How is Stripe's website laid out?
The most common corner radius is 4px, body text is 16px with 1.4 line height, and the page container is 1266px wide.
