admin/workbuddy_skills
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
ea02f186a59d88b880ea032066638dabc5d20364
workbuddy_skills/open-design/design-systems/stripe/DESIGN-zh.md
T
admin 5afeb6b78a ④段整套同步（六节 ＋ P/S/F/J ＋ 模板）＋ open-design 移到技能根 
一、④段整套同步（用户选候选 A）
- 新增 `references/stage-proto-doc/assets/产品文档模板.html`（16 KB／247 行，从备份拷、转 LF）。
- ④段 SKILL.md 换成备份 15:28 那版，并按模板口径改齐：
  · 「产品文档框架」从「四块＋一附录」改成**六节** —— 页面结构／功能清单／使用场景／操作流程／
    跨页与界面状态／待确认与偏离；与模板同构，⛔ 不从空白页重写结构。
  · 编号从 R/S/F 改成 **P 页面／S 场景／F 功能／J 二级功能**，各自唯一、按展示顺序通排。
  · 保留旧版有价值的要求：每项功能补齐 做什么／入口在哪／输入边界／异常与恢复；重点功能三处标红；
    横向流程图每步写清页面／功能／操作／完成判据。
  · 完成标准「七节」→「六节」，自查清单同步换掉「需求」那批条目，补模板与配图两条。
  · 路径 `designs/<项目>/` → `docs/pm/<项目>/ui/`（2 处）。
  · 补回本机那条「每份产出文档开头都要有一张图」的引用（指向主 skill，段内不复述）。
- 主 skill 同步：四段结构表④行、④段沿革、画图小节（④段画页面结构图 ＋ 用户路径）。

二、open-design 移到技能根（用户选候选 A）
- `git mv product-planning/references/stage-delivery/assets/open-design → open-design/`（4178 文件）。
- `.gitignore` 白名单加 `!/open-design/` —— 否则移出去就不再纳入版本控制。
- 引用改 11 处：路径形态 `assets/open-design/...` → `<技能根>/open-design/...`；
  「随段携带的自带件」改称「同根技能」；「路径怎么找」那条改成自带件（段内相对路径）与
  同根技能（`<技能根>/<技能名>/`）两类分开写。
- open-design 自己的 ATTRIBUTION.md 两处同步（它现在与 oil-ui-pro 同层）。
- 副作用（有益）：命名闸门读数由 2063 降到 225 —— 此前它把 open-design 里 919 个第三方 md
  当成规则一起扫了；现在只扫本包 23 个 md。已确认④段的 H1 与 4a/4b/4c 子步仍在检查范围内。

三、验收
- check_naming.py --ws E:/ProgramData/AIProject/contentm_agent ＝ 通过 225 / 失败 0 / 提示 27。
- 活文件里 `assets/open-design` 残留 0；工作区 CRLF 文件 0。
2026-10-15 21:17:28 +08:00

19 KiB
Raw Blame History

以 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（非常宽松，利于可读性）
Reference in new issue View Git Blame Copy Permalink