@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,316 @@
+# Design System: Resend
+
+
+> **Hermes Agent — Implementation 说明**
+>
+> 原网站使用专有字体。对于自包含的 HTML 输出，请使用这些 CDN 替代字体：
+> - **Primary:** `Geist` | **Mono:** `Geist Mono`
+> - **Font stack (CSS):** `font-family: 'Geist', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill (cloudflared tunnel) 提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Resend 的网站是一个深色、电影般的画布，将邮件基础设施视作奢侈产品。整个页面披着纯黑色 (`#000000`)，文本在近乎纯白 (`#f0f0f0`) 的光芒中闪烁，营造出一种剧院般的体验，内容在空白的舞台上表演。这不是典型的开发者工具的黑暗——它是受控的摄影画廊般的黑暗，每个元素都被有意识地照亮，没有什么是相互争夺注意力的。
+
+排版系统是其中的主角。三种精心挑选的字体创造了一种兼具编辑感和技术感的层级结构：Domaine Display（Klim Type Foundry 的衬线字体）以巨大的 96px 出现在 hero 标题中，具有极小的 line-height (1.00) 和负字间距 (-0.96px)，创造出感觉像杂志封面的展示文本。ABC Favorit（由 Dinamo 出品）以更具侵略性的字间距（56px 时为 -2.8px）处理章节标题，赋予中等层级文本一种压缩的、经过工程设计的质感。Inter 负责正文和 UI，提供干净的易读性，让展示字体大放异彩。Commit Mono 为代码块完善了整个字体家族。
+
+让 Resend 独具特色的是其冰冷的、带蓝色调的边框系统。Resend 没有使用中性灰边框，而是使用了 `rgba(214, 235, 253, 0.19)` —— 一条 19% 透明度的冰霜感、略带蓝色调的线条，赋予了每个容器和分隔线在黑色背景下一种寒冷、晶莹的质感。结合胶囊形按钮（9999px 圆角）、多彩强调系统（橙色、绿色、蓝色、黄色、红色——每种都有各自的 CSS 变量比例）以及 OpenType 风格集 (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`)，最终形成了一个充满高级感、精准且暗含自信的设计系统。
+
+**关键特征：**
+- 纯黑色背景搭配近乎纯白 (`#f0f0f0`) 的文本 —— 剧院般、画廊般的黑暗
+- 三种字体的层级结构：Domaine Display（serif hero 标题）、ABC Favorit（几何形章节标题）、Inter（正文/UI）
+- 冰冷的带蓝色调边框：`rgba(214, 235, 253, 0.19)` —— 每个边框都散发着冰冷、晶莹的微光
+- 多彩强调系统：橙色、绿色、蓝色、黄色、红色 —— 每种颜色都有带编号的 CSS 变量比例
+- 带透明背景的胶囊形按钮和标签（9999px 圆角）
+- 在展示字体上应用 OpenType 风格集 (`"ss01"`, `"ss03"`, `"ss04"`, `"ss11"`)
+- Commit Mono 代码字体 —— 等宽字体作为一种设计元素，而不是事后的补充
+- 使用带蓝色调圆环的低语级阴影：`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Void Black** (`#000000`)：页面背景，决定性的画布颜色（通过 `--color-black-12` 实现 95% 透明度）
+- **Near White** (`#f0f0f0`)：主要文本、按钮文本、高对比度元素
+- **Pure White** (`#ffffff`)：`--color-white`，最高强调的文本、链接高亮
+
+### Accent Scale — Orange
+- **Orange 4** (`#ff5900`)：`--color-orange-4`，22% 透明度 —— 微妙温暖的光晕
+- **Orange 10** (`#ff801f`)：`--color-orange-10`，主要橙色强调色 —— 温暖、充满活力
+- **Orange 11** (`#ffa057`)：`--color-orange-11`，较浅的橙色，用于次要用途
+
+### Accent Scale — Green
+- **Green 3** (`#22ff99`)：`--color-green-3`，12% 透明度 —— 淡淡的翡翠色晕染
+- **Green 4** (`#11ff99`)：`--color-green-4`，18% 透明度 —— 成功指示器光晕
+
+### Accent Scale — Blue
+- **Blue 4** (`#0075ff`)：`--color-blue-4`，34% 透明度 —— 中等蓝色强调色
+- **Blue 5** (`#0081fd`)：`--color-blue-5`，42% 透明度 —— 更强的蓝色
+- **Blue 10** (`#3b9eff`)：`--color-blue-10`，明亮的蓝色 —— 链接、交互元素
+
+### Accent Scale — Other
+- **Yellow 9** (`#ffc53d`)：`--color-yellow-9`，用于警告或高亮的暖金色
+- **Red 5** (`#ff2047`)：`--color-red-5`，34% 透明度 —— 错误状态、破坏性操作
+
+### Neutral Scale
+- **Silver** (`#a1a4a5`)：次要文本、柔和的链接、描述
+- **Dark Gray** (`#464a4d`)：三级文本、弱化的内容
+- **Mid Gray** (`#5c5c5c`)：Hover 状态、细微的强调
+- **Medium Gray** (`#494949`)：四级文本
+- **Light Gray** (`#f8f8f8`)：浅色模式表面（如果适用）
+- **Border Gray** (`#eaeaea`)：浅色上下文边框
+- **Edge Gray** (`#ececec`)：浅色表面上细微的边框
+- **Mist Gray** (`#dedfdf`)：浅色分隔线
+- **Soft Gray** (`#e5e6e6`)：备用浅色边框
+
+### Surface & Overlay
+- **Frost Primary** (`#fcfdff`)：主要颜色 token（轻微的蓝色调，94% 透明度）
+- **White Hover** (`rgba(255, 255, 255, 0.28)`)：深色背景上按钮的 Hover 状态
+- **White 60%** (`oklab(0.999994 ... / 0.577)`)：用于柔和文本的半透明白色
+- **White 64%** (`oklab(0.999994 ... / 0.642)`)：略亮的半透明白色
+
+### Borders & Shadows
+- **Frost Border** (`rgba(214, 235, 253, 0.19)`)：标志性色彩 —— 19% 透明度的冰冷带蓝色调边框
+- **Frost Border Alt** (`rgba(217, 237, 254, 0.145)`)：用于列表项的稍浅变体
+- **Ring Shadow** (`rgba(176, 199, 217, 0.145) 0px 0px 0px 1px`)：带蓝色调的阴影即边框
+- **Focus Ring** (`rgb(0, 0, 0) 0px 0px 0px 8px`)：厚重的黑色聚焦环
+- **Subtle Shadow** (`rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px`)：极简的卡片悬浮阴影
+
+## 3. 排版规则
+
+### Font Families
+- **Display Serif**: `domaine`（Klim Type Foundry 的 Domaine Display）—— hero 标题
+- **Display Sans**: `aBCFavorit`（Dinamo 的 ABC Favorit），fallbacks: `ui-sans-serif, system-ui` —— 章节标题
+- **Body / UI**: `inter`，fallbacks: `ui-sans-serif, system-ui` —— 正文、按钮、导航
+- **Monospace**: `commitMono`，fallbacks: `ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas`
+- **Secondary**: `Helvetica` —— 特定 UI 上下文的 fallback
+- **System**: `-apple-system, system-ui, Segoe UI, Roboto` —— 嵌入的内容
+
+### Hierarchy
+
+| Role | Font | Size | Weight | Line Height | Letter Spacing | Notes |
+|------|------|------|--------|-------------|----------------|-------|
+| Display Hero | domaine | 96px (6.00rem) | 400 | 1.00 (tight) | -0.96px | `"ss01", "ss04", "ss11"` |
+| Display Hero Mobile | domaine | 76.8px (4.80rem) | 400 | 1.00 (tight) | -0.768px | 为移动端缩放 |
+| Section Heading | aBCFavorit | 56px (3.50rem) | 400 | 1.20 (tight) | -2.8px | `"ss01", "ss04", "ss11"` |
+| Sub-heading | aBCFavorit | 20px (1.25rem) | 400 | 1.30 (tight) | normal | `"ss01", "ss04", "ss11"` |
+| Sub-heading Compact | aBCFavorit | 16px (1.00rem) | 400 | 1.50 | -0.8px | `"ss01", "ss04", "ss11"` |
+| Feature Title | inter | 24px (1.50rem) | 500 | 1.50 | normal | 章节子标题 |
+| Body Large | inter | 18px (1.13rem) | 400 | 1.50 | normal | 介绍语 |
+| Body | inter | 16px (1.00rem) | 400 | 1.50 | normal | 标准正文 |
+| Body Semibold | inter | 16px (1.00rem) | 600 | 1.50 | normal | 强调、激活状态 |
+| Nav Link | aBCFavorit | 14px (0.88rem) | 500 | 1.43 | 0.35px | `"ss01", "ss03", "ss04"` —— 正向字间距 |
+| Button / Link | inter | 14px (0.88rem) | 500–600 | 1.43 | normal | 按钮、导航、CTA |
+| Caption | inter | 14px (0.88rem) | 400 | 1.60 (relaxed) | normal | 描述 |
+| Helvetica Caption | Helvetica | 14px (0.88rem) | 400–600 | 1.00–1.71 | normal | UI 元素 |
+| Small | inter | 12px (0.75rem) | 400–500 | 1.33 | normal | 标签、meta、附属细则 |
+| Small Uppercase | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: uppercase` |
+| Small Capitalize | inter | 12px (0.75rem) | 500 | 1.33 | normal | `text-transform: capitalize` |
+| Code Body | commitMono | 16px (1.00rem) | 400 | 1.50 | normal | 代码块 |
+| Code Small | commitMono | 14px (0.88rem) | 400 | 1.43 | normal | 行内代码 |
+| Code Tiny | commitMono | 12px (0.75rem) | 400 | 1.33 | normal | 小代码标签 |
+| Heading (Helvetica) | Helvetica | 24px (1.50rem) | 400 | 1.40 | normal | 备用标题上下文 |
+
+### Principles
+- **三种字体的编辑层级**：Domaine Display（serif，hero 标题）、ABC Favorit（几何形 sans，章节标题）、Inter（易读的正文）。每种字体都有严格的角色——它们绝不跨界。
+- **展示字体使用强烈的负字间距**：Domaine 为 -0.96px，ABC Favorit 为 -2.8px。展示字体让人感觉紧凑、紧迫且经过精心设计——就像杂志刊头一样。
+- **导航使用正向字间距**：ABC Favorit 导航链接使用 +0.35px 的字间距——这是系统中唯一的正向字间距。这创造了通风、间隔较大的导航文本，与紧凑的标题形成对比。
+- **OpenType 作为身份标识**：在所有 ABC Favorit 和 Domaine 文本上启用 `"ss01"`、`"ss03"`、`"ss04"`、`"ss11"` 风格集，激活备用字形，赋予 Resend 的排印独特的个性。
+- **Commit Mono 作为设计元素**：等宽字体并不只隐藏在代码块中——它在代码示例和技术内容中得到广泛应用，被视为一等公民的视觉元素。
+
+## 4. 组件样式
+
+### Buttons
+
+**Primary Transparent Pill**
+- Background: transparent
+- Text: `#f0f0f0`
+- Padding: 5px 12px
+- Radius: 9999px (full pill)
+- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
+- Hover: background `rgba(255, 255, 255, 0.28)` (white glass)
+- Use: 深色背景上的主要 CTA
+
+**White Solid Pill**
+- Background: `#ffffff`
+- Text: `#000000`
+- Padding: 5px 12px
+- Radius: 9999px
+- Use: 高对比度 CTA ("Get started")
+
+**Ghost Button**
+- Background: transparent
+- Text: `#f0f0f0`
+- Radius: 4px
+- No border
+- Hover: subtle background tint
+- Use: 次要操作、tab 项
+
+### Cards & Containers
+- Background: 透明或非常微妙的深色调
+- Border: `1px solid rgba(214, 235, 253, 0.19)` (frost border)
+- Radius: 16px (standard cards), 24px (large sections/panels)
+- Shadow: `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` (ring shadow)
+- 以深色产品截图和代码演示作为卡片内容
+- 没有传统的 box-shadow 悬浮效果
+
+### Inputs & Forms
+- Text: 深色背景上为 `#f0f0f0`，浅色背景上为 `#000000`
+- Radius: 4px
+- Focus: 基于阴影的圆环
+- 最小化样式 —— 继承深色主题
+
+### Navigation
+- 带有底部 frost border 的粘性深色标题栏: `1px solid rgba(214, 235, 253, 0.19)`
+- "Resend" 文字商标左对齐
+- ABC Favorit 14px weight 500 搭配 +0.35px 字间距用于导航链接
+- 胶囊形 CTA 右对齐
+- Mobile: 折叠为汉堡菜单
+
+### Image Treatment
+- 产品截图和代码演示主导内容部分
+- 深色背景上的深色主题截图 —— 无缝融合
+- 圆角：图片应用 12px–16px
+- 全宽区块配合微妙的渐变叠加
+
+### Distinctive Components
+
+**Tab Navigation**
+- 带有微妙选中指示器的水平 tab
+- Tab 项：8px 圆角
+- Active 状态具有微妙的背景区分
+
+**Code Preview Panels**
+- 使用 Commit Mono 的深色代码块
+- Frost borders (`rgba(214, 235, 253, 0.19)`)
+- 语法高亮使用多彩强调 token（橙色、蓝色、绿色、黄色）
+
+**Multi-color Accent Badges**
+- 每个产品特性都有来自 CSS 变量比例的专属强调色
+- 徽章背景使用低透明度（12–42%）的强调色，文本使用完全透明度
+
+## 5. 布局原则
+
+### Spacing System
+- 基础单位：8px
+- 比例：1px, 2px, 4px, 5px, 6px, 7px, 8px, 10px, 12px, 16px, 20px, 24px, 30px, 32px, 40px
+
+### Grid & Container
+- 居中内容搭配宽裕的 max-width
+- 全宽黑色区块搭配受限的内部内容
+- 单列 hero，向下扩展为特性网格
+- 代码预览面板作为全宽或受限的展示区
+
+### Whitespace Philosophy
+- **电影般的黑色空间**：黑色背景本身就是留白。区块之间宽裕的垂直间距（80px–120px+）创造了一种在黑暗中滚动的体验，每个区块都像场景一样浮现。
+- **紧凑的内容，广阔的周围环境**：文本块和卡片在内部是紧凑的，但漂浮在广阔的黑暗空间中——创造了孤立的“岛屿”状内容。
+- **排版主导的节奏**：巨大的展示字体（96px）创造了它们自己的垂直节奏——每个标题都是一个固定周围空间的视觉事件。
+
+### Border Radius Scale
+- Sharp (4px)：按钮、输入框、小型交互元素
+- Subtle (6px)：菜单面板、导航项
+- Standard (8px)：Tabs、内容块
+- Comfortable (10px)：强调元素
+- Card (12px)：剪贴板按钮、中等容器
+- Large (16px)：特性卡片、图像、主要按钮
+- Section (24px)：大型面板、区块容器
+- Pill (9999px)：主要 CTA、标签、徽章
+
+## 6. 深度与悬浮感
+
+| Level | Treatment | Use |
+|-------|-----------|-----|
+| Flat (Level 0) | No shadow, transparent background | 默认 —— 深色虚空中的大多数元素 |
+| Ring (Level 1) | `rgba(176, 199, 217, 0.145) 0px 0px 0px 1px` | 卡片、容器的阴影即边框 |
+| Frost Border (Level 1b) | `1px solid rgba(214, 235, 253, 0.19)` | 显式边框 —— 按钮、分隔线、tabs |
+| Subtle (Level 2) | `rgba(0, 0, 0, 0.1) 0px 1px 3px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px` | 轻度卡片悬浮感 |
+| Focus (Level 3) | `rgb(0, 0, 0) 0px 0px 0px 8px` | 厚重的黑色聚焦环 —— 无障碍设计 |
+
+**阴影哲学**：Resend 几乎不使用阴影。在纯黑色背景上，传统的阴影是不可见的——你无法将阴影投射到虚空中。相反，Resend 通过其标志性的 frost borders (`rgba(214, 235, 253, 0.19)`) 创造深度——这是一种在黑暗中捕捉光线的冰冷、带蓝色调的细线。这创造了一种“玻璃面板漂浮在太空中”的美学，边框成为了主要的深度机制。
+
+### Decorative Depth
+- Hero 内容背后的微妙暖色渐变光晕（橙色/琥珀色调）
+- 产品截图通过其自身的内部 UI 创造视觉深度
+- 没有渐变背景 —— 深度来自于边框亮度和内容对比度
+
+## 7. 注意事项
+
+### Do
+- 使用纯黑色 (`#000000`) 作为页面背景 —— 虚空就是画布
+- 为所有结构性线条应用 frost borders (`rgba(214, 235, 253, 0.19)`) —— 它们是带蓝色调的标志
+- 仅将 Domaine Display 用于 hero 标题 (96px)，ABC Favorit 用于章节标题，Inter 用于其他所有内容
+- 在 Domaine 和 ABC Favorit 文本上启用 OpenType `"ss01"`、`"ss04"`、`"ss11"`
+- 将 pill radius (9999px) 应用于主要 CTA 和标签
+- 使用带透明度变体的多彩强调色比例（橙色/绿色/蓝色/黄色/红色）进行特定上下文的高亮显示
+- 将阴影保持在 ring level (`0px 0px 0px 1px`) —— 在黑色背景上，传统阴影不起作用
+- 在 ABC Favorit 导航链接上使用 +0.35px 字间距 —— 唯一的正向字间距
+
+### Don't
+- 不要将背景亮度调高至 `#000000` 以上 —— 纯黑虚空是不容妥协的
+- 不要使用中性灰边框 —— 所有边框都必须带有一丝 frost 蓝色调
+- 不要将 Domaine Display 应用于正文 —— 它是仅用于展示的 serif 字体
+- 不要在同一组件中混合强调色 —— 每个特性只获得一种强调色
+- 不要在深色背景上使用 box-shadow 营造悬浮感 —— 应改用 frost borders
+- 不要跳过 OpenType 风格集 —— 它们定义了排印字符的特征
+- 不要在导航链接上使用负字间距 —— ABC Favorit 导航使用正向的 +0.35px
+- 不要在深色背景上让按钮变得不透明 —— 透明度加上 frost border 才是标准模式
+
+## 8. 响应式行为
+
+### Breakpoints
+| Name | Width | Key Changes |
+|------|-------|-------------|
+| Mobile Small | <480px | 单列布局，紧凑的 padding，76.8px hero |
+| Mobile | 480–600px | 标准移动端，堆叠布局 |
+| Desktop | >600px | 完整布局，96px hero，展开的区块 |
+
+*注意：Resend 使用极简的断点系统 —— 仅检测到 480px 和 600px。该设计是桌面优先，并具有整洁的移动端折叠效果。*
+
+### Touch Targets
+- Pill buttons: adequate padding (5px 12px minimum)
+- Tab items: 8px radius with comfortable hit areas
+- Navigation links spaced with 0.35px tracking for visual separation
+
+### Collapsing Strategy
+- Hero: Domaine 96px → 76.8px on mobile
+- Navigation: horizontal → hamburger
+- 特性 sections: side-by-side → stacked
+- Code panels: maintain width, horizontal scroll if needed
+- Spacing compresses proportionally
+
+### Image Behavior
+- Product screenshots maintain aspect ratio
+- Dark screenshots blend seamlessly with dark background at all sizes
+- Rounded corners (12px–16px) maintained across breakpoints
+
+## 9. Agent Prompt Guide
+
+### Quick Color Reference
+- Background: Void Black (`#000000`)
+- Primary text: Near White (`#f0f0f0`)
+- Secondary text: Silver (`#a1a4a5`)
+- Border: Frost Border (`rgba(214, 235, 253, 0.19)`)
+- Orange accent: `#ff801f`
+- Green accent: `#11ff99` (at 18% opacity)
+- Blue accent: `#3b9eff`
+- Focus ring: `rgb(0, 0, 0) 0px 0px 0px 8px`
+
+### 示例 Component Prompts
+- "Create a hero section on pure black (#000000) background. Headline at 96px Domaine Display weight 400, line-height 1.00, letter-spacing -0.96px, near-white (#f0f0f0) text, OpenType 'ss01 ss04 ss11'. Subtitle at 20px ABC Favorit weight 400, line-height 1.30. Two pill buttons: white solid (#ffffff, 9999px radius) and transparent with frost border (rgba(214,235,253,0.19))."
+- "Design a navigation bar: dark background with frost border bottom (1px solid rgba(214,235,253,0.19)). Nav links at 14px ABC Favorit weight 500, letter-spacing +0.35px, OpenType 'ss01 ss03 ss04'. White pill CTA right-aligned."
+- "Build a feature card: transparent background, frost border (rgba(214,235,253,0.19)), 16px radius. Title at 56px ABC Favorit weight 400, letter-spacing -2.8px. Body at 16px Inter weight 400, #a1a4a5 text."
+- "Create a code block using Commit Mono 16px on dark background. Frost border container (24px radius). Syntax colors: orange (#ff801f), blue (#3b9eff), green (#11ff99), yellow (#ffc53d)."
+- "Design an accent badge: background #ff5900 at 22% opacity, text #ffa057, 9999px radius, 12px Inter weight 500."
+
+### Iteration Guide
+1. Start with pure black — everything floats in the void
+2. Frost borders (`rgba(214, 235, 253, 0.19)`) are the universal structural element — not gray, not neutral
+3. Three fonts, three roles: Domaine (hero), ABC Favorit (sections), Inter (body) — never cross
+4. OpenType stylistic sets are mandatory on display fonts — they define the character
+5. Multi-color accents at low opacity (12–42%) for backgrounds, full opacity for text
+6. Pill shape (9999px) for CTAs and badges, standard radius (4px–16px) for containers
+7. No shadows — use frost borders for depth against the void

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

@@ -0,0 +1,198 @@
+# 设计系统：Revolut
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于自包含的 HTML 输出，请使用以下 CDN 替代字体：
+> - **Primary:** `Inter` | **Mono:** `system monospace stack`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;`
+> ```html
+> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Revolut 的网站是将金融科技的自信蒸馏进像素中的产物——这是一个通过巨大的排版、充裕的留白以及克制的中性色调来传达“您的资金由专业团队管理”的设计系统。这种视觉语言建立在 Aeonik Pro 之上，这是一种几何无衬线字体，能够以 136px 的字号、500 的字重以及极具张力的负字间距（-2.72px）创造出广告牌级别的标题。这不是含蓄的品牌形象；这是体育场规模的金融科技。
+
+色彩系统建立在全面的 `--rui-*` (Revolut UI) token 架构之上，为每种状态提供了语义化命名：danger (`#e23b4a`)、warning (`#ec7e00`)、teal (`#00a87e`)、blue (`#494fdf`)、deep-pink (`#e61e49`) 等等。但营销界面本身却非常克制——接近黑色的（`#191c1f`）和纯白色的（`#ffffff`）占据主导地位，而色彩丰富的语义化 token 则预留给产品界面，而非营销页面。
+
+Revolut 的独特之处在于其“万物皆胶囊”的按钮系统。每个按钮都使用 9999px 的圆角——包括主深色按钮（`#191c1f`）、次浅色按钮（`#f4f4f4`）、描边按钮（`transparent + 2px solid`）以及深色背景上的幽灵按钮（`rgba(244,244,244,0.1) + 2px solid`）。内边距非常宽裕（14px 32px–34px），创造了宽大且充满自信的触控目标。结合用于正文不同字重的 Inter 以及正字间距（0.16px–0.24px），其结果是产生了一种既具有高级感又易于访问的设计——属于现代时代的银行业务风格。
+
+**关键特征：**
+- 136px 字重 500 的 Aeonik Pro 展示字体——广告牌规模的金融科技标题
+- 近乎黑色的（`#191c1f`）+ 白色的二元对立，配合全面的 `--rui-*` 语义化 token
+- 通用的胶囊型按钮（9999px 圆角），带有宽裕的内边距（14px 32px）
+- 用于正文的 Inter 字体，带有正字间距（0.16px–0.24px）
+- 丰富的语义化色彩系统：blue、teal、pink、yellow、green、brown、danger、warning
+- 未检测到阴影——完全通过色彩对比来体现层次感
+- 紧凑的展示文本行高（1.00），配合较为放松的正文字行高（1.50–1.56）
+
+## 2. 色彩调色板与角色
+
+### Primary
+- **Revolut Dark** (`#191c1f`): 主深色表面，按钮背景，近乎黑色的文本
+- **Pure White** (`#ffffff`): `--rui-color-action-label`, 主浅色表面
+- **Light Surface** (`#f4f4f4`): 次级按钮背景，微妙表面
+
+### Brand / Interactive
+- **Revolut Blue** (`#494fdf`): `--rui-color-blue`, 品牌主蓝色
+- **Action Blue** (`#4f55f1`): `--rui-color-action-photo-header-text`, 页眉强调色
+- **Blue Text** (`#376cd5`): `--website-color-blue-text`, 链接蓝色
+
+### Semantic
+- **Danger Red** (`#e23b4a`): `--rui-color-danger`, 错误/破坏性操作
+- **Deep Pink** (`#e61e49`): `--rui-color-deep-pink`, 关键强调色
+- **Warning Orange** (`#ec7e00`): `--rui-color-warning`, 警告状态
+- **Yellow** (`#b09000`): `--rui-color-yellow`, 引起注意
+- **Teal** (`#00a87e`): `--rui-color-teal`, 成功/积极状态
+- **Light Green** (`#428619`): `--rui-color-light-green`, 次级成功状态
+- **Green Text** (`#006400`): `--website-color-green-text`, 绿色文本
+- **Light Blue** (`#007bc2`): `--rui-color-light-blue`, 信息提示
+- **Brown** (`#936d62`): `--rui-color-brown`, 温暖的中性强调色
+- **Red Text** (`#8b0000`): `--website-color-red-text`, 深红色文本
+
+### Neutral Scale
+- **Mid Slate** (`#505a63`): 次要文本
+- **Cool Gray** (`#8d969e`): 柔和文本，三级文本
+- **Gray Tone** (`#c9c9cd`): `--rui-color-grey-tone-20`, 边框/分割线
+
+## 3. 排版规则
+
+### 字体家族
+- **Display**: `Aeonik Pro` — 几何无衬线字体，未检测到 fallback
+- **Body / UI**: `Inter` — 标准的系统无衬线字体
+- **Fallback**: 特定按钮上下文使用 `Arial`
+
+### 层级
+
+| 角色 | 字体 | 大小 | 字重 | 行高 | 字间距 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ---------------- | ------- |
+| Display Mega | Aeonik Pro | 136px (8.50rem) | 500 | 1.00 (紧凑) | -2.72px | 体育场规模的 hero 区 |
+| Display Hero | Aeonik Pro | 80px (5.00rem) | 500 | 1.00 (紧凑) | -0.8px | 主 hero 区 |
+| Section Heading | Aeonik Pro | 48px (3.00rem) | 500 | 1.21 (紧凑) | -0.48px | 功能区块 |
+| Sub-heading | Aeonik Pro | 40px (2.50rem) | 500 | 1.20 (紧凑) | -0.4px | 次级区块 |
+| Card Title | Aeonik Pro | 32px (2.00rem) | 500 | 1.19 (紧凑) | -0.32px | 卡片标题 |
+| Feature Title | Aeonik Pro | 24px (1.50rem) | 400 | 1.33 | normal | 轻量级标题 |
+| Nav / UI | Aeonik Pro | 20px (1.25rem) | 500 | 1.40 | normal | 导航，按钮 |
+| Body Large | Inter | 18px (1.13rem) | 400 | 1.56 | -0.09px | 介绍性文字 |
+| Body | Inter | 16px (1.00rem) | 400 | 1.50 | 0.24px | 标准阅读文本 |
+| Body Semibold | Inter | 16px (1.00rem) | 600 | 1.50 | 0.16px | 强调正文 |
+| Body Bold Link | Inter | 16px (1.00rem) | 700 | 1.50 | 0.24px | 加粗链接 |
+
+### 原则
+- **字重 500 作为展示字体默认值**：Aeonik Pro 对所有标题使用 medium（500）——绝不加粗。它通过字号和字距来建立权威感，而不是字重。
+- **广告牌式字距**：在 136px 下使用 -2.72px 是极其压缩的——这种文本设计旨在让人一眼看清，就像机场指示牌一样。
+- **正文采用正字间距**：Inter 使用 +0.16px 到 +0.24px，创造了透气、间距良好的阅读文本，与压缩的标题形成对比。
+
+## 4. 组件样式
+
+### 按钮
+
+**Primary Dark Pill**
+- Background: `#191c1f`
+- Text: `#ffffff`
+- Padding: 14px 32px
+- Radius: 9999px (full pill)
+- Hover: opacity 0.85
+- Focus: `0 0 0 0.125rem` ring
+
+**Secondary Light Pill**
+- Background: `#f4f4f4`
+- Text: `#000000`
+- Padding: 14px 34px
+- Radius: 9999px
+- Hover: opacity 0.85
+
+**Outlined Pill**
+- Background: transparent
+- Text: `#191c1f`
+- Border: `2px solid #191c1f`
+- Padding: 14px 32px
+- Radius: 9999px
+
+**Ghost on Dark**
+- Background: `rgba(244, 244, 244, 0.1)`
+- Text: `#f4f4f4`
+- Border: `2px solid #f4f4f4`
+- Padding: 14px 32px
+- Radius: 9999px
+
+### 卡片与容器
+- Radius: 12px (small), 20px (cards)
+- No shadows — flat surfaces with color contrast
+- Dark and light section alternation
+
+### 导航
+- Aeonik Pro 20px weight 500
+- Clean header, hamburger toggle at 12px radius
+- Pill CTAs right-aligned
+
+## 5. 布局原则
+
+### 间距系统
+- Base unit: 8px
+- Scale: 4px, 6px, 8px, 14px, 16px, 20px, 24px, 32px, 40px, 48px, 80px, 88px, 120px
+- Large section spacing: 80px–120px
+
+### Border Radius Scale
+- Standard (12px): Navigation, small buttons
+- Card (20px): Feature cards
+- Pill (9999px): All buttons
+
+## 6. 深度与层级
+
+| 级别 | 处理方式 | 用途 |
+| ------- | ----------- | ----- |
+| Flat (Level 0) | No shadow | 一切元素——Revolut 使用零阴影 |
+| Focus | `0 0 0 0.125rem` ring | 无障碍焦点 |
+
+**Shadow Philosophy**: Revolut 使用零阴影。深度完全来自于深色/浅色区块的对比以及元素之间充裕的留白。
+
+## 7. 宜与忌
+
+### 宜
+- 所有展示标题使用 Aeonik Pro 字重 500
+- 对所有按钮应用 9999px 圆角——胶囊形状是通用的
+- 使用宽裕的按钮内边距（14px 32px）
+- 营销界面的调色板保持近乎黑色 + 白色
+- 在 Inter 正文中应用正字间距
+
+### 忌
+- 不要使用阴影——Revolut 在设计上是纯平的
+- Aeonik Pro 标题不要使用粗体（700）——500 才是应有的字重
+- 不要使用小尺寸按钮——宽裕的内边距是刻意为之
+- 营销界面不要应用语义化颜色——它们是为产品保留的
+
+## 8. 响应式行为
+
+### 断点
+| 名称 | 宽度 | 关键变化 |
+| ------ | ------- | ------------- |
+| Mobile Small | <400px | 紧凑，单列 |
+| Mobile | 400–720px | 标准移动端 |
+| Tablet | 720–1024px | 双列布局 |
+| Desktop | 1024–1280px | 标准桌面端 |
+| Large | 1280–1920px | 完整布局 |
+
+## 9. Agent 提示词指南
+
+### 快速颜色参考
+- Dark: Revolut Dark (`#191c1f`)
+- Light: White (`#ffffff`)
+- Surface: Light (`#f4f4f4`)
+- Blue: Revolut Blue (`#494fdf`)
+- Danger: Red (`#e23b4a`)
+- Success: Teal (`#00a87e`)
+
+### 示例 Component Prompts
+- "Create a hero: white background. Headline at 136px Aeonik Pro weight 500, line-height 1.00, letter-spacing -2.72px, #191c1f text. Dark pill CTA (#191c1f, 9999px, 14px 32px). Outlined pill secondary (transparent, 2px solid #191c1f)."
+- "Build a pill button: #191c1f background, white text, 9999px radius, 14px 32px padding, 20px Aeonik Pro weight 500. Hover: opacity 0.85."
+
+### 迭代指南
+1. 标题使用 Aeonik Pro 500——绝不加粗
+2. 所有按钮都是带有宽裕内边距的胶囊型（9999px）
+3. 零阴影——纯平是 Revolut 的身份标识
+4. 营销界面使用近黑色 + 白色，产品界面使用语义化颜色