# Design System: stripe.com

> Generated by UIDrop on 2026-06-01 — uidrop.site

---

## 1. Design Language Overview

**Vibe:** light · vibrant · modern · Light theme
**Built with:** Ant Design

**Design rhythm:** 4px grid · subtly rounded · tight line-height (1.1) · soft elevation

## 2. Color System

| Role     | Hex      | Usage |
|----------|----------|-------|
| Primary  | `#533AFD` | CTAs, primary actions, links |
| Accent   | `#061B31` | Highlights, success states, decorative |
| Surface  | `#FFFFFF` | Main page background |
| Elevated | `#E2E4FF` | Cards, raised containers |
| Text     | `#000000` | Body and heading text |
| Muted    | `#6B6B6B` | Secondary text, captions |
| Border   | `#D6D9FC` | Dividers, borders |

## 3. Typography

- **H1** — sohne-var 48px / weight 300, line-height 1.15, tracking -0.96px
- **H2** — sohne-var 32px / weight 300, line-height 1.1, tracking -0.64px
- **H3** — sohne-var 26px / weight 300, line-height 1.12, tracking -0.26px
- **H4** — sohne-var 16px / weight 400, line-height 1.4
- **Body** — sohne-var 32px / weight 300, line-height 1.1, tracking -0.64px
- **Caption** — sohne-var 14px / weight 400
- **Scale:** 48px / 26px / 16px

## 4. Spacing & Layout

- **Spacing scale:** 4,8,12,16,20,24,32,40,60,64
- **Border radius:** 4px buttons, 6px cards
- **Radius vocabulary:** button → 4px, card → 6px

## 5. Effects

### Shadows (low → high)
- **subtle** — `rgba(0, 0, 0, 0.1) 0px 30px 60px -50px`

### Gradients
- `#7F7DFC,#F44BCC,#E5EDF5`
- `#486FFD,#7F81F3,#C489FF`

## 6. Component Specs

### Button
- #533AFD bg
- #FFFFFF text
- 4px radius
- 15.5px 24px 16.5px 24px padding
- 400 weight

### Card
- #E5EDF5 bg
- 6px radius

### Input
- white bg
- 1px subtle border
- 6px radius
- 8px 12px padding

### Link
- #0000EE

## 7. Implementation Rules

**DO:**
- Use `#533AFD` for all primary CTAs and interactive accents
- Reserve `#061B31` for accent moments — don't overuse
- Stick to the spacing scale (4,8,12,16,20,24,32,40,60,64) — don't introduce arbitrary values
- Match the radius vocabulary: 4px buttons, 6px cards
- Pair sohne-var 700 headings with sohne-var 16px 400, 1.1 line-height
- Honour the visual hierarchy: bold colour on primary actions, muted tones on secondary

**DON'T:**
- Copy this design verbatim — use the tokens as a system to build something original
- Mix in colours outside this palette (especially competing primary colours)
- Break the radius scale by introducing one-off values
- Use the same shadow tier for everything — match elevation to importance

---

*Source: stripe.com · Snapped via UIDrop on 2026-06-01*
*Do not copy the design. Use these tokens to build similar UI with the same feel.*