Skip to main content
Back to Examples

Stripe

Add this design system to use its color palette, typography, spacing & other tokens while creating your own designs.

Payments infrastructure. Ice-white canvas, signature violet, sweeping aurora gradients and pill buttons.

16
core colors
1
typefaces
34
tokens
Now playing — motion preview
01

Palette

primary
#533AFD
on-primary
#FFFFFF
primary-soft
#E2E4FF
primary-border
#D6D9FC
accent-green
#81B81A
surface
#FFFFFF
surface-tint
#F6F9FC
surface-panel
#E3E8EE
on-surface
#061B31
on-surface-body
#64748D
on-surface-muted
#7D8BA4
ink
#000000
hairline
RGBA(6,27,49,0.08)
error
#DF1B41
success
#3FA45B
gradient-flow
LINEAR-GRADIENT(110DEG, #60A5FA 0%, #A78BFA 28%, #F472B6 52%, #FB7185 70%, #FB923C 100%)
02

Typography

displayThe quick brown fox jumps"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif
47px
headline-lgThe quick brown fox jumps"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif
32px
headline-mdThe quick brown fox jumps"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif
22px
leadThe quick brown fox jumps"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif
32px
body-lgThe quick brown fox jumps"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif
18px
body-mdThe quick brown fox jumps"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif
16px
labelThe quick brown fox jumps"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif
14px
03

Spacing & Shape

TokenValuePreview
xs4px
sm8px
md16px
lg24px
xl32px
2xl48px
3xl64px
4xl96px
04

Border Radius

TokenValuePreview
sm4px
md6px
lg8px
05

design.md

design.mdreadable by AI agents
tokens (raw)
name: stripe-design
version: alpha
description: >
  Stripe's canvas is clean white with a deep midnight-navy ink (#061b31) for headings and a
  muted slate (#64748d) for body — a calm, high-legibility developer-grade base. The single
  brand voltage is an electric indigo "blurple" (#533afd) reserved for primary CTAs, links,
  and accent glyphs. The signature, unmistakable move is the **fluid animated gradient mesh**
  (orange → pink → magenta → violet → blue) that sweeps diagonally behind the hero and bleeds
  off-canvas, plus **two-tone headlines** where the second clause flips to a lime green
  (#81b81a). Type is the proprietary Söhne grotesk run at a *light* weight (300) on big
  display, which gives Stripe its airy, precise, editorial-technical feel. Geometry is tight:
  4px buttons, 6–8px cards, 1px hairline grids. Restrained, fast, infrastructure-grade.
colors:
  # Brand
  primary: '#533afd'          # Stripe indigo/blurple — CTAs, links, accent icons
  on-primary: '#ffffff'
  primary-soft: '#e2e4ff'     # tinted button fill / hover surface
  primary-border: '#d6d9fc'   # outline-button border
  accent-green: '#81b81a'     # two-tone headline second clause
  # Surface (light)
  surface: '#ffffff'          # page canvas, cards
  surface-tint: '#f6f9fc'     # pale blue-grey section band
  surface-panel: '#e3e8ee'    # placeholder/inset card panel
  # Text
  on-surface: '#061b31'       # headings — midnight navy (classic Stripe "dark")
  on-surface-body: '#64748d'  # body / lead copy — muted slate
  on-surface-muted: '#7d8ba4' # captions / stat sublabels
  ink: '#000000'              # plain body default
  # Hairlines
  hairline: 'rgba(6,27,49,0.08)'
  # Semantic
  error: '#df1b41'
  success: '#3fa45b'
  # Signature gradient (animated mesh)
  gradient-flow: 'linear-gradient(110deg, #60a5fa 0%, #a78bfa 28%, #f472b6 52%, #fb7185 70%, #fb923c 100%)'
typography:
  display:
    fontFamily: '"sohne-var", "SF Pro Display", -apple-system, system-ui, sans-serif'
    fontSize: 47px            # hero h1 (clamped ~47–94px)
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.94px
  headline-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 32px            # section intro h2
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.64px
  headline-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 22px            # card titles h3
    fontWeight: 300
    lineHeight: 1.12
    letterSpacing: -0.22px
  lead:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 32px            # intro lead paragraph (muted slate)
    fontWeight: 300
    lineHeight: 1.1
    letterSpacing: -0.64px
  body-lg:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 16px            # standard body / CTA labels
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  label:
    fontFamily: '{typography.display.fontFamily}'
    fontSize: 14px            # nav, small buttons
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0
rounded:
  sm: 4px      # buttons (--buttonBorderRadius)
  md: 6px      # nav menu items / small panels
  lg: 8px      # cards / feature tiles
spacing:        # base unit 8px
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
components:
  button-primary:                  # "Start now" / "Request an invite"
    backgroundColor: '{colors.primary}'
    textColor: '{colors.on-primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '15.5px 24px 16.5px'
    fontWeight: '500'
  button-outline:                  # "Contact sales"
    backgroundColor: 'transparent'
    textColor: '{colors.primary}'
    borderColor: '{colors.primary-border}'
    borderWidth: '1px'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '14.5px 24px 15.5px'
  button-soft:                     # "Read the story" tinted pill
    backgroundColor: '{colors.primary-soft}'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    rounded: '{rounded.sm}'
    padding: '14.5px 24px 15.5px'
  link-chevron:                    # "Watch now ›" inline text link
    backgroundColor: 'transparent'
    textColor: '{colors.primary}'
    typography: '{typography.body-md}'
    fontWeight: '500'
  nav-item:
    backgroundColor: 'transparent'
    textColor: '{colors.on-surface}'
    typography: '{typography.label}'
    rounded: '{rounded.md}'
    padding: '10px 16px'
  card:
    backgroundColor: '{colors.surface}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    rounded: '{rounded.lg}'
    textColor: '{colors.on-surface}'
  card-tint:                       # blue-grey feature tile
    backgroundColor: '{colors.surface-panel}'
    rounded: '{rounded.lg}'
    textColor: '{colors.on-surface}'
  icon-chip:                       # 40px rounded square holding an accent glyph
    backgroundColor: '{colors.surface}'
    borderColor: '{colors.hairline}'
    borderWidth: '1px'
    rounded: '{rounded.md}'
    iconColor: '{colors.primary}'
motion:
  easing-standard: 'cubic-bezier(0.16, 0.68, 0.43, 0.99)'
  duration-standard: 250ms
  gradient-animation: 'continuous slow mesh drift'
icons:
  style: outline
  stroke: 1.5px
  sizes: { sm: 16px, md: 20px, lg: 24px }
  color: '{colors.primary}'

Stripe

stripe-design · alpha

Overview

Stripe runs a white canvas with a midnight-navy ink (#061b31) for headings and a muted slate (#64748d) for body and lead copy — a calm, developer-grade base built for legibility. Its one brand voltage is an electric indigo "blurple" (#533afd) held for primary CTAs, links, and accent glyphs. Two visual signatures define the brand: the fluid animated gradient mesh (orange → pink → magenta → violet → blue) that sweeps diagonally behind the hero and bleeds off the right edge, and the two-tone headline where the opening clause is navy and the continuation flips to a lime green (#81b81a) — a literal "code-comment" device that's pure Stripe. Type is the proprietary Söhne grotesk, run at a light weight (300) on display sizes with tight negative tracking, producing Stripe's airy, precise, editorial-technical voice. Geometry is restrained: 4px buttons, 6–8px cards, and faint 1px hairline grids that organize big feature matrices. The system reads as financial infrastructure: quiet, exact, fast, with one loud gradient as the brand's release valve.

Colors

Brand — primary #533afd is the Stripe indigo (the classic "blurple"; the current site runs a slightly deeper #533afd vs. the historical #635bff). It powers primary buttons, every link, and accent icons. Tints: primary-soft #e2e4ff for tinted/hover button fills and primary-border #d6d9fc for outline-button borders. accent-green #81b81a is used only for the second clause of two-tone headlines.

Surface — canvas surface #fff; calm sections drop to surface-tint #f6f9fc (the classic pale Stripe blue-grey); feature tiles and placeholders use surface-panel #e3e8ee.

Text — headings on-surface #061b31 (midnight navy), body and the oversized lead paragraphs in on-surface-body #64748d (muted slate), captions/stat sublabels in on-surface-muted #7d8ba4. Note the lead paragraph is set at the same 32px size as the section H2 but in slate — a deliberate "the sentence keeps going, quieter" device.

Hairlines — hairline rgba(6,27,49,0.08) draws card borders and the section grid lines.

Signature gradient — gradient-flow, an animated multi-stop mesh, is Stripe's most recognizable asset; it appears behind the hero and as ambient color washes under stat bands. It is never used as a text fill or a button color.

Typography

Family: Söhne (sohne-var), falling back to "SF Pro Display", -apple-system, system-ui, sans-serif. Closest open-source substitutes: Inter, Geist, or Hanken Grotesk — but Söhne's defining trait here is the light 300 weight on display sizes, so reproduce the lightness, not just the family. Display sizes carry tight negative tracking (−0.94px at 47px). Body and CTA labels step up to 400. The hero scales fluidly (≈47 → 94px).

TokenSizeWeightLine-heightTrackingUsage
display47–94px3001.15−0.94pxHero (two-tone navy + green)
headline-lg32px3001.1−0.64pxSection intro H2
headline-md22px3001.12−0.22pxCard / feature titles
lead32px3001.1−0.64pxLead paragraph (muted slate)
body-lg18px4001.50Lead body copy
body-md16px4001.50Standard body / CTA labels
label14px4001.00Nav items, small buttons

Layout

Base unit 8px; scale 4 / 8 / 16 / 24 / 32 / 48 / 64 / 96. The dominant primitive is the hairline feature grid: large bordered tiles (1px hairline, 8px radius) arranged in 2- and 3-up matrices, each with a title top-left and an expand glyph top-right. Above them sit two-column intro blocks (a left headline, a right slate paragraph). The hero is asymmetric — left-aligned copy + CTA, with the gradient occupying the right ~45% and bleeding past the viewport. A trusted-logo strip (OpenAI, Amazon, NVIDIA…) sits directly under the hero. Content caps around 1080px gutter-to-gutter. Whitespace is generous and even.

Elevation & Depth

Essentially flat. Stripe separates content with 1px hairlines and tint fills, not shadows — cards and feature tiles have borders, not drop shadows. The only "depth" is the soft, luminous gradient mesh, which reads as light rather than elevation. No glows on controls, no layered card shadows.

Shapes

Tight, technical radii: 4px for all buttons, 6px for nav menu items and small icon chips, 8px for cards and feature tiles. There are no pills and no large friendly radii — the geometry is precise and engineered, matching the developer-tool positioning.

Components

  • button-primary — indigo #533afd fill, white text, 4px radius, ~16/24px padding ("Start now", "Request an invite").
  • button-outline — transparent, indigo text, 1px #d6d9fc border, 4px ("Contact sales").
  • button-soft — pale-indigo #e2e4ff fill, indigo text ("Read the story" variants).
  • link-chevron — inline indigo text link with a trailing › ("Watch now ›", "Read the guide ›").
  • nav-item — transparent, navy text, 6px radius, 10×16px hover padding.
  • card / card-tint — white or #e3e8ee feature tiles, 1px hairline, 8px radius, expand glyph in the corner.
  • icon-chip — 40px rounded-square (6px) holding a 20px outline glyph in indigo.

Motion

Transitions are quick and eased (~250ms, custom ease). The hallmark is the continuously drifting gradient mesh — a slow, looping color flow behind the hero that never fully settles. Otherwise motion is minimal and functional: hover tints on buttons, chevron nudges on links, expand affordances on tiles. No bounce, no parallax beyond the gradient.

Iconography

Outline icons, ~1.5px stroke, 16/20/24px, drawn in indigo #533afd and seated in 6px rounded-square chips with a hairline border. Product/customer marks (Hertz, URBN, Instacart, Le Monde) appear as small solid logo squares. Icons never carry the gradient or the green accent.

Do's and Don'ts

  • Do keep the canvas white with navy #061b31 headings and slate #64748d body.
  • Do reserve indigo #533afd for CTAs, links, and accent glyphs — one primary action per block.
  • Do set big display type in Söhne light (300) with tight negative tracking.
  • Do use the two-tone headline (navy clause → green #81b81a clause) as the signature device.
  • Do confine the gradient mesh to hero/ambient backgrounds; let it bleed off-canvas.
  • Do separate content with 1px hairlines and tint fills, not shadows.
  • Don't render buttons as pills or add large radii — keep 4px corners.
  • Don't use the gradient as a text fill or button color.
  • Don't bold the display type — the lightness is the brand.
  • Don't introduce a dark app canvas; the marketing surface is light.

Known Gaps

  • Stripe renders client-side with no exposed :root brand tokens, so values above are from computed styles of representative elements plus Stripe's known palette. The measured indigo is #533afd (vs. the historical #635bff); semantic error/success and the exact gradient stops are approximations of the animated mesh. Söhne is proprietary — substitute a light-weight grotesk and preserve weight 300 on display.