# 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