@baimingtao/lbs-agent 1.0.0

package/extensions/skills/builtin/creative/popular-web-designs/templates/spotify.md

@@ -0,0 +1,259 @@
+# 设计系统：Spotify
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原网站使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代方案：
+> - **主要字体：** `DM Sans` | **等宽字体：** `system monospace stack`
+> - **字体堆栈 (CSS)：** `font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽堆栈 (CSS)：** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Spotify 的网页界面是一个深色、沉浸式的音乐播放器，将听众包裹在近乎纯黑的茧中（`#121212`, `#181818`, `#1f1f1f`），在这里专辑封面和内容成为了色彩的主要来源。其设计理念是“内容优先的深色模式”——UI 退居阴影之中，从而让音乐、播客和播放列表得以闪耀。每个表面都是一种炭灰色调，营造出一种剧院般的环境，唯一真正的色彩来自标志性的 Spotify 绿色（`#1ed760`）以及专辑封面本身。
+
+排版采用了 SpotifyMixUI 和 SpotifyMixUITitle——这是来自 CircularSp 字体家族的专有字体（由 Lineto 的 Circular 字体为 Spotify 定制），包含极其丰富的备选字体堆栈，涵盖了阿拉伯语、希伯来语、西里尔语、希腊语、梵文和 CJK 字体，彰显了 Spotify 的全球覆盖力。其字体系统紧凑且实用：700（加粗）用于强调和导航，600（半粗）用于次要强调，400（常规）用于正文。按钮使用大写字母并带有正字间距（1.4px–2px），呈现出系统化的、类似标签的质感。
+
+Spotify 的独特之处在于其胶囊与圆形的几何美学。主要按钮使用 500px–9999px 的圆角（全胶囊状），圆形播放按钮使用 50% 的圆角，而搜索输入框则是 500px 的胶囊状。结合悬浮元素上厚重的阴影（`rgba(0,0,0,0.5) 0px 8px 24px`）以及独特的内嵌边框阴影组合（`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`），最终呈现出一种宛如高级音频设备的界面质感——极具触感、圆润且专为触摸而生。
+
+**核心特征：**
+- 近乎纯黑的沉浸式暗色主题（`#121212`–`#1f1f1f`）—— UI 隐没于内容之后
+- Spotify 绿色（`#1ed760`）作为单一的品牌点缀色 —— 绝不作装饰之用，始终具备功能性
+- SpotifyMixUI/CircularSp 字体家族，支持全球多种语言文字
+- 胶囊状按钮（500px–9999px）和圆形控件（50%）—— 圆角设计，针对触摸操作进行了优化
+- 大写的按钮标签，搭配宽松的字间距（1.4px–2px）
+- 悬浮元素上带有厚重阴影（`rgba(0,0,0,0.5) 0px 8px 24px`）
+- 语义化颜色：代表否定/错误的红色（`#f3727f`），代表警告的橙色（`#ffa42b`），代表公告的蓝色（`#539df5`）
+- 专辑封面作为主色调来源 —— UI 本身在设计上是无彩色的
+
+## 2. 调色板与角色
+
+### 主要品牌色
+- **Spotify Green** (`#1ed760`)：主要品牌点缀色 —— 播放按钮、激活状态、CTA
+- **Near Black** (`#121212`)：最深的背景表面
+- **Dark Surface** (`#181818`)：卡片、容器、凸起表面
+- **Mid Dark** (`#1f1f1f`)：按钮背景、交互表面
+
+### 文本
+- **White** (`#ffffff`)：`--text-base`，主要文本
+- **Silver** (`#b3b3b3`)：次要文本、弱化的标签、未激活的导航项
+- **Near White** (`#cbcbcb`)：稍亮一些的次要文本
+- **Light** (`#fdfdfd`)：用于最大程度强调的接近纯白颜色
+
+### 语义化
+- **Negative Red** (`#f3727f`)：`--text-negative`，错误状态
+- **Warning Orange** (`#ffa42b`)：`--text-warning`，警告状态
+- **Announcement Blue** (`#539df5`)：`--text-announcement`，信息状态
+
+### 表面与边框
+- **Dark Card** (`#252525`)：凸起的卡片表面
+- **Mid Card** (`#272727`)：备选的卡片表面
+- **Border Gray** (`#4d4d4d`)：深色背景上的按钮边框
+- **Light Border** (`#7c7c7c`)：轮廓型按钮边框，弱化的链接
+- **Separator** (`#b3b3b3`)：分割线
+- **Light Surface** (`#eeeeee`)：浅色模式按钮（极少使用）
+- **Spotify Green Border** (`#1db954`)：绿色点缀边框的变体
+
+### 阴影
+- **Heavy** (`rgba(0,0,0,0.5) 0px 8px 24px`)：对话框、菜单、悬浮面板
+- **Medium** (`rgba(0,0,0,0.3) 0px 8px 8px`)：卡片、下拉菜单
+- **Inset Border** (`rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset`)：输入框边框阴影组合
+
+## 3. 排版规则
+
+### 字体家族
+- **Title**: `SpotifyMixUITitle`, fallbacks: `CircularSp-Arab, CircularSp-Hebr, CircularSp-Cyrl, CircularSp-Grek, CircularSp-Deva, Helvetica Neue, helvetica, arial, Hiragino Sans, Hiragino Kaku Gothic ProN, Meiryo, MS Gothic`
+- **UI / Body**: `SpotifyMixUI`, same fallback stack
+
+### 层级
+
+| 角色 | 字体 | 字号 | 粗细 | 行高 | 字间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| 区块标题 | SpotifyMixUITitle | 24px (1.50rem) | 700 | normal | normal | 加粗的标题字重 |
+| 特性标题 | SpotifyMixUI | 18px (1.13rem) | 600 | 1.30 (tight) | normal | 半粗体的区块标题 |
+| 正文加粗 | SpotifyMixUI | 16px (1.00rem) | 700 | normal | normal | 强调文本 |
+| 正文 | SpotifyMixUI | 16px (1.00rem) | 400 | normal | normal | 标准正文 |
+| 大写按钮 | SpotifyMixUI | 14px (0.88rem) | 600–700 | 1.00 (tight) | 1.4px–2px | `text-transform: uppercase` |
+| 按钮 | SpotifyMixUI | 14px (0.88rem) | 700 | normal | 0.14px | 标准按钮 |
+| 加粗导航链接 | SpotifyMixUI | 14px (0.88rem) | 700 | normal | normal | 导航 |
+| 导航链接 | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 未激活的导航项 |
+| 加粗说明文本 | SpotifyMixUI | 14px (0.88rem) | 700 | 1.50–1.54 | normal | 加粗的元数据 |
+| 说明文本 | SpotifyMixUI | 14px (0.88rem) | 400 | normal | normal | 元数据 |
+| 加粗小字体 | SpotifyMixUI | 12px (0.75rem) | 700 | 1.50 | normal | 标签、计数 |
+| 小字体 | SpotifyMixUI | 12px (0.75rem) | 400 | normal | normal | 附则/极小说明文字 |
+| 徽章 | SpotifyMixUI | 10.5px (0.66rem) | 600 | 1.33 | normal | `text-transform: capitalize` |
+| 微型字体 | SpotifyMixUI | 10px (0.63rem) | 400 | normal | normal | 最小号文本 |
+
+### 原则
+- **加粗/常规的二元化**：大部分文本要么是 700（加粗），要么是 400（常规），极少使用 600。这通过粗细对比而非大小变化创造出清晰的视觉层级。
+- **系统化的大写按钮**：按钮标签使用大写 + 宽松字间距（1.4px–2px），创造出一种系统化的“标签”语感，与正文内容形成鲜明区别。
+- **紧凑的尺寸**：范围在 10px–24px 之间——比大多数系统都要窄。Spotify 的字体紧凑且实用，专为扫描播放列表而非阅读长篇文章而设计。
+- **全球文字支持**：其极为丰富的备选字体堆栈（阿拉伯语、希伯来语、西里尔语、希腊语、梵文、CJK）体现了 Spotify 覆盖 180 多个市场的全球化规模。
+
+## 4. 组件样式
+
+### 按钮
+
+**深色胶囊按钮**
+- 背景：`#1f1f1f`
+- 文本：`#ffffff` 或 `#b3b3b3`
+- 内边距：8px 16px
+- 圆角：9999px（全胶囊状）
+- 用途：导航胶囊标签、次要操作
+
+**深色大号胶囊按钮**
+- 背景：`#181818`
+- 文本：`#ffffff`
+- 内边距：0px 43px
+- 圆角：500px
+- 用途：应用内的主要导航按钮
+
+**浅色胶囊按钮**
+- 背景：`#eeeeee`
+- 文本：`#181818`
+- 圆角：500px
+- 用途：浅色模式下的 CTA（Cookie 同意、营销等）
+
+**轮廓型胶囊按钮**
+- 背景：transparent
+- 文本：`#ffffff`
+- 边框：`1px solid #7c7c7c`
+- 内边距：4px 16px 4px 36px（为图标留出非对称空间）
+- 圆角：9999px
+- 用途：关注按钮、次要操作
+
+**圆形播放按钮**
+- 背景：`#1f1f1f`
+- 文本：`#ffffff`
+- 内边距：12px
+- 圆角：50%（圆形）
+- 用途：播放/暂停控件
+
+### 卡片与容器
+- 背景：`#181818` 或 `#1f1f1f`
+- 圆角：6px–8px
+- 大多数卡片没有可见边框
+- 悬浮状态：背景轻微变亮
+- 阴影：悬浮状态下呈现 `rgba(0,0,0,0.3) 0px 8px 8px`
+
+### 输入框
+- 搜索输入框：`#1f1f1f` 背景，`#ffffff` 文本
+- 圆角：500px（胶囊状）
+- 内边距：12px 96px 12px 48px（感知图标存在）
+- 聚焦状态：边框变为 `#000000`，带有 `1px solid` 轮廓
+
+### 导航
+- 深色侧边栏，激活状态使用 SpotifyMixUI 14px、字重 700，未激活状态字重为 400
+- 未激活项使用 `#b3b3b3` 弱化颜色，激活项使用 `#ffffff`
+- 圆形图标按钮（50% 圆角）
+- 左上角带有绿色的 Spotify logo
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 刻度：1px, 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 14px, 15px, 16px, 20px
+
+### 栅格与容器
+- 侧边栏（固定）+ 主要内容区域
+- 基于网格的专辑/播放列表卡片
+- 底部全宽的正在播放栏
+- 响应式内容区域填满剩余空间
+
+### 留白理念
+- **深色压缩感**：Spotify 的内容排布非常密集——播放列表网格、曲目列表和导航的间距都很紧凑。深色背景在元素之间提供了视觉休息，因此不需要过大的间隙。
+- **内容密度重于呼吸空间**：这是一个应用程序，而不是营销网站。每一个像素都在为听觉体验服务。
+
+### 圆角刻度
+- 极小 (2px)：徽章、露骨内容标签
+- 微妙 (4px)：输入框、小元素
+- 标准 (6px)：专辑封面容器、卡片
+- 舒适 (8px)：区块、对话框
+- 中等 (10px–20px)：面板、覆盖层元素
+- 较大 (100px)：大号胶囊按钮
+- 胶囊状 (500px)：主要按钮、搜索输入框
+- 全胶囊状 (9999px)：导航胶囊标签、搜索
+- 圆形 (50%)：播放按钮、头像、图标
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| 基础 (Level 0) | `#121212` 背景 | 最深层级，页面背景 |
+| 表面 (Level 1) | `#181818` 或 `#1f1f1f` | 卡片、侧边栏、容器 |
+| 悬浮 (Level 2) | `rgba(0,0,0,0.3) 0px 8px 8px` | 下拉菜单、悬浮卡片 |
+| 对话框 (Level 3) | `rgba(0,0,0,0.5) 0px 8px 24px` | 模态框、覆盖层、菜单 |
+| 内嵌 (边框) | `rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset` | 输入框边框 |
+
+**阴影理念**：对于一款深色主题的应用来说，Spotify 使用的阴影显得尤为厚重。24px 模糊度下的 0.5 不透明度阴影为对话框和菜单营造出一种戏剧性的“悬浮于黑暗中”的效果，而 8px 模糊度下的 0.3 不透明度则为卡片提供了更为微妙的抬升感。输入框上独特的内嵌边框阴影组合则创造出一种凹陷的、极具触感的视觉特质。
+
+## 7. 宜与忌
+
+### 宜
+- 使用近乎纯黑的背景（`#121212`–`#1f1f1f`）—— 通过深浅变化来体现层级感
+- 仅将 Spotify 绿色（`#1ed760`）用于播放控件、激活状态和主要的 CTA
+- 为所有按钮使用胶囊状（500px–9999px）—— 为播放控件使用圆形（50%）
+- 在按钮标签上应用大写 + 宽松字间距（1.4px–2px）
+- 保持排版紧凑（10px–24px 范围）—— 这是一个应用，不是杂志
+- 为深色背景上的悬浮元素使用厚重阴影（`0.3–0.5 opacity`）
+- 让专辑封面提供色彩 —— UI 本身保持无彩色
+
+### 忌
+- 不要将 Spotify 绿色用于装饰或背景 —— 它仅具备功能性
+- 不要为主要表面使用浅色背景 —— 深色沉浸感是核心
+- 不要在按钮上舍弃胶囊/圆形的几何美学 —— 直角按钮会破坏整体设计标识
+- 不要使用细微/薄弱的阴影 —— 在深色背景上，阴影必须够重才能被看见
+- 不要增加额外的品牌色 —— 绿色 + 无彩色的灰色构成了完整的调色板
+- 不要使用过于宽松的行高 —— Spotify 的排版是紧凑且高密度的
+- 不要暴露生硬的灰色边框 —— 应使用基于阴影或内嵌方式的边框代替
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 主要变化 |
+| ------ | ------- | ------------- |
+| 小型移动设备 | <425px | 紧凑的移动端布局 |
+| 移动设备 | 425–576px | 标准移动设备 |
+| 平板设备 | 576–768px | 双列网格 |
+| 大型平板设备 | 768–896px | 扩展布局 |
+| 小型桌面设备 | 896–1024px | 侧边栏可见 |
+| 桌面设备 | 1024–1280px | 完整的桌面布局 |
+| 大型桌面设备 | >1280px | 扩展的网格 |
+
+### 折叠策略
+- 侧边栏：完整 → 折叠 → 隐藏
+- 专辑网格：5 列 → 3 列 → 2 列 → 1 列
+- 正在播放栏：在所有尺寸下保持显示
+- 搜索：维持胶囊状输入框，宽度自适应
+- 导航：侧边栏 → 在移动端变为底部导航栏
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- 背景：Near Black (`#121212`)
+- 表面：Dark Card (`#181818`)
+- 文本：White (`#ffffff`)
+- 次要文本：Silver (`#b3b3b3`)
+- 点缀色：Spotify Green (`#1ed760`)
+- 边框：`#4d4d4d`
+- 错误：Negative Red (`#f3727f`)
+
+### 示例 Component Prompts
+- "Create a dark card: #181818 background, 8px radius. Title at 16px SpotifyMixUI weight 700, white text. Subtitle at 14px weight 400, #b3b3b3. Shadow rgba(0,0,0,0.3) 0px 8px 8px on hover."
+- "Design a pill button: #1f1f1f background, white text, 9999px radius, 8px 16px padding. 14px SpotifyMixUI weight 700, uppercase, letter-spacing 1.4px."
+- "Build a circular play button: Spotify Green (#1ed760) background, #000000 icon, 50% radius, 12px padding."
+- "Create search input: #1f1f1f background, white text, 500px radius, 12px 48px padding. Inset border: rgb(124,124,124) 0px 0px 0px 1px inset."
+- "Design navigation sidebar: #121212 background. Active items: 14px weight 700, white. Inactive: 14px weight 400, #b3b3b3."
+
+### 迭代指南
+1. 从 #121212 开始 —— 万物皆处于近乎纯黑的暗夜之中
+2. 仅将 Spotify 绿色用于功能性高亮（播放、激活、CTA）
+3. 让一切呈现胶囊状 —— 大尺寸用 500px，小尺寸用 9999px，圆形用 50%
+4. 按钮使用大写 + 宽字间距 —— 系统化的标签语感
+5. 为了体现悬浮感使用厚重阴影（0.3–0.5 不透明度）—— 淡薄的阴影在深色背景上根本看不见
+6. 由专辑封面来提供所有色彩 —— UI 本身保持无彩色状态

package/extensions/skills/builtin/creative/popular-web-designs/templates/stripe.md

@@ -0,0 +1,335 @@
+# Design System: Stripe
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始网站使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **主字体：** `Source Sans 3` | **等宽字体：** `Source Code Pro`
+> - **字体堆栈 (CSS)：** `font-family: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **等宽字体堆栈 (CSS)：** `font-family: 'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600&family=Source+Code+Pro:wght@400;500;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` 技能（cloudflared 隧道）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 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) 与藏青-紫色品牌调色板直接呼应，使得哪怕是“悬浮高度”这种细节也充满了品牌特色。
+
+**核心特征：**
+- 所有文本均使用 sohne-var 并开启 OpenType `"ss01"` —— 该自定义样式集定义了品牌的字母形态
+- 以 300 字重作为标志性的标题字重 —— 细腻、自信、打破常规
+- 展示尺寸下使用负字间距（56px 时为 -1.4px，向下逐渐缩小）
+- 使用 `rgba(50,50,93,0.25)` 的带蓝色调多层阴影 —— 充满品牌色彩的悬浮感
+- 使用深藏青色（`#061b31`）标题代替黑色 —— 温暖、高级、具备金融级质感
+- 保守的圆角半径（4px-8px） —— 没有胶囊形状，也没有生硬的边缘
+- 使用 Ruby（`#ea2261`）和 Magenta（`#f96bee`）作为渐变和装饰元素的强调色
+- 使用 `SourceCodePro` 作为代码和技术标签的等宽配套字体
+
+## 2. 调色板与角色
+
+### Primary（主色）
+- **Stripe Purple** (`#533afd`)：主要品牌颜色，CTA 背景，链接文本，交互高亮。一种饱和的蓝紫罗兰色，为整个系统奠定基调。
+- **Deep Navy** (`#061b31`)：`--hds-color-heading-solid`。主要标题颜色。不是黑色，也不是灰色——一种非常深的蓝色，为文本增添温暖感和深邃感。
+- **Pure White** (`#ffffff`)：页面背景，卡片表面，深色背景上的按钮文本。
+
+### Brand & Dark（品牌色与深色）
+- **Brand Dark** (`#1c1e54`)：`--hds-color-util-brand-900`。用于深色版块、页脚背景和沉浸式品牌时刻的深靛蓝色。
+- **Dark Navy** (`#0d253d`)：`--hds-color-core-neutral-975`。最暗的中性色——带有蓝色调的近乎黑色的颜色，在不显生硬的前提下提供最大的深度。
+
+### Accent Colors（强调色）
+- **Ruby** (`#ea2261`)：`--hds-color-accentColorMode-ruby-icon-solid`。用于图标、提醒和强调元素的温暖红粉色。
+- **Magenta** (`#f96bee`)：`--hds-color-accentColorMode-magenta-icon-gradientMiddle`。用于渐变和装饰性高亮的鲜艳粉紫色。
+- **Magenta Light** (`#ffd7ef`)：`--hds-color-util-accent-magenta-100`。用于 Magenta 主题卡片和徽章的着色表面。
+
+### Interactive（交互色）
+- **Primary Purple** (`#533afd`)：主要链接颜色，激活状态，选中元素。
+- **Purple Hover** (`#4434d4`)：用于主要元素悬停状态的深紫色。
+- **Purple Deep** (`#2e2b8c`)：`--hds-color-button-ui-iconHover`。用于图标悬停状态的暗紫色。
+- **Purple Light** (`#b9b9f9`)：`--hds-color-action-bg-subduedHover`。用于柔和悬停背景的柔和薰衣草色。
+- **Purple Mid** (`#665efd`)：`--hds-color-input-selector-text-range`。范围选择器和输入高亮颜色。
+
+### Neutral Scale（中性色阶）
+- **Heading** (`#061b31`)：主要标题，导航文本，强调标签。
+- **Label** (`#273951`)：`--hds-color-input-text-label`。表单标签，次要标题。
+- **Body** (`#64748d`)：次要文本，描述，说明文字。
+- **Success Green** (`#15be53`)：状态徽章，成功指示器（背景/边框使用 0.2-0.4 透明度）。
+- **Success Text** (`#108c3d`)：成功徽章文本颜色。
+- **Lemon** (`#9b6829`)：`--hds-color-core-lemon-500`。警告和高亮强调色。
+
+### Surface & Borders（表面与边框）
+- **Border 默认** (`#e5edf5`)：卡片、分隔线和容器的标准边框颜色。
+- **Border Purple** (`#b9b9f9`)：按钮和输入框的激活/选中状态边框。
+- **Border Soft Purple** (`#d6d9fc`)：用于次要元素的微妙紫色边框。
+- **Border Magenta** (`#ffd7ef`)：用于 Magenta 主题元素的粉色调边框。
+- **Border Dashed** (`#362baa`)：用于拖放区和占位符元素的虚线边框。
+
+### Shadow Colors（阴影颜色）
+- **Shadow Blue** (`rgba(50,50,93,0.25)`)：标志色——带蓝色调的主要阴影颜色。
+- **Shadow Dark Blue** (`rgba(3,3,39,0.25)`)：用于悬浮元素的更深的蓝色阴影。
+- **Shadow Black** (`rgba(0,0,0,0.1)`)：用于强化景深的次要阴影层。
+- **Shadow Ambient** (`rgba(23,23,23,0.08)`)：用于微妙悬浮感的柔和环境阴影。
+- **Shadow Soft** (`rgba(23,23,23,0.06)`)：用于轻微浮起效果的最小环境阴影。
+
+## 3. 排版规则
+
+### Font Family（字体系列）
+- **Primary**: `sohne-var`，备用字体：`SF Pro Display`
+- **Monospace**: `SourceCodePro`，备用字体：`SFMono-Regular`
+- **OpenType 特性**：在所有 sohne-var 文本上全局启用 `"ss01"`；在财务数据和说明文字的表格数字上使用 `"tnum"`。
+
+### Hierarchy（层级）
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Features | Notes |
+|------|------|------|--------|-------------|----------------|----------|-------|
+| Display Hero | sohne-var | 56px (3.50rem) | 300 | 1.03 (tight) | -1.4px | ss01 | 最大尺寸，耳语般的权威感 |
+| Display Large | sohne-var | 48px (3.00rem) | 300 | 1.15 (tight) | -0.96px | ss01 | 次级 Hero 标题 |
+| Section Heading | sohne-var | 32px (2.00rem) | 300 | 1.10 (tight) | -0.64px | ss01 | 功能区段标题 |
+| Sub-heading Large | sohne-var | 26px (1.63rem) | 300 | 1.12 (tight) | -0.26px | ss01 | 卡片标题，子区段 |
+| Sub-heading | sohne-var | 22px (1.38rem) | 300 | 1.10 (tight) | -0.22px | ss01 | 较小的区段标题 |
+| Body Large | sohne-var | 18px (1.13rem) | 300 | 1.40 | normal | ss01 | 功能描述，引导文本 |
+| Body | sohne-var | 16px (1.00rem) | 300-400 | 1.40 | normal | ss01 | 标准阅读文本 |
+| Button | sohne-var | 16px (1.00rem) | 400 | 1.00 (tight) | normal | ss01 | 主要按钮文本 |
+| Button Small | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | 次要/紧凑型按钮 |
+| Link | sohne-var | 14px (0.88rem) | 400 | 1.00 (tight) | normal | ss01 | 导航链接 |
+| Caption | sohne-var | 13px (0.81rem) | 400 | normal | normal | ss01 | 小型标签，元数据 |
+| Caption Small | sohne-var | 12px (0.75rem) | 300-400 | 1.33-1.45 | normal | ss01 | 附带细则，时间戳 |
+| Caption Tabular | sohne-var | 12px (0.75rem) | 300-400 | 1.33 | -0.36px | tnum | 财务数据，数字 |
+| Micro | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | 0.1px | ss01 | 极小标签，坐标轴标记 |
+| Micro Tabular | sohne-var | 10px (0.63rem) | 300 | 1.15 (tight) | -0.3px | tnum | 图表数据，小数字 |
+| Nano | sohne-var | 8px (0.50rem) | 300 | 1.07 (tight) | normal | ss01 | 最小的标签 |
+| Code Body | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | -- | 代码块，语法 |
+| Code Bold | SourceCodePro | 12px (0.75rem) | 700 | 2.00 (relaxed) | normal | -- | 粗体代码，关键字 |
+| Code Label | SourceCodePro | 12px (0.75rem) | 500 | 2.00 (relaxed) | normal | uppercase | 技术标签 |
+| Code Micro | SourceCodePro | 9px (0.56rem) | 500 | 1.00 (tight) | normal | ss01 | 微型代码注释 |
+
+### Principles（原则）
+- **以轻量字重为标志**：在展示尺寸下使用 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（界面元素/按钮）。主字体中不使用粗体 (700)——SourceCodePro 使用 500/700 字重来实现代码的对比度。
+
+## 4. 组件样式
+
+### Buttons（按钮）
+
+**Primary Purple（主要紫色按钮）**
+- 背景：`#533afd`
+- 文本：`#ffffff`
+- 内边距：8px 16px
+- 圆角：4px
+- 字体：16px sohne-var weight 400, `"ss01"`
+- 悬停：`#4434d4` 背景
+- 用途：主要 CTA（“Start now”、“Contact sales”）
+
+**Ghost / Outlined（幽灵/轮廓按钮）**
+- 背景：transparent
+- 文本：`#533afd`
+- 内边距：8px 16px
+- 圆角：4px
+- 边框：`1px solid #b9b9f9`
+- 字体：16px sohne-var weight 400, `"ss01"`
+- 悬停：背景过渡为 `rgba(83,58,253,0.05)`
+- 用途：次要操作
+
+**Transparent Info（透明信息按钮）**
+- 背景：transparent
+- 文本：`#2874ad`
+- 内边距：8px 16px
+- 圆角：4px
+- 边框：`1px solid rgba(43,145,223,0.2)`
+- 用途：三级/信息级别的操作
+
+**Neutral Ghost（中性幽灵按钮）**
+- 背景：transparent (`rgba(255,255,255,0)`)
+- 文本：`rgba(16,16,16,0.3)`
+- 内边距：8px 16px
+- 圆角：4px
+- 轮廓：`1px solid rgb(212,222,233)`
+- 用途：禁用或弱化操作
+
+### Cards & Containers（卡片与容器）
+- 背景：`#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`
+- 悬停：阴影加深，通常会添加带蓝色调的阴影层
+
+### Badges / Tags / Pills（徽章/标签/胶囊）
+**Neutral Pill（中性胶囊）**
+- 背景：`#ffffff`
+- 文本：`#000000`
+- 内边距：0px 6px
+- 圆角：4px
+- 边框：`1px solid #f6f9fc`
+- 字体：11px weight 400
+
+**Success Badge（成功徽章）**
+- 背景：`rgba(21,190,83,0.2)`
+- 文本：`#108c3d`
+- 内边距：1px 6px
+- 圆角：4px
+- 边框：`1px solid rgba(21,190,83,0.4)`
+- 字体：10px weight 300
+
+### Inputs & Forms（输入框与表单）
+- 边框：`1px solid #e5edf5`
+- 圆角：4px
+- 聚焦：`1px solid #533afd` 或紫色光环
+- 标签：`#273951`，14px sohne-var
+- 文本：`#061b31`
+- 占位符：`#64748d`
+
+### Navigation（导航）
+- 白色背景上的干净水平导航，带有模糊背景的吸顶效果
+- 品牌标志左对齐
+- 链接：sohne-var 14px weight 400，文本颜色 `#061b31`，开启 `"ss01"`
+- 圆角：导航容器采用 6px
+- CTA：右对齐的紫色按钮（“Sign in”、“Start now”）
+- 移动端：带有 6px 圆角的汉堡菜单开关
+
+### Decorative Elements（装饰元素）
+**Dashed Borders（虚线边框）**
+- `1px dashed #362baa`（紫色）用于占位符/拖放区
+- `1px dashed #ffd7ef`（洋红色）用于 Magenta 主题的装饰性边框
+
+**Gradient Accents（渐变强调）**
+- 首屏装饰使用 Ruby 到 Magenta 的渐变（`#ea2261` 到 `#f96bee`）
+- 深色品牌版块使用 `#1c1e54` 背景和白色文本
+
+## 5. 布局原则
+
+### Spacing System（间距系统）
+- 基础单位：8px
+- 比例：1px, 2px, 4px, 6px, 8px, 10px, 11px, 12px, 14px, 16px, 18px, 20px
+- 注意：该比例刻度在小尺寸端非常密集（4-12 之间每 2px 一递进），反映了 Stripe 针对财务数据的精确导向型 UI
+
+### Grid & Container（网格与容器）
+- 最大内容宽度：约 1080px
+- 首屏：居中的单列布局，留白充裕，使用轻量级标题
+- 特性版块：用于功能卡片的 2-3 列网格
+- 全宽的深色版块使用 `#1c1e54` 背景，以实现品牌沉浸感
+- 代码/仪表盘预览作为包含带蓝色调阴影的独立卡片展示
+
+### Whitespace Philosophy（留白哲学）
+- **精准间距**：与极简主义系统中的巨大留白不同，Stripe 使用的是经过精确计算、目的明确的留白。每一个间距都是深思熟虑的排版选择。
+- **密集数据，宽裕外壳**：财务数据展示（表格、图表）排版紧凑，但围绕它们的 UI 外部框架（外壳）间距却很宽裕。这创造了一种受控的密集感——就像一个放在精美相框里、组织良好的电子表格。
+- **版块节奏**：白色版块与深色品牌版块（`#1c1e54`）交替出现，创造出戏剧性的明暗节奏，既避免了单调，又无需引入随意的颜色。
+
+### Border Radius Scale（圆角比例）
+- Micro (1px)：细粒度元素，微妙的圆角
+- Standard (4px)：按钮、输入框、徽章、卡片——主力尺寸
+- Comfortable (5px)：标准卡片容器
+- Relaxed (6px)：导航，较大的交互元素
+- Large (8px)：特色卡片，Hero 元素
+- 复合：`0px 0px 6px 6px` 用于底部圆角容器（标签面板，下拉菜单页脚）
+
+## 6. 深度与悬浮感
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影 | 页面背景，行内文本 |
+| Ambient (Level 1) | `rgba(23,23,23,0.06) 0px 3px 6px` | 轻微的卡片浮起，悬停提示 |
+| Standard (Level 2) | `rgba(23,23,23,0.08) 0px 15px 35px` | 标准卡片，内容面板 |
+| Elevated (Level 3) | `rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px` | 特色卡片，下拉菜单，弹出框 |
+| Deep (Level 4) | `rgba(3,3,39,0.25) 0px 14px 21px -14px, rgba(0,0,0,0.1) 0px 8px 17px -8px` | 模态框，浮动面板 |
+| Ring (Accessibility) | `2px solid #533afd` outline | 键盘聚焦光环 |
+
+**阴影哲学**：Stripe 的阴影系统建立在色彩深度的原则之上。当大多数设计系统使用中性的灰色或黑色阴影时，Stripe 的主要阴影颜色（`rgba(50,50,93,0.25)`）是一种深邃的蓝灰色，呼应了品牌的藏青色调。这不仅增加了深度，还增添了品牌的氛围。多层阴影方法将这种带蓝色调的阴影与在不同偏移量处的纯黑色次要层（`rgba(0,0,0,0.1)`）配对，创造出一种视差般的深度，即品牌色阴影位于距离元素较远的位置，而中性阴影则更靠近元素。负的扩展值（-30px、-18px）确保了阴影在水平方向上不会超出元素的覆盖范围，使得悬浮感保持垂直和受控。
+
+### Decorative Depth（装饰性深度）
+- 深色品牌版块（`#1c1e54`）通过背景颜色对比创造沉浸式深度
+- 首屏装饰使用 Ruby 到 Magenta 过渡的渐变叠加
+- 粘性元素的顶部边缘阴影使用阴影颜色 `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 的字间距是紧凑的
+- 不要在按钮或链接上使用 Magenta/Ruby 强调色 —— 它们仅用于装饰和渐变
+
+## 8. 响应式行为
+
+### Breakpoints（断点）
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile | <640px | 单列布局，减小标题尺寸，卡片堆叠 |
+| Tablet | 640-1024px | 2 列网格，适度填充 |
+| Desktop | 1024-1280px | 完整布局，3 列特性网格 |
+| Large Desktop | >1280px | 居中内容，留有宽裕边距 |
+
+### Touch Targets（触摸目标）
+- 按钮使用舒适的内边距（垂直 8px-16px）
+- 导航链接为 14px，带有充足的间距
+- 徽章至少具有 6px 的水平内边距以充作触摸目标
+- 移动端导航开关采用 6px 圆角按钮
+
+### Collapsing Strategy（收缩策略）
+- 首屏：56px display -> 移动端 32px，保持 300 字重
+- 导航：水平链接 + CTA -> 汉堡菜单开关
+- 特性卡片：3 列 -> 2 列 -> 单列堆叠
+- 深色品牌版块：保持全宽处理，减少内部边距
+- 财务数据表格：在移动端支持水平滚动
+- 区段间距：64px+ -> 移动端 40px
+- 排版比例压缩：在各断点下首屏尺寸为 56px -> 48px -> 32px
+
+### Image Behavior（图像行为）
+- 仪表盘/产品截图在所有尺寸下均保持带蓝色调的阴影
+- 首屏的渐变装饰在移动端会进行简化
+- 代码块保持 `SourceCodePro` 处理方式，可能会出现水平滚动
+- 卡片图像保持一致的 4px-6px 边框半径
+
+## 9. Agent 提示词指南
+
+### Quick Color Reference（快速颜色参考）
+- 主要 CTA：Stripe Purple (`#533afd`)
+- CTA 悬停：Purple Dark (`#4434d4`)
+- 背景：Pure White (`#ffffff`)
+- 标题文本：Deep Navy (`#061b31`)
+- 正文文本：Slate (`#64748d`)
+- 标签文本：Dark Slate (`#273951`)
+- 边框：Soft Blue (`#e5edf5`)
+- 链接：Stripe Purple (`#533afd`)
+- 深色版块：Brand Dark (`#1c1e54`)
+- 成功：Green (`#15be53`)
+- 装饰强调：Ruby (`#ea2261`)，Magenta (`#f96bee`)
+
+### 示例 Component Prompts
+- "Create a hero section on white background. Headline at 48px sohne-var weight 300, line-height 1.15, letter-spacing -0.96px, color #061b31, font-feature-settings 'ss01'. Subtitle at 18px weight 300, line-height 1.40, color #64748d. Purple CTA button (#533afd, 4px radius, 8px 16px padding, white text) and ghost button (transparent, 1px solid #b9b9f9, #533afd text, 4px radius)."
+- "Design a card: white background, 1px solid #e5edf5 border, 6px radius. Shadow: rgba(50,50,93,0.25) 0px 30px 45px -30px, rgba(0,0,0,0.1) 0px 18px 36px -18px. Title at 22px sohne-var weight 300, letter-spacing -0.22px, color #061b31, 'ss01'. Body at 16px weight 300, #64748d."
+- "Build a success badge: rgba(21,190,83,0.2) background, #108c3d text, 4px radius, 1px 6px padding, 10px sohne-var weight 300, border 1px solid rgba(21,190,83,0.4)."
+- "Create navigation: white sticky header with backdrop-filter blur(12px). sohne-var 14px weight 400 for links, #061b31 text, 'ss01'. Purple CTA 'Start now' right-aligned (#533afd bg, white text, 4px radius). Nav container 6px radius."
+- "Design a dark brand section: #1c1e54 background, white text. Headline 32px sohne-var weight 300, letter-spacing -0.64px, 'ss01'. Body 16px weight 300, rgba(255,255,255,0.7). Cards inside use rgba(255,255,255,0.1) border with 6px radius."
+
+### Iteration Guide（迭代指南）
+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`（Slate 灰），标签是 `#273951`（Dark Slate 深灰）
+5. 边框半径保持在 4px-8px 之间 —— 绝不使用胶囊形状或大圆角
+6. 在表格、图表或财务显示中的任何数字使用 `"tnum"`
+7. 深色版块使用 `#1c1e54` —— 不是黑色，也不是灰色，而是带有深度品牌感的靛蓝色
+8. 代码使用 SourceCodePro，12px/500 字重，并搭配 2.00 的行高（为了可读性而设置的非常宽裕的行高）