design.md

<!-- Generated: 2026-04-05 | Source: https://stripe.com | Pages: 1 | Framework: none -->
<!-- This is not the official design system. Colors, fonts, and spacing may not be 100% accurate. -->

# Design System: Stripe

## 1. Visual Theme & Atmosphere

Stripe's website is the gold standard of fintech design -- a system that manages to feel simultaneously technical and luxurious, precise and warm. The page opens on a white canvas (#ffffff) with deep navy headings (#061b31) and a signature purple (#533afd) that functions as both brand anchor and interactive accent. This is not the cold, clinical purple of enterprise software; it is a rich, saturated violet that reads as confident and financially authoritative. The overall impression is of a financial institution redesigned by a world-class type foundry.

The custom sohne-var variable font is the defining element of Stripe's visual identity. Every text element enables the OpenType "ss01" stylistic set, which modifies character shapes for a distinctly geometric feel. At display sizes (44px-56px), sohne-var runs at weight 300 -- an extraordinarily light weight for headlines that creates an ethereal, almost whispered authority. This is the opposite of the bold hero headline convention; Stripe's headlines do not need to shout. The negative letter-spacing (-1.4px at 56px, -0.96px at 48px) tightens the text into dense, engineered blocks.

What truly distinguishes Stripe is its shadow system. Rather than flat or single-layer shadows, Stripe uses blue-tinted shadows: the signature rgba(50,50,93,0.12) creates depth with a cool, atmospheric quality -- like elements floating in a twilight sky. The blue-gray undertone of rgb(50,50,93) ties directly to the navy-purple brand palette, making even elevation feel on-brand.

Key Characteristics:
- sohne-var with OpenType "ss01" on all text -- a custom stylistic set that defines the brand's letterforms
- Weight 300 as the signature headline weight -- light, confident, anti-convention
- Negative letter-spacing at display sizes (-1.4px at 56px, -0.96px at 48px, -0.64px at 32px) -- progressive relaxation downward
- Blue-tinted shadows using rgba(50,50,93,0.12) -- elevation that feels brand-colored
- Deep navy (#061b31) headings instead of black -- warm, financial-grade text hierarchy
- Conservative border-radius (4px-8px, workhorse at 4px with 55 occurrences) -- nothing pill-shaped, nothing harsh
- Slate body text (#64748d) with blue-gray undertone -- not neutral gray, but brand-tinted secondary text
- "tnum" tabular numerals for financial data display at 14px and 11px -- separate OpenType mode for numbers
- SourceCodePro at weight 500 as the monospace companion for code and technical labels
- Purple gradient system using #533afd through #7f7dfc to #f44bcc -- violet-to-magenta decorative range

## 2. Color Palette & Roles

### Primary
- Stripe Purple (#533afd): Primary brand color, CTA backgrounds, link text, interactive highlights. A saturated blue-violet at frequency 2782 that anchors the entire system. Used as text color (808), background (7), border (1960), and gradient (5).
- Deep Navy (#061b31): Primary heading color at frequency 899. Not black, not gray -- a very dark blue that adds warmth and depth to text. The decision to avoid pure black is what gives Stripe text its distinctive premium feel.
- Pure White (#ffffff): Page background, card surfaces, button text on dark backgrounds. Frequency 504 across text (133), backgrounds (37), and borders (317).

### Neutral Scale
- Slate Blue (#50617a): Secondary body text at frequency 1029. A cool blue-gray that sits between heading navy and body slate in the luminance hierarchy.
- Body Slate (#64748d): Tertiary text, descriptions, captions at frequency 494. The blue undertone prevents the flat, lifeless quality of pure gray body text.
- Dark Slate (#273951): Form labels, secondary headings at frequency 113. Sits between heading navy and body text in the hierarchy.
- Mid Slate (#3c4f69): Supplementary text and icon color at frequency 127. Another step in Stripe's unusually granular text-color ladder.
- Light Slate (#7d8ba4): Muted metadata and tertiary labels at frequency 49.

### Interactive
- Primary Purple (#533afd): Primary link and CTA color. Active states, selected elements.
- Periwinkle (#7389ff): Secondary interactive accent at frequency 85. A lighter blue-violet for gradient transitions and secondary highlights.
- Lavender Border (#b9b9f9): Active/selected state borders on buttons and inputs at frequency 40. Used exclusively as border color.
- Soft Purple Border (#d6d9fc): Subtle purple-tinted borders for secondary elements at frequency 37.
- Mid Purple (#7f7dfc): Gradient transition color at frequency 27. Used in text (6), border (15), and gradient (6).

### Surface & Borders
- Border Default (#e5edf5): Standard border and divider color at frequency 111. Used as background (20), border (81), and gradient (10).
- Soft Border (#d4dee9): Secondary border color at frequency 2. Slightly warmer than the default border.
- Lilac Surface (#e2e4ff): Purple-tinted surface for card backgrounds and decorative fills at frequency 16.

### Accent Colors
- Orange (#ff6118): Warm accent at frequency 100 for icons and decorative elements.
- Magenta (#f44bcc): Vivid pink-purple at frequency 6, used exclusively in gradients. The far end of the purple-to-pink gradient range.
- Violet Gradient (#da4bfe): Rich purple at 0.8 opacity, frequency 3, gradient-only. Connects the primary purple to the magenta endpoint.
- Green (#81b81a): Status and success accent at frequency 15.

### Shadow Colors
- Shadow Blue (rgba(50,50,93,0.12)): The signature blue-tinted shadow at frequency 2. Deep blue-gray that echoes the brand's navy palette.
- Shadow Ambient (rgba(23,23,23,0.08)): Soft ambient shadow for subtle elevation at frequency 1.
- Shadow Soft (rgba(23,23,23,0.06)): Minimal ambient shadow for light lift at frequency 1.

## 3. Typography Rules

### Font Family
- Primary: sohne-var, variable font with weight range 1-1000
- Monospace: SourceCodePro, weight 500
- OpenType Features: "ss01" enabled globally on all sohne-var text; "tnum" for tabular numbers on financial data and pricing.

### Hierarchy

| Role | Font | Size | Weight | Line Height | Letter Spacing | Features | Notes |
|------|------|------|--------|-------------|----------------|----------|-------|
| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (tight) | -1.4px | ss01 | Maximum size, whisper-weight authority |
| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.03 (tight) | -0.96px | ss01 | Secondary hero headlines |
| Display Numeric | sohne-var | 48px (3.00rem) | 400 | 1.00 (tight) | -0.96px | ss01 | Large stat counters, metric displays |
| Hero Heading | sohne-var | 44px (2.75rem) | 300 | 1.15 | -0.88px | ss01 | Primary h1 hero headlines |
| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (tight) | -0.64px | ss01 | Feature section titles |
| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (tight) | -0.26px | ss01 | Card headings, sub-sections |
| Sub-heading UI | sohne-var | 26px (1.63rem) | 400 | normal | normal | ss01 | Interactive sub-headings, financial labels |
| Sub-heading Small | sohne-var | 22px (1.38rem) | 300 | 1.10 (tight) | -0.22px | ss01 | Smaller section heads, testimonial titles |
| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | Feature descriptions, intro text |
| Body Large UI | sohne-var | 18px (1.13rem) | 400 | 1.40 | normal | ss01 | Attribution text, speaker names |
| Body | sohne-var | 16px (1.00rem) | 400 | normal | normal | ss01 | Standard reading text, navigation base |
| Body Light | sohne-var | 16px (1.00rem) | 300 | 1.25 | normal | ss01 | Secondary body, feature captions |
| Body CTA | sohne-var | 16px (1.00rem) | 600 | 1.00 (tight) | normal | ss01 | CTA links, bold labels |
| Nav Button | sohne-var | 14px (0.88rem) | 600 | 1.00 (tight) | normal | ss01 | Navigation buttons, primary CTAs |
| Caption Tabular | sohne-var | 14px (0.88rem) | 300 | normal | -0.42px | tnum | Financial percentages, live data |
| Caption | sohne-var | 12px (0.75rem) | 400 | normal | normal | ss01 | Small labels, order summaries |
| Caption Light | sohne-var | 12px (0.75rem) | 300 | 1.33 | 0.036px | ss01 | Fine print, billing labels |
| Pricing Tabular | sohne-var | 11px (0.69rem) | 300 | 1.45 | -0.33px | tnum | Pricing breakdowns, unit costs |
| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | normal | ss01 | Checkout labels, tiny text |
| Micro UI | sohne-var | 10px (0.63rem) | 400 | 1.15 (tight) | 0.1px | ss01 | Product names, discount labels |
| Nano | sohne-var | 9px (0.56rem) | 300-400 | normal | normal | ss01 | URL text, product descriptions |
| Pico | sohne-var | 8px (0.50rem) | 300-400 | 1.07-1.12 | normal | ss01 | Form labels, separator text |

### Principles
- Light weight as signature: Weight 300 at display sizes is Stripe's most distinctive typographic choice. Where others use 600-700 to command attention, Stripe uses lightness as luxury -- the text is so confident it does not need weight to be authoritative.
- ss01 everywhere: The "ss01" stylistic set is non-negotiable. It modifies specific glyphs to create a more geometric, contemporary feel across all sohne-var text. Every element from 56px heroes to 8px form labels carries this feature.
- Two OpenType modes: "ss01" for display and body text, "tnum" for tabular numerals in financial data. These never overlap -- a number in a paragraph uses ss01, a number in a pricing table uses tnum.
- Progressive tracking: Letter-spacing tightens proportionally with size: -1.4px at 56px, -0.96px at 48px, -0.88px at 44px, -0.64px at 32px, -0.26px at 26px, normal at 16px and below. The tracking at tabular sizes reverses: -0.42px at 14px and -0.33px at 11px for numeric density.
- Three-weight discipline: Primarily 300 (body and headings), 400 (UI and navigation base), 600 (CTAs and nav buttons). No weight 500 or 700 in the primary font.

## 4. Component Stylings

### Buttons

Primary Purple
- Background: rgb(83,58,253) / #533afd
- Text: #ffffff
- Padding: 11.5px 20px 14.5px 20px
- Radius: 4px
- Font: 14px sohne-var weight 600, "ss01"
- Transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- Use: Primary CTA ("Start now", "Contact sales")

Secondary / Outlined
- Background: rgba(255,255,255,0.65)
- Text: #533afd
- Padding: 14.5px 24px 15.5px 24px
- Radius: 4px
- Border: 1px solid #b9b9f9
- Font: 16px sohne-var weight 600, "ss01"
- Transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- Use: Secondary actions ("Sign up with Google")

Ghost Navigation
- Background: transparent
- Text: #061b31
- Padding: 12px 0px
- Radius: 4px
- Font: 14px sohne-var weight 600, "ss01"
- Transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1), color 0.3s cubic-bezier(0.25, 1, 0.5, 1)
- Use: Navigation menu items

### Cards & Containers
- Background: #ffffff
- Border: 1px solid #e5edf5 (standard)
- Radius: 4px (tight), 5px (standard), 6px (comfortable), 8px (featured)
- Shadow (standard): rgba(50,50,93,0.12) 0px 16px 32px 0px
- Shadow (ambient): rgba(23,23,23,0.08) 0px 15px 35px 0px
- Shadow (subtle): rgba(23,23,23,0.06) 0px 3px 6px 0px

### Links
- Text: #533afd
- Font: 16px sohne-var weight 600, "ss01"
- Transition: opacity 0.24s cubic-bezier(0.45, 0.05, 0.55, 0.95)
- Use: Inline links, feature navigation arrows

### Navigation
- Background: transparent with 6px radius container
- Font: 16px sohne-var weight 400, "ss01"
- Padding: 10px 16px
- CTA: Purple button right-aligned (14px weight 600)
- Transition: all (general nav transitions)

### Footer
- Background: rgb(248,250,253) / near-white blue tint
- Text: #000000
- Font: 16px sohne-var weight 400
- Padding: 0px 16px

## 5. Layout Principles

### Spacing System
- Base unit: 4px
- Scale: 4, 8, 12, 16, 20, 24, 28, 32, 36, 40, 48, 52, 56, 60, 64, 72, 80, 96
- Most frequent values: 16px (181 occurrences), 8px (80), 24px (59), 4px (47)
- The scale is dense at the small end (every 4px from 4-40), reflecting Stripe's precision-oriented UI for financial data

### Grid & Container
- Max content width: 1266px
- Common column counts: 1, 2, 3, 4, 8, 12
- Hero: centered single-column with generous padding, lightweight headlines at 44px-56px
- Feature sections: 2-4 column grids for feature cards
- Full-width sections at section breaks

### Whitespace Philosophy
- Precision spacing: Unlike the vast emptiness of minimalist systems, Stripe uses measured, purposeful whitespace. Section spacing clusters at 48px, 60px, 64px, 71px, 80px, and 96px -- six distinct vertical rhythms rather than one uniform gap.
- Dense data, generous chrome: Financial data displays use tight 4px-8px internal spacing, but the UI chrome around them uses 16px-24px padding. This creates a sense of controlled density -- like a well-organized spreadsheet in a purposefully framed container.
- Vertical cadence: The 71px spacing value (24 occurrences) is unusual and likely tied to a specific section rhythm in the hero or stats area, creating a distinctive vertical beat that departs from standard 8px-grid multiples.

### Border Radius Scale
- Micro (2px-3px): Fine-grained elements, subtle rounding
- Standard (4px): Buttons, inputs, badges -- the workhorse at 55 occurrences
- Comfortable (5px): Standard card containers at 6 occurrences
- Relaxed (6px): Navigation, larger interactive elements at 31 occurrences
- Large (8px): Featured cards, hero elements at 4 occurrences
- Compound: 6px 6px 0px 0px (top-rounded), 0px 0px 6px 6px (bottom-rounded), 6px 0px 0px 6px (left-rounded)

## 6. Depth & Elevation

| Level | Treatment | Use |
|-------|-----------|-----|
| Flat (Level 0) | No shadow | Page background, inline text |
| Subtle (Level 1) | rgba(23,23,23,0.06) 0px 3px 6px 0px | Light card lift, hover hints |
| Ambient (Level 2) | rgba(23,23,23,0.08) 0px 15px 35px 0px | Standard cards, content panels |
| Elevated (Level 3) | rgba(50,50,93,0.12) 0px 16px 32px 0px | Featured cards, dropdowns, popovers |
| Focus Ring | 2px solid #533afd outline | Keyboard focus states |

Shadow Philosophy: Stripe's shadow system is built on a principle of chromatic depth. Where most design systems use neutral gray or black shadows, Stripe's primary shadow color (rgba(50,50,93,0.12)) is a deep blue-gray that echoes the brand's navy palette. This creates shadows that do not just add depth -- they add brand atmosphere. The dual-system approach separates neutral ambient shadows (rgba(23,23,23,...)) for subtle lift from blue-tinted shadows (rgba(50,50,93,...)) for prominent elevation, creating a brand-colored depth hierarchy that distinguishes Stripe from every flat-shadow design system.

## 6.5. Motion & Transitions

### Duration Scale

| Token | Value | Frequency | Use |
|-------|-------|-----------|-----|
| micro | 1ms | 1 | Instant state changes |
| small | 150ms | 14 | Hover feedback, micro-interactions |
| medium | 300ms | 35 | Standard transitions, button state changes |
| large | 600ms | 19 | Section reveals, card expansions |
| xl | 2000ms | 7 | Hero animations, slow ambient motion |

### Timing Functions
- Primary: ease at 142 occurrences -- the system default
- Expressive: cubic-bezier(0.25, 1, 0.5, 1) at 21 occurrences -- used for button transitions, an overshoot-dampened curve
- Smooth: cubic-bezier(0.4, 0, 0.2, 1) at 4 occurrences -- Material-style standard easing
- Sharp: cubic-bezier(0.16, 1, 0.3, 1) at 4 occurrences -- fast entry, slow settle
- Linear: 8 occurrences -- constant-speed for progress indicators
- Custom variables: --navigation-easing (10), --stats-section-transition-timing-function (11), --card-ease (6) -- component-specific named curves

## 7. Do's and Don'ts

### Do
- Use sohne-var with "ss01" on every text element -- the stylistic set IS the brand's typographic DNA
- Use weight 300 for all headlines and body text -- lightness is the signature that distinguishes Stripe from every heavy-handed fintech
- Apply blue-tinted shadows (rgba(50,50,93,0.12)) for elevated elements -- chromatic depth over flat neutral gray
- Use #061b31 (deep navy) for headings instead of #000000 -- the warmth matters and prevents the harshness of pure black
- Keep border-radius at 4px for interactive elements and 6px for containers -- conservative rounding is intentional
- Use "tnum" for any tabular or financial number display -- "ss01" and "tnum" serve distinct purposes and never coexist on the same element
- Use the cubic-bezier(0.25, 1, 0.5, 1) curve for button transitions at 300ms -- this is the branded interactive feel
- Maintain the six-step text-color ladder: #061b31 > #273951 > #3c4f69 > #50617a > #64748d > #7d8ba4 -- each step has a specific role

### Don't
- Don't use weight 600-700 for sohne-var headlines -- weight 300 is the brand voice; 600 is reserved exclusively for CTA text and nav buttons
- Don't use large border-radius (12px+, pill shapes) on cards or buttons -- Stripe's maximum observed radius is 8px for featured elements, 16px appears only once
- Don't use neutral gray shadows -- always tint with blue (rgba(50,50,93,...)) for the primary elevation layer
- Don't skip "ss01" on any sohne-var text -- the alternate glyphs define the personality; removing them produces a visibly different font
- Don't use pure black (#000000) for headings -- always #061b31 deep navy; the #000000 in the token data is primarily a border/structural color (3869 border uses vs. 1592 text)
- Don't use warm accent colors (orange #ff6118, magenta #f44bcc) for interactive elements -- these are decorative and gradient-only; purple #533afd is the sole interactive color
- Don't apply positive letter-spacing at display sizes -- Stripe tracks tight: -1.4px at 56px, -0.96px at 48px, -0.88px at 44px
- Don't mix "ss01" and "tnum" on the same element -- "ss01" is for display and body, "tnum" is for financial data; each serves a separate mode
- Don't use #b9b9f9 for backgrounds or text -- it is a border-only token (40 occurrences, all as borderColor)

## 8. Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <640px | Single column, reduced heading sizes, stacked cards |
| Tablet | 640-1024px | 2-column grids, moderate padding |
| Desktop | 1024-1266px | Full layout, 3-4 column feature grids |
| Large Desktop | >1266px | Centered content at max-width 1266px with generous margins |

### Touch Targets
- Primary buttons use generous padding (11.5px-14.5px vertical, 20px-24px horizontal)
- Navigation buttons have 12px vertical padding for comfortable tap targets
- Navigation container uses 10px 16px padding with 6px radius
- Ghost links rely on text size (14px-16px) and spacing for adequate touch area

### Collapsing Strategy
- Hero headline: 56px display -> 44px -> 32px across breakpoints, weight 300 maintained throughout
- Navigation: horizontal links + CTAs with 6px radius container -> hamburger toggle
- Feature cards: 4-column -> 3-column -> 2-column -> single column stacked
- Stats section: horizontal stat counters at 48px -> stacked at reduced sizes
- Financial data: tight tabular layouts with "tnum" at 11px-14px maintain density, may horizontally scroll
- Section spacing: 96px -> 64px -> 48px as viewport narrows
- Typography scale compresses while preserving the weight 300 signature at all sizes

### Image Behavior
- Dashboard/product screenshots maintain blue-tinted shadow treatment at all sizes
- Checkout UI previews at 8px-10px text sizes maintain "ss01" feature settings
- Card images maintain consistent 4px-6px border-radius
- Gradient decorative elements (purple-to-magenta) simplify on mobile

## 9. Agent Prompt Guide

### Quick Color Reference
- Primary CTA: Stripe Purple (#533afd)
- Background: Pure White (#ffffff)
- Heading text: Deep Navy (#061b31)
- Body text: Slate (#64748d)
- Secondary text: Slate Blue (#50617a)
- Label text: Dark Slate (#273951)
- Border: Soft Blue (#e5edf5)
- Link: Stripe Purple (#533afd)
- Active border: Lavender (#b9b9f9)
- Shadow primary: rgba(50,50,93,0.12)
- Shadow ambient: rgba(23,23,23,0.08)
- Accent decorative: Orange (#ff6118), Magenta (#f44bcc)

### Example Component Prompts
- "Create a hero section on white background. Headline at 44px sohne-var weight 300, line-height 1.15, letter-spacing -0.88px, color #061b31, font-feature-settings 'ss01'. Subtitle at 18px weight 300, line-height 1.40, color #64748d. Purple CTA button (#533afd background, white text, 4px radius, 14px weight 600, 11.5px 20px padding) with transition background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1). Secondary outlined button (rgba(255,255,255,0.65) background, 1px solid #b9b9f9 border, #533afd text, 4px radius)."
- "Design a card: white background, 1px solid #e5edf5 border, 6px radius. Shadow: rgba(50,50,93,0.12) 0px 16px 32px 0px. Title at 22px sohne-var weight 300, letter-spacing -0.22px, color #061b31, font-feature-settings 'ss01'. Body at 16px weight 300, line-height 1.25, color #64748d, font-feature-settings 'ss01'."
- "Build a navigation bar: transparent background, 6px border-radius container, padding 10px 16px. Links at 14px sohne-var weight 600, color #061b31, font-feature-settings 'ss01'. Purple CTA button right-aligned (#533afd background, white text, 4px radius, 14px weight 600). Transition: background-color 0.3s cubic-bezier(0.25, 1, 0.5, 1)."
- "Create a stats display: 48px sohne-var weight 300 for large numbers, letter-spacing -0.96px, color #061b31, font-feature-settings 'ss01'. Label below at 16px weight 300, color #50617a. For tabular data, switch to 14px weight 300, letter-spacing -0.42px, font-feature-settings 'tnum' instead of 'ss01'."
- "Design a pricing component: card with white background, 1px solid #e5edf5 border, 5px radius. Price at 26px sohne-var weight 300, letter-spacing -0.26px, color #061b31, font-feature-settings 'ss01'. Unit cost at 11px weight 300, letter-spacing -0.33px, font-feature-settings 'tnum', color #50617a. CTA button at bottom: #533afd background, white text, 4px radius, 14px weight 600."
- "Build a footer section: background rgb(248,250,253), text #000000. Links at 16px sohne-var weight 400, font-feature-settings 'ss01'. Section titles at 16px weight 600. Padding 0px 16px. No border-radius. Transition: all."

### Iteration Guide
1. Always enable font-feature-settings: "ss01" on sohne-var text -- this is the brand's typographic DNA; removing it changes the visual identity
2. Weight 300 is the default for body and headings; use 400 for navigation base and UI labels; use 600 only for buttons, CTAs, and nav items
3. Shadow formula: rgba(50,50,93,0.12) 0px 16px 32px 0px for prominent elevation; rgba(23,23,23,0.08) 0px 15px 35px 0px for ambient lift
4. Heading color is #061b31 (deep navy), body is #64748d (slate), labels are #273951 (dark slate), secondary body is #50617a (slate blue)
5. Border-radius stays in the 4px-8px range -- 4px for buttons and inputs, 5px-6px for cards, 8px maximum for featured elements
6. Use "tnum" instead of "ss01" for any numbers in tables, charts, pricing, or financial displays -- these are mutually exclusive features
7. Button transitions use cubic-bezier(0.25, 1, 0.5, 1) at 300ms -- this curve has a slight overshoot-dampened feel
8. Max content width is 1266px -- wider than many systems, reflecting Stripe's information-dense layout philosophy