Stripe

version: alpha name: 受 Stripi 启发的设计分析 description: 对 Stripi 设计语言的启发式解读——一个金融基础设施品牌，建立在深邃的海军蓝墨色、电光靛蓝主色，以及一个几乎出现在每个营销页面上方三分之一处的大气渐变网格之上。系统以专有的 Sohne 字体家族的细字重（300）配合负字距用于编辑密度的展示标题，并在涉及金钱和数字的地方使用等宽数字正文类型。按钮是紧致圆角的胶囊，卡片住在近乎白色的表面上，仪表盘轨道翻转极性为熟悉的暗色应用外壳。

colors: primary: "#533afd" primary-deep: "#4434d4" primary-press: "#2e2b8c" primary-soft: "#665efd" primary-bg-subdued-hover: "#b9b9f9" brand-dark-900: "#1c1e54" ink: "#0d253d" ink-secondary: "#273951" ink-mute: "#64748d" ink-mute-2: "#61718a" on-primary: "#ffffff" canvas: "#ffffff" canvas-soft: "#f6f9fc" canvas-cream: "#f5e9d4" hairline: "#e3e8ee" hairline-input: "#a8c3de" ruby: "#ea2261" magenta: "#f96bee" lemon: "#9b6829" shadow-blue: "#003770"

typography: display-xxl: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 56px fontWeight: 300 lineHeight: 1.03 letterSpacing: -1.4px fontFeature: ss01 display-xl: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 48px fontWeight: 300 lineHeight: 1.15 letterSpacing: -0.96px fontFeature: ss01 display-lg: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 32px fontWeight: 300 lineHeight: 1.1 letterSpacing: -0.64px fontFeature: ss01 display-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 26px fontWeight: 300 lineHeight: 1.12 letterSpacing: -0.26px fontFeature: ss01 heading-lg: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 22px fontWeight: 300 lineHeight: 1.1 letterSpacing: -0.22px fontFeature: ss01 heading-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 20px fontWeight: 300 lineHeight: 1.4 letterSpacing: -0.2px fontFeature: ss01 heading-sm: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 18px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 body-lg: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 body-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 15px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 body-tabular: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.4 letterSpacing: -0.42px fontFeature: tnum button-md: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0 fontFeature: ss01 button-sm: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.0 letterSpacing: 0 fontFeature: ss01 caption: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 13px fontWeight: 400 lineHeight: 1.4 letterSpacing: -0.39px fontFeature: tnum micro: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 11px fontWeight: 300 lineHeight: 1.4 letterSpacing: 0 fontFeature: ss01 micro-cap: fontFamily: "sohne-var, 'SF Pro Display', system-ui, -apple-system, sans-serif" fontSize: 10px fontWeight: 400 lineHeight: 1.15 letterSpacing: 0.1px fontFeature: ss01

rounded: xs: 4px sm: 6px md: 8px lg: 12px xl: 16px pill: 9999px

spacing: xxs: 2px xs: 4px sm: 8px md: 12px lg: 16px xl: 24px xxl: 32px huge: 64px

components: button-primary-pill: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px button-primary-pill-pressed: backgroundColor: "{colors.primary-press}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px button-on-dark: backgroundColor: "{colors.brand-dark-900}" textColor: "{colors.on-primary}" typography: "{typography.button-md}" rounded: "{rounded.pill}" padding: 8px 16px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px text-input-focused: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.sm}" padding: 8px 12px card-feature-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-pricing-featured: backgroundColor: "{colors.brand-dark-900}" textColor: "{colors.on-primary}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-cream-band: backgroundColor: "{colors.canvas-cream}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.lg}" padding: 32px card-dashboard-mockup: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-tabular}" rounded: "{rounded.lg}" padding: 24px pill-tag-soft: backgroundColor: "{colors.primary-bg-subdued-hover}" textColor: "{colors.primary-deep}" typography: "{typography.micro-cap}" rounded: "{rounded.pill}" padding: 4px 8px nav-bar-on-mesh: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 16px 24px link-on-light: backgroundColor: "{colors.canvas}" textColor: "{colors.primary}" typography: "{typography.body-md}" rounded: "{rounded.xs}" padding: 0px footer-light: backgroundColor: "{colors.canvas}" textColor: "{colors.ink-mute}" typography: "{typography.caption}" rounded: "{rounded.xs}" padding: 64px 24px

概述

Stripi 的设计语言从渐变网格开始。一条宽幅水平的粉彩奶油色、冰糕橙色、薰衣草、电光靛蓝和宝石红色的带状区域占据几乎每个营销页面的上三分之一——这是品牌瞬间可辨的大气背景。文字和产品 UI 模型悬浮在 {colors.canvas}（白色）之上，渐变既是装饰也是视觉锚点。页面下方回到白色，功能解释在 {colors.canvas-soft}（一种几乎不着色的冷调白）上，仪表盘产品模型作为仿 IDE / 控制台面板合成在深海军蓝之上。

色彩系统有两个主要角色。靛蓝（{colors.primary} — #533afd）是品牌标志性的 CTA 色，谨慎使用：每个色带仅一个填充胶囊。深海军蓝（{colors.ink} — #0d253d）是通用的正文文字颜色，也是仪表盘模型、推荐价格层和仪表盘轨道上的暗色应用表面的填充色。宝石红（{colors.ruby}）和洋红（{colors.magenta}）出现在渐变网格内和产品 UI 模型中作为点缀圆点；它们不用作按钮色。

字体排版围绕 Sohne 300 字重配合负字距——这是品牌的编辑密度展示签名。展示尺寸（32–56px）使用 -1.4px 到 -0.64px 的字距；正文尺寸使用 0；等宽数字说明尺寸（涉及金钱和数字的地方）使用 OpenType tnum 特性加收紧 -0.36 到 -0.42px 的字距。ss01 风格集在所有角色中启用。

关键特征：

• 每个营销首屏上的渐变网格背景——奶油 / 橙色 / 薰衣草 / 靛蓝 / 宝石红水平铺满页面上三分之一。
• 单一靛蓝 CTA 层级：填充的 {colors.primary} 胶囊是营销表面上唯一的填充按钮。
• Sohne 细字重（300）展示层，字距从 -1.4px 到 -0.2px 不等。
• 涉及金钱或数字的单元格使用等宽数字（tnum）——品牌安静的金融数据信号。
• 暗色应用仪表盘轨道：深海军蓝产品 UI 模型合成在白色画布之上，内部经常渲染代码或仪表盘表格。
• 胶囊形按钮（{rounded.pill} 9999px），紧致的 8px 16px 内边距——短促、果断、交易感强。
• 奶油色带状功能卡片（{colors.canvas-cream}）在蓝色 / 白色区段之间引入温暖的间奏，不打破品牌的色彩逻辑。

配色

来源页面： 首页（/）、/payments、/pricing、dashboard.stripe.com/register/payments。

品牌与点缀

• 靛蓝（{colors.primary} — #533afd）：品牌标志性的 CTA 色。填充胶囊按钮、链接强调、渐变锚点。
• 深靛蓝（{colors.primary-deep} — #4434d4）：渐变中停处使用的更深靛蓝，以及按下态的暖色替代。
• 靛蓝按下态（{colors.primary-press} — #2e2b8c）：主色的按下态提升。
• 柔靛蓝（{colors.primary-soft} — #665efd）：产品 UI 点缀和图表高亮中使用的更浅的靛蓝。
• 柔化靛蓝（{colors.primary-bg-subdued-hover} — #b9b9f9）：淡靛蓝填充，用作柔标签背景。
• 品牌深色 900（{colors.brand-dark-900} — #1c1e54）：推荐价格层和仪表盘外框使用的深海军蓝。
• 宝石红（{colors.ruby} — #ea2261）：渐变点缀和图表高亮；从未作为按钮色。
• 洋红（{colors.magenta} — #f96bee）：渐变网格中更亮的粉色停点。
• 柠檬（{colors.lemon} — #9b6829）：渐变背景中的暖色冰糕停点。

表面

• 画布（{colors.canvas} — #ffffff）：默认页面背景。
• 柔画布（{colors.canvas-soft} — #f6f9fc）：渐变首屏下方功能带使用的冷调白。
• 奶油画布（{colors.canvas-cream} — #f5e9d4）：用作功能带填充的暖奶油色——品牌的色彩间奏。
• 细线（{colors.hairline} — #e3e8ee）：卡片和表格上的 1px 边框。
• 输入细线（{colors.hairline-input} — #a8c3de）：表单输入上使用的略冷的细线。

文字

• 墨色（{colors.ink} — #0d253d）：整个品牌的默认正文颜色。深海军蓝，从不是纯黑。
• 次要墨色（{colors.ink-secondary} — #273951）：白色上的次要文字。
• 柔墨色（{colors.ink-mute} — #64748d）：辅助文字、说明、表格标签。
• 柔墨色 2（{colors.ink-mute-2} — #61718a）：导航中使用的近等价柔墨色。
• 主色之上（{colors.on-primary} — #ffffff）：靛蓝 / 深海军蓝表面上的文字。

语义

品牌在营销系统中不使用独立的语义色板——错误 / 成功状态专门出现在仪表盘产品 UI 中。

字体排版

字体族

展示和 UI 层使用 Sohne（专有，从 Klim Type Foundry 授权），字重 300（细）和 400（常规）。变量字体（sohne-var）以全局启用的 font-feature-settings: "ss01" 加载——风格集替换单层 a 和其他字符变体，是品牌字体签名的一部分。

当 Sohne 不可用时，回退到细字重的 SF Pro Display，再回退到 system-ui。为了最大品牌保真度，Inter（开源）在字重 300 配合 font-feature-settings: "ss01" 和展示尺寸的 letter-spacing: -1.4px 最接近品牌的节奏。

层级

原则

• 细字重是品牌。 展示层始终以 300 字重渲染。提高到 400+ 会失去品牌的编辑气质。
• 展示层使用负字距。 56px 处 -1.4px，按比例递减到 20px 处 -0.2px。负字距是品牌的字体签名。
• 金钱使用等宽数字。 任何渲染货币、交易金额或数字计数的单元格使用 font-feature-settings: "tnum" 加收紧的字距。品牌通过这一微观细节安静地传达其金融 DNA。
• 全局应用 ss01。 在 body 元素上应用 font-feature-settings: "ss01"，以便每个文字角色都启用风格集替换。

字体替代说明

Sohne 是专有字体。使用 Inter（Google Fonts 上的开源）字重 300 配合 letter-spacing: -1.4px 和 font-feature-settings: "ss01" 用于展示层——Inter 是最接近的开源替代。对于正文尺寸，字重 300 的 Inter 加 font-feature-settings: "tnum"（适用时）是规范的替代。避免 Helvetica 或 system-ui 默认值——它们比品牌需要的更重。

布局

间距系统

• 基础单位：8px（搭配 2 / 4 / 12 子 token 用于精细工作）。
• Token：{spacing.xxs} 2px · {spacing.xs} 4px · {spacing.sm} 8px · {spacing.md} 12px · {spacing.lg} 16px · {spacing.xl} 24px · {spacing.xxl} 32px · {spacing.huge} 64px。
• 区段内边距：营销表面 64–96px；仪表盘 / 产品表面 32–48px。
• 卡片内边距：功能卡片 32px；仪表盘模型 24px。

网格与容器

• 营销页面在约 1200px 容器中居中，渐变网格在上方延伸到边缘。
• 价格表在 1024 / 768 断点处从 4 列 → 2 列 → 1 列折叠。
• 仪表盘产品模型使用自己的内部网格（12 列表格、3 列卡片网格），渲染为静态合成。

留白哲学

渐变网格占据页面上三分之一；下方白色画布内边距慷慨。区段间距倾向 96px，在用户对比和操作的仪表盘 / 价格页内容收紧到 32px。

层次与深度

装饰性深度

渐变网格就是深度系统。作为分层 SVG 或大型背景图实现，而非 CSS 渐变（实际网格具有无法用 CSS 渲染的有机斑点形状）。网格提供品牌的标志性抬起；字面阴影保留给产品 UI 模型，保持克制。

形状

圆角尺度

图像几何

品牌使用产品 UI 模型多于摄影。仪表盘合成以仿 IDE / 终端 / 仪表盘外壳渲染在 {rounded.lg} 12px 容器内，带有微妙的 box-shadow。真实摄影出现在客户 logo 条和罕见的案例研究卡片中；以 4:3 内嵌处理，无阴影。

组件

按钮

button-primary-pill —— 系统范围内主要的 CTA。

• 背景 {colors.primary}，文字 {colors.on-primary}，类型 {typography.button-md}，内边距 {spacing.sm} {spacing.lg}（8px 16px），圆角 {rounded.pill} 9999px。
• 按下态 button-primary-pill-pressed 将背景切换到 {colors.primary-press}。

button-secondary —— 描边样式替代。

• 背景 {colors.canvas}，文字 {colors.primary}，1px solid {colors.primary} 边框，相同的胶囊几何形状。

button-on-dark —— 用于仪表盘 / 暗色表面。

• 背景 {colors.brand-dark-900}，文字 {colors.on-primary}，相同的胶囊几何形状。

卡片与容器

card-feature-light —— 白色上的功能解释卡片。

• 背景 {colors.canvas}，内边距 {spacing.xxl}，圆角 {rounded.lg} 12px，1px {colors.hairline} 边框，可选 Level 1 阴影。

card-pricing —— 标准价格层。

• 背景 {colors.canvas}，内边距 {spacing.xxl}，圆角 {rounded.lg}，1px {colors.hairline} 边框。标题 {typography.heading-lg}，价格 {typography.display-md}，正文 {typography.body-md}，CTA 钉在底部作为 button-primary-pill。

card-pricing-featured —— 反色暗色的推荐层。

• 背景 {colors.brand-dark-900}，文字 {colors.on-primary}，其他结构与 card-pricing 相同。深海军蓝填充是品牌独特的推荐层选择。

card-cream-band —— 暖色间奏卡片。

• 背景 {colors.canvas-cream}，文字 {colors.ink}，内边距 {spacing.xxl}，圆角 {rounded.lg}。用于以暖色打破靛蓝 / 白色节奏。

card-dashboard-mockup —— 合成的仪表盘 / 产品 UI 截图。

• 背景 {colors.canvas}，类型 {typography.body-tabular}（带 tnum），内边距 {spacing.xl} 24px，圆角 {rounded.lg} 12px，Level 2 阴影。常包含嵌套的迷你模型：代码预览 + 仪表盘表格 + 图表卡片。

输入与表单

text-input —— 标准表单字段。

• 背景 {colors.canvas}，文字 {colors.ink}，类型 {typography.body-md}，内边距 {spacing.sm} {spacing.md}（8px 12px），圆角 {rounded.sm} 6px，1px {colors.hairline-input} 边框。
• 聚焦态 text-input-focused：边框切换到 {colors.primary}。

导航

nav-bar-on-mesh —— 渐变首屏上方浮动的顶部导航。

• 背景 {colors.canvas}（或根据滚动状态透明），文字 {colors.ink}，内边距 {spacing.lg} {spacing.xl}。Logo 字标在左，主导航居中，登录 + 填充的 button-primary-pill 在右。

胶囊、标签和芯片

pill-tag-soft —— 柔化靛蓝标签。

• 背景 {colors.primary-bg-subdued-hover}，文字 {colors.primary-deep}，类型 {typography.micro-cap}，内边距 4px 8px，圆角 {rounded.pill}。

标志性组件

渐变网格背景 —— 粉彩奶油色 → 冰糕橙色 → 薰衣草 → 靛蓝 → 宝石红停点水平模糊铺满页面上三分之一。作为 SVG 或大型背景图实现——不是扁平的 CSS 渐变（实际网格具有有机斑点形状）。

合成仪表盘模型 —— 多层仿产品 UI 合成：左侧 IDE 面板、中央仪表盘表格、右侧图表卡片，全部以小尺寸渲染在 {rounded.lg} 容器内，带有微妙的 Level 2 阴影。合成图是品牌被拍摄最多的特性。

等宽数字金钱类型 —— 每个渲染金钱、计数或交易价值的数字使用 font-feature-settings: "tnum"。品牌安静地传达这是金融基础设施平台的信号。

link-on-light —— 浅色表面上的内联链接。

• 文字 {colors.primary} 以 {typography.body-md} 渲染，默认无下划线。

footer-light —— 全站页脚。

• 背景 {colors.canvas}，文字 {colors.ink-mute}，类型 {typography.caption}，内边距 {spacing.huge} {spacing.xl}（64px 24px）。包含 4–6 列链接组、社交图标和小型法律行。

推荐与避免

推荐

• 将 {colors.primary} 保留给填充 CTA 和内联链接强调——应谨慎使用，每个色带一个填充按钮。
• 将渐变网格应用于每个营销首屏；裸画布首屏感觉脱品牌。
• 以 300 字重配合负字距渲染展示层——细字距是字体签名。
• 在每个金钱 / 数字单元格上使用 font-feature-settings: "tnum"。
• 在 body 元素上全局应用 font-feature-settings: "ss01"。
• 将每个功能解释与合成产品 UI 模型配对；品牌的论点是"看看实际产品"。

避免

• 不要将展示字重提高到 300 以上——在 400 时品牌的编辑气质会崩塌。
• 不要在已记录的渐变停点（奶油 / 橙 / 薰衣草 / 靛蓝 / 宝石红 / 洋红）之外添加新的点缀色。
• 不要将靛蓝 {colors.primary} 用作正文颜色——它是 CTA 和链接颜色，不是正文字体颜色。
• 不要将按钮内边距缩小到 8px 16px 以下——紧致胶囊是品牌交易感的一部分。
• 不要在没有 tnum 的情况下渲染金钱单元格——它会破坏安静的金融数据签名。
• 不要将胶囊形状替换为圆角矩形用于按钮。

响应式行为

断点

触摸目标

• 胶囊按钮在移动端通过内边距缩放达到 ≥ 40×40px。在较小屏幕上，按钮尺寸放大到 44×44px 以满足 WCAG AAA。
• 表单字段保持最小 40px 高度。

折叠策略

• 展示层在断点之间阶梯式变化 56 → 48 → 32 → 26 → 22px。
• 渐变网格在移动端重新平铺以保留色洗而不消失。
• 仪表盘合成在移动端简化为单面板模型；多层合成仅在桌面以上渲染。
• 价格层阶梯式 4 → 2 → 1 列。

图像行为

产品 UI 合成使用 srcset 与主要断点处的艺术指导裁剪。移动端裁剪聚焦于最具可操作性的内部面板；桌面裁剪显示完整的多层合成。

迭代指南

1. 一次专注于一个组件。
2. 直接引用组件名称和 token（{colors.primary}、{button-primary-pill}-pressed、{rounded.pill}）。
3. 编辑后运行 npx @google/design.md lint DESIGN.md。
4. 将新变体添加为单独的条目。
5. 默认正文使用 {typography.body-md}（15px）；任何金钱 / 数字单元格使用 {typography.body-tabular}。
6. 在 body 上全局应用 ss01；在数字内容上按元素应用 tnum。
7. 营销首屏上的渐变网格不可妥协——裸画布首屏会破坏品牌。