Design System

Financial
infrastructure
for the internet.

Sophisticated gradients, developer-first precision. A light canvas with bold purple accents, vivid status colors, and generous whitespace.

18 color tokens 12 type steps 4px grid 4 surface levels
Download Spec theme.css tokens.json variables.css
Foundation

Color Tokens

Light neutral canvas with a bold purple primary, vivid status colors, and sophisticated gradients. 18 tokens across surfaces, text, interaction, and decoration.

White
#ffffff
Page background, cards
Snow
#f6f9fc
Secondary sections
Mist
#e3e8ee
Borders, dividers
Iron
#c1c9d2
Placeholder, disabled
Slate
#697386
Secondary text
Storm
#425466
Body text
Midnight
#0a2540
Headings, nav
Stripe Purple
#635bff
Primary brand, CTA
Purple Light
#7a73ff
Hover states
Purple Dark
#4b45c6
Pressed states
Purple Wash
#f0eeff
Highlights, selected
Mint
#00d4aa
Success states
Coral
#ff5a5f
Error states
Amber
#ffbb00
Warning states
Cyan
#80e9ff
Info accents

Gradients

gradient-hero
Hero backgrounds, feature banners
gradient-purple
Button hovers, card accents
gradient-warm
Status banners, attention surfaces
gradient-subtle
Subtle section differentiation
Typography

Type Scale

Inter as primary typeface (substitute for Stripe Font). Geometric precision with tight letter-spacing for a modern, technical voice.

Display-xl Financial infrastructure 56px / 1.0 / −0.02em
Display-lg Build faster 48px / 1.1 / −0.02em
Display Scale with confidence 40px / 1.15 / −0.02em
Heading Section heading 24px / 1.33 / −0.015em
Heading-sm Subsection heading 20px / 1.4 / −0.015em
Body Default body text for readable content 15px / 1.6 / —
Body-sm Dense data, comparison rows 14px / 1.5 / —
Caption Meta info · Footer · Labels 12px / 1.5 / 0.02px

Fonts

Primary Inter 400–700 · 12–56px
Mono JetBrains Mono 400–500 · Code, API keys
Brand Stripe Font Proprietary · Inter substitute
Layout

Spacing & Shapes

Base unit 4px. Comfortable density with generous whitespace. 16-step spacing scale, 8 border radius values.

Spacing Scale (4px base)

44px
88px
1616px
2424px
4040px
6464px
9696px
160160px

Border Radius

sm 4px
default 6px
md 8px
lg 12px
xl 16px
pill 9999px

Shadows

Card subtle layer
Elevated dropdowns
Modal overlays
Focus inputs
Elevation

Surfaces

Layered whites with subtle shadows. 4 distinct surface levels using border and shadow rather than color shifts.

White #ffffff
Snow #f6f9fc
Card shadow layer
Purple Wash #f0eeff
Components

Button Variants

Primary (Stripe Purple), secondary (outlined), and ghost variants. Clean hierarchy with precise padding and radius.

Primary Button (Filled)
Main call to action — highest visual weight
.btn-primary
Stripe Purple (#635bff) background, White text, 6px radius. Hover darkens to Purple Dark (#4b45c6). Use exclusively for the single most important action.
Secondary Button (Outlined)
Secondary interactive actions
.btn-secondary
Storm (#425466) text, Mist border, White background. Hover adds Snow background and Storm border. For less prominent actions.
Ghost Button
Tertiary actions, inline links
.btn-ghost
Stripe Purple text, purple border, transparent background. Hover adds Purple Wash background. For inline actions and navigation.
Badge
Status indicators, labels
.badge
New Active Error Warning
Pill-shaped (9999px radius), 12px font weight 600, color-coded for status. Purple for brand, Mint for success, Coral for error, Amber for warning.
Input Field
Text inputs, form controls
input
White background, 6px radius, Mist border. Focus state uses Stripe Purple border with a subtle purple ring shadow.
Code Block
Code snippets, API examples
.code-block
const stripe = require('stripe')('sk_test_...');
Snow background, 8px radius, Mist border, 16px padding. Stripe Mono at 14px. Keywords in purple, strings in mint.
Guidelines

Do's & Don'ts

Do — Embrace
  • White (#ffffff) as primary page background
  • Stripe Purple (#635bff) for CTAs and active states
  • Storm (#425466) for body text on white
  • Midnight (#0a2540) for headings and nav
  • 8px radius for cards, 6px for buttons
  • 4px-based spacing with generous whitespace
  • Hero gradient on large surfaces only
  • JetBrains Mono for all code content
Don't — Avoid
  • Dark backgrounds for primary content
  • Stripe Purple for body text or large blocks
  • Hard-coded hex values outside the palette
  • Generic system fonts — always Inter
  • Heavy drop shadows — keep elevation subtle
  • Dense packing without breathing room
  • Hero gradient on small elements (buttons)
  • Mono fonts for prose or non-code content