Stripe

Stripe

Payments infrastructure

Payments and billing infrastructure for the internet, long treated as a reference point for confident, restrained SaaS marketing design.

stripe.com

Color palette

Accent

Primary#533afd

Primary brand color — key actions and emphasis.

Primary Deep#4434d4

Accent color used within the product's own UI.

Primary Press#2e2b8c

Pressed or hover state of its base color.

Primary Soft#665efd

Accent color used within the product's own UI.

Primary Bg Subdued Hover#b9b9f9

Pressed or hover state of its base color.

Brand Dark 900#1c1e54

Accent color used within the product's own UI.

Ruby#ea2261

Accent color used within the product's own UI.

Magenta#f96bee

Accent color used within the product's own UI.

Lemon#9b6829

Accent color used within the product's own UI.

Shadow Blue#003770

Accent color used within the product's own UI.

Neutral

Ink#0d253d

Primary text color.

Ink Secondary#273951

Secondary supporting color.

Ink Mute#64748d

Primary text color.

Ink Mute 2#61718a

Primary text color.

On Primary#ffffff

Text and icon color on a solid primary fill.

Canvas#ffffff

Page background.

Canvas Soft#f6f9fc

Page background.

Canvas Cream#f5e9d4

Page background.

Hairline#e3e8ee

Borders and dividers.

Hairline Input#a8c3de

Borders and dividers.

Type scale

Display Xxl
56px · 300 · 1.03
Display Xl
48px · 300 · 1.15
Display Lg
32px · 300 · 1.1
Display Md
26px · 300 · 1.12
Heading Lg
22px · 300 · 1.1
Heading Md
20px · 300 · 1.4
Heading Sm
18px · 300 · 1.4
Body Lg
16px · 300 · 1.4
Button Md
16px · 400 · 1
Body Md
15px · 300 · 1.4
Body Tabular
14px · 300 · 1.4
Button Sm
14px · 400 · 1
Caption
13px · 400 · 1.4
Micro
11px · 300 · 1.4
Micro Cap
10px · 400 · 1.15

Fonts

Primarysohne-varWeights 300, 400Fallback: SF Pro Display, system-ui, -apple-system, sans-serif

Spacing & shape

Xxs
2px
Xs
4px
Sm
8px
Md
12px
Lg
16px
Xl
24px
Xxl
32px
Huge
64px
Xs
4px
Sm
6px
Md
8px
Lg
12px
Xl
16px
Pill
9999px

Guidelines

  • Reserve Primary for primary actions and emphasis — it is the system's one accent color.
  • Keep type on the documented family set (sohne-var).
  • Use one of the documented corner radii (4px, 6px, 8px, 12px, 16px, 9999px) rather than a one-off value.
  • Build spacing from the documented scale (2px, 4px, 8px, 12px, 16px, 24px, 32px, 64px) instead of arbitrary padding.
  • Don't apply Primary as a full-page background or a large fill.
  • Don't introduce a second accent color alongside Primary.
  • Don't mix in an additional typeface beyond the ones documented here.