Stripe Design System Reference

Financial Platform Design

Stripe Design System

Bold, modern, and accessible — the design language that powers global payment infrastructure and financial platforms.

14 Color tokens 8 Type styles 4 Shadow levels 7 Radius tokens Inter Font

Foundation

Color Tokens

The complete color palette from Stripe's design system, including primary brand colors, interactive states, neutrals, and semantic indicators.

Brand Purple

#533AFD

Primary CTA · Links · Focus states

Deep Navy

#0A2540

Primary text · Headings · High contrast

Bright Blue

#0073E6

Secondary interactive · Alternative CTA

Electric Blue

#0000EE

Hover · Active link states

Steel Blue

#425466

Secondary headings · Supporting text

Success Green

#15BE53

Success states · Confirmations

White

#FFFFFF

Primary background · Card surface

Off-White

#F8FAFD

Subtle background tint

Light Blue-Gray

#F6F9FC

Tertiary background · Subtle overlays

Border Gray

#E5EDF5

Borders · Dividers · Subtle separators

Medium Slate

#425466

Secondary body text · Supporting info

Light Slate

#64748D

Disabled text · Low-emphasis labels

Typography

Type Scale

Inter provides a clean, modern foundation for Stripe's interface. Progressive weights create hierarchy from light body copy to bold headings.

Primary Inter UI · Headings · Body · Buttons

Monospace Courier New Code · Token values · Badges

Display Build what matters 48px · 300 · 55.2px

H1 Large The quick brown fox 32px · 700 · normal

H1 Medium The quick brown fox jumps 32px · 300 · 35.2px

H2 Large The quick brown fox jumps over the lazy dog 26px · 500 · 36px

Body Large The quick brown fox jumps over the lazy dog 16px · 300 · normal

Body The quick brown fox jumps over the lazy dog 14px · 300 · 19.6px

Button GET STARTED 14px · 400 · 14px

Code const token = '#533AFD'; 13px · 400 · monospace

Layout

Spacing & Shapes

8px base grid — every spacing token is a multiple of 8. Border radii range from sharp (2px) to pill (9999px) for flexible component styling.

Spacing Scale

4px xs

8px sm

12px sm+

16px md

20px lg

24px xl

32px 2xl

48px 3xl

Border Radius

None 0px

SM 2px

MD 4px

LG 6px

XL 8px

2XL 16.5px

Full 9999px

Shadows

None Flat · no elevation

Level lg Cards · standard elevation

Level md Dropdowns · tooltips

Level xl Modals · overlays

Border Widths

Thin 1px

Opacity

Full 100%

Reduced 85%

Overlay 50%

Z-index / Layering

Base 1–3

Dropdown 99

Sticky 100

Modal 999

Elevation

Depth & Surfaces

Light surfaces with layered shadows create clear spatial hierarchy. Dual-layer shadow composition — color shadow for depth and black shadow for contrast.

Primary Surface

Default background for cards, containers, and main content areas

#FFFFFF

Off-White Surface

Subtle background tint for secondary sections and panels

#F8FAFD

Light Blue-Gray Surface

Tertiary background surface and subtle overlays

#F6F9FC

White #FFFFFF

Off-White #F8FAFD

Light Blue-Gray #F6F9FC

Border Gray #E5EDF5

Components

Component Library

Core interactive elements rendered at their exact design-system specifications — colors, radii, shadows, and states.

Buttons

Interactive triggers — Primary, Secondary, Ghost, Disabled

.btn

Primary: #533AFD bg · #FFFFFF text · 4px radius · 12px/24px padding · 40px height. Secondary: transparent bg · #533AFD border. Ghost: link-style, no border, underline on hover.

Text Input

Form control — Default and Focused states

.input

Default: #FFFFFF bg · #E5EDF5 border · 4px radius · 40px height. Focus: #533AFD border · 3px focus ring rgba(83, 58, 253, 0.1).

Card

Content container — elevated surface with shadow

.card

Repository name

A brief description of this project. It's built for developers and has 12k stars.

#FFFFFF bg · #E5EDF5 border · 8px radius · lg shadow. Title: 14px/600/#0A2540. Body: 14px/300/#425466. CTA: primary purple button.

Badges

Status indicators — Success, Error, Info

.badge

Open Closed Draft

12px/500 · 4/8px padding · 2px radius. Success: #15BE53. Error: #CF222E. Info: #0073E6.

Guidelines

Do's & Don'ts

Principles for consistent application of the Stripe design language across surfaces and contexts.

Do — Embrace

Use purple (#533AFD) for primary CTAs — it's the brand signature
Maintain high contrast — ensure text meets WCAG AA standards
Apply consistent 8px spacing throughout all layouts
Stack shadows for depth — use dual-layer shadows for modals
Leverage typography weights for clear hierarchy

Don't — Avoid

Avoid low contrast combinations — never place light gray on light backgrounds
Don't mix multiple shadow levels — keep elevation consistent
Avoid harsh borders — use #E5EDF5 instead of dark borders
Don't nest more than 2 levels of dropdowns
Avoid placing interactive elements too close together

stripe.com

Preview