Design System
Stripe logo

Stripe

Stripe builds economic infrastructure for internet businesses, from payments to broader business-management software. Its official newsroom frames that mission around increasing the GDP of the internet, while the current public Docs surfaces turn the same infrastructure stance into an information-dense, quiet interface. The supplied capture covers Docs home, Payments documentation, and API reference—not the marketing home, Dashboard, or checkout. Across those public documentation routes, a restrained blue-gray text hierarchy sits on white and faintly cool surfaces, with purple/indigo used for links and API-reference accents. The visual character is therefore best described as product documentation chrome: readable, compact, and deliberately non-promotional. Stripe’s official operating principles add the relevant brand context—users first, craft and beauty, urgency and focus, and careful foundations—but they do not authorize treating marketing art direction as a Docs token.

01

Color Palette

Accent

Neutrals

02

Typography

Type Scale

Verified size, weight, line-height, and tracking. Family is omitted when unresolved.

32px32px · 700 · 1.25
Observed Docs h1 only; not a complete display scale
body14px · 400 · 1.43
Repeated public Docs text; operating-system stack, not a named Stripe UI family
14px14px · 400 · 1.43
Public Docs prompt, action, input, and tab samples
03

Spacing & Shape

Spacing

PurposeValuePreview
xs4px
sm6px
md8px
lg12px
xl16px
xxl24px

Border Radius

ElementValuePreview
lgStructured token8px
mdStructured token6px
smStructured token4px
04

Guidelines

Do and Don't guidelines parsed from DESIGN.md.

Do

  • Keep the captured Docs hierarchy compact: 14px public text/control samples and a 32px API h1 sample.
  • Use #5469d4 for the observed Docs prompt/link treatment and reserve #533afd for the captured API-reference accent context.
  • Preserve selector/surface boundaries when using the 8px compact actions or zero-radius content tabs.
  • Treat Söhne, Source Code Pro, and declared CJK faces according to their evidence class rather than loading a substitute.

Don't

  • n't apply a marketing purple, gradient, shadow, font, or button treatment to Docs merely because it is associated with Stripe elsewhere.
  • n't claim menu, dialog, toast, error, disabled, or authenticated Dashboard states from this zero-interaction packet.
  • n't render the operating-system stack as though it were a named Stripe typeface.
  • n't turn a low-confidence generic card/badge detection into a reusable component token.
05

Components

Tabs

TabTabTab
docs-content-tab
Text#414552
Radius0px
Padding0px
Font14px/400 operating-system stack
statesselected; static aria-tab capture on Docs home and payments

Buttons

docs-search-prompt
Background#ffffff
Text#5469d4
Radius8px
Padding2px 8px
Font14px/400 operating-system stack
Hover#273951 text with #95a4ba border
Focuscaptured without a distinct computed value
pressed#f4f7fa background with #3c4f69 text and #d4dee9 border
statesfocus, hover, pressed; home and payments only
docs-secondary-action
Background#ffffff
Text#50617a
Border0px #d4dee9
Radius8px
Padding6px 12px
Text style14px/400/20px operating-system stack
Hover#273951 text with #95a4ba border
Focus#f4f7fa background with #50617a text
pressed#f4f7fa background with #3c4f69 text
statesfocus, hover, pressed; home and payments only