Stripe Design System

# Stripe Design System — Design Style Reference

> **Unofficial, community-authored reference.** Compiled by [designsystems.one](https://www.designsystems.one). Not affiliated with, endorsed by, or sponsored by Stripe. "Stripe Design System" and related marks belong to their respective owners. This document describes publicly observable style attributes in original words — it contains no copied documentation, logos, icon artwork, or original token files. Always defer to the official source for canonical, current values.

**System:** Stripe Design System
**Owner:** Stripe
**Official documentation:** https://docs.stripe.com/stripe-apps/components
**Visual character:** Fintech theater at 60fps: blurple-to-cyan gradients over deep navy, Sohne precision, and the internet's most imitated landing pages.

---

## Summary

Developer-platform design built around money-moving forms.

_Confidence: medium. Most values are publicly documented; a few are best-effort readings of the live product. Stripe's full internal system (Sail) is private; values reflect publicly served surfaces and Stripe Apps guidance._

## Color tokens

| Color | Value | CSS variable | Role |
| --- | --- | --- | --- |
| Blurple | `#635bff` | `--stripe-brand` | Stripe brand and primary actions |
| Dark Navy | `#0a2540` | `--stripe-navy` | Headings and dark surfaces |
| Text | `#425466` | `--stripe-text` | Body text (slate) |
| White | `#ffffff` | `--stripe-white` | Surfaces |
| Light Surface | `#f6f9fc` | `--stripe-light` | Section backgrounds |
| Border | `#e6ebf1` | `--stripe-border` | Hairlines |
| Cyan Accent | `#00d4ff` | `--stripe-cyan` | Gradient accent |
| Success Green | `#24b47e` | `--stripe-success` | Success |
| Error Red | `#cd3d64` | `--stripe-error` | Errors |

## Typography

- **Body:** Sohne (custom) — weights 400, 425, 500 — `'sohne-var', 'Helvetica Neue', Arial, sans-serif`
- **Mono:** Sohne Mono — weights 400 — `'sohne-mono', Menlo, Consolas, monospace`

## Type scale

| Step | Size | Line height |
| --- | --- | --- |
| display | `56px` | `64px` |
| heading-1 | `34px` | `44px` |
| heading-2 | `24px` | `32px` |
| body | `15px` | `24px` |
| small | `13px` | `20px` |

## Spacing

Base unit: `4px`

Scale: `4px` · `8px` · `12px` · `16px` · `24px` · `32px` · `48px` · `64px`

## Corner radius

| Name | Value |
| --- | --- |
| small | `4px` |
| medium | `8px` |
| large | `16px` |
| pill | `9999px` |

## Elevation / shadows

| Name | Value |
| --- | --- |
| card | `0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3)` |
| popover | `0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3)` |

## Motion

| Name | Value |
| --- | --- |
| default | `150ms cubic-bezier(0.215, 0.61, 0.355, 1)` |

## Quick start (CSS)

```css
/* Stripe Design System — illustrative tokens, restated as CSS custom properties.
   Unofficial reference by designsystems.one; values are indicative, not
   canonical. Official reference: https://docs.stripe.com/stripe-apps/components */

:root {
  /* Color */
  --stripe-brand: #635bff; /* Stripe brand and primary actions */
  --stripe-navy: #0a2540; /* Headings and dark surfaces */
  --stripe-text: #425466; /* Body text (slate) */
  --stripe-white: #ffffff; /* Surfaces */
  --stripe-light: #f6f9fc; /* Section backgrounds */
  --stripe-border: #e6ebf1; /* Hairlines */
  --stripe-cyan: #00d4ff; /* Gradient accent */
  --stripe-success: #24b47e; /* Success */
  --stripe-error: #cd3d64; /* Errors */

  /* Typography */
  --font-body: 'sohne-var', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'sohne-mono', Menlo, Consolas, monospace;

  /* Type scale */
  --text-display: 56px /* line-height 64px */;
  --text-heading-1: 34px /* line-height 44px */;
  --text-heading-2: 24px /* line-height 32px */;
  --text-body: 15px /* line-height 24px */;
  --text-small: 13px /* line-height 20px */;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-small: 4px;
  --radius-medium: 8px;
  --radius-large: 16px;
  --radius-pill: 9999px;

  /* Elevation */
  --shadow-card: 0 2px 5px -1px rgba(50,50,93,0.25), 0 1px 3px -1px rgba(0,0,0,0.3);
  --shadow-popover: 0 13px 27px -5px rgba(50,50,93,0.25), 0 8px 16px -8px rgba(0,0,0,0.3);

  /* Motion */
  --motion-default: 150ms cubic-bezier(0.215, 0.61, 0.355, 1);
}
```

## Origin

Stripe's public design surface evolved alongside the Dashboard, Stripe Apps, and the Stripe Docs experience. The publicly-documented component library appeared with Stripe Apps in 2022, codifying patterns Stripe had been refining internally for years on high-stakes financial flows.

## Governance

A central design org owns the system; component changes ship through internal review with versioned releases for Stripe Apps. The Dashboard's own design system is internal, but its patterns inform what's published — and what's not.

## Known for

- Form patterns engineered for money-moving — inline validation, confirmation states, and irreversible-action affordances done unusually well.
- Documentation as a design surface — Stripe Docs is itself a reference example of long-form developer UX.
- Tableau-class data tables tuned for financial reconciliation, with sticky columns, async filters, and exportable views.

## Underrated

- The empty- and error-state catalog is among the most thorough in fintech — every flow assumes payments can fail.
- Stripe's typography stack (Sohne for product, source-serif for content) is documented with restraint rules most systems skip.

## Watch out for

- The Stripe Apps component library is intentionally constrained — it's a sandbox API, not a general-purpose UI kit.
- Patterns assume Stripe-flavored business logic (money, ledgers, refunds). Lifting them whole into adjacent products imports those assumptions.

## Components worth studying

- **AmountInput** — Currency-aware input with locale formatting and decimal-place enforcement.
- **DataTable (Dashboard)** — Sticky-column financial table with async filters, presets, and exportable views.
- **ConfirmDialog** — Reference irreversible-action confirmation — typed confirmation, delay, and consequence preview.

## When to choose Stripe Design System

Study Stripe's system if you're building fintech, billing, or any product where forms move real money. Don't expect a public component library to drop into your project — the reference is the published patterns and the Stripe Apps subset.

## Apply this style with an AI tool

Paste this into your AI coding assistant as a direction, then iterate:

> Design in the spirit of Stripe Design System by Stripe — Developer-platform design built around money-moving forms. Character: Fintech theater at 60fps: blurple-to-cyan gradients over deep navy, Sohne precision, and the internet's most imitated landing pages. Use a primary colour near #635bff, the typeface "Sohne (custom)" (or a close equivalent), corner radius around 4px, a spacing rhythm on a 4px base. Lean into what it's known for: Form patterns engineered for money-moving — inline validation, confirmation states, and irreversible-action affordances done unusually well. Match the intent, not the pixels; adapt it to my product rather than cloning it.

## Official references

- [Stripe Apps components](https://docs.stripe.com/stripe-apps/components)
- [Stripe Press — design](https://stripe.com/press)
- [Stripe Docs (as a reference)](https://docs.stripe.com/)

---

_Generated by [designsystems.one](https://www.designsystems.one/design-systems/stripe-design) — a catalogue of public design systems. Style facts are reported for reference and education; adapt them to your own product. Report issues or takedown requests via the site._