# Stripe

> `stripe@1.0.0`

Stripe is a financial-infrastructure platform for the internet — payments, billing, treasury, identity, and capital APIs used by millions of businesses worldwide. The brand voice is engineer- facing, plain-spoken, and unusually polished for the fintech category. Visually, Stripe is anchored on a single signature Stripe Purple (#635BFF) against deep-navy Slate text, near-white Fog canvases, and the brand's characteristic light-source gradient surfaces. Typography is Söhne (Klim Type Foundry), used across stripe.com and Stripe Press as the proprietary brand face.


**Tags:** `stripe`, `fintech`, `payments`, `developer-tools`, `brand`

## Atoms

### Palette

**Stripe** · `stripe@1.0.0` · Proprietary — All Rights Reserved

> Stripe's brand palette as observed on the live marketing site (stripe.com) and the Stripe Press / newsroom surfaces. Anchored on the signature Stripe Purple (#635BFF) against a deep-navy "Slate" text color and a near-white page canvas with subtle fog-blue tints. The palette is light-first; dark surfaces are used sparingly for headers and high-contrast modules. Functional accents (success-green, orange, magenta, pink) appear in Stripe's gradient surfaces and product illustrations and are preserved here as a documented secondary scale. 

### Fonts

| Role | Font | License | Classification |
|------|------|---------|----------------|
| `heading` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `body` | **Inter** `(inter@1.0.0)` | OFL-1.1 | sans-serif |
| `mono` | **JetBrainsMono Nerd Font** `(jetbrainsmono-nerdfont@1.0.0)` | OFL-1.1 | monospace |

## Swatches

| ID | Name | Value |
|----|------|-------|
| `stripe-purple` | Stripe Purple | `#635BFF` |
| `stripe-purple-pressed` | Stripe Purple Pressed | `#533AFD` |
| `stripe-purple-soft` | Stripe Purple Soft | `#E8E9FF` |
| `stripe-slate-100` | Stripe Slate 100 | `#061B31` |
| `stripe-slate-90` | Stripe Slate 90 | `#0A2540` |
| `stripe-slate-70` | Stripe Slate 70 | `#3C4F69` |
| `stripe-slate-50` | Stripe Slate 50 | `#425466` |
| `stripe-slate-30` | Stripe Slate 30 | `#667691` |
| `stripe-white` | Stripe White | `#FFFFFF` |
| `stripe-fog-0` | Stripe Fog 0 (canvas) | `#F6F9FC` |
| `stripe-fog-1` | Stripe Fog 1 | `#E5EDF5` |
| `stripe-fog-2` | Stripe Fog 2 | `#CFD7DF` |
| `stripe-green` | Stripe Green | `#2CA25E` |
| `stripe-orange` | Stripe Orange | `#E17A38` |
| `stripe-magenta` | Stripe Magenta | `#F44BCC` |
| `stripe-pink` | Stripe Pink | `#FF5996` |
| `stripe-red` | Stripe Red | `#EA2261` |

## Mode role mappings

### Light mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `stripe-fog-0` | `#F6F9FC` |
| `surface` | `stripe-white` | `#FFFFFF` |
| `surface-elevated` | `stripe-white` | `#FFFFFF` |
| `text-primary` | `stripe-slate-90` | `#0A2540` |
| `text-secondary` | `stripe-slate-50` | `#425466` |
| `text-tertiary` | `stripe-slate-30` | `#667691` |
| `primary` | `stripe-purple` | `#635BFF` |
| `primary-hover` | `stripe-purple-pressed` | `#533AFD` |
| `accent` | `stripe-purple` | `#635BFF` |
| `accent-hover` | `stripe-purple-pressed` | `#533AFD` |
| `warning` | `stripe-orange` | `#E17A38` |
| `warning-hover` | `stripe-orange` | `#E17A38` |
| `error` | `stripe-red` | `#EA2261` |
| `success` | `stripe-green` | `#2CA25E` |
| `border` | `stripe-fog-2` | `#CFD7DF` |

### Dark mode

| Role | Swatch | Hex |
|------|--------|-----|
| `background` | `stripe-slate-100` | `#061B31` |
| `surface` | `stripe-slate-90` | `#0A2540` |
| `surface-elevated` | `stripe-slate-70` | `#3C4F69` |
| `text-primary` | `stripe-white` | `#FFFFFF` |
| `text-secondary` | `stripe-fog-1` | `#E5EDF5` |
| `text-tertiary` | `stripe-slate-30` | `#667691` |
| `primary` | `stripe-purple` | `#635BFF` |
| `primary-hover` | `stripe-purple-soft` | `#E8E9FF` |
| `accent` | `stripe-purple` | `#635BFF` |
| `accent-hover` | `stripe-purple-soft` | `#E8E9FF` |
| `warning` | `stripe-orange` | `#E17A38` |
| `warning-hover` | `stripe-orange` | `#E17A38` |
| `error` | `stripe-pink` | `#FF5996` |
| `success` | `stripe-green` | `#2CA25E` |
| `border` | `stripe-slate-70` | `#3C4F69` |

## Brand semantic roles

### Colors

| Role | Swatch | Hex |
|------|--------|-----|
| `primary` | `stripe-purple` | `#635BFF` |
| `primary-hover` | `stripe-purple-pressed` | `#533AFD` |
| `accent` | `stripe-purple` | `#635BFF` |
| `accent-hover` | `stripe-purple-pressed` | `#533AFD` |
| `success` | `stripe-green` | `#2CA25E` |
| `warning` | `stripe-orange` | `#E17A38` |
| `error` | `stripe-red` | `#EA2261` |
| `text-primary-light` | `stripe-slate-90` | `#0A2540` |
| `text-primary-dark` | `stripe-white` | `#FFFFFF` |
| `background-light` | `stripe-fog-0` | `#F6F9FC` |
| `background-dark` | `stripe-slate-100` | `#061B31` |
| `surface-light` | `stripe-white` | `#FFFFFF` |
| `surface-dark` | `stripe-slate-90` | `#0A2540` |

### Typography

| Role | Font role key |
|------|---------------|
| `display` | `heading` |
| `prose` | `body` |
| `code` | `mono` |

## Rules

### 🛑 error (5)

#### `contrastRatio` → `text-primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Stripe Slate 90 (#0A2540) on Fog 0 (#F6F9FC) is ~14:1; well above AA. White on Slate 100 (#061B31) is ~15:1. Both directions clear AA with substantial margin. 

#### `colorChoice` → `roles.colors.primary`

- **allowed:** stripe-purple, stripe-purple-pressed
- **forbidden:** stripe-purple-soft, stripe-magenta, stripe-pink

> Stripe Purple (#635BFF) is the signature brand color and the only token that may carry "primary action" semantics. stripe-purple-soft is a tinted-background variant; magenta and pink appear in illustration gradients only and must not be used as primary buttons or links. 

#### `forbiddenTreatment` → `logo`

- **treatments:** stretched, rotated, recolored, drop-shadow, outlined, on-busy-photo

> Stripe's Marks Usage Agreement forbids modifying or altering the Stripe word mark "in any way" and prohibits use that implies endorsement. Apply the official monochrome variants on appropriate light/dark surfaces; do not derive new treatments. 

#### `contextRestriction` → `roles.colors.accent`

- **forbiddenContexts:** error-state, destructive-action

> Stripe Purple is the brand identity color, not an alert color. Destructive states use stripe-red; warnings use stripe-orange. Reusing the brand purple for destruction breaks the established semantic mapping. 

#### `contrastRatio` → `roles.colors.primary`

- **against:** `background`
- **minRatio:** `4.5`
- **standard:** `WCAG-AA`

> Stripe Purple (#635BFF) on Fog 0 reaches ~4.6:1 — at the AA threshold for normal text. Buttons using the purple as a fill with white text exceed 6:1; this rule guards link usage so the brand interactive color stays AA-compliant against the canvas. 

### ⚠️ warning (1)

#### `enumMembership` → `typography.heading.fontWeight`

- **allowed:** 400, 500, 600

> Stripe's marketing surfaces use Söhne Book / Regular (400), Medium (500), and Semibold (600). Heavier weights appear in brand wordmarks only, not in body or display headings. 

### 💡 recommendation (1)

#### `compositionConstraint` → `roles.colors.primary`

- **pairsWith:** stripe-white, stripe-fog-0, stripe-slate-100
- **doesNotPairWith:** stripe-magenta, stripe-pink

> The brand pairs purple with neutrals (white, fog, slate). Magenta and pink are reserved for illustration / gradient surfaces and clash with the purple in adjacent UI placements. 

## Provenance

- **Source:** <https://stripe.com/newsroom/brand-assets>
- **License:** `Proprietary — All Rights Reserved`
- **Attribution:** Stripe, Inc. — visual identity captured from the deployed stylesheet on stripe.com and the Stripe Newsroom brand assets page. All Stripe marks, logos, and brand elements are subject to Stripe's Marks Usage Agreement at stripe.com/marks/legal. 
- **Imported:** `2026-05-17`
- **Notes:** Stripe's brand font is Söhne (sohne-var on stripe.com), licensed from Klim Type Foundry — not "Stripe Sans" as sometimes reported by third-party trackers. Söhne is a commercial proprietary face; this atom references Inter@1 as the open-source rendering substitute and notes the proprietary primary in this provenance block. 

---

*Generated by the brand-atoms converter. Source: `stripe@1.0.0` from the encyclopedia.*