DESIGN.md@.agents/tools/design/library/brands/stripe git:20260404.e3c6450A

Immutable. This exact content is served forever at /api/v1/blob/30261ba874701426.

# Design System: Stripe

Stripe — fintech gold standard: technical + luxurious, precise + warm. White canvas, deep navy headings, signature purple CTA, sohne-var weight 300 headlines, blue-tinted multi-layer shadows.

## Chapters

| File | Contents |
|------|----------|
| [01-visual-theme.md](01-visual-theme.md) | Visual identity, atmosphere, key characteristics |
| [02-color-palette.md](02-color-palette.md) | Primary, brand/dark, accent, interactive, neutral, surface, shadow colors |
| [03-typography.md](03-typography.md) | Font families, type scale table, typographic principles |
| [04-components.md](04-components.md) | Buttons, cards, badges, inputs, navigation, decorative elements |
| [05-layout.md](05-layout.md) | Spacing system, grid, whitespace philosophy, border radius scale |
| [06-depth-elevation.md](06-depth-elevation.md) | Elevation levels table, shadow philosophy, decorative depth |
| [07-dos-donts.md](07-dos-donts.md) | Do/Don't rules for Stripe brand compliance |
| [08-responsive.md](08-responsive.md) | Breakpoints, touch targets, collapsing strategy, image behavior |
| [09-agent-prompt-guide.md](09-agent-prompt-guide.md) | Quick color reference, example component prompts, iteration guide |

## Quick Reference

- **Primary CTA**: Stripe Purple (`#533afd`)
- **Background**: Pure White (`#ffffff`)
- **Headings**: Deep Navy (`#061b31`) — never pure black
- **Body**: Slate (`#64748d`), Labels: Dark Slate (`#273951`)
- **Dark sections**: Brand Dark (`#1c1e54`)
- **Font**: `sohne-var` weight 300 with `"ss01"` on all text; `SourceCodePro` for code
- **Shadow**: `rgba(50,50,93,0.25)` blue-tinted primary + `rgba(0,0,0,0.1)` secondary
- **Border-radius**: 4px-8px only — no pill shapes
- **Accents**: Ruby (`#ea2261`), Magenta (`#f96bee`) — decorative/gradient only, not interactive