Stripe

# Stripe Design System

## Visual Theme & Atmosphere
Elegant precision. The signature purple (#635BFF) paired with mint accents (#96F7D6) creates instant recognition. Weight-300 headings convey sophistication without fragility. Every element feels calculated, trustworthy, built by engineers who understand beauty.

## Color Palette & Roles
| Token | Hex | Role |
|-------|-----|------|
| Primary | #635BFF | Brand purple, CTAs |
| Secondary | #96F7D6 | Mint accent, success states |
| Background | #FFFFFF | Clean canvas |
| Surface | #F6F9FC | Subtle gray panels |
| Text | #0A2540 | Deep navy text |
| Muted | #425466 | Secondary text |
| Border | #E6EBF1 | Light dividers |

## Typography Rules
- **Heading Font**: Inter, system-ui, sans-serif
- **Body Font**: Inter, system-ui, sans-serif
- **Base Size**: 16px
- **Weights**: Light (300) for elegance, Regular (400), Medium (500), Semibold (600)
- **Line Height**: 1.5

## Component Stylings
- **Buttons**: Purple bg (#635BFF), white text, subtle shadow
- **Code Blocks**: Dark navy bg (#0A2540), syntax highlighting
- **Cards**: White bg, subtle border, hover lift

## Agent Prompt Guide
Use purple primary with mint accents. Light headings (300 weight) for elegance. Navy text for readability.