# 以 Stripe 为灵感的设计系统

> Category: 金融科技与加密货币
> 支付基础设施。标志性紫色渐变，300 字重的优雅。

## 1. 视觉主题与氛围

Stripe 的网站是金融科技设计的黄金标准——这套系统能同时呈现出技术感与奢华感、精准感与温度感。页面以洁净的白色画布（`#ffffff`）为底，深海军蓝标题（`#061b31`）和标志性紫色（`#533afd`）兼作品牌锚点与交互强调色。这里的紫色并非企业软件那种冷冽、临床感的紫，而是浓郁、饱和的堇紫色，传达出自信与高级感。整体印象仿佛一家金融机构经世界顶级字体工作室重新设计。

定制可变字体 `sohne-var` 是 Stripe 视觉识别的核心元素。每个文本元素均启用 OpenType `"ss01"` 风格集，该特性会修改字形，呈现出独特的几何感与现代气息。在展示尺寸（48px-56px）下，sohne-var 使用 300 字重——这是一种极细的标题字重，营造出一种空灵、近乎低语般的权威感。这与"粗体大标题"的惯例截然相反；Stripe 的标题无需大声呼喊。负值字间距（56px 时为 -1.4px，48px 时为 -0.96px）将文字压缩成致密、经过精密工程计算的文字块。在较小尺寸下，系统同样采用 300 字重，并按比例收紧字间距；金融数据展示则通过 `"tnum"` 启用等宽数字。

Stripe 真正与众不同之处在于其阴影系统。与大多数网站的扁平或单层阴影不同，Stripe 采用多层蓝调阴影：标志性的 `rgba(50,50,93,0.25)` 与 `rgba(0,0,0,0.1)` 叠加，营造出带有冷调、几乎具有大气感的纵深效果——仿佛元素漂浮于暮色天空中。主阴影色（50,50,93）的蓝灰色底调与品牌的海军蓝-紫色调色盘直接呼应，使连层次感都充满品牌气息。

**核心特征：**
- 所有文本均启用 OpenType `"ss01"` 的 sohne-var——定义品牌字形的定制风格集
- 300 字重作为标志性标题字重——轻盈、自信、反传统
- 展示尺寸下的负值字间距（56px 时为 -1.4px，向下逐步放宽）
- 使用 `rgba(50,50,93,0.25)` 的蓝调多层阴影——带有品牌色彩的层次感
- 深海军蓝（`#061b31`）标题而非黑色——温暖、高级、金融级质感
- 保守的圆角半径（4px-8px）——无胶囊形，无生硬感
- 宝石红（`#ea2261`）与品红（`#f96bee`）作为渐变和装饰性强调色
- `SourceCodePro` 作为代码与技术标签的等宽配套字体

## 2. 色彩规范

### 主色
- **Stripe 紫**（`#533afd`）：主品牌色，CTA 背景，链接文字，交互高亮。饱和的蓝紫色，锚定整套系统。
- **深海军蓝**（`#061b31`）：`--hds-color-heading-solid`。主标题色。非黑非灰——极深的蓝色为文字增添温度与纵深。
- **纯白**（`#ffffff`）：页面背景，卡片表面，深色背景上的按钮文字。

### 品牌深色
- **品牌深色**（`#1c1e54`）：`--hds-color-util-brand-900`。深靛蓝，用于深色区块、页脚背景及沉浸式品牌场景。
- **深海军蓝**（`#0d253d`）：`--hds-color-core-neutral-975`。最深的中性色——接近黑色但带蓝调，在不显生硬的前提下实现最大纵深。

### 强调色
- **宝石红**（`#ea2261`）：`--hds-color-accentColorMode-ruby-icon-solid`。暖红粉，用于图标、警示及强调元素。
- **品红**（`#f96bee`）：`--hds-color-accentColorMode-magenta-icon-gradientMiddle`。鲜明的粉紫色，用于渐变和装饰性高光。
- **浅品红**（`#ffd7ef`）：`--hds-color-util-accent-magenta-100`。品红主题卡片与徽章的淡色背景。

### 交互色
- **主紫**（`#533afd`）：主链接色，激活态，选中元素。
- **悬停紫**（`#4434d4`）：主要元素悬停态的深紫色。
- **深紫**（`#2e2b8c`）：`--hds-color-button-ui-iconHover`。图标悬停态的深紫色。
- **浅紫**（`#b9b9f9`）：`--hds-color-action-bg-subduedHover`。克制型悬停背景的柔和薰衣草色。
- **中紫**（`#665efd`）：`--hds-color-input-selector-text-range`。范围选择器与输入框高亮色。

### 中性色阶
- **标题**（`#061b31`）：主标题，导航文字，强标签。
- **标签**（`#273951`）：`--hds-color-input-text-label`。表单标签，次级标题。
- **正文**（`#64748d`）：次级文字，描述，说明文字。
- **成功绿**（`#15be53`）：状态徽章，成功指示（背景/边框使用 0.2-0.4 透明度）。
- **成功文字**（`#108c3d`）：成功徽章文字色。
- **柠檬黄**（`#9b6829`）：`--hds-color-core-lemon-500`。警告与高亮强调色。

### 表面与边框
- **默认边框**（`#e5edf5`）：卡片、分割线和容器的标准边框色。
- **紫色边框**（`#b9b9f9`）：按钮和输入框的激活/选中态边框。
- **柔和紫边框**（`#d6d9fc`）：次级元素的淡紫色边框。
- **品红边框**（`#ffd7ef`）：品红主题元素的粉色边框。
- **虚线边框**（`#362baa`）：拖放区与占位元素的虚线边框。

### 阴影色
- **蓝调阴影**（`rgba(50,50,93,0.25)`）：标志性——蓝调主阴影色。
- **深蓝阴影**（`rgba(3,3,39,0.25)`）：高层级元素的更深蓝阴影。
- **黑色阴影**（`rgba(0,0,0,0.1)`）：强化纵深的辅助阴影层。
- **环境阴影**（`rgba(23,23,23,0.08)`）：微妙层次感的柔和环境阴影。
- **轻阴影**（`rgba(23,23,23,0.06)`）：极轻浮起感的最小环境阴影。

## 3. 字体规范

### 字体族
- **主字体**：`sohne-var`，备用字体：`SF Pro Display`
- **等宽字体**：`SourceCodePro`，备用字体：`SFMono-Regular`
- **OpenType 特性**：所有 sohne-var 文字全局启用 `"ss01"`；金融数据与说明文字中的数字使用 `"tnum"` 等宽数字。

### 字体层级

| 角色 | 字体 | 尺寸 | 字重 | 行高 | 字间距 | 特性 | 备注 |
|------|------|------|--------|-------------|----------------|----------|-------|
| 展示主标 | sohne-var | 56px (3.50rem) | 300 | 1.03（紧凑） | -1.4px | ss01 | 最大尺寸，低语般的权威感 |
| 大号展示 | sohne-var | 48px (3.00rem) | 300 | 1.15（紧凑） | -0.96px | ss01 | 次级主标题 |
| 章节标题 | sohne-var | 32px (2.00rem) | 300 | 1.10（紧凑） | -0.64px | ss01 | 功能区块标题 |
| 大副标题 | sohne-var | 26px (1.63rem) | 300 | 1.12（紧凑） | -0.26px | ss01 | 卡片标题，子区块 |
| 副标题 | sohne-var | 22px (1.38rem) | 300 | 1.10（紧凑） | -0.22px | ss01 | 较小章节标题 |
| 大正文 | sohne-var | 18px (1.13rem) | 300 | 1.40 | 正常 | ss01 | 功能描述，引言文字 |
| 正文 | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | 正常 | ss01 | 标准阅读文字 |
| 按钮 | sohne-var | 16px (1.00rem) | 400 | 1.00（紧凑） | 正常 | ss01 | 主按钮文字 |
| 小按钮 | sohne-var | 14px (0.88rem) | 400 | 1.00（紧凑） | 正常 | ss01 | 次级/紧凑按钮 |
| 链接 | sohne-var | 14px (0.88rem) | 400 | 1.00（紧凑） | 正常 | ss01 | 导航链接 |
| 说明 | sohne-var | 13px (0.81rem) | 400 | 正常 | 正常 | ss01 | 小标签，元数据 |
| 小说明 | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | 正常 | ss01 | 细则，时间戳 |
| 等宽说明 | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | 金融数据，数字 |
| 微型 | sohne-var | 10px (0.63rem) | 300 | 1.15（紧凑） | 0.1px | ss01 | 极小标签，坐标轴标记 |
| 等宽微型 | sohne-var | 10px (0.63rem) | 300 | 1.15（紧凑） | -0.3px | tnum | 图表数据，小数字 |
| 最小号 | sohne-var | 8px (0.50rem) | 300 | 1.07（紧凑） | 正常 | ss01 | 最小标签 |
| 代码正文 | SourceCodePro | 12px (0.75rem) | 500 | 2.00（宽松） | 正常 | -- | 代码块，语法高亮 |
| 代码粗体 | SourceCodePro | 12px (0.75rem) | 700 | 2.00（宽松） | 正常 | -- | 粗体代码，关键字 |
| 代码标签 | SourceCodePro | 12px (0.75rem) | 500 | 2.00（宽松） | 正常 | 大写 | 技术标签 |
| 代码微型 | SourceCodePro | 9px (0.56rem) | 500 | 1.00（紧凑） | 正常 | ss01 | 极小代码注释 |

### 原则
- **细字重即签名**：展示尺寸下 300 字重是 Stripe 最具辨识度的排版选择。当他人用 600-700 字重来夺取注意力时，Stripe 以轻盈作为奢华——文字本身足够自信，无需字重来彰显权威。
- **ss01 无处不在**：`"ss01"` 风格集不可或缺。它修改特定字形（可能是 `a`、`g`、`l` 的备选形态），使所有 sohne-var 文字呈现更具几何感、更富现代气息的风貌。
- **两种 OpenType 模式**：展示/正文文字使用 `"ss01"`，金融数据中的数字使用 `"tnum"` 等宽数字。两者互不重叠——段落中的数字用 ss01，数据表格中的数字用 tnum。
- **递进式字间距**：字间距随尺寸增大而逐步收紧：56px 时 -1.4px，48px 时 -0.96px，32px 时 -0.64px，26px 时 -0.26px，16px 及以下恢复正常。
- **双字重简洁**：主要使用 300（正文与标题）和 400（UI/按钮）。主字体不使用粗体（700）——SourceCodePro 使用 500/700 以区分代码层次。

## 4. 组件样式

### 按钮

**主紫色按钮**
- 背景：`#533afd`
- 文字：`#ffffff`
- 内边距：8px 16px
- 圆角：4px
- 字体：16px sohne-var 400 字重，`"ss01"`
- 悬停：`#4434d4` 背景
- 用途：主要 CTA（"立即开始"，"联系销售"）

**幽灵/描边按钮**
- 背景：透明
- 文字：`#533afd`
- 内边距：8px 16px
- 圆角：4px
- 边框：`1px solid #b9b9f9`
- 字体：16px sohne-var 400 字重，`"ss01"`
- 悬停：背景变为 `rgba(83,58,253,0.05)`
- 用途：次级操作

**透明信息按钮**
- 背景：透明
- 文字：`#2874ad`
- 内边距：8px 16px
- 圆角：4px
- 边框：`1px solid rgba(43,145,223,0.2)`
- 用途：第三级/信息类操作

**中性幽灵按钮**
- 背景：透明（`rgba(255,255,255,0)`）
- 文字：`rgba(16,16,16,0.3)`
- 内边距：8px 16px
- 圆角：4px
- 轮廓：`1px solid rgb(212,222,233)`
- 用途：禁用或弱化操作

### 卡片与容器
- 背景：`#ffffff`
- 边框：`1px solid #e5edf5`（标准）或 `1px solid #061b31`（深色强调）
- 圆角：4px（紧凑），5px（标准），6px（舒适），8px（特色）
- 阴影（标准）：`rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px`
- 阴影（环境）：`rgba(23,23,23,0.08) 0px 15px 35px 0px`
- 悬停：阴影加深，通常叠加蓝调阴影层

### 徽章/标签/胶囊
**中性胶囊**
- 背景：`#ffffff`
- 文字：`#000000`
- 内边距：0px 6px
- 圆角：4px
- 边框：`1px solid #f6f9fc`
- 字体：11px 400 字重

**成功徽章**
- 背景：`rgba(21,190,83,0.2)`
- 文字：`#108c3d`
- 内边距：1px 6px
- 圆角：4px
- 边框：`1px solid rgba(21,190,83,0.4)`
- 字体：10px 300 字重

### 输入框与表单
- 边框：`1px solid #e5edf5`
- 圆角：4px
- 聚焦：`1px solid #533afd` 或紫色光晕
- 标签：`#273951`，14px sohne-var
- 文字：`#061b31`
- 占位符：`#64748d`

### 导航
- 白色背景上的简洁水平导航，粘性定位并带模糊背景
- 品牌字标左对齐
- 链接：sohne-var 14px 400 字重，`#061b31` 文字，`"ss01"`
- 圆角：导航容器 6px
- CTA：紫色按钮右对齐（"登录"，"立即开始"）
- 移动端：汉堡菜单切换，6px 圆角

### 装饰元素
**虚线边框**
- `1px dashed #362baa`（紫色）用于占位/拖放区
- `1px dashed #ffd7ef`（品红）用于品红主题装饰边框

**渐变强调**
- 宝石红到品红的渐变（`#ea2261` 到 `#f96bee`）用于主视觉区装饰
- 品牌深色区块使用 `#1c1e54` 背景配白色文字

## 5. 布局原则

### 间距系统
- 基础单位：8px
- 刻度：1px、2px、4px、6px、8px、10px、11px、12px、14px、16px、18px、20px
- 值得注意：小尺寸端刻度密集（4-12px 每 2px 一档），体现 Stripe 面向金融数据 UI 的精密导向

### 网格与容器
- 内容最大宽度：约 1080px
- 主视觉区：居中单列，宽裕内边距，轻量标题
- 功能区块：2-3 列特性卡片网格
- 全宽深色区块，使用 `#1c1e54` 背景实现品牌沉浸
- 代码/仪表盘预览以带蓝调阴影的卡片形式呈现

### 留白哲学
- **精准间距**：与极简主义系统的大片留白不同，Stripe 使用有度、有目的的留白。每一处间隙都是经过深思熟虑的排版决策。
- **数据密集，框架宽裕**：金融数据展示（表格、图表）排列紧凑，但其周围的 UI 框架留白充裕。这营造出一种受控的密度感——如同精心整理的电子表格置于精美的画框之中。
- **区块韵律**：白色区块与深色品牌区块（`#1c1e54`）交替出现，形成戏剧性的明暗节奏，在不引入随意颜色的前提下打破单调。

### 圆角半径刻度
- 微型（1px）：精细元素，微妙的圆润感
- 标准（4px）：按钮、输入框、徽章、卡片——最常用
- 舒适（5px）：标准卡片容器
- 放松（6px）：导航、较大交互元素
- 大号（8px）：特色卡片，主视觉区元素
- 复合型：`0px 0px 6px 6px` 用于底部圆角容器（选项卡面板、下拉菜单底部）

## 6. 层次与高度

| 层级 | 处理方式 | 用途 |
|-------|-----------|-----|
| 平铺（层级 0） | 无阴影 | 页面背景，内联文字 |
| 环境（层级 1） | `rgba(23,23,23,0.06) 0px 3px 6px` | 卡片微浮，悬停提示 |
| 标准（层级 2） | `rgba(23,23,23,0.08) 0px 15px 35px` | 标准卡片，内容面板 |
| 悬浮（层级 3） | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | 特色卡片，下拉菜单，气泡 |
| 深浮（层级 4） | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | 模态框，浮动面板 |
| 焦点环（无障碍） | `2px solid #533afd` 轮廓 | 键盘焦点环 |

**阴影哲学**：Stripe 的阴影系统建立在"色彩深度"原则之上。大多数设计系统使用中性灰或黑色阴影，而 Stripe 的主阴影色（`rgba(50,50,93,0.25)`）是一种呼应品牌海军蓝调色盘的深蓝灰色。这种阴影不仅增添纵深，更传递品牌氛围。多层叠加的方式将这种蓝调阴影与纯黑辅助阴影层（`rgba(0,0,0,0.1)`）以不同偏移配对，创造出视差般的深度——品牌调阴影距元素更远，中性阴影则更近。负值扩散值（-30px、-18px）确保阴影不会横向溢出元素边界，使层次感保持竖向且可控。

### 装饰性纵深
- 深色品牌区块（`#1c1e54`）通过背景色对比营造沉浸式纵深
- 宝石红到品红渐变叠加层用于主视觉区装饰
- 阴影色 `rgba(0,55,112,0.08)`（`--hds-color-shadow-sm-top`）用于粘性元素的顶部边缘阴影

## 7. 规范与禁忌

### 规范
- 每个文本元素都要使用带 `"ss01"` 的 sohne-var——这个风格集就是品牌本身
- 所有标题和正文使用 300 字重——轻盈是品牌签名
- 所有层级元素使用蓝调阴影（`rgba(50,50,93,0.25)`）
- 标题使用 `#061b31`（深海军蓝）而非 `#000000`——那份温度至关重要
- 圆角保持在 4px-8px 之间——保守圆角是刻意为之
- 所有等宽/金融数字展示使用 `"tnum"`
- 阴影叠加：蓝调远阴影 + 中性近阴影，实现视差纵深
- 以 `#533afd` 紫色作为主要交互/CTA 色

### 禁忌
- 不要对 sohne-var 标题使用 600-700 字重——300 字重才是品牌之声
- 不要在卡片或按钮上使用大圆角（12px+，胶囊形）——Stripe 讲究保守
- 不要使用中性灰阴影——始终带蓝色调（`rgba(50,50,93,...)`）
- 不要在任何 sohne-var 文字上省略 `"ss01"`——备选字形定义了品牌个性
- 不要用纯黑（`#000000`）作为标题色——始终用 `#061b31` 深海军蓝
- 不要将暖色强调（橙色、黄色）用于交互元素——紫色才是主色
- 不要在展示尺寸使用正值字间距——Stripe 始终收紧字间距
- 不要将品红/宝石红强调色用于按钮或链接——它们仅供装饰/渐变使用

## 8. 响应式行为

### 断点
| 名称 | 宽度 | 主要变化 |
|------|-------|-------------|
| 移动端 | <640px | 单列，标题尺寸缩小，卡片堆叠 |
| 平板 | 640-1024px | 两列网格，适中内边距 |
| 桌面 | 1024-1280px | 完整布局，三列特性网格 |
| 大桌面 | >1280px | 居中内容，宽裕边距 |

### 触控目标
- 按钮使用舒适内边距（垂直 8px-16px）
- 导航链接 14px，间距充足
- 徽章水平内边距最少 6px，满足点击目标需求
- 移动端导航切换按钮，6px 圆角

### 折叠策略
- 主标题：56px 展示尺寸 -> 移动端缩为 32px，300 字重保持不变
- 导航：水平链接 + CTA -> 汉堡菜单切换
- 特性卡片：三列 -> 两列 -> 单列堆叠
- 深色品牌区块：保持全宽处理，减少内部内边距
- 金融数据表格：移动端横向滚动
- 区块间距：64px+ -> 移动端缩为 40px
- 字体刻度压缩：主视觉区跨断点 56px -> 48px -> 32px

### 图片行为
- 仪表盘/产品截图在所有尺寸下保持蓝调阴影
- 主视觉区渐变装饰在移动端简化
- 代码块保持 `SourceCodePro` 处理，可能出现横向滚动
- 卡片图片保持一致的 4px-6px 圆角

## 9. Agent 提示指南

### 快速色彩参考
- 主要 CTA：Stripe 紫（`#533afd`）
- CTA 悬停：深紫（`#4434d4`）
- 背景：纯白（`#ffffff`）
- 标题文字：深海军蓝（`#061b31`）
- 正文文字：石板灰（`#64748d`）
- 标签文字：深石板灰（`#273951`）
- 边框：柔和蓝（`#e5edf5`）
- 链接：Stripe 紫（`#533afd`）
- 深色区块：品牌深色（`#1c1e54`）
- 成功：绿色（`#15be53`）
- 装饰强调：宝石红（`#ea2261`），品红（`#f96bee`）

### 组件提示示例
- "在白色背景上创建主视觉区。标题 48px sohne-var 300 字重，行高 1.15，字间距 -0.96px，颜色 #061b31，font-feature-settings 'ss01'。副标题 18px 300 字重，行高 1.40，颜色 #64748d。紫色 CTA 按钮（#533afd，4px 圆角，8px 16px 内边距，白色文字）和幽灵按钮（透明背景，1px solid #b9b9f9，#533afd 文字，4px 圆角）。"
- "设计一张卡片：白色背景，1px solid #e5edf5 边框，6px 圆角。阴影：rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px。标题 22px sohne-var 300 字重，字间距 -0.22px，颜色 #061b31，'ss01'。正文 16px 300 字重，#64748d。"
- "构建成功徽章：rgba(21,190,83,0.2) 背景，#108c3d 文字，4px 圆角，1px 6px 内边距，10px sohne-var 300 字重，边框 1px solid rgba(21,190,83,0.4)。"
- "创建导航：白色粘性头部，带 backdrop-filter blur(12px)。导航链接 sohne-var 14px 400 字重，#061b31 文字，'ss01'。紫色 CTA '立即开始' 右对齐（#533afd 背景，白色文字，4px 圆角）。导航容器 6px 圆角。"
- "设计深色品牌区块：#1c1e54 背景，白色文字。标题 32px sohne-var 300 字重，字间距 -0.64px，'ss01'。正文 16px 300 字重，rgba(255,255,255,0.7)。内部卡片使用 rgba(255,255,255,0.1) 边框，6px 圆角。"

### 迭代指南
1. 始终在 sohne-var 文字上启用 `font-feature-settings: "ss01"`——这是品牌的排版 DNA
2. 300 字重是默认值；仅按钮/链接/导航使用 400
3. 阴影公式：`rgba(50,50,93,0.25) 0px Y1 B1 -S1, rgba(0,0,0,0.1) 0px Y2 B2 -S2`，其中 Y1/B1 较大（远阴影），Y2/B2 较小（近阴影）
4. 标题色为 `#061b31`（深海军蓝），正文为 `#64748d`（石板灰），标签为 `#273951`（深石板灰）
5. 圆角保持在 4px-8px 范围内——绝不使用胶囊形或大圆角
6. 表格、图表或金融展示中的任何数字使用 `"tnum"`
7. 深色区块使用 `#1c1e54`——非黑非灰，而是品牌深靛蓝
8. SourceCodePro 用于代码，12px/500 字重，行高 2.00（非常宽松，利于可读性）