stripe.com Sample

## 设计思维

在编码之前，先理解上下文并选择一个大胆的美学方向：

- **目的：** 这个界面解决什么问题？谁在使用它？
- **风格：** 选择一个强烈的方向：极简主义、极繁主义、复古未来主义、有机/自然、奢华/精致、 playful/玩具感、杂志/编辑风格、粗粝/原始、装饰艺术/几何、柔和/粉彩、工业/实用主义，或其他清晰的美学。
- **约束：** 技术要求，如框架、性能和可访问性。
- **差异化：** 是什么让它令人难忘？人们会记住的那一件事是什么？
  **关键：** 选择一个清晰的概念并精准执行。大胆的极繁主义和精致的极简主义都可以奏效。意图比强度更重要。

## 优美的默认设置

- 从构图开始，而不是从组件开始。
- 优先使用全出血 hero 图片或全画布视觉锚点。
- 让品牌或产品名称成为最突出的文字。
- 保持文案简洁且可扫描。
- 在添加边框之前，先使用留白、对齐、缩放、裁剪和对比。
- 默认限制系统：不超过两种字体和一种强调色。

# stripe.com 设计系统

## 视觉 DNA

一种精致的金融科技美学，将极简主义精度与富有表现力的渐变艺术相结合。系统采用定制字体（Sohne）搭配精致的权重、4px 基线网格，以及支持明亮通透表面和深邃海军蓝基底的双模式色彩架构。视觉层级通过尺度对比而非仅靠权重来建立，紫色（#533afd）作为主交互强调色。玻璃态拟物出现在抬升表面，而平滑的 cubic-bezier 缓动赋予动效个性。

## 工程 CSS 证据

### 字体排版

**标题：**
- **主字体：**
  - **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:** 证据不足
- **变体：**
  - 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)

**正文：**
- **主字体：**
  - **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:** 证据不足
- **变体：**
  - 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)

### 颜色

**模式：** 混合

**用法：**
- **背景：** rgb(255, 255, 255), rgb(227, 236, 247), rgb(248, 250, 253), rgb(13, 23, 56), rgb(236, 237, 254), rgb(255, 229, 218)
- **表面：** rgb(255, 255, 255), rgb(13, 23, 56), rgb(236, 237, 254), rgb(248, 250, 253), rgb(255, 229, 218)
- **主文本：** rgb(6, 27, 49), rgb(0, 0, 0), rgb(100, 116, 141), rgb(83, 58, 253), rgb(80, 97, 122), rgb(255, 255, 255)
- **次要文本：** rgb(100, 116, 141), rgb(6, 27, 49), rgb(0, 0, 0), rgb(83, 58, 253)
- **边框：** rgb(6, 27, 49), rgb(0, 0, 0), rgb(100, 116, 141), rgb(83, 58, 253), rgb(80, 97, 122), rgb(255, 255, 255)
- **强调色：** rgb(80, 97, 122)
- **渐变：**
  - 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%)

### 间距

**基础单位：** 4px
**比例尺：** 16px, 8px, 32px, 64px, 28px, 48px, 5.5px, 96px, 0.8px, 380px, 4px, 6px
**区块内边距：** 0px 16px
**卡片内边距：** 4px 6px
**间隙：** 8px, 16px, 32px, 64px, 28px, 48px, 96px

### 材质

**表面风格：** 玻璃 / 半透明
**圆角：** 4.51px, 6px
**边框样式：** 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)
**阴影样式：** 证据不足
**模糊：** drop-shadow(rgba(0, 0, 0, 0.25) 0px 2px 25px)

### 动效

**动效级别：** 富有表现力
**持续时间：** 0s, 0.15s, 0.2s, 0.3s, 0.4s, 0.8s, 1.2s
**缓动函数：** 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)
**悬停模式：** all, opacity, color, transform, left, background
**滚动模式：** 26 个 flex 容器，3 个 CSS grid 容器

### 组件示例

**按钮：**
- **数量：** 2
- **字体排版：** 14px / 14px, weight 500
- **内边距：** 0px 16px 0px 0px
- **圆角：** 证据不足
- **颜色：** rgb(80, 97, 122)
- **背景：** 证据不足
- **边框：** 0px none rgb(80, 97, 122)
- **阴影：** 证据不足
- **过渡：** color 0.2s ease

**卡片：**
- **数量：** 19
- **字体排版：** 18px / 25.2px, weight 400, 11px / 15.95px, weight 400, 11px / 11px, weight 500
- **内边距：** 4px 6px
- **圆角：** 4.51px
- **颜色：** rgb(6, 27, 49), rgb(255, 255, 255), rgb(80, 97, 122), rgb(107, 89, 254)
- **背景：** rgb(236, 237, 254), rgb(255, 229, 218)
- **边框：** 0px none rgb(6, 27, 49), 0px none rgb(255, 255, 255), 0px none rgb(80, 97, 122), 0px none rgb(107, 89, 254)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**导航：**
- **数量：** 2
- **字体排版：** 16px / normal, weight 400
- **内边距：** 10px 16px
- **圆角：** 6px
- **颜色：** rgb(0, 0, 0)
- **背景：** 证据不足
- **边框：** 0px none rgb(0, 0, 0)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**hero：**
- **数量：** 8
- **字体排版：** 14px / normal, weight 400, 16px / normal, weight 400, 48px / 55.2px, weight 400
- **内边距：** 证据不足
- **圆角：** 证据不足
- **颜色：** rgb(100, 116, 141), rgb(0, 0, 0), rgb(129, 184, 26), rgb(6, 27, 49)
- **背景：** 证据不足
- **边框：** 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)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**区块：**
- **数量：** 13
- **字体排版：** 16px / normal, weight 400
- **内边距：** 0px 16px
- **圆角：** 证据不足
- **颜色：** rgb(0, 0, 0)
- **背景：** rgb(255, 255, 255), rgb(13, 23, 56), rgb(248, 250, 253)
- **边框：** 0px none rgb(0, 0, 0)
- **阴影：** 证据不足
- **过渡：** all 0s ease

**列表：**
- **数量：** 25
- **字体排版：** 16px / normal, weight 400
- **内边距：** 证据不足
- **圆角：** 证据不足
- **颜色：** rgb(0, 0, 0)
- **背景：** 证据不足
- **边框：** 0px none rgb(0, 0, 0)
- **阴影：** 证据不足
- **过渡：** opacity 0.15s linear, all 0s ease

### 提取诊断

- 从 2881 个总 DOM 元素中采样了 300 个可见元素。
- 置信度：高。
- **冲突检测：** h1 元素在计算样式中显示 color: rgb(129, 184, 26)（绿色），与显示深蓝色/黑色标题的视觉截图证据冲突。保留采样值作为证据。
- 无提取警告。

## AI 视觉分析

### 核心风格

现代金融科技极简主义，带有富有表现力的渐变语言。界面在机构信任（深邃海军蓝 rgb(13, 23, 56)）与初创公司敏捷性（活力紫色渐变）之间取得平衡。字体排版有意轻盈（weight 300-400）且通透，利用负字距打造紧密、精致的标题。系统支持亮色模式（带有微妙蓝灰色调的白色背景）和暗色模式（深邃海军蓝表面），玻璃态拟物效果在不使用厚重阴影的情况下创造深度。

### 纹理与氛围

干净、明亮、通透，带有"玻璃"美学。表面呈现半透明或柔和色调，而非不透明。hero 区域采用戏剧性的对角渐变扫掠（紫色到橙色到洋红色），建立品牌活力。卡片以最小抬升悬浮，利用微妙的 border-radius（4-6px）和半透明背景（rgba 值）。整体感觉是高级、工程化、开发者聚焦的，具有精确对齐和数学化间距。

### 布局与构图

非对称 hero 构图，文本左对齐，衬托渐变背景。内容遵循严格的 12 列网格，具有充裕的间距（16px-96px）。区块在白色/浅灰色和深邃海军蓝之间交替，创造节奏。导航使用药丸形容器，带有圆角（6px）。视觉层级依赖于尺寸尺度（11px 说明文字到 48px hero 文本）而非权重对比。水平滚动 logo 栏和 bento-grid 功能卡片在刚性网格内创造视觉趣味。

### 交互方向

动效平滑而有目的，具有"富有表现力"的个性。过渡使用 cubic-bezier(0.25, 1, 0.5, 1) 实现减速效果。悬停状态改变不透明度（0.15s linear）和颜色，而非触发缩放 transform。链接在 240ms 内以 cubic-bezier(0.45, 0.05, 0.55, 0.95) 过渡。系统避免突兀的动作，偏爱微妙的淡入淡出和颜色偏移。按钮在悬停时显示颜色过渡（0.2s ease），在不使用厚重阴影抬升的情况下保持干净美学。

## 设计系统规则

### 应当

- 对所有间距决策使用 4px 基线网格（8px, 16px, 32px, 64px 比例尺）
- 对正文应用 Sohne 字体族，weight 300，强调/粗体 weight 400
- 对标题保持负字距（-0.01em 到 -0.02em）
- 使用 rgb(83, 58, 253) / #533afd 作为主交互强调色
- 卡片 border-radius 4px，导航容器 6px，大型表面 16px
- 对悬停过渡使用 cubic-bezier(0.25, 1, 0.5, 1)
- 在抬升表面上使用半透明背景（rgba 值）实现玻璃态拟物
- 在浅表面（rgb(248, 250, 253)）和深邃海军蓝（rgb(13, 23, 56)）之间交替，创造区块节奏
- 按钮文本 14px 尺寸使用 weight 500
- 对交互元素的不透明度变化应用 0.15s linear 过渡

### 不应当

- 不要使用边框来定义（证据显示 0px none 边框）；而是依赖背景色对比
- 标题不要超过 400 font weight（避免粗重/加粗字体排版）
- 不要使用纯黑色（rgb(0,0,0)）；主文本使用 rgb(6, 27, 49)
- 不要使用刺眼的投影；使用微妙的环境阴影或玻璃模糊效果
- 悬停状态的过渡持续时间不要超过 0.3s（保持交互迅捷）
- 不要偏离 4px 间距基础单位
- 不要使用 4px-6px-16px-32px 比例尺之外的 border-radius 值
- 不要在未确保对比度比率的情况下将文字放在渐变上（证据显示渐变是装饰性的，而非文本背景）

### 实现备注

- **可用 CSS 变量：** 系统暴露了广泛的 HDS（Stripe 内部设计系统）变量，包括 --hds-color-util-brand-600 (#533afd), --hds-space-core-200 (16px), 和 --hds-font-family 定义。这些应用于主题化。
- **字体加载：** sohne-var 是一种可变字体，权重范围 1-1000；确保适当的预加载以获得性能。
- **混合模式支持：** 颜色模式为"混合"——组件必须同时支持亮暗上下文。在 rgb(13, 23, 56) 背景上使用 rgb(255, 255, 255) 文本，在白色表面上使用 rgb(6, 27, 49) 文本。
- **渐变：** hero 渐变使用复杂的多色标线性渐变（68deg, 74.71deg 角度）。这些应作为背景图片或伪元素实现，而非文本上的 CSS 渐变。
- **动效无障碍：** 尊重 prefers-reduced-motion；系统使用富有表现力的动效（1.2s 持续时间），可能需要为无障碍禁用。
- **网格系统：** 证据表明 12 列布局，16px 间距（--hds-space-layout-gap）和 1264px 最大内容宽度（--hds-space-layout-content-maxWidth）。

# 核心原则

1. 坚定的负面约束：

- 不要在白色背景上使用紫色/蓝色渐变。
- 不要使用通用字体，如 Inter, Roboto, Arial 或 system-ui。
- 不要使用可预测的 hero-CTA-功能-评价模板。
- 不要使用通用几何形状或抽象斑点。
- 不要使用看起来像素材的图片或陈词滥调的视觉效果。

## 性能

- 保持页面加载快速，避免不必要的大型资源。
- 使用现代图片格式，如 WebP，并配合适当的压缩。
- 对长页面媒体实现懒加载。

**重要：** 实现复杂度应与美学愿景相匹配。极繁主义设计可能需要更丰富的代码、动画和效果。极简或精致的设计需要克制、精确、间距和微妙细节。优雅来自于充分表达所选愿景。不要对独特、坚定的结果有所保留。