---
name: stripe-design-reference
provider: DesignSkill (https://designskill.dev)
reference: stripe.com
source_url: https://stripe.com/
tool: designskill-extract/3.2.0
extracted_at: 2026-07-27T07:46:51.637Z
mode: full-render
classification: reference_only
---

# Stripe — Design Reference (measured)

Measured design tokens extracted from `https://stripe.com/` by designskill-extract/3.2.0.
Every value below was observed in the live page (×N = observation count). Values not listed were **not observed** — do not invent them.
This document is `reference_only`: an analysis of a third-party site, not a license to its brand assets.

## Overview

- Extraction mode: **full-render** (viewports 390/768/1440px × light/dark), 1 page(s), 1134 observation records.
- Primary action color observed as `#b9b9f9` (basis: inferred, confidence 0.62).
- Dominant font family: **sohne-var** (×3961; secondary SourceCodePro ×175).
- Type scale observed at 8 sizes from 8px to 20px.
- Corner radius values in use: 4px, 6px, 5px, 1px….
- Not observed in this extraction: forms, badges.

## Colors

### Role Tokens

Semantic roles inferred from observed usage. `basis` tells how the role was established (declared CSS var > cross-validated > inferred).

| Token | Value | Basis | Confidence | Observed |
|---|---|---|---|---|
| `{color.primary}` | `#b9b9f9` | inferred | 0.62 | ×54 |
| `{color.background}` | `#ffffff` | cross-validated | 0.95 | ×854 |
| `{color.ink}` | `#061b31` | cross-validated | 0.95 | ×1247 |
| `{color.muted}` | `#7d8ba4` | inferred | 0.7 | ×13 |
| `{color.surface}` | `#ffffff` | declared | 0.9 | ×854 — --cardBackground |
| `{color.accent}` | `#00d66f` | inferred | 0.65 | ×16 |

### Observed Palette

Full measured palette ordered by usage share. `Used in` lists the CSS properties the color appeared on.

| Hex | Share | Used in | Observed |
|---|---|---|---|
| `#061b31` | 19.9% | color, --hds-color-shadow-popoverbottom, border-color, box-shadow | ×1247 (cross-validated, 0.95) |
| `#50617a` | 26.0% | color | ×1627 (observed, 0.8) |
| `#ffffff` | 13.6% | background-color, color, -webkit-mask-image, border-color, --stats-color | ×854 (cross-validated, 0.95) |
| `#e5edf5` | 8.0% | background-color, border-color | ×504 (cross-validated, 0.94) |
| `#533afd` | 4.8% | background-color, --gradient-color, custom-property, color, border-color | ×298 (cross-validated, 0.93) |
| `#000000` | 2.5% | background-color, box-shadow, color | ×156 (cross-validated, 0.92) |
| `#273951` | 3.0% | color, background-color | ×188 (observed, 0.78) |
| `#ff6118` | 1.4% | --bento-right-blob, custom-property, color, border-color | ×85 (cross-validated, 0.91) |
| `#15be53` | 1.3% | background-color, border-color | ×84 (observed, 0.76) |
| `#f2f7fe` | 1.3% | color, background-color | ×84 (observed, 0.76) |
| `#362baa` | 1.1% | border-color | ×67 (observed, 0.76) |
| `#7f7dfc` | 1.0% | background-color | ×62 (observed, 0.76) |
| `#b9b9f9` | 0.9% | border-color | ×54 (observed, 0.76) |
| `#2c2484` | 0.9% | background-color | ×57 (cross-validated, 0.91) |
| `#d6d9fc` | 1.2% | border-color, background-color | ×73 (observed, 0.76) |
| `#108c3d` | 0.7% | color | ×42 (observed, 0.75) |

## Typography

### Font Families

| Family | Observed |
|---|---|
| `sohne-var` | ×3961 |
| `SourceCodePro` | ×175 |
| `monospace` | ×1 |
| `-apple-system` | ×1 |

Use **sohne-var** as the default family — it accounts for the overwhelming majority of observed text nodes.

### Type Scale

| Token | Size | Observed |
|---|---|---|
| `{type.display}` | 20px | ×110 |
| `{type.h1}` | 16px | ×1219 |
| `{type.h2}` | 14px | ×146 |
| `{type.h3}` | 12px | ×285 |
| `{type.body-lg}` | 11px | ×575 |
| `{type.body}` | 10px | ×1190 |
| `{type.body-sm}` | 9px | ×275 |
| `{type.caption}` | 8px | ×162 |

The most frequently observed size is **16px** (×1219) — treat it as the default body size.

## Spacing

| Value | Observed |
|---|---|
| `8px` | ×898 |
| `16px` | ×475 |
| `6px` | ×456 |
| `4px` | ×322 |
| `2px` | ×308 |
| `12px` | ×246 |
| `10px` | ×217 |
| `32px` | ×166 |
| `24px` | ×109 |
| `14px` | ×106 |
| `64px` | ×98 |
| `20px` | ×79 |

## Shape (Border Radius)

| Value | Observed |
|---|---|
| `4px` | ×561 |
| `6px` | ×491 |
| `5px` | ×72 |
| `1px` | ×69 |
| `3px` | ×19 |
| `16px` | ×16 |
| `8px` | ×14 |
| `4.5px` | ×12 |

## Elevation

| Shadow | Observed |
|---|---|
| `rgba(3, 3, 39, 0.25) 0px 14.088px 21.132px -14.088px, rgba(0, 0, 0, 0.1) 0px 8.453px 16.906px -8.453px` | ×30 |
| `rgba(50, 50, 93, 0.25) 0px 30px 45px -30px, rgba(0, 0, 0, 0.1) 0px 18px 36px -18px` | ×24 |
| `#000000` | ×23 |
| `#32325d` | ×21 |
| `rgba(0, 0, 0, 0.1) 0px 20.187px 40.374px -20.187px` | ×18 |
| `rgba(23, 23, 23, 0.08) 0px 15px 35px 0px` | ×16 |

## Motion

| Duration | Observed |
|---|---|
| `0.3s` | ×140 |
| `0.25s` | ×42 |
| `0.15s` | ×30 |
| `0.24s` | ×28 |
| `.3s` | ×10 |

## Components

Measured computed styles of representative components (desktop viewport).

| Component | Measured spec | Samples |
|---|---|---|
| button.primary | bg `#533afd` · text `#ffffff` · radius `4px` · padding `15.5px 20px 16.5px` · font `14px/400` | ×8 |
| button.outline | text `#533afd` · border `1px solid rgb(255, 255, 255)` · radius `4px` · padding `10.5px 20px 13.5px` · font `14px` | ×11 |
| card | bg `#ffffff` · radius `8px` · shadow `rgba(0, 0, 0, 0.06) 0px 4px 24px 0px, rgba(0, 0, 0, 0.03) 0px 1px 2px 0px` · padding `18px` | ×1 |
| nav | height `76px` · position `relative` · link `#533afd` | — |

### Hero Gradient (observed)

```css
background-image: radial-gradient(102.83% 103.24% at 49.98% 104.51%, rgb(255, 180, 81) 0px, rgb(239, 198, 128) 16.73%, rgb(180, 216, 255) 33.03%, rgb(210, 232, 255) 43.38%, rgb(250, 253, 255) 59.16%, rgb(253, 254, 255) 76.24%, rgb(248, 250, 253) 100%);
```

### Interaction States (observed)

| State | Property | From | To |
|---|---|---|---|
| focus | outline-color | `rgba(0, 0, 0, 0)` | `rgba(84, 82, 251, 0.75)` |
| focus | outline-width | `0px` | `3px` |
| focus | color | `rgb(100, 116, 141)` | `rgb(6, 27, 49)` |
| hover | color | `rgb(100, 116, 141)` | `rgb(6, 27, 49)` |
| hover | border-color | `rgb(100, 116, 141)` | `rgb(6, 27, 49)` |
| hover | color | `rgb(100, 116, 141)` | `rgb(6, 27, 49)` |

## Accessibility (WCAG Contrast)

| FG | BG | Ratio | AA | Source |
|---|---|---|---|---|
| `#061b31` | `#ffffff` | 17.37 | pass | observed ×565 |
| `#50617a` | `#ffffff` | 6.3 | pass | observed ×422 |
| `#50617a` | `#f8fafd` | 6.03 | pass | observed ×198 |
| `#64748d` | `#ffffff` | 4.75 | pass | observed ×129 |
| `#533afd` | `#ffffff` | 6.19 | pass | observed ×82 |
| `#000000` | `#ffffff` | 21 | pass | observed ×51 |
| `#ffffff` | `#0d1738` | 17.55 | pass | observed ×51 |
| `#273951` | `#ffffff` | 11.73 | pass | observed ×48 |
| `#061b31` | `#f8fafd` | 16.61 | pass | observed ×46 |
| `#1a2c44` | `#ffffff` | 14.12 | pass | observed ×42 |
| `#3c4f69` | `#ffffff` | 8.35 | pass | observed ×42 |
| `#f2f7fe` | `#2c2484` | 11.53 | pass | observed ×27 |
| `#061b31` | `#ffffff` | 17.37 | pass | ink_on_background |
| `#ffffff` | `#b9b9f9` | 1.85 | fail | white_on_primary |
| `#7d8ba4` | `#ffffff` | 3.44 | fail | muted_on_background |

2 measured pair(s) fail AA — if you reuse those pairs, adjust lightness until the ratio reaches 4.5:1.

## Usage Rules

### Do
- Use `{color.primary}` (`#b9b9f9`) for primary actions only — that is where it was observed.
- Default text pairing: `{color.ink}` (`#061b31`) on `{color.background}` (`#ffffff`).
- Set all text in `sohne-var` (fallbacks only for glyph coverage).
- Pick corner radii from the measured set (4px, 6px, 5px, 1px) — no intermediate values were observed.
- Cite this file's token names (`{color.*}`, `{type.*}`) when generating UI so output stays traceable to observations.

### Don't
- Don't invent colors, sizes, shadows, or spacing not listed above — absence means *not observed*, and this document records observations only.
- Don't assume the missing blocks (forms, badges) don't exist on the site — they were simply not captured in this run.
- Don't copy brand assets (logo, wordmark, imagery, copy) — `reference_only` covers measured style values, not brand identity.

## Provenance

- Source: https://stripe.com/ (1 page(s))
- Tool: designskill-extract/3.2.0 · extracted 2026-07-27T07:46:51.637Z
- Mode: full-render — 풀렌더 모드 — 3뷰포트 × 라이트/다크 computed style + 상태 관측.
- Blocks observed: 00, 01, 02, 03, 04, 05, 07, 09, 10, 11, 12 · missing: forms, badges
- Warning: primary 불일치: static=#32325d vs render=#b9b9f9 — render 채택

---

<sub>Generated & served by [DesignSkill](https://designskill.dev)</sub>