stripe.com Sample

# Design Thinking
Before coding, understand the context and define a bold aesthetic direction:
- **Purpose**: What problem does this interface solve? Who is using it?
- **Style**: Choose an extreme style: minimalism, maximalism, retro-futurism, organic/natural, luxury/artisanal, playful/toy-like, magazine/editorial, raw/rough, art deco/geometric, soft pastel, industrial/practical, etc. There are many styles to choose from. You can draw inspiration from them, but ensure your design truly aligns with the selected aesthetic direction.
- **Constraints**: Technical requirements (frameworks, performance, accessibility).
- **Differentiation**: What makes it memorable? What one thing will people remember?
**Key**: Choose a clear conceptual direction and execute it precisely. Both bold maximalism and refined minimalism are viable — the key is intention, not intensity.
## Aesthetic Default Settings
- Start with composition, not components.
- Prioritize full-bleed hero images or full-canvas visual anchors.
- Make the brand or product name the most prominent text.
- Keep copy concise for quick scanning.
- Use white space, alignment, scaling, cropping, and contrast before adding borders.
- Default constraint system: no more than two fonts and one accent color.

# Overall Atmosphere
## Design System
### 1. Core Style
Clean, technical financial infrastructure aesthetic balancing trust and innovation. Minimalist layouts with generous whitespace, punctuated by sophisticated gradient wave animations and dense data visualizations. The design oscillates between light "business" modes and dark "developer" modes to serve dual audiences.

### 2. Color Palette
- **Primary Action:** Electric Indigo/Violet (`#635BFF` spectrum) for CTAs and interactive states
- **Backgrounds:** Pure White (`#FFFFFF`) for commercial sections, Deep Navy (`#0A2540`) for technical/developer sections
- **Accents:** Fluid gradient meshes blending Orange, Pink, Magenta, and Azure in hero/background waves
- **Text:** Charcoal Black for primary headings, Slate Gray (`#6B7280`) for secondary text, White for dark mode

### 3. Font Stack
Modern geometric sans-serif (Inter-style), clean letterforms with tight leading for headings. Monospace accents for technical metrics and API-related content. Large display sizing (48–72px) for hero statements.

### 4. Texture
Glassmorphism navigation with backdrop blur, smooth SVG wave meshes, subtle grid patterns on dark sections, soft shadows on elevated cards. No harsh borders; reliance on spacing and background contrast for separation.

### 5. Motion Design
Fluid, physics-based animations: continuous wave undulations in backgrounds, count-up number animations for statistics, subtle card lift on hover, staggered fade-in reveals on scroll. Motion serves to demonstrate "infrastructure in action."

## Component Guidelines
### Button
**Primary:** Solid indigo fill, white text, 6–8px radius, right-arrow icon on CTAs, medium padding (12px 24px).  
**Secondary:** Transparent with 1px dark border, dark text, same radius.  
**Tertiary:** Text-only with arrow, purple text color.

### Card
Large border-radius (16–24px), white background, subtle border (1px `rgba(0,0,0,0.08)`), overflow hidden for internal images. Hover state adds purple border tint and soft shadow lift (`transform: translateY(-4px)`).

### Navigation
Fixed header with `backdrop-filter: blur(12px)` on scroll, transitioning from transparent to semi-transparent white. Dropdown mega-menus with grid layouts. Minimal height (64px), flexbox alignment.

### Input
Clean rectangular inputs with 8px radius, light gray border transitioning to purple on focus, generous internal padding (16px).

### Typography
**Headings:** Bold weight, tight tracking (-0.02em), gradient text fills for emphasis (purple-to-blue).  
**Body:** Regular weight, 1.6 line height, max-width constraints (65ch) for readability.  
**Eyebrows:** All-caps or small labels, purple or gray, above main headings.

## Distinctive Element Few-shot Examples

### 1. Hero Wave Animation Section
**Purpose:**
Immediate brand establishment using flowing gradient energy to symbolize global money movement and modern infrastructure.

**Evidence:**
- DOM: `div.hero-wave-animation` nested within `section.hero-section-container`
- Screenshot: Large orange-pink-purple-blue gradient wave sweeping from top-right to center-left behind headline "金融基础设施，托举营收增长"

**Visual Rules:**
- **Layout:** Full-width viewport section, content constrained to max-width (1200px) and left-aligned, wave positioned absolute bleeding off right edge
- **Color:** White background base with multi-color gradient mesh wave (warm orange transitioning to cool purple/blue)
- **Typography:** Hero H1 in dark charcoal (first clause) with gradient purple-to-blue text fill (second clause "无论您是刚刚起步...")
- **Spacing:** 120px+ top padding to clear navigation, 80px bottom padding
- **Radius / border / shadow:** No container borders; wave uses Gaussian blur edges for softness
- **Motion:** Infinite loop wave undulation (CSS/SVG morphing), live GDP counter incrementing decimals above headline

**Recreation Prompt:**
> Create a hero section with an animated gradient mesh wave in orange, pink, and purple flowing from the top-right corner across a white background. Place a live counter "Stripe 承载的全球 GDP 份额: 1.64%" with incrementing decimals above a massive Chinese headline. The headline should split styles: first half solid black, second half purple-blue gradient. Add a purple primary button "立即开始 →" and a secondary outlined button "通过 Google 注册" with Google icon. Use generous whitespace and ensure the wave overlaps the text slightly for depth.

**Structure Sketch:**
```html
<section class="hero-section">
  <div class="hero-wave-animation">
    <svg viewBox="0 0 1440 800" preserveAspectRatio="xMaxYMid slice">
      <defs>
        <linearGradient id="waveGradient" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" style="stop-color:#FF6B35;stop-opacity:0.8" />
          <stop offset="50%" style="stop-color:#F7931E;stop-opacity:0.6" />
          <stop offset="100%" style="stop-color:#635BFF;stop-opacity:0.4" />
        </linearGradient>
      </defs>
      <path class="wave-path" fill="url(#waveGradient)" d="..." />
    </svg>
  </div>
  
  <div class="hero-content">
    <div class="live-metric">
      <span class="metric-label">Stripe 承载的全球 GDP 份额：</span>
      <span class="metric-value" data-count="1.64312343">1.64312343%</span>
    </div>
    
    <h1>
      金融基础设施，托举营收增长。
      <span class="gradient-text">无论您是刚刚起步，还是已达百亿规模，我们帮助您在全球范围内接受付款、提供金融服务，并实施定制化营收模式。</span>
    </h1>
    
    <div class="cta-group">
      <a href="#" class="btn-primary">立即开始 →</a>
      <a href="#" class="btn-secondary">
        <img src="google-icon.svg" alt="" />
        通过 Google 注册
      </a>
    </div>
  </div>
</section>
```

### 2. Enterprise Case Study Card
**Purpose:**
Social proof through high-impact visual storytelling, demonstrating scale with expansive photography and precise metrics.

**Evidence:**
- DOM: `section.section-row` containing Hertz case study content
- Screenshot: Large aerial photograph of intersection with yellow taxi, yellow "H" logo badge, stats bar showing "160 个国家/地区", "超过 1.1万个全球服务网点"

**Visual Rules:**
- **Layout:** Stacked vertical structure—header text row, expansive full-width image (16:9 aspect), horizontal stats bar below
- **Color:** White card background, image with natural saturation, yellow brand accent for logo badge, dark text
- **Typography:** Small eyebrow label above title, large bold heading, body text in gray, stats in bold with light weight labels
- **Spacing:** 40px gap between header and image, 24px internal padding on image container, 32px padding on stats bar
- **Radius / border / shadow:** 16px border-radius on image container, subtle shadow (`0 4px 24px rgba(0,0,0,0.06)`)
- **Motion:** Image scales 1.02x on hover, "阅读案例" link slides right on hover

**Recreation Prompt:**
> Create an enterprise case study card with a header containing a left-aligned title "以敏捷的金融基础设施，驱动大型企业核心转型" with descriptive text below, and a purple CTA button "Stripe 大型企业解决方案 →" aligned to the right. Below, place a large rounded image container (16px radius) showing an aerial city photograph. Overlay a yellow square logo badge with "H" in the top-left of the image. Add a "阅读案例 →" text link aligned to the right of the image header. Below the image, create a horizontal stats bar with three columns: "160 个国家/地区", "超过 1.1万个全球服务网点", and "所用产品 Payments、Terminal、Connect、Radar和Stripe Sigma". Use subtle dividers between stats.

**Structure Sketch:**
```html
<article class="case-study-card enterprise">
  <header class="card-header">
    <div class="header-text">
      <h2>以敏捷的金融基础设施，驱动大型企业核心转型</h2>
      <p>《财富》100 强企业已有 50% 使用 Stripe 推动业务增长...</p>
    </div>
    <a href="#" class="btn-primary">Stripe 大型企业解决方案 →</a>
  </header>
  
  <div class="card-media">
    <div class="company-badge" style="background-color: #FFD700;">
      <span>H</span>
    </div>
    <a href="#" class="case-link">阅读案例 →</a>
    <img src="hertz-aerial.jpg" alt="Hertz city intersection" />
  </div>
  
  <footer class="card-stats">
    <div class="stat">
      <strong>160</strong>
      <span>个国家/地区</span>
    </div>
    <div class="stat">
      <strong>超过 1.1万</strong>
      <span>个全球服务网点</span>
    </div>
    <div class="stat products">
      <span>所用产品</span>
      <strong>Payments、Terminal、Connect、Radar和Stripe Sigma</strong>
    </div>
  </footer>
</article>
```

### 3. Modular Solutions Bento Grid
**Purpose:**
Dense product showcase demonstrating versatility through a masonry-style grid of interactive UI mockups.

**Evidence:**
- DOM: `div.modular-solutions-bento-card__border-color` and section with "灵活的解决方案，适配各种业务模式"
- Content: Mixed cells showing checkout forms, terminal screens, agent commerce chat, crypto interfaces

**Visual Rules:**
- **Layout:** CSS Grid with asymmetric spans (some cells 2x1, others 1x1), 16px gap between cells
- **Color:** White cards with `rgba(0,0,0,0.06)` borders, colorful internal UI mockups (green checkmarks, purple buttons, chat bubbles)
- **Typography:** Card titles in 18px bold, UI text uses system fonts to mimic real interfaces
- **Spacing:** 24px internal padding on cards, 80px section vertical padding
- **Radius / border / shadow:** 12px border-radius on cards, border transitions to purple on hover
- **Motion:** Card lifts -4px on hover with shadow increase, internal UI elements animate (typing indicators, card insertion animations)

**Recreation Prompt:**
> Create a bento grid section titled "灵活的解决方案，适配各种业务模式。" with a 3-column grid layout. Include diverse card types: a wide card showing a checkout interface "向 Roastery 付款" with US$5.46 amount and card input fields; a tall card showing an AI chat interface "布局智能体商务" with product recommendations; a square card showing a terminal screen "请挥卡、插卡或刷卡支付"; and another card showing crypto interface "$709 USDC". Each card should have white background, 12px radius, subtle border, and purple border on hover. Include small titles below each UI mockup describing the feature.

**Structure Sketch:**
```html
<section class="solutions-bento">
  <header class="section-header">
    <h2>灵活的解决方案，适配各种业务模式。</h2>
    <p>一系列全面的支付和金融工具，既能单独使用，也能组合使用...</p>
  </header>
  
  <div class="bento-grid">
    <div class="bento-card wide">
      <div class="ui-preview checkout">
        <header>向 Roastery 付款</header>
        <div class="amount">US$5.46</div>
        <div class="card-input">•••• •••• •••• 4242</div>
      </div>
      <h3>接受并优化全球支付，涵盖线上和线下</h3>
    </div>
    
    <div class="bento-card tall">
      <div class="ui-preview chat">
        <div class="agent-bubble">我正在更新我的衣橱...</div>
        <div class="product-grid">
          <div class="product">基础款连帽衫<br/>SGD 65.00</div>
        </div>
      </div>
      <h3>布局智能体商务</h3>
    </div>
    
    <div class="bento-card">
      <div class="ui-preview terminal">
        <div class="terminal-screen">请挥卡、插卡或刷卡支付</div>
      </div>
    </div>
    
    <div class="bento-card wide">
      <div class="ui-preview crypto">
        <div class="crypto-amount">$709 USDC</div>
        <div class="stablecoin-label">通过稳定币和加密货币...</div>
      </div>
    </div>
  </div>
</section>
```

### 4. Global Statistics Pillar
**Purpose:**
Credibility establishment through massive scale metrics presented with typographic impact and animated counting.

**Evidence:**
- DOM: `section.stats-section.stats-section--time-daytime` with "全球商务的 支柱"
- Content: "135+", "US$1.9万亿", "99.999%", "2亿+" metrics

**Visual Rules:**
- **Layout:** Full-width section, centered content, 4-column grid for metrics below eyebrow heading
- **Color:** White background, charcoal numbers, gray labels, subtle purple accents on plus signs
- **Typography:** Display size numbers (64–80px), bold weight, plus symbols and currency symbols aligned top or baseline, small caps labels (14px, letter-spacing 0.05em)
- **Spacing:** 120px vertical padding, 60px gap between heading and grid, even column distribution
- **Radius / border / shadow:** None, flat design with generous whitespace separation
- **Motion:** Count-up animation from 0 on scroll into viewport, staggered delay between columns (100ms each)

**Recreation Prompt:**
> Create a statistics section with a centered small eyebrow title "全球商务的 支柱" above a 4-column grid. Each column contains a massive metric: "135+" (label: "支持的货币和支付方式"), "US$1.9万亿" (label: "2025 年支付处理额"), "99.999%" (label: "Stripe 服务的历史正常运行时间"), "2亿+" (label: "Stripe Billing 管理的活跃订阅量"). Use 72px bold font for numbers, 16px regular for labels. Numbers should animate counting up when the section enters the viewport. Add a subtle animated gradient wave divider at the bottom of the section in purple/pink tones.

**Structure Sketch:**
```html
<section class="stats-pillar">
  <span class="eyebrow">全球商务的 支柱</span>
  
  <div class="stats-grid">
    <div class="stat-column">
      <div class="stat-figure">
        <span class="number" data-target="135">0</span>
        <span class="symbol">+</span>
      </div>
      <div class="stat-label">支持的货币和支付方式</div>
    </div>
    
    <div class="stat-column">
      <div class="stat-figure">
        <span class="currency">US$</span>
        <span class="number" data-target="1.9">0</span>
        <span class="unit">万亿</span>
      </div>
      <div class="stat-label">2025 年支付处理额</div>
    </div>
    
    <div class="stat-column">
      <div class="stat-figure">
        <span class="number" data-target="99.999">0</span>
        <span class="symbol">%</span>
      </div>
      <div class="stat-label">Stripe 服务的历史正常运行时间</div>
    </div>
    
    <div class="stat-column">
      <div class="stat-figure">
        <span class="number" data-target="2">0</span>
        <span class="unit">亿+</span>
      </div>
      <div class="stat-label">Stripe Billing 管理的活跃订阅量</div>
    </div>
  </div>
  
  <div class="wave-divider purple-pink"></div>
</section>
```

### 5. Developer Infrastructure Dark Section
**Purpose:**
Technical credibility and API/developer appeal through high-contrast dark mode with glowing accents and code-adjacent iconography.

**Evidence:**
- DOM: `section.hds-color-mode.section.hds-mode--dark` with "可靠、可扩展的基础设施，适配任何技术栈"
- Screenshot: Deep navy background, glowing purple wave lines at bottom, white text, outlined secondary buttons

**Visual Rules:**
- **Layout:** Full-width dark section, two-column split (text left, code/graphics right or stacked content blocks), glowing wave positioned at bottom
- **Color:** Background `#0A2540`, text white/light gray, primary buttons solid purple, secondary buttons outlined white/gray, glowing wave in neon purple/pink
- **Typography:** White headings (32–40px), slate-gray body text (`#A3B3C2`), monospace for API metrics
- **Spacing:** 100px vertical padding, 48px gap between text blocks
- **Radius / border / shadow:** Glowing wave uses blur filters (`filter: blur(40px)`) and opacity layering, buttons 6px radius
- **Motion:** Glowing wave pulses and flows horizontally, text fades in on scroll, buttons hover with brightness increase

**Recreation Prompt:**
> Create a dark mode section with deep navy background (#0A2540). Include a header with white text "可靠、可扩展的基础设施，适配任何技术栈" and subtitle in slate gray. Add two buttons: purple solid "查看开发者文档 →" and dark outlined "查看 Stripe 的 GitHub". Below, create a two-column layout with text blocks on the left describing "无缝对接现有系统" and "从容扩展业务", and large metrics on the right showing "5亿+ 每天 API 请求数", "1万+ 每秒 API 请求数", "15万+ 每分钟交易笔数" in white monospace-style font. At the very bottom, add an SVG wave animation with glowing purple and pink gradient lines that pulse slowly.

**Structure Sketch:**
```html
<section class="developer-section dark">
  <div class="container">
    <header class="section-header">
      <h2>可靠、可扩展的基础设施，适配任何技术栈。</h2>
      <p class="subtitle">借助灵活的集成选项，让 Stripe 完美契合您的业务需求。</p>
      <div class="actions">
        <a href="#" class="btn-primary">查看开发者文档 →</a>
        <a href="#" class="btn-outline light">查看 Stripe 的 GitHub</a>
      </div>
    </header>
    
    <div class="content-grid">
      <div class="feature-list">
        <article>
          <h3>无缝对接现有系统：</h3>
          <p>通过 API、合作伙伴应用或预构建集成...</p>
        </article>
        <article>
          <h3>从容扩展业务。</h3>
          <p>即使在流量高峰期间，也能以稳定的速度和可靠性...</p>
        </article>
      </div>
      
      <div class="metrics-display">
        <div class="metric">
          <span class="value">5亿+</span>
          <span class="label">每天 API 请求数</span>
        </div>
        <div class="metric">
          <span class="value">1万+</span>
          <span class="label">每秒 API 请求数</span>
        </div>
        <div class="metric">
          <span class="value">15万+</span>
          <span class="label">每分钟交易笔数</span>
        </div>
      </div>
    </div>
  </div>
  
  <div class="glowing-wave-footer">
    <div class="wave-layer layer-1"></div>
    <div class="wave-layer layer-2"></div>
  </div>
</section>
```

### 6. Floating Navigation Header
**Purpose:**
Persistent wayfinding with premium glassmorphism treatment that adapts to scroll position without obscuring content.

**Evidence:**
- DOM: `header.hds-color-mode.navigation.section.section--white` with `hds-navigation-menu`
- Screenshot: Fixed top, blur effect, Stripe wordmark, dropdown triggers with chevrons, purple "联系销售" button

**Visual Rules:**
- **Layout:** Fixed position, full-width, height 64px, flexbox space-between (logo left, nav center, actions right)
- **Color:** Transparent initially, transitioning to `rgba(255,255,255,0.8)` with `backdrop-filter: blur(12px)` on scroll, dark text, purple CTA
- **Typography:** 14–15px font size, medium weight, system font stack
- **Spacing:** 24px horizontal padding, 32px gap between nav items
- **Radius / border / shadow:** No border initially, subtle bottom border appears on scroll (`rgba(0,0,0,0.05)`), buttons 6px radius
- **Motion:** Background opacity transition on scroll (0.3s ease), dropdown fade-in with Y-axis slide (8px), hover underlines on links

**Recreation Prompt:**
> Create a fixed navigation header that starts transparent and becomes white with backdrop blur when scrolled. Place the Stripe wordmark logo on the left. Center navigation items with dropdown chevrons: "产品", "解决方案", "开发者", "资源", plus plain link "定价". On the right, place an outlined button "登录" and a solid purple button "联系销售 →". Dropdown menus should appear on hover, full-width mega-menu style with grid content, fading in and sliding down 8px.

**Structure Sketch:**
```html
<header class="navigation-header" id="nav">
  <div class="nav-wrapper">
    <a href="/" class="logo">stripe</a>
    
    <nav class="nav-menu">
      <div class="nav-item dropdown">
        <button>产品 <svg class="chevron"><path d="..."/></svg></button>
        <div class="dropdown-menu">
          <!-- Mega menu content -->
        </div>
      </div>
      <div class="nav-item dropdown">
        <button>解决方案 <svg class="chevron"/></button>
      </div>
      <div class="nav-item dropdown">
        <button>开发者 <svg class="chevron"/></button>
      </div>
      <div class="nav-item dropdown">
        <button>资源 <svg class="chevron"/></button>
      </div>
      <a href="#" class="nav-link">定价</a>
    </nav>
    
    <div class="nav-actions">
      <a href="#" class="btn-text">登录</a>
      <a href="#" class="btn-primary small">联系销售 →</a>
    </div>
  </div>
</header>
```

## Engineering CSS Evidence

Compressed from live DOM computed styles. This section keeps high-frequency tokens and intent, not raw CSS dumps.

### Compressed Design Tokens

**Mode:** light

#### Color Roles
- **color.text.primary:** #50617a (92)
- **color.text.secondary:** #50617a (15)
- **color.surface.base:** #533afd (7)
- **color.accent:** #50617a (154)
- **color.border.default:** #50617a (92)
- **color.focus.ring:** #50617a (92)

#### Typography Roles
- **font.family.primary:** sohne-var (280)
- **font.size.display:** 56px (55)
- **font.size.body:** 16px (22)
- **font.size.label:** 12px (1)
- **ratio:** display is 3.5x body

#### Spacing Rhythm
- **base unit:** 4px
- **space.1:** 24px (60)
- **space.2:** 15.5px (36)
- **space.3:** 14.5px (24)
- **space.4:** 16px (17)
- **space.5:** 16.5px (14)

#### Radius Roles
- **radius.sharp:** 4px (29)

#### Shadow Intent
- **level:** none
- **usage:** 0
- **note:** flat surfaces dominate

#### Motion Intent
- **level:** expressive
- **range:** 100-1200ms
- **common durations:** 300ms (146), 100ms (6), 800ms (6)
- **easing style:** cubic-bezier(0.25, 1, 0.5, 1) (126), cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1), cubic-bezier(0.25, 1, 0.5, 1) (19), cubic-bezier(0.165, 0.84, 0.44, 1) (6)

### Distinctive Implementation Signals

- Flat surfaces are preferred over decorative depth.
- Motion is expressive, centered around 100-1200ms.
- Type hierarchy is ratio-driven: display is 3.5x body.

### Extraction Diagnostics

- Sampled 280 visible elements from 2892 total DOM elements.
- Confidence: high.
- No extraction warnings.

## Core Principles
1. Firmly Refuse (Negative Constraints):
- Prohibit using purple/blue gradients on white backgrounds
- Prohibit using common fonts (Inter, Roboto, Arial, system-ui)
- Prohibit using predictable hero-CTA-feature-review templates
- Prohibit using common geometric shapes or abstract spots
- Prohibit using visual effects that look like stock images or clichés
## Performance Optimization
- Ensure pages load quickly, avoid unnecessary large resources
- Use modern image formats (WebP) and appropriate compression
- Implement lazy loading techniques for long page content
**Important Note**: The implementation complexity should match the aesthetic vision. Maximalist designs require complex code as well as a lot of animations and effects. Minimalist or refined designs require restraint, precision, and attention to spacing, typography, and subtle details. Elegance comes from a perfect interpretation of the vision.