@baimingtao/lbs-agent 1.0.0

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

@@ -0,0 +1,279 @@
+# 设计系统：Cohere
+
+
+> **Hermes Agent — 实现说明**
+>
+> 原始站点使用专有字体。对于独立的 HTML 输出，请使用以下 CDN 替代字体：
+> - **Primary:** `Inter` | **Mono:** `JetBrains Mono`
+> - **Font stack (CSS):** `font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;`
+> - **Mono stack (CSS):** `font-family: 'JetBrains Mono', 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&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+> ```
+> 使用 `write_file` 创建 HTML，通过 `generative-widgets` skill（cloudflared tunnel）提供服务。
+> 生成后使用 `browser_vision` 验证视觉准确性。
+
+## 1. 视觉主题与氛围
+
+Cohere 的界面是一个精致的企业级指挥台——自信、整洁，旨在让 AI 感觉像严肃的基础设施，而不是消费级玩具。这种体验存在于明亮的白色画布上，内容被组织成大圆角（22px radius）的卡片中，创造出一种有机的、如云朵般的包容感语言。这是一个面向 CTO 和企业架构师的网站：专业但不冷漠，精密而不令人生畏。
+
+设计语言通过双字体系统连接了两个世界：CohereText，一种具有紧凑字间距的自定义衬线标题字体，赋予标题如同技术宣言般的庄重感；而 Unica77 Cohere Web 则以瑞士几何精度处理所有正文和 UI 文本。这种衬线/无衬线的搭配创造了“自信权威与工程清晰感并存”的个性，完美契合企业级 AI 平台的定位。
+
+色彩的使用极为克制——界面几乎是黑白单色的，配以冷灰色边框（`#d9d9dd`、`#e5e7eb`）。紫罗兰色仅出现在摄影首屏大图、渐变部分，以及用于表示 hover 和 focus 状态的交互蓝（`#1863dc`）中。这种对色彩的限制意味着，当色彩真正出现时——在产品截图、企业级摄影和深紫色部分中——它能承载最大的视觉分量。
+
+**核心特征：**
+- 明亮的白色画布，配以冷灰色包容性边框
+- 22px 标志性 border-radius——独特的“Cohere 卡片”圆润感
+- 双自定义字体：CohereText（展示衬线体）+ Unica77（正文无衬线体）
+- 企业级色彩克制：黑、白、冷灰，极少的紫蓝色点缀
+- 深紫色/紫罗兰色首屏部分，提供戏剧性的对比
+- 在 hover 时变为蓝色的幽灵/透明按钮
+- 展示多样化真实世界应用的企业级摄影
+- 用于代码和技术标签的 CohereMono，配合大写转换
+
+## 2. 调色板与角色
+
+### Primary
+- **Cohere Black** (`#000000`)：主要标题文本和最高强调级别的元素。
+- **Near Black** (`#212121`)：标准正文链接颜色——比纯黑略柔和。
+- **Deep Dark** (`#17171c`)：一种带蓝色调的近黑色，用于导航和深色部分的文本。
+
+### Secondary & Accent
+- **Interaction Blue** (`#1863dc`)：主要的交互强调色——出现在按钮 hover、focus 状态和活动链接上。唯一的彩色动作颜色。
+- **Ring Blue**（`#4c6ee6`，50% 透明度）：用于键盘 focus 指示器的 Tailwind ring 颜色。
+- **Focus Purple** (`#9b60aa`)：输入框 focus 边框颜色——一种柔和的紫罗兰色。
+
+### Surface & Background
+- **Pure White** (`#ffffff`)：主要页面背景和卡片表面。
+- **Snow** (`#fafafa`)：细微抬升的表面和浅色部分背景。
+- **Lightest Gray** (`#f2f2f2`)：卡片边框和最柔和的包容线。
+
+### Neutrals & Text
+- **Muted Slate** (`#93939f`)：弱化的页脚链接和三级文本——一种冷色调的灰色，略带蓝紫色倾向。
+- **Border Cool** (`#d9d9dd`)：标准的版块和列表项边框——一种冷酷、略带紫色调的灰色。
+- **Border Light** (`#e5e7eb`)：较浅的边框变体——Tailwind 标准的 gray-200。
+
+### Gradient System
+- **Purple-Violet Hero Band**：深紫色渐变部分，与白色画布形成戏剧性的对比。它们以全宽条带的形式出现，容纳产品截图和关键信息。
+- **Dark Footer Gradient**：页面通过深紫色/炭灰色过渡到黑色页脚，营造出一种“黄昏”效果。
+
+## 3. 排版规则
+
+### Font Family
+- **Display**: `CohereText`，回退字体: `Space Grotesk, Inter, ui-sans-serif, system-ui`
+- **Body / UI**: `Unica77 Cohere Web`，回退字体: `Inter, Arial, ui-sans-serif, system-ui`
+- **Code**: `CohereMono`，回退字体: `Arial, ui-sans-serif, system-ui`
+- **Icons**: `CohereIconDefault`（自定义图标字体）
+
+### Hierarchy
+
+| 角色 | 字体 | 大小 | 粗细 | 行高 | 字间距 | 备注 |
+|------|------|------|--------|-------------|----------------|-------|
+| Display / Hero | CohereText | 72px (4.5rem) | 400 | 1.00 (紧凑) | -1.44px | 最大视觉冲击力，衬线权威感 |
+| Display Secondary | CohereText | 60px (3.75rem) | 400 | 1.00 (紧凑) | -1.2px | 大版块标题 |
+| Section Heading | Unica77 | 48px (3rem) | 400 | 1.20 (紧凑) | -0.48px | 特性版块标题 |
+| Sub-heading | Unica77 | 32px (2rem) | 400 | 1.20 (紧凑) | -0.32px | 卡片标题，特性名称 |
+| Feature Title | Unica77 | 24px (1.5rem) | 400 | 1.30 | normal | 较小的版块标题 |
+| Body Large | Unica77 | 18px (1.13rem) | 400 | 1.40 | normal | 导语段落 |
+| Body / Button | Unica77 | 16px (1rem) | 400 | 1.50 | normal | 标准正文，按钮文本 |
+| Button Medium | Unica77 | 14px (0.88rem) | 500 | 1.71 (宽松) | normal | 较小的按钮，强调标签 |
+| Caption | Unica77 | 14px (0.88rem) | 400 | 1.40 | normal | 元数据，描述 |
+| Uppercase Label | Unica77 / CohereMono | 14px (0.88rem) | 400 | 1.40 | 0.28px | 大写版块标签 |
+| Small | Unica77 | 12px (0.75rem) | 400 | 1.40 | normal | 最小文本，页脚链接 |
+| Code Micro | CohereMono | 8px (0.5rem) | 400 | 1.40 | 0.16px | 微小的大写代码标签 |
+
+### Principles
+- **宣言用衬线，实用用无衬线**：CohereText 在展示尺度上承载品牌声音——其衬线终端赋予标题已发表研究般的权威感。Unica77 则以瑞士几何中立性处理所有功能性内容。
+- **大尺寸下的负字间距**：CohereText 在 60–72px 尺寸下使用 -1.2px 到 -1.44px 的 letter-spacing，创造出密集、有冲击力的文本块。
+- **单一正文字重**：几乎所有 Unica77 的使用粗细均为 400。粗细 500 仅用于小型按钮的强调。该系统依赖尺寸和间距，而非粗细对比。
+- **大写代码标签**：CohereMono 使用大写形式和正字间距（0.16–0.28px）作为技术标签和版块标记。
+
+## 4. 组件样式
+
+### 按钮
+
+**幽灵 / 透明**
+- 背景：透明 (`rgba(255, 255, 255, 0)`)
+- 文本：Cohere Black (`#000000`)
+- 无可见边框
+- Hover：文本变为 Interaction Blue (`#1863dc`)，不透明度 0.8
+- Focus：2px 实线 Interaction Blue 轮廓
+- 主要按钮样式——在交互前不可见
+
+**深色实心**
+- 背景：深色/黑色
+- 文本：Pure White
+- 用于浅色表面上的 CTA
+- 胶囊形或标准圆角
+
+**描边**
+- 基于边框的包容性
+- 用于次要操作
+
+### 卡片与容器
+- 背景：Pure White (`#ffffff`)
+- 边框：细实线 Lightest Gray（`1px solid #f2f2f2`）用于细微卡片；Cool Border（`#d9d9dd`）用于强调卡片
+- 圆角：**22px**——Cohere 标志性 radius，用于主要卡片、图像和对话框容器。对于较小的元素也使用 4px、8px、16px、20px
+- 阴影：最小化——Cohere 依赖背景色和边框而非阴影
+- 特殊：`0px 0px 22px 22px` radius（仅底部圆角）用于版块容器
+- 对话框：8px radius 用于模态/对话框
+
+### 输入框与表单
+- 文本：深色输入框上为白色，浅色上为黑色
+- Focus 边框：Focus Purple (`#9b60aa`)，`1px solid`
+- Focus 阴影：红色环（`rgb(179, 0, 0) 0px 0px 0px 2px`）——可能用于错误状态指示
+- Focus 轮廓：2px 实线 Interaction Blue
+
+### 导航
+- 白色或深色背景上的干净水平导航
+- Logo：Cohere 字标（自定义 SVG）
+- 链接：16px Unica77 的深色文本
+- CTA：深色实心按钮
+- 移动端：折叠为汉堡菜单
+
+### 图像处理
+- 包含多样化主题和环境的企业级摄影
+- 用于戏剧性部分的紫色调首屏摄影
+- 深色表面上的产品 UI 截图
+- 图像使用 22px radius 以匹配卡片系统
+- 全出血（全宽）紫色渐变部分
+
+### 独特组件
+
+**22px 卡片系统**
+- 22px border-radius 是 Cohere 的视觉标志
+- 所有主要卡片、图像和容器都使用此 radius
+- 创造出一种云端般的、有机的柔和感，有别于典型的 8–12px
+
+**企业信任栏**
+- 公司 Logo 在水平条带上展示
+- 展示企业级应用的普及度
+- 干净的单色 Logo 处理
+
+**紫色首屏条带**
+- 容纳产品展示的全宽深紫色版块
+- 在白色页面流中创造戏剧性的视觉断点
+- 产品截图悬浮于紫色环境之中
+
+**大写代码标签**
+- CohereMono 大写并带有字间距
+- 用作版块标记和分类标签
+- 创造出一种技术性的、结构化的信息层级
+
+## 5. 布局原则
+
+### 间距系统
+- 基础单位：8px
+- 比例：2px、6px、8px、10px、12px、16px、20px、22px、24px、28px、32px、36px、40px、56px、60px
+- 按钮内边距因变体而异
+- 卡片内部内边距：约 24–32px
+- 版块垂直间距：宽裕（版块间距 56–60px）
+
+### 网格与容器
+- 最大容器宽度：最高可达 2560px（非常宽），带有响应式缩放
+- Hero：居中，配以极具视觉冲击力的排版
+- 特性版块：多列卡片网格
+- 企业版块：全宽紫色条带
+- 检测到 26 个断点——极其精细的响应式系统
+
+### 留白理念
+- **企业级清晰度**：每个版块呈现一个明确的主题，主题之间留有呼吸空间。
+- **摄影作为 Hero**：大型摄影版块提供视觉趣味，无需装饰性设计元素。
+- **卡片分组**：相关内容被分组到 22px 圆角卡片中，形成自然的信息集群。
+
+### 边框圆角比例
+- 锐利 (4px)：导航元素，小标签，分页
+- 舒适 (8px)：对话框，次要容器，小卡片
+- 宽裕 (16px)：特色容器，中型卡片
+- 大型 (20px)：大型特性卡片
+- 标志性 (22px)：主要卡片，hero 图像，主容器——Cohere 的标志性 radius
+- 胶囊形 (9999px)：按钮，标签，状态指示器
+
+## 6. 深度与层级
+
+| 层级 | 处理方式 | 用途 |
+|-------|-----------|-----|
+| Flat (Level 0) | 无阴影，无边框 | 页面背景，文本块 |
+| Bordered (Level 1) | `1px solid #f2f2f2` 或 `#d9d9dd` | 标准卡片，列表分隔符 |
+| Purple Band (Level 2) | 全宽深紫色背景 | Hero 版块，特性展示 |
+
+**阴影理念**：Cohere 几乎没有阴影。深度通过**背景色对比**（紫色条带上的白色卡片，Snow 表面上的白色）、**边框约束**（冷灰色边框）以及戏剧性的**明暗版块交替**来传达。当元素需要体现层级感时，它们是通过以白色衬托于深色背景之上来实现的，而不是通过投射阴影。
+
+## 7. 宜与忌
+
+### 宜
+- 在所有主要卡片和容器上使用 22px border-radius——这是视觉标志
+- 对展示标题（72px、60px）使用 CohereText 并配以负字间距
+- 对所有正文和 UI 文本使用字重为 400 的 Unica77
+- 保持调色板为黑白并配以冷灰色边框
+- 仅将 Interaction Blue (#1863dc) 用于 hover/focus 交互状态
+- 使用深紫色版块来制造戏剧性的视觉中断和产品展示
+- 对 CohereMono 应用大写 + 字间距以制作版块标签
+- 保持具有多样化主体的企业级摄影风格
+
+### 忌
+- 不要在主要卡片上使用 22px 以外的 border-radius——标志性 radius 至关重要
+- 不要引入暖色调——调色板严格限制为冷色调
+- 不要使用浓重的阴影——深度来源于色彩对比和边框
+- 不要在正文上使用粗体（700+）字重——适用范围是 400–500
+- 不要混淆衬线/无衬线层级——CohereText 用于标题，Unica77 用于正文
+- 不要将紫色用作卡片的表面色——紫色保留用于全宽版块
+- 不要将版块间距缩小至 40px 以下——企业级布局需要呼吸空间
+- 默认情况下不要对按钮使用装饰——幽灵/透明是基础状态
+
+## 8. 响应式行为
+
+### Breakpoints
+| 名称 | 宽度 | 关键变化 |
+|------|-------|-------------|
+| Small Mobile | <425px | 紧凑布局，最小间距 |
+| Mobile | 425–640px | 单列，堆叠卡片 |
+| Large Mobile | 640–768px | 轻微的间距调整 |
+| Tablet | 768–1024px | 开始出现 2 列网格 |
+| Desktop | 1024–1440px | 完整的多列布局 |
+| Large Desktop | 1440–2560px | 最大容器宽度 |
+
+*检测到 26 个断点——数据集中响应式最精细的网站之一。*
+
+### 触摸目标
+- 按钮尺寸足够大，适合触摸交互
+- 导航链接具有舒适的间距
+- 卡片表面作为触摸目标
+
+### 折叠策略
+- **导航**：完整导航折叠为汉堡菜单
+- **特性网格**：多列 → 2 列 → 单列
+- **Hero 文本**：72px → 48px → 32px 渐进式缩放
+- **紫色版块**：保持全宽，内容堆叠
+- **卡片网格**：3 → 2 → 1 列
+
+### 图像行为
+- 摄影图像在 22px radius 容器内按比例缩放
+- 产品截图保持纵横比
+- 紫色版块的背景按比例缩放
+
+## 9. Agent 提示词指南
+
+### 快速色彩参考
+- Primary Text: "Cohere Black (#000000)"
+- Page Background: "Pure White (#ffffff)"
+- Secondary Text: "Near Black (#212121)"
+- Hover Accent: "Interaction Blue (#1863dc)"
+- Muted Text: "Muted Slate (#93939f)"
+- Card Borders: "Lightest Gray (#f2f2f2)"
+- Section Borders: "Border Cool (#d9d9dd)"
+
+### 示例组件提示词
+- "Create a hero section on Pure White (#ffffff) with CohereText at 72px weight 400, line-height 1.0, letter-spacing -1.44px. Cohere Black text. Subtitle in Unica77 at 18px weight 400, line-height 1.4."
+- "Design a feature card with 22px border-radius, 1px solid Lightest Gray (#f2f2f2) border on white. Title in Unica77 at 32px, letter-spacing -0.32px. Body in Unica77 at 16px, Muted Slate (#93939f)."
+- "Build a ghost button: transparent background, Cohere Black text in Unica77 at 16px. On hover, text shifts to Interaction Blue (#1863dc) with 0.8 opacity. Focus: 2px solid Interaction Blue outline."
+- "Create a deep purple full-width section with white text. CohereText at 60px for the heading. Product screenshot floats within using 22px border-radius."
+- "Design a section label using CohereMono at 14px, uppercase, letter-spacing 0.28px. Muted Slate (#93939f) text."
+
+### 迭代指南
+1. 每次只关注一个组件
+2. 始终为主要卡片使用 22px radius——“Cohere 卡片的圆润感”
+3. 指定字体——标题使用 CohereText，正文使用 Unica77，标签使用 CohereMono
+4. 交互元素仅在 hover 时使用 Interaction Blue (#1863dc)
+5. 保持表面为白色并配以冷灰色边框——不要有暖色调
+6. 紫色用于全宽版块，绝不用作卡片背景

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

@@ -0,0 +1,142 @@
+# 设计系统：Coinbase
+
+
+> **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. 视觉主题与氛围
+
+Coinbase 的网站是一个简洁、值得信赖的加密货币平台，通过蓝白双色调传达金融可靠性。该设计使用 Coinbase Blue (`#0052ff`) —— 一种深邃、饱和的蓝色 —— 作为白色和接近黑色表面上的单一品牌强调色。专有字体家族包括用于 Hero 标题的 CoinbaseDisplay、用于 UI 文本的 CoinbaseSans、用于正文阅读的 CoinbaseText，以及用于图标的 CoinbaseIcons —— 一个全面涵盖四种字体的系统。
+
+按钮系统对胶囊形 CTA 使用了独特的 56px 圆角，并在悬停时过渡到更浅的蓝色 (`#578bfa`)。设计在白色内容区域和深色 (`#0a0b0d`、`#282b31`) 特性区域之间交替，营造出专业且金融级的界面。
+
+**关键特征：**
+- Coinbase Blue (`#0052ff`) 作为单一品牌强调色
+- 四款字体的专有家族：Display、Sans、Text、Icons
+- 56px 圆角胶囊形按钮，带有蓝色悬停过渡效果
+- 接近黑色 (`#0a0b0d`) 的深色区域 + 白色浅色区域
+- Display 标题的行高为 1.00 —— 极致紧凑
+- 带有蓝色调的冷灰色辅助表面 (`#eef0f3`)
+- 部分按钮标签使用 `text-transform: lowercase` —— 不同寻常
+
+## 2. 调色板与角色
+
+### 主要
+- **Coinbase Blue** (`#0052ff`)：主品牌色、链接、CTA 边框
+- **纯白** (`#ffffff`)：主要浅色表面
+- **近黑** (`#0a0b0d`)：文本、深色区域背景
+- **冷灰表面** (`#eef0f3`)：次要按钮背景
+
+### 交互
+- **Hover Blue** (`#578bfa`)：按钮悬停背景
+- **Link Blue** (`#0667d0`)：次要链接颜色
+- **Muted Blue** (`#5b616e`)：20% 不透明度的边框颜色
+
+### 表面
+- **Dark Card** (`#282b31`)：深色按钮/卡片背景
+- **Light Surface** (`rgba(247,247,247,0.88)`)：微妙的表面
+
+## 3. 排版规则
+
+### 字体家族
+- **Display**：`CoinbaseDisplay` —— Hero 标题
+- **UI / Sans**：`CoinbaseSans` —— 按钮、标题、导航
+- **Body**：`CoinbaseText` —— 阅读文本
+- **Icons**：`CoinbaseIcons` —— 图标字体
+
+### 层级
+
+| 角色 | 字体 | 大小 | 粗细 | 行高 | 备注 |
+| ------ | ------ | ------ | -------- | ------------- | ------- |
+| Display Hero | CoinbaseDisplay | 80px | 400 | 1.00 (紧凑) | 最大视觉冲击 |
+| Display Secondary | CoinbaseDisplay | 64px | 400 | 1.00 | 次 Hero |
+| Display Third | CoinbaseDisplay | 52px | 400 | 1.00 | 第三层级 |
+| Section Heading | CoinbaseSans | 36px | 400 | 1.11 (紧凑) | 特性区域 |
+| Card Title | CoinbaseSans | 32px | 400 | 1.13 | 卡片标题 |
+| Feature Title | CoinbaseSans | 18px | 600 | 1.33 | 特性强调 |
+| Body Bold | CoinbaseSans | 16px | 700 | 1.50 | 正文加粗 |
+| Body Semibold | CoinbaseSans | 16px | 600 | 1.25 | 按钮、导航 |
+| Body | CoinbaseText | 18px | 400 | 1.56 | 标准阅读 |
+| Body Small | CoinbaseText | 16px | 400 | 1.50 | 次要阅读 |
+| Button | CoinbaseSans | 16px | 600 | 1.20 | +0.16px tracking |
+| Caption | CoinbaseSans | 14px | 600–700 | 1.50 | 元数据 |
+| Small | CoinbaseSans | 13px | 600 | 1.23 | 标签 |
+
+## 4. 组件样式
+
+### 按钮
+
+**主要胶囊形（56px 圆角）**
+- 背景：`#eef0f3` 或 `#282b31`
+- 圆角：56px
+- 边框：`1px solid`（与背景匹配）
+- 悬停：`#578bfa`（浅蓝色）
+- 聚焦：`2px solid black` 轮廓
+
+**全胶囊形（100000px 圆角）**
+- 用于实现极致的胶囊形状
+
+**蓝色边框**
+- 边框：`1px solid #0052ff`
+- 背景：透明
+
+### 卡片与容器
+- 圆角：8px–40px 范围
+- 边框：`1px solid rgba(91,97,110,0.2)`
+
+## 5. 布局原则
+
+### 间距系统
+- 基准：8px
+- 比例：1px、3px、4px、5px、6px、8px、10px、12px、15px、16px、20px、24px、25px、32px、48px
+
+### 圆角比例
+- 小（4px–8px）：文章链接、小卡片
+- 标准（12px–16px）：卡片、菜单
+- 大（24px–32px）：特性容器
+- XL（40px）：大按钮/容器
+- 胶囊形（56px）：主要 CTA
+- 全圆（100000px）：极致胶囊形
+
+## 6. 深度与高度
+
+极简的阴影系统 —— 深度来源于深色与浅色区域之间的颜色对比。
+
+## 7. 宜与忌
+
+### 宜
+- 为主要交互元素使用 Coinbase Blue (#0052ff)
+- 为所有 CTA 按钮应用 56px 圆角
+- 仅将 CoinbaseDisplay 用于 Hero 标题
+- 交替使用深色 (#0a0b0d) 和白色区域
+
+### 忌
+- 不要将蓝色用于装饰 —— 它仅具备功能性
+- 不要在 CTA 上使用直角 —— 最小也必须使用 56px 圆角
+
+## 8. 响应式行为
+
+断点：400px、576px、640px、768px、896px、1280px、1440px、1600px
+
+## 9. Agent 提示指南
+
+### 快速颜色参考
+- 品牌：Coinbase Blue (`#0052ff`)
+- 背景：White (`#ffffff`)
+- 深色表面：`#0a0b0d`
+- 次要表面：`#eef0f3`
+- 悬停：`#578bfa`
+- 文本：`#0a0b0d`
+
+### 示例 Component Prompts
+- "Create hero: white background. CoinbaseDisplay 80px, line-height 1.00. Pill CTA (#eef0f3, 56px radius). Hover: #578bfa."
+- "Build dark section: #0a0b0d background. CoinbaseDisplay 64px white text. Blue accent link (#0052ff)."