# Design Reference - Stripe
> Clean technical canvas with gradient accents, product screenshots, and developer-first hierarchy.

Theme: light
Industry: payments
Captured: 2026-04-29T15:05:00.000Z

## Source
- Source: Public source
- Source URL: https://stripe.com
- Original site: https://stripe.com
- License note: Publicly visible design reference metadata. Use as inspiration and token guidance, not as copied brand assets.

## Technical Summary
A high-polish technical marketing system with white surfaces, cool slate type, gradient accents, and code/product proof blocks. Useful for API products, agent SDKs, and developer onboarding.

## Tags
- payments
- light
- developer
- gradient
- api

## Colors
| Name | Value | Token | Group | Role |
| --- | --- | --- | --- | --- |
| Slate Ink | `#0a2540` | `--color-slate-ink` | neutral | Headings and technical copy. |
| Cloud | `#f6f9fc` | `--color-cloud` | surface | Secondary page surface. |
| White | `#ffffff` | `--color-white` | surface | Cards and document surfaces. |
| Violet | `#635bff` | `--color-violet` | brand | Primary brand action. |
| Sky | `#00d4ff` | `--color-sky` | accent | Gradient and diagram highlight. |
| Coral | `#ff7a59` | `--color-coral` | accent | Warm gradient stop and emphasis. |

## Typography
### Inter - `--font-inter`
Single family for dense product UI, labels, tables, and command surfaces.
- Family: `Inter, ui-sans-serif, system-ui, sans-serif`
- Weights: 400, 500, 600
- Sizes: 12px, 13px, 14px, 16px, 20px, 40px
- Line heights: 1.2, 1.4, 1.5

## Spacing
- Base unit: 4px
- Density: comfortable

| Name | Value | Token |
| --- | --- | --- |
| 4 | `4px` | `--spacing-4` |
| 8 | `8px` | `--spacing-8` |
| 12 | `12px` | `--spacing-12` |
| 16 | `16px` | `--spacing-16` |
| 24 | `24px` | `--spacing-24` |
| 32 | `32px` | `--spacing-32` |
| 48 | `48px` | `--spacing-48` |
| 64 | `64px` | `--spacing-64` |

## Radius
- Default: 8px
- Controls: 6px
- Panels: 12px

## Components
### API proof card
Role: Content
- Code block paired with product UI
- cool slate text
- gradient accent edge

### CTA group
Role: Action
- Primary filled button
- secondary link
- compact inline arrow

## Do
- Pair benefits with technical proof.
- Use gradients as accents, not backgrounds for every panel.
- Keep code snippets readable.

## Dont
- Do not flatten all surfaces.
- Do not use brand gradients without structure.
- Do not bury developer proof below the fold.