DESIGN.md — Stripe

Overview

Stripe's design system centers around trust, clarity, and developer sophistication. The visual language uses a rich navy-to-white palette accented by signature violet, conveying both authority and modernity. Typography is set in Inter for its clean geometry and excellent readability at all sizes.

Colors

Primary Palette

Token	Hex	Usage
color-brand	#635BFF	Primary CTA, links, active states
color-ink	#0A2540	Headings, primary text
color-success	#00D4AA	Success states, positive indicators
color-surface	#FFFFFF	Card backgrounds, primary surface
color-muted	#425466	Secondary text, descriptions

Neutral Palette

Token	Hex	Usage
color-gray-50	#F6F9FC	Page background
color-gray-100	#E3E8EE	Borders, dividers
color-gray-200	#C1C9D2	Disabled states
color-gray-700	#425466	Body text
color-gray-900	#0A2540	Headings

Semantic Colors

Token	Hex	Usage
color-error	#DF1B41	Error messages, destructive actions
color-warning	#F5A623	Warning alerts
color-info	#635BFF	Informational badges

Typography

Role	Family	Size	Weight	Line Height
Display	Inter	56px	700	1.1
Heading 1	Inter	40px	700	1.2
Heading 2	Inter	28px	600	1.3
Heading 3	Inter	20px	600	1.4
Body	Inter	16px	400	1.6
Body Small	Inter	14px	400	1.5
Caption	Inter	12px	500	1.4
Code	JetBrains Mono	14px	400	1.6

Spacing

Token	Value	Usage
space-1	4px	Inline icon gaps
space-2	8px	Tight element spacing
space-3	12px	Form field gaps
space-4	16px	Card padding, section gaps
space-6	24px	Component spacing
space-8	32px	Section padding
space-12	48px	Large section gaps
space-16	64px	Page section spacing

Border Radius

Token	Value	Context
radius-sm	4px	Badges, tags
radius-md	8px	Buttons, inputs
radius-lg	12px	Cards, modals
radius-xl	16px	Hero sections
radius-full	9999px	Avatars, pills

Elevation

Level	Value	Usage
shadow-sm	0 1px 2px rgba(0,0,0,0.05)	Cards at rest
shadow-md	0 4px 12px rgba(0,0,0,0.08)	Dropdowns, popovers
shadow-lg	0 12px 40px rgba(0,0,0,0.12)	Modals, overlays

Components

Button

• Primary: Background #635BFF, text white, radius 8px, padding 12px 20px
• Secondary: Background transparent, border #E3E8EE, text #0A2540
• Ghost: No background or border, text #635BFF
• States: Hover darkens 10%, focus ring 2px offset, disabled 40% opacity

Input

• Border #E3E8EE, radius 8px, padding 10px 12px
• Focus: border #635BFF, ring rgba(99,91,255,0.15)
• Error: border #DF1B41

Card

• Background white, border #E3E8EE, radius 12px
• Padding 24px, shadow-sm on hover

Navigation

• Sticky header, backdrop blur, height 64px
• Logo left, nav links center, CTA right
• Active link: text #635BFF, underline 2px

Do's and Don'ts

Do

• Use the brand violet sparingly for primary actions only
• Maintain generous whitespace between sections
• Use Inter at 400/500/600/700 weights for hierarchy
• Keep code examples in JetBrains Mono

Don't

• Don't use more than 2 accent colors on a single page
• Don't reduce body text below 14px
• Don't use shadows heavier than shadow-md on cards
• Don't place violet text on dark backgrounds without sufficient contrast

Assets

• Logo: Wordmark in #635BFF on light, white on dark
• Favicon: 32x32 stripe "S" mark
• Font CDN: https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700