Feature cards: white, radius 6, soft colored shadow, light navy headings
⤢ Monetise through agentic commerce Let agents transact on your behalf with programmable payments.
Payments ⤢ Create a card issuing programme Launch physical and virtual cards with fine-grained controls.
Issuing ⤢ Borderless money movement Move funds globally with stablecoins and local rails.
Global
Product mockup: checkout card floating on the Stripe gradient
Pay Roastery
US$5.46
Email jane.diaz@stripe.com
Card information 4242 4242 4242 4242
Mocha Latte US$5.50
Loyalty (10% off) −US$0.55
Tax US$0.51
Total US$5.46
Pay US$5.46
Controls: every variant with hover and disabled, rendered statically
Docs outline small · default Docs outline small · hover Docs outline small · disabled
Input: white, 1px blue-gray border, radius 4, blurple focus ring
Card information
4242 4242 4242 4242
default · border #e5edf5
Card information
4242 4242 4242 4242
focus · blurple border + soft blurple ring
Tags and chips: pill 999px, the only pill radius in the system
New · Billing
Issuing
Docs
Beta
Typography: Söhne / SF Pro, large display is LIGHT (weight 300), tightly tracked
Hero h1 · Söhne / SF Pro Display · 47/54 · 300 · -0.94px Grow your revenue
Section h2 · Söhne / SF Pro Display · 32/35 · 300 · -0.64px Flexible solutions
Subhead · Söhne / SF Pro · 21/30 · 400 · -0.2px Accept payments online and in person
Body · Söhne / SF Pro · 16/26 · 400 · 0 Body text at 16px, slate #50617a on white, navy #0a2540 for emphasis.
UI / nav · Söhne / SF Pro · 14/20 · 400-500 · 0 Products · Solutions · Developers
Caption · Söhne / SF Pro · 13/18 · 400 · 0 Pay Roastery · receipt sent to jane.diaz@stripe.com
Palette: navy ink ladder plus a single blurple accent, warm hues live only in gradients
Text: ink and navy ladder
ink #0a2540
ink-nav #061b31
navy-700 #1a2c44
navy-600 #273951
navy-500 #3c4f69
slate-500 #50617a
slate-400 #64748d
Surfaces and borders
white #ffffff
surface-50 #f8fafd
surface-100 #f6f9fc
blue-gray #e5edf5
peach-tint #ffe0d1
Accent and gradient stops (no semantic status tokens were captured)
blurple #533afd
blurple-lite #7f7dfc
lavender-100 #e8e9ff
lavender-200 #e2e4ff
border-lavender #d6d9fc
orange #ff6118
cyan #00d4ff
Depth and motion: small crisp radii, soft colored shadows, never hard borders
4px · buttons, inputs
6px · cards, panels
12px · product mockup card
16px · gradient stage
999px · tags only
card rest 0 3px 6px rgba(23,23,23,.06)
card raised 0 16px 32px rgba(50,50,93,.12)
hero float 0 50px 100px -20px rgba(50,50,93,.25), 0 30px 60px -30px rgba(0,0,0,.3)
Motion: 0.3s cubic-bezier is the default tier (color, fill, stroke, opacity, transform), 0.15s linear for quick fades, 0.8s cubic-bezier for large transforms. Hover means button lift, shadow bloom and link underline on the 0.3s tier; the hero gradient mesh drifts slowly via the Web Animations API. Nothing abrupt.