以 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" 等宽数字。

字体层级

原则

• 细字重即签名：展示尺寸下 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. 层次与高度

阴影哲学：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. 响应式行为

断点

触控目标

• 按钮使用舒适内边距（垂直 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（非常宽松，利于可读性）