# Stripe Design System

> A brutalist, wireframe-inspired technical canvas relying on structural grid lines, stark monochrome contrast, and extreme typographic scale.

**Source:** https://stripe.dev | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
Stripe.dev operates as a stark, technical blueprint. The system is strictly monochrome, utilizing a light gray background (`#e9e9e9`) and near-black ink (`#1e1e1e`) for almost all text, borders, and UI elements. Depth is entirely flattened; there are no shadows, only 1px borders that form a visible structural grid. Typography drives the visual hierarchy, pairing massive, tightly tracked Söhne Light (weight 300) for display with Söhne Mono for technical metadata and captions. The aesthetic mimics a terminal or CAD interface, prioritizing raw information density over decorative polish.

## Signature DNA
1. **Extreme Typographic Contrast** (Display text hits 144px at weight 300 with aggressive -10.06px tracking, contrasting sharply with 12px monospace smallcaps for metadata; observed on all pages).
2. **Exposed Structural Grid** (1px `#1e1e1e` borders define layout boundaries rather than whitespace or elevation; observed on all pages).
3. **Absolute Monochrome** (The absence of semantic or accent colors in the primary UI forces reliance on scale, borders, and monospace badges for hierarchy; observed on all pages).

## Family Map
Not applicable (single-brand topology).

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--fontColorStatic` | `#1e1e1e` | Primary text, borders, icons, button backgrounds | 687 | 1.0 | css_variable |
| `--backgroundColor` | `#e9e9e9` | Page background, surface background | 16 | 1.0 | computed_style |
| `--buttonColor` | `#000000` | Button text, high-contrast text | 44 | 0.8 | computed_style |
| `--inactiveColor` | `#8d8d8d` | Inactive elements | 0 | 0.0 | css_variable |
| `--windowFrameBG` | `#dcdcdc` | Window frame backgrounds | 0 | 0.0 | css_variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--highlightColor` | `#c4e817` | Highlight accent | 0 | 0.0 | css_variable |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| `sohne-var` | 300, 400, 500 | Display, heading, body | Inter | Commercial |
| `sohne-mono` | 100, 300, 400 | Metadata, captions, code | JetBrains Mono | Commercial |
| `Arial` | 400 | Fallback body-sm | Helvetica | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 144px | 120.75px | -10.0625px | 300 | Hero | `span.Hero-module__JgYmMq__title.text-hero` |
| `display-lg` | 101px | 84.9116px | -6.06512px | 300 | Section Title | `h2.SectionTitle-module__Svbyca__title` |
| `display-mono` | 43px | 39.6615px | normal | 100 | 404 Code | `code.FourOhFour-module__jl9knW__fof` |
| `heading` | 32px | 31.5124px | -1.2605px | 300 | Highlight | `span.FeaturedPost-module__8Dh16G__highlight` |
| `heading-sm` | 26px | 30.9px | -1.03px | 300 | Feed Title | `div.text-md.FeedListItem-module__AJ8gka__title` |
| `body-lg` | 19px | 19.4932px | -0.584797px | 300 | Body Highlight | `span.FeaturedPost-module__8Dh16G__bodyHighlight` |
| `body` | 16px | normal | normal | 400 | Nav | `nav.Nav-module__bLoQaq__nav` |
| `caption-mono` | 12px | normal | -0.144px | 300 | Table Header | `div.TableHeader-module__qdaoaq__label.text-smallcaps` |

### Principles
1. **Display weights are strictly 300.** Söhne Light is the editorial signature. Never bold display copy.
2. **Aggressive negative tracking on display.** Söhne pulls -10.06px tighter on massive display sizes.
3. **Monospace for structure.** Söhne Mono is used extensively for structural labels, tags, and metadata (12px smallcaps).

## Spacing
**Base unit:** custom

| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 1px | 39 |
| `space-2` | 2px | 73 |
| `space-3` | 3px | 57 |
| `space-5` | 5px | 81 |
| `space-8` | 8px | 32 |
| `space-10` | 10px | 33 |
| `space-12` | 12px | 56 |
| `space-20` | 20px | 5 |
| `space-50` | 50px | 3 |
| `space-160` | 160px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Structural grid, flat surfaces | 479 occurrences |
| `radius-sm` | 2px | Cards, inputs | 28 occurrences |
| `radius-md` | 3px | Surface badges | 57 occurrences |
| `radius-lg` | 20px | Large buttons | 5 occurrences |
| `radius-pill` | 99px | Standard buttons, panels | 13 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | none | All surfaces, cards, buttons | 0 shadows captured in source |

## Components

### Tier 1: Foundational

#### Primary Button (Pill)
**Role:** Standard CTA.
**Pages observed:** https://stripe.dev, https://stripe.dev/pricing, https://stripe.dev/about
**Spec:** Background transparent / Text `#1e1e1e` / Border `#1e1e1e` 1px / Radius 99px / Padding 6px 12px 8px / Typography 14px / Shadow none
**States observed:** Default | Disabled: not captured

#### Large Button
**Role:** Prominent actions.
**Pages observed:** https://stripe.dev, https://stripe.dev/pricing, https://stripe.dev/about
**Spec:** Background transparent / Text `#1e1e1e` / Border `#1e1e1e` 1px / Radius 20px / Padding 10px 20px 12px / Typography 24px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 2: Patterns

#### Subtle Card
**Role:** Feed items, content blocks.
**Pages observed:** https://stripe.dev, https://stripe.dev/pricing, https://stripe.dev/about
**Spec:** Background `rgba(30, 30, 30, 0.067)` / Text `#1e1e1e` / Border 0px / Radius 2px / Padding 5px 8px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Surface Badge
**Role:** Metadata tags.
**Pages observed:** https://stripe.dev, https://stripe.dev/pricing, https://stripe.dev/about
**Spec:** Background transparent / Text `#1e1e1e` / Border `rgba(30, 30, 30, 0.267)` 1px / Radius 3px / Padding 2px 5px 2.5px / Typography 12px / Shadow none
**States observed:** Default | Disabled: not captured

### Tier 3: Surface-specific

#### Structural Surface
**Role:** Grid containers.
**Pages observed:** https://stripe.dev, https://stripe.dev/pricing, https://stripe.dev/about
**Spec:** Background transparent / Text `#1e1e1e` / Border `#1e1e1e` 1px / Radius 0px / Padding 0px / Typography 16px / Shadow none
**States observed:** Default | Disabled: not captured

#### Small Action
**Role:** Minor interactions.
**Pages observed:** https://stripe.dev, https://stripe.dev/pricing, https://stripe.dev/about
**Spec:** Background `rgba(30, 30, 30, 0.067)` / Text `#1e1e1e` / Border 0px / Radius 2px / Padding 5px 8px / Typography 12px / Shadow none
**States observed:** Default | Disabled: not captured

## Layout
| Property | Value |
|---|---|
| Max width | Not captured in source |
| Grid | Not captured in source |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | Not captured in source | Not captured in source |

## Imagery & decoration
Relies exclusively on ASCII-style line art and structural grid crosshairs. Avoids photography, gradients, and drop shadows entirely to maintain the technical blueprint aesthetic.

## Do's
* Use 1px `#1e1e1e` borders to define layout sections and structural grids.
* Apply aggressive negative tracking to `sohne-var` at sizes above 24px.
* Use `sohne-mono` for all metadata, tags, and structural labels.
* Keep all backgrounds flat (`#e9e9e9` or transparent).
* Use pill (`99px`) or `20px` radii for interactive buttons to contrast with the `0px` grid.

## Don'ts
* **Wrong:** Adding a drop shadow to a card. **Right:** Use a 1px `#1e1e1e` border or a subtle `rgba(30, 30, 30, 0.067)` fill. **Reason:** The system is strictly 2D and flat.
* **Wrong:** Using bold (700+) weights for headlines. **Right:** Use Söhne Light (300). **Reason:** Large typography relies on scale and light weights for its editorial/technical feel.
* **Wrong:** Using `#c4e817` for primary text. **Right:** Use `#1e1e1e`. **Reason:** The system is monochrome; accent colors are reserved for specific highlights, not structural elements.

## Similar brands
* Vercel
* Linear
* Figma (wireframe marketing mode)

## Quick start

```css
:root {
  --fontColorStatic: #1e1e1e;
  --fontColor: #1e1e1e;
  --highlightColor: #c4e817;
  --fontInvertColor: #eaeaea;
  --buttonColor: #1e1e1e;
  --borderColorLight: #1e1e1e;
  --inactiveColor: #8d8d8d;
  --windowFrameBG: #dcdcdc;
  --counterColor: #1e1e1e;
  --listItemIconColor: #1e1e1e;
  --backgroundColor: #eaeaea;
  --middleColor: #eaeaea;
  --tagColor: #1e1e1e;
}
```

## Agent prompt examples
* "Create a metadata tag using a 1px rgba(30, 30, 30, 0.267) border, 3px radius, and 12px Söhne Mono text."
* "Build a structural grid section with 1px #1e1e1e borders and a transparent background."
* "Generate a primary CTA button with a 99px border radius, 1px #1e1e1e border, and 14px text."

## Known gaps
Hover, focus, and active states were not captured in the source evidence. Responsive breakpoints and max-width containers were not explicitly extracted.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://stripe.dev | Desktop 1440 | 2026-06-06T05:00:07.528Z |
| Pricing | https://stripe.dev/pricing | Desktop 1440 | 2026-06-06T05:00:07.528Z |
| About | https://stripe.dev/about | Desktop 1440 | 2026-06-06T05:00:07.528Z |