# 《A++ 审美标准 v1.0》

> 网站治理体系·子任务B ｜ 起草：审美标准起草人 ｜ 2026-10-02
> 依据：D425（A++ 改版总方案）、D429（teal accent）、D481（方向A「编辑部档案馆」）、
> D482（miao 用户可见小写）、D473（像素级 QA 清单）、D182（🟢 物理化动效）、
> 《设计哲学 v1〈可验证的城市〉》《网站卓越标准 v1.0（D393）》、
> deploy-prod-root/index.html + en.html 实测 token（2026-10-02 生产版）
> 编号：D485（网站治理体系 v1.0，2026-10-02）·已生效；修订走"网站产品负责人提案→CEO 终裁→decision-log 留痕"（D15/D393 §七）。

---

## 0. 总则与不可动摇项

1. **本标准是 D393 六维之外唯一的美学验收口径**。凡"好不好看"争议，以本标准条款号为准，不以感觉为准。
2. **品牌铁律**：`vertciti` 全站小写（标题/句首/徽章一律）；`miao` 用户可见处小写（D482，代码内部除外）；治理表述只许 `Human-chartered, agent-operated.`——"零人类""无人值守""全 AI 治理"为 GC 一票否决（D9 口径延续）。
3. **任何数值变更走设计 token**：新增字号/颜色/时长/间距必须先入 token 表再使用，源码 grep 验零裸值。裸值 = P1 缺陷。
4. **Slogan 固定双语**：自主运营，全程可验 / Agent-operated. Every step verified.——互为镜像，不许单语悬空。

---

## 一、排印（Typography）

### 1.1 字体栈（现行生产 token，锁定）

| 声音 | 栈 | 用途 |
|---|---|---|
| 无衬线正文 `--body` | `'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif` | 正文/UI/按钮 |
| 衬线中文展示声 `--display` | `'Noto Serif SC','Noto Serif CJK SC','Songti SC','STSong','SimSun','NSimSun',Georgia,'Times New Roman',serif` | 标题/引用/数字展示声（D425 三件套） |
| 等宽 `--mono` | `'JetBrains Mono','SFMono-Regular',Menlo,Consolas,monospace` | 数字/hash/地址/代码（设计哲学原则一：数字一律等宽） |

**三层声音使用规范**（BlackRock v2 衬线中文展示声，2026-10-02）：
- 第一层（展示声·衬线）：首页主标题/一句话主张/编辑部引文——中文用 `--display`，英文用 Georgia 系衬线。**禁**在正文段落使用展示声（展示声是"嗓音"，不是"口头禅"）。
- 第二层（事实声·无衬线）：正文/卡片/导航/按钮——全站默认 `--body`。
- 第三层（证据声·等宽）：一切数字断言/tx hash/地址/代码——`--mono`，数字开 `font-variant-numeric: tabular-nums`（纵向对齐）。
- **平台一致性红线**：当前 `@font-face` = 0（实测），衬线完全依赖系统字体。A++ 要求：中文衬线必须自托管 woff2（`font-display:swap`，子集化），否则 Windows（SimSun）/macOS（Songti SC）/Linux 渲染漂移，展示声名存实亡。缺自托管 = P1 缺陷。

### 1.2 字阶表（延续设计哲学，A++ 收紧）

| 级别 | 中文字号 | 英文等效 | 中文行高 | 英文行高 | 字重 | 用途 |
|---|---|---|---|---|---|---|
| Display | 40px（移动端 clamp 上限锁 30px） | 40px | 1.5 | 1.2 | 700 | 首页主标题 |
| H1 | 32px | 32px | 1.5 | 1.25 | 700 | 页标题 |
| H2 | 24px | 24px | 1.6 | 1.35 | 600 | 区块标题 |
| H3 | 20px | 20px | 1.6 | 1.4 | 600 | 卡片标题 |
| Body | 16px | 16px | 1.7 | 1.55 | 400 | 正文 |
| Small | 14px | 14px | 1.7 | 1.5 | 400 | 来源行/辅助 |
| Caption | 12px | 12px | 1.6 | 1.45 | 600 | 徽章/标注 |

- **字阶外字号禁令**：13/15/17/19px 一律禁用（实测现行站有 25 处，需回填到 12/14/16/20）。字阶表是唯一合法来源。
- 大屏用 `clamp()`：hero 主标题 `clamp(3.5rem,9vw,7.5rem)` 现行值保留，但 640px 下必须收敛到字阶上限（移动端 hero 不许一句话挤成三行，D473 清单）。
- 眉题（eyebrow）：Caption 级，`letter-spacing: .12em–.18em`，全大写英文/中文加粗二字词。字距禁超 .18em（现行上限即天花板）。

### 1.3 中西文混排规则

1. 中文行内英文词不许断词：`word-break: keep-all` 护专有名词（"vertciti""testnet"）；英文长词/hash/地址在 390px 下 `overflow-wrap: anywhere`＋等宽小字，不许撑破容器（设计哲学原则五）。
2. 中文标点禁入英文版：全角，。！？；："" 在 en.html = 0（禁词扫描）。
3. 双语块：上下排列，不挤一行；当前语言在上、字大；另一语言在下、字小、灰度 60%。slogan 固定格式见 §0-4。
4. 数字单位不拦腰断：`2026-10-01`、`$480K` 用 `white-space: nowrap` 或 nobr（D473 清单）。
5. 标题禁孤字：行尾不许单字/单标点独占一行（"生。"事故），用 `text-wrap: balance` 或手动断行；段落禁 1–3 字孤行。
6. 行长：正文 45–75 字符/行，超出收窄容器（`max-width: 68ch`）。

---

## 二、栅格与间距

### 2.1 断点（现行 token，锁定）

| 断点 | 视口 | 用途 |
|---|---|---|
| ≤640px | 手机 | 单栏；hero 收敛；动效单独编排（§4.5） |
| ≤760px | 小平板 | 卡片 2 列→1 列 |
| ≤900px | 平板 | 导航折叠 |
| >900px | 桌面 | 12 栏栅格 |

- **抽检强制双视口**：1440px＋390px（D393 维一）。新增断点须书面理由，禁"为某屏临时加断点"。

### 2.2 栅格

- 桌面内容区 12 栏，`max-width: 1200px`，栏间距（gutter）24px，页边距 ≥24px（≥1280px 屏居中）。
- 卡片栅格：桌面 3 列 / 平板 2 列 / 手机 1 列，卡片间距 24px（桌面）/16px（手机）。
- 同一视觉组内对齐方式唯一：左/中/右三选一，不许"差不多"（D473 清单）。

### 2.3 间距 scale 与 8pt 规则

- 合法间距值：`4, 8, 12, 16, 20, 24, 32, 40, 48, 56, 64, 80, 96, 120`（px）。**8pt 网格铁律**：除 4px 外所有值须为 8 的倍数。
- 现行杂散（实测）：`padding: 3px/26px/44px`、`gap: 10px/14px`——A++ 下全部回填到合法值（3→4，10/14→12/16，26→24，44→40/48）。
- 区块纵向节奏：桌面 96px / 手机 64px；卡片内边距 24px（桌面）/16px（手机）；眉题→标题 8px；标题→正文 16px；正文→CTA 24px。

---

## 三、色彩

### 3.1 深色主题色板（BlackRock v2 生产 token，2026-10-02 实测，锁定）

| 角色 | token 值 | 用途 |
|---|---|---|
| 页面底 `--bg` | `#0A0E12` | 页面背景 |
| 次底 | `#0E1216` | 交替区块 |
| 卡片底 | `#141B23` / `#161C22` | 卡片/抽屉 |
| 纸面 `--paper` | `#F5F5F2` | 浅色表面（按钮/徽章底） |
| 墨 `--ink` | `#1B242E` | 纸面上的文字 |
| 主文 | `#C9D2D9` | 正文 |
| 次文 | `#9AA3AF` | 次要文字 |
| accent teal | `#14B8A6`（D429 深海青） | 主强调/链接/CTA |
| teal 深 | `#0E7C74` | teal 底上的深色变体 |
| 🟢 真实 | `#16A34A` | 诚实材质真实态 |
| 🟡 原型 | `#EAB308` / `#D97706` | 诚实材质原型态 |
| 金 | `#F5D9A8` | 点缀（慎用，禁大面积） |

### 3.2 对比度底线（实测值，2026-10-02）

- 正文/按钮文字 ≥ **4.5:1**；大字（≥24px 或 ≥19px 加粗）≥ 3:1；装饰性文字不计入。
- 实测达标：`#9AA3AF` 底 7.59 / `#C9D2D9` 底 12.64 / teal 底 7.78 / 🟢 底 5.88 / amber 底 10.1 / 按钮墨纸 14.36。
- **实测不达标**：`#5B6470` 在 `#0A0E12` 上 = **3.23:1**——禁用于正文/次文，只能用于 ≥24px 大字或纯装饰；凡正文处立即替换为 `#9AA3AF`。
- 临界：纸面字在 teal 深底 = 4.63:1——达标但余量薄，teal 深底上的字只许 ≥14px 且字重 ≥600。

### 3.3 诚实材质 🟢🟡⚪ 规范（设计哲学原则二，GC 一票否决项）

| 状态 | 主色 | 浅底 | 深字 | 边框 | 内容透明度 |
|---|---|---|---|---|---|
| 🟢 真实（测试网） | `#16A34A` | `#ECFDF5` | `#065F46` | 实线 1.5px | 1.0 |
| 🟡 原型演示 | `#D97706` | `#FFFBEB` | `#92400E` | 虚线 dashed 1.5px | 1.0 |
| ⚪ 规划中 | `#6B7280` | `#F9FAFB` | `#4B5563` | 点线 dotted 1.5px | 0.75 |

- 深色主题映射：线型不变（实线/虚线/点线 1.5px），色值按 §3.1 深色底重算对比度≥4.5（浅底色在深色底上禁用，改用"深色底＋彩色线＋彩色字"）。
- 三条铁律（GC 红线）：① 禁🟢材质包装🟡内容；② 禁⚪藏🟡；③ 一卡一种材质。
- StatusBadge：pill（999px），12px/600，图标＋"状态 · 口径说明"（如"真实 · 测试网"），口径说明禁省略。
- 🟡 允许 subtle pulse（opacity 1→0.75，2s 循环，reduced-motion 下禁用）；🟢 动效必须物理化（§4.3）；⚪ 静态。

---

## 四、动效

### 4.1 时长预算表（按动效类型）

| 类型 | 时长 | 曲线 | 说明 |
|---|---|---|---|
| 微交互（hover/press/focus） | **≤120ms** | `cubic-bezier(.25,.1,.25,1)`（现行 `--ease`，锁定） | 反馈即时，禁"优雅延迟" |
| 小转场（抽屉/下钻/切换） | 220ms | `cubic-bezier(.25,.1,.25,1)` | 现行 L1→L2→L3 下钻 220ms 保留 |
| 页面级（首屏入场/路由切换） | 400–600ms | 同上，禁弹跳曲线 | 一个统领性时刻（见 4.4） |
| 氛围（ambient，如 flow-drift） | ≥2s 循环 | 线性或正弦 | 只许一处，平时状态干净 |

- 现行只有 `--fast:120ms` 一个时长 token——A++ 要求补齐 `--dur-micro:120ms / --dur-small:220ms / --dur-page:480ms / --dur-ambient:2000ms` 四个 token，各 section 禁自创时长（D473 清单）。
- **count-up 数字动画永禁**（设计哲学原则一）：源码搜 `countUp|animate-number` = 0，门禁硬扫。

### 4.2 曲线

- 全站统一 `--ease: cubic-bezier(.25,.1,.25,1)`。禁 `ease-in-out` 默认值、禁弹性/弹跳曲线（bounce/back）——编辑部气质不许"果冻"。
- 退出动效用同一曲线反向，禁"进入丝滑、退出瞬移"。

### 4.3 🟢 物理化动效要求（D182）

🟢 真实材质允许动效，但必须同时满足三条，缺一即装饰性动效 = 0 容忍：
1. **物理可信度**：有缓动/惯性/质量感，无突变、无瞬移；
2. **功能目的**：反馈真实的状态变化（如交易确认）或引导注意力到状态变更处；
3. **零装饰**：去掉它不影响理解状态，即删。
- 每个保留的 🟢 动效须有物理化审计记录（动效名/目的/时长/曲线四字段），走查抽查。
- `prefers-reduced-motion: reduce` 下：🟢 物理化动效降级为禁用或静态替代；🟡 pulse 禁用；所有位移动效禁用（设计哲学原则四走查项）。现行媒体查询存在，需逐 keyframe 补降级（实测 7 个 keyframes 未全覆盖）。

### 4.4 一个统领性时刻

- 每页只许**一个**统领性动效时刻（如首屏 hero 入场）。实测现行站 7 个 keyframes（breathe/dolly/flick/flow-drift/ignite/stamp/streak）散用 30+ 次——A++ 要求收敛： ambient 只留一处（flow-drift 或 breathe 二选一），其余转静态或并入统领时刻。
- 动效元素平时状态干净：禁静态装饰残留（如常显的空圆圈/装饰线，D473 清单）。
- 下钻纵深：L1→L2→L3 用 `translateY(12px)+opacity`，220ms ease-out；禁横向轮播式切换（城市是纵深不是跑马灯）；Esc 逐层返回，焦点回触发点。

### 4.5 移动端单独编排（"TWO SIDES. ONE STANDARD." 方法论）

1. **单独编排**：≤640px 断点下的动效不是桌面版的缩小版，是另一套编排——时长按 §4.1 下限取（微交互 120ms 不变，页面级取 400ms 下限），位移幅度减半（如下钻 12px→6px），ambient 在移动端默认关闭（省电＋省注意力）。
2. **同视口逐帧比对**：上线效果与设计稿在同一视口（390×844）逐帧比对——首帧/中帧/终帧三截图对齐，位移误差 >2px 即返工。
3. **多滚动位置 × 多屏幕高度抽检**：390px 下取顶部/中部/底部三个滚动位置 × 667/844/932 三种屏幕高度，共 9 格抽检动效触发与收尾状态，无"某高度下动效卡一半"。
4. 触摸反馈：`:active` 态必须有视觉变化（现行 brightness(.92) 保留），禁"点了没反应"。

---

## 五、按钮（董事长专项要求：每一个按钮该怎么设计、更符合人性化）

### 5.1 类型分级（四级，语义唯一）

| 级别 | 样式 | 用途 | 每屏数量上限 |
|---|---|---|---|
| 主要 Primary | teal 底 `#14B8A6`＋纸面字（≥14px/600，对比度实测见 §3.2 临界规则） | 每屏唯一主行动 | 1 |
| 次要 Secondary | 纸面底 `#F5F5F2`＋墨字（现行 `.btn-approve` 样式收编） | 次要行动 | ≤2 |
| 文本 Text | 无底，teal 字 14px（现行 `.expand-btn`，D452 深色底 7.55:1 例外保留） | 低权重/展开 | 不限但禁与链接混淆 |
| 危险 Danger | 实线红框＋红字（`#DC2626` 系），禁红底白字（避免"已经执行"的误读） | 删除/撤销类 | 按需 |

- **一屏一主**：主要按钮每屏只许一个；两个并排的"看起来都重要"的按钮 = 设计失败，打回。
- 圆角：按钮统一**直角**（编辑部档案馆风格，现行 `.btn-approve` 无圆角即规范）；pill（999px）只许徽章/标签用，禁按钮 pill 化（同一组件两种圆角 = 不合格，D473 清单）。

### 5.2 五态视觉参数

| 态 | Primary | Secondary | Text | Danger |
|---|---|---|---|---|
| 默认 | teal 底/纸面字 | 纸面底/墨字 | teal 字无底 | 红框红字 |
| 悬停 hover | `brightness(1.08)`（现行值保留）＋ `cursor:pointer` | 同左 | 下划线出现 | 底变浅红 `#FEF2F2`（深色底用 `#7F1D1D` 20% 透明度） |
| 按下 active | `brightness(.94)`（现行值保留）＋ `translateY(1px)` | 同左 | 字色加深 | 同左＋1px 下沉 |
| 禁用 disabled | 底 `#2A3540`＋字 `#5B6470`，`cursor:not-allowed`，`aria-disabled="true"` | 同左 | 字 `#5B6470` | 框/字同步置灰 |
| 加载中 loading | 禁用态＋内置 spinner（16px，teal/纸面双色环，600ms/圈）＋文案变"处理中…"，禁可重复点击 | 同左 | 同左 | 同左 |

- **实测差距**：现行站 disabled/loading 样式 = 0（grep 零命中）——A++ 上线前必须补齐，否则"点了没反应/重复提交"类事故必然发生。
- 悬停不用 `filter: brightness()` 以外的任何手段（阴影/放大/变色三选一即违规——反馈方式全站唯一，用户学一次就够）。

### 5.3 尺寸与触控目标

- 最小触控目标 **44×44px**（D393 维一门禁，脚本＋人工双轨复核）。
- 标准尺寸：高 48px（`padding: 14px 36px`，字 15px→**回填 16px**，字阶禁令），宽按文案自适应，最小宽 120px。
- 小尺寸（卡片内/密集区）：高 36px，字 14px——禁 <36px；相邻小按钮间距 ≥8px。
- 按钮文字禁溢出/换行截断：双语长度差异单独验（en 文案常比 zh 长 30%+，容器按 en 版定宽）。

### 5.4 微交互：反馈 ≤200ms 原则

- 按下反馈 ≤120ms（§4.1 微交互档）；加载态必须在 200ms 内出现（超 200ms 无反馈 = "死按钮"体感）。
- 文案即时切换："提交"→"处理中…"→"已提交 ✓"，状态变化不许静默。
- 禁用态按钮被点击：抖动反馈（`translateX(±2px)`，120ms）＋ tooltip 说明原因（"请先完成 X"），禁无声吞掉点击。

### 5.5 文案语气规范

- **动词开头**："查看证据""进入资料室""复制地址"——禁名词式（"资料室入口"）、禁"点击这里"。
- **诚实**：禁"立即购买""免费领取"类假按钮（无此功能即欺诈）；mock/规划中的功能按钮必须挂 🟡/⚪ 材质或标注"演示"/"规划中"，禁可点态伪装可用。
- 双语：zh/en 文案各自成立，禁翻译腔；英文版全小写品牌词（`vertciti` 禁 Vertciti）。

### 5.6 无障碍

- **焦点环**：`:focus-visible` 统一 `2px solid #14B8A6`＋`outline-offset: 2px`，全站所有可聚焦元素。实测现行 `:focus` 仅 1 处——A++ 必须全覆盖，键盘 Tab 全程可达、无焦点丢失。
- ARIA：图标按钮必须 `aria-label`；加载态 `aria-busy="true"`；禁用态 `aria-disabled="true"`；危险按钮 `aria-describedby` 指向后果说明。
- 键盘：Enter/Space 触发，Esc 关闭弹窗/抽屉；焦点陷阱禁（除了模态框，模态框必须有可见关闭按钮）。
- 对比度：按钮文字按 §3.2 底线实测，不达标即换色不将就。

### 5.7 人性化四原则（验收总纲）

1. **Affordance 清晰**：可点性一眼可辨——按钮与纯文本/装饰线的视觉差必须大到"不用思考"。文本按钮与正文链接用下划线/颜色二选一区分，禁混用。
2. **反馈即时**：任何点击 120ms 内有视觉回应，200ms 内有状态回应（§5.4）。
3. **容错**：危险操作二次确认（模态框：后果一句话＋"确认删除/取消"双按钮，危险项用 Danger 级）；可撤销的操作提供撤销入口（toast "已删除 · 撤销"，5s）。
4. **可预期**：同一操作全站同一位置/同一样式/同一文案——"返回"永远左上、"关闭"永远右上、"提交"永远右下主按钮。位置漂移 = P1 缺陷。

---

## 六、像素级终检清单（截图放大目检，零瑕疵放行）

终检在 200% 放大下逐项执行，一项不过 = 打回（D473 清单为本节子集，不重复）。

### 6.1 对齐

- [ ] 网格线/卡片边缘/按钮基线：1440px 与 390px 双视口，同组元素边缘误差 0px（"差不多" = 不过）
- [ ] 文本基线：中英混排行的基线对齐，衬线标题与无衬线正文的视觉中心对齐（光学对齐，非数学对齐）
- [ ] 锚点跳转目标不被固定导航遮挡（`scroll-margin-top`：桌面 88px / 移动 128px）

### 6.2 基线与排印

- [ ] 无孤字/孤词/孤行（§1.3 第 4、5 条）
- [ ] 字号全部命中字阶表（源码 grep 非字阶字号 = 0）
- [ ] 行高按 §1.2 表，中文行高不许套用英文值

### 6.3 材质边缘

- [ ] 诚实材质线型：实线/虚线/点线 1.5px，放大 200% 线型均匀、无锯齿
- [ ] 图片边缘：无 1px 白边/黑边；人像/产品图 `brightness` 不低于 1.0（禁压黑，BlackRock v2 返工教训）
- [ ] 直角组件：按钮/卡片直角 90°，无亚像素圆角残留（`border-radius: 0` 显式声明，禁依赖默认）
- [ ] 阴影：编辑部风格原则上无阴影；必须用的场景（抽屉/模态）只许一档 `0 8px 24px rgba(0,0,0,.35)`，禁多档混用

### 6.4 动效时序

- [ ] 动效录屏三态（初/中/终）与 §4.1 时长预算一致，误差 ±20ms
- [ ] 统领性时刻唯一（源码 keyframes 审计：ambient 只许一处）
- [ ] `prefers-reduced-motion` 下全部降级（真机系统设置开启后复验）
- [ ] count-up = 0（门禁硬扫）

### 6.5 零瑕疵放行标准

- 放行 = 本节 6.1–6.4 全部勾选 ＋ 1440px/390px 全页截图（生产 CSP 真浏览器）＋ 动效录屏 ＋ 对比度实测值 ＋ 自查人签字。
- 董事长目检为最终放行：任何他指出的像素问题，本清单加一条（只增不减，D473 机制）。

---

## 七、与现行 BlackRock 设计的差距（2026-10-02 实测）

| # | 差距 | 实测证据 | 标准要求 | 整改 |
|---|---|---|---|---|
| 1 | 按钮无分级、无五态、无焦点环 | `.btn-approve/.cta-primary` 仅默认/hover/active；disabled/loading 样式 grep = 0；`:focus` 全站仅 1 处 | §5.1 四级分级；§5.2 五态；§5.6 焦点环全覆盖 | 补 Danger 级＋disabled/loading 样式＋`:focus-visible` 全站；btn 字号 15px→16px |
| 2 | 动效无预算体系、多 ambient 并存 | 7 个 keyframes 散用 30+ 次；时长 token 仅 `--fast:120ms` 一个 | §4.1 四档时长 token；§4.4 ambient 只留一处 | 新增 3 个时长 token；收敛 keyframes（flow-drift/breathe 二选一）；各 section 自创时长清零 |
| 3 | 字阶/间距漂移＋衬线无自托管 | 13/15/17/19px 共 25 处；`padding: 3/26/44px`；`@font-face` = 0 | §1.2 字阶禁令；§2.3 8pt 网格；§1.1 自托管 woff2 | 字号回填字阶；间距回填 8pt；中文衬线 woff2 自托管＋`font-display:swap` |
| 4 | `#5B6470` 对比度不达标 | 深色底实测 3.23:1（< 4.5） | §3.2 正文底线 4.5:1 | 正文处替换为 `#9AA3AF`；`#5B6470` 仅限大字/装饰 |

---

## 八、落地

1. 本草案 → 网站产品负责人提案 → CEO 终裁 → 生效版本号 v1.0。
2. 生效后：§七 4 项差距进整改 backlog（D282 问责，24h 办结制 D461）；门禁增补：字阶/8pt/五态/focus-visible/count-up 五项硬扫。
3. 修订：网站产品负责人提案→CEO 终裁→decision-log 留痕；董事长每次品味返工 → §6.5 机制清单加一条。

---

*附：实测方法——`grep` token 提取（deploy-prod-root/index.html，894,753B）＋ Python WCAG 相对亮度对比度实算；真浏览器渲染复验待 D393 维一执行时补。*