stripe.com Sample

## Design Thinking

Before coding, understand the context and choose a bold aesthetic direction:

- **Purpose:** What problem does this interface solve? Who uses it?
- **Style:** Choose a strong direction: minimalist, maximalist, retro-futurist, organic/natural, luxury/refined, playful/toy-like, magazine/editorial, brutal/raw, art deco/geometric, soft/pastel, industrial/utilitarian, or another clear aesthetic.
- **Constraints:** Technical requirements such as framework, performance, and accessibility.
- **Differentiation:** What makes it memorable? What is the one thing people will remember?
  **Key:** Choose one clear concept and execute it precisely. Bold maximalism and refined minimalism can both work. Intent matters more than intensity.


## Beautiful Defaults

- Start with composition, not components.
- Prefer a full-bleed hero image or full-canvas visual anchor.
- Make the brand or product name the most prominent text.
- Keep copy concise and scannable.
- Use whitespace, alignment, scale, cropping, and contrast before adding borders.
- Limit the system by default: no more than two fonts and one accent color.

# stripe.com Design System

## Visual DNA

A sophisticated fintech aesthetic combining minimalist precision with expressive gradient artistry. The system employs a custom typeface (Sohne) with delicate weights, a 4px baseline grid, and a dual-mode color architecture supporting both light airy surfaces and deep navy foundations. Visual hierarchy is established through scale contrast rather than weight alone, with purple (#533afd) serving as the primary interactive accent. Glassmorphism appears in elevated surfaces, while smooth cubic-bezier easing provides motion personality.

## Engineering CSS Evidence

### Typography

**Headings:**
- **Primary:**
  - **Font Family:** sohne-var
  - **Font Family Stack:** sohne-var, "SF Pro Display", sans-serif
  - **Font Size:** 16px
  - **Font Weight:** 400
  - **Line Height:** 22.4px
  - **Letter Spacing:** -0.22px
  - **Text Transform:** Not enough evidence
- **Variants:**
  - sohne-var, "SF Pro Display", sans-serif | 16px | 500 | 22.4px (13)
  - sohne-var, "SF Pro Display", sans-serif | 22px | 400 | 24.2px (12)
  - sohne-var, "SF Pro Display", sans-serif | 26px | 400 | 29.12px (12)
  - sohne-var, "SF Pro Display", sans-serif | 32px | 400 | 35.2px (5)
  - sohne-var, "SF Pro Display", sans-serif | 48px | 400 | 49.44px (3)

**Body:**
- **Primary:**
  - **Font Family:** sohne-var
  - **Font Family Stack:** sohne-var, "SF Pro Display", sans-serif
  - **Font Size:** 16px
  - **Font Weight:** 400
  - **Line Height:** 15.95px
  - **Letter Spacing:** -0.42px
  - **Text Transform:** Not enough evidence
- **Variants:**
  - sohne-var, "SF Pro Display", sans-serif | 11px | 400 | 15.95px (33)
  - sohne-var, "SF Pro Display", sans-serif | 14px | 400 (25)
  - sohne-var, "SF Pro Display", sans-serif | 16px | 500 (25)
  - sohne-var, "SF Pro Display", sans-serif | 16px | 400 | 22.4px (21)
  - sohne-var, "SF Pro Display", sans-serif | 18px | 400 | 25.2px (12)

### Color

**Mode:** mixed

**Usage:**
- **Background:** rgb(255, 255, 255), rgb(227, 236, 247), rgb(248, 250, 253), rgb(13, 23, 56), rgb(236, 237, 254), rgb(255, 229, 218)
- **Surface:** rgb(255, 255, 255), rgb(13, 23, 56), rgb(236, 237, 254), rgb(248, 250, 253), rgb(255, 229, 218)
- **Text Primary:** rgb(6, 27, 49), rgb(0, 0, 0), rgb(100, 116, 141), rgb(83, 58, 253), rgb(80, 97, 122), rgb(255, 255, 255)
- **Text Secondary:** rgb(100, 116, 141), rgb(6, 27, 49), rgb(0, 0, 0), rgb(83, 58, 253)
- **Border:** rgb(6, 27, 49), rgb(0, 0, 0), rgb(100, 116, 141), rgb(83, 58, 253), rgb(80, 97, 122), rgb(255, 255, 255)
- **Accent:** rgb(80, 97, 122)
- **Gradients:** 
  - linear-gradient(90deg, rgba(0, 0, 0, 0) 0px, rgb(8, 16, 191) 50%, rgba(0, 0, 0, 0) 100%)
  - linear-gradient(68deg, rgba(83, 58, 253, 0.08) 0.78%, rgba(255, 140, 108, 0.8) 30.61%, rgba(218, 75, 254, 0.8) 79.02%)
  - linear-gradient(73.3deg, rgba(218, 75, 254, 0.8) 9.85%, rgba(113, 92, 255, 0.48) 61.94%)
  - linear-gradient(74.71deg, rgba(83, 58, 253, 0.08) -215.1%, rgba(255, 140, 108, 0.8) -169.26%, rgba(218, 75, 254, 0.8) -12.8%, rgba(113, 92, 255, 0.8) 18.59%, rgba(83, 58, 253, 0.8) 39.04%)

### Spacing

**Base Unit:** 4px
**Scale:** 16px, 8px, 32px, 64px, 28px, 48px, 5.5px, 96px, 0.8px, 380px, 4px, 6px
**Section Padding:** 0px 16px
**Card Padding:** 4px 6px
**Gaps:** 8px, 16px, 32px, 64px, 28px, 48px, 96px

### Material

**Surface Style:** glass / translucent
**Radius:** 4.51px, 6px
**Border Style:** 0px none rgb(6, 27, 49), 0px none rgb(0, 0, 0), 0px none rgb(100, 116, 141), 0px none rgb(83, 58, 253), 0px none rgb(80, 97, 122), 0px none rgb(255, 255, 255)
**Shadow Style:** Not enough evidence
**Blur:** drop-shadow(rgba(0, 0, 0, 0.25) 0px 2px 25px)

### Motion

**Motion Level:** expressive
**Durations:** 0s, 0.15s, 0.2s, 0.3s, 0.4s, 0.8s, 1.2s
**Easings:** ease, linear, cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.165, 0.84, 0.44, 1), cubic-bezier(0.4, 0, 0.2, 1), cubic-bezier(0.65, 0, 0.35, 1)
**Hover Patterns:** all, opacity, color, transform, left, background
**Scroll Patterns:** 26 flex containers, 3 CSS grid containers

### Component Samples

**button:**
- **Count:** 2
- **Typography:** 14px / 14px, weight 500
- **Padding:** 0px 16px 0px 0px
- **Radius:** Not enough evidence
- **Color:** rgb(80, 97, 122)
- **Background:** Not enough evidence
- **Border:** 0px none rgb(80, 97, 122)
- **Shadow:** Not enough evidence
- **Transition:** color 0.2s ease

**card:**
- **Count:** 19
- **Typography:** 18px / 25.2px, weight 400, 11px / 15.95px, weight 400, 11px / 11px, weight 500
- **Padding:** 4px 6px
- **Radius:** 4.51px
- **Color:** rgb(6, 27, 49), rgb(255, 255, 255), rgb(80, 97, 122), rgb(107, 89, 254)
- **Background:** rgb(236, 237, 254), rgb(255, 229, 218)
- **Border:** 0px none rgb(6, 27, 49), 0px none rgb(255, 255, 255), 0px none rgb(80, 97, 122), 0px none rgb(107, 89, 254)
- **Shadow:** Not enough evidence
- **Transition:** all 0s ease

**navigation:**
- **Count:** 2
- **Typography:** 16px / normal, weight 400
- **Padding:** 10px 16px
- **Radius:** 6px
- **Color:** rgb(0, 0, 0)
- **Background:** Not enough evidence
- **Border:** 0px none rgb(0, 0, 0)
- **Shadow:** Not enough evidence
- **Transition:** all 0s ease

**hero:**
- **Count:** 8
- **Typography:** 14px / normal, weight 400, 16px / normal, weight 400, 48px / 55.2px, weight 400
- **Padding:** Not enough evidence
- **Radius:** Not enough evidence
- **Color:** rgb(100, 116, 141), rgb(0, 0, 0), rgb(129, 184, 26), rgb(6, 27, 49)
- **Background:** Not enough evidence
- **Border:** 0px none rgb(100, 116, 141), 0px none rgb(129, 184, 26), 0px none rgb(6, 27, 49), 0px none rgba(0, 14, 255, 0.5)
- **Shadow:** Not enough evidence
- **Transition:** all 0s ease

**section:**
- **Count:** 13
- **Typography:** 16px / normal, weight 400
- **Padding:** 0px 16px
- **Radius:** Not enough evidence
- **Color:** rgb(0, 0, 0)
- **Background:** rgb(255, 255, 255), rgb(13, 23, 56), rgb(248, 250, 253)
- **Border:** 0px none rgb(0, 0, 0)
- **Shadow:** Not enough evidence
- **Transition:** all 0s ease

**list:**
- **Count:** 25
- **Typography:** 16px / normal, weight 400
- **Padding:** Not enough evidence
- **Radius:** Not enough evidence
- **Color:** rgb(0, 0, 0)
- **Background:** Not enough evidence
- **Border:** 0px none rgb(0, 0, 0)
- **Shadow:** Not enough evidence
- **Transition:** opacity 0.15s linear, all 0s ease

### Extraction Diagnostics

- Sampled 300 visible elements from 2881 total DOM elements.
- Confidence: high.
- **Conflict Detected:** h1 element shows color: rgb(129, 184, 26) (green) in computed styles, which conflicts with visual screenshot evidence showing dark navy/black headings. Preserving evidence value as sampled.
- No extraction warnings.

## AI Visual Analysis

### Core Style

Modern fintech minimalism with an expressive gradient language. The interface balances institutional trust (deep navy rgb(13, 23, 56)) with startup agility (vibrant purple gradients). Typography is intentionally light (weight 300-400) and airy, utilizing negative letter-spacing for tight, sophisticated headlines. The system supports both light mode (white backgrounds with subtle blue-grey tints) and dark mode (deep navy surfaces), with glassmorphism effects creating depth without heavy shadows.

### Texture and Atmosphere

Clean, light, and spacious with a "glass" aesthetic. Surfaces appear translucent or softly tinted rather than opaque. The hero section features a dramatic diagonal gradient sweep (purple to orange to magenta) that establishes brand energy. Cards float with minimal elevation, utilizing subtle border-radius (4-6px) and translucent backgrounds (rgba values). The overall feel is premium, engineered, and developer-focused with precise alignment and mathematical spacing.

### Layout and Composition

Asymmetric hero compositions with text aligned left against gradient backdrops. Content follows a strict 12-column grid with generous gutters (16px-96px). Sections alternate between white/light-grey and deep navy, creating rhythm. Navigation uses a pill-style container with rounded corners (6px). Visual hierarchy relies on size scale (11px captions to 48px hero text) rather than weight contrast. Horizontal scrolling logo bars and bento-grid feature cards create visual interest within the rigid grid.

### Interaction Direction

Motion is smooth and deliberate with "expressive" personality. Transitions utilize cubic-bezier(0.25, 1, 0.5, 1) for deceleration effects. Hover states shift opacity (0.15s linear) and color rather than triggering scale transforms. Links transition with cubic-bezier(0.45, 0.05, 0.55, 0.95) over 240ms. The system avoids jarring movements, favoring subtle fades and color shifts. Buttons show color transitions on hover (0.2s ease), maintaining the clean aesthetic without heavy shadow elevation.

## Design System Rules

### Do

- Use the 4px baseline grid for all spacing decisions (8px, 16px, 32px, 64px scales)
- Apply Sohne font family with weight 300 for body and 400 for emphasis/bold
- Maintain negative letter-spacing (-0.01em to -0.02em) for headings
- Use rgb(83, 58, 253) / #533afd as the primary interactive accent
- Apply border-radius 4px for cards, 6px for navigation containers, 16px for large surfaces
- Utilize cubic-bezier(0.25, 1, 0.5, 1) for hover transitions
- Implement glassmorphism with translucent backgrounds (rgba values) on elevated surfaces
- Alternate between light surfaces (rgb(248, 250, 253)) and dark navy (rgb(13, 23, 56)) for section rhythm
- Use weight 500 for button text at 14px size
- Apply 0.15s linear transitions for opacity changes on interactive elements

### Don't

- Don't use borders for definition (evidence shows 0px none borders); rely on background color contrast instead
- Don't exceed 400 font weight for headings (avoid heavy/bold typography)
- Don't use pure black (rgb(0,0,0)); use rgb(6, 27, 49) for primary text
- Don't apply harsh drop shadows; use subtle ambient shadows or glass blur effects
- Don't use transition durations longer than 0.3s for hover states (keep interactions snappy)
- Don't deviate from the 4px spacing base unit
- Don't use border-radius values outside the 4px-6px-16px-32px scale
- Don't place text on gradients without ensuring contrast ratios (evidence shows gradients are decorative, not text backgrounds)

### Implementation Notes

- **CSS Variables Available:** The system exposes extensive HDS (Stripe's internal design system) variables including --hds-color-util-brand-600 (#533afd), --hds-space-core-200 (16px), and --hds-font-family definitions. These should be utilized for theming.
- **Font Loading:** sohne-var is a variable font with weight range 1-1000; ensure proper preload for performance.
- **Mixed Mode Support:** The color mode is "mixed" - components must support both light and dark contexts. Use rgb(255, 255, 255) text on rgb(13, 23, 56) backgrounds, and rgb(6, 27, 49) text on white surfaces.
- **Gradients:** Hero gradients use complex multi-stop linear gradients (68deg, 74.71deg angles). These should be implemented as background images or pseudo-elements, not CSS gradients on text.
- **Motion Accessibility:** Respect prefers-reduced-motion; the system uses expressive motion (1.2s durations) that may need disabling for accessibility.
- **Grid System:** Evidence suggests 12-column layout with 16px gutters (--hds-space-layout-gap) and 1264px max content width (--hds-space-layout-content-maxWidth).

# Core Principles

1. Firm negative constraints:

- Do not use purple/blue gradients on a white background.
- Do not use generic fonts such as Inter, Roboto, Arial, or system-ui.
- Do not use a predictable hero-CTA-features-testimonials template.
- Do not use generic geometric shapes or abstract blobs.
- Do not use stock-looking imagery or cliched visuals.

## Performance

- Keep page loads fast and avoid unnecessary large assets.
- Use modern image formats such as WebP with appropriate compression.
- Implement lazy loading for long-page media.


**Important:** Implementation complexity should match the aesthetic vision. Maximalist designs may need richer code, animation, and effects. Minimalist or refined designs need restraint, precision, spacing, typography, and subtle details. Elegance comes from fully expressing the chosen vision. Do not hold back from a distinctive, committed result.