# PFM Lab 设计变量说明

版本：1.1 · 2026-09-28

这些文件将已经认可的网站设计整理为可复用的视觉规则；它们没有修改官网，也不代表对当前官网的无障碍认证。

## 文件

- `pfm-tokens.css`：带 `--pfm-` 命名空间的 CSS 变量，可复制到新组件中。
- `pfm-tokens.json`：可读取的变量、用途、状态和来源；这是项目交付格式，不宣称兼容某一设计工具的专有导入协议。
- `../04_Web/components.html`：在浏览器直接打开即可查看的离线组件参考，无第三方脚本、无网络请求、无数据存储。
- `colors.csv`：19 色色板；含角色、HEX、sRGB 8 位数值、来源与近似 CMYK 百分比。
- `pfm-lab.gpl`：GIMP RGB 色板。
- `pfm-lab.ase`：Adobe Swatch Exchange 1.0 RGB 色板；采用通用 RGB 色块与一个分组，可供支持 ASE 的设计工具导入。

## 来源与优先级

设计来源为已定稿的 PFM Lab 连续成果卡片版，源代码提交 `efe804da4a857172cda70b2c49c8fc91f3876bdf`。

实际 CSS 级联顺序为 `home.css` → `home-b.css` → `home-reference.css` → `home-papers.css`。不要把第一份旧方案里的深青色 `#1F4E5F` 当作当前品牌主色。

| 变量 / 规则 | 状态 | 来源或说明 |
| --- | --- | --- |
| 品牌蓝 `#337FFF` | 现有设计 | `home-reference.css` 最终覆盖 `--brand` |
| Logo 渐变 `#62A2FF → #337FFF → #2B6AEB` | 现有设计 | `.brand-symbol` |
| 青色光点 `#A6EDFA` | 现有设计 | `home-b.css .brand-symbol i` |
| 页面背景 `#FBFDFF` | 现有设计 | `home-papers.css body[data-layout="blue"]` |
| 主文字 `#1F2329` | 现有设计 | `home-b.css --ink` |
| 卡片圆角 `22px` | 现有设计 | `home-papers.css .paper-card` |
| 大面板圆角 `32px` | 现有设计 | `home-reference.css .hero-reference` |
| 普通卡片悬停 / 键盘焦点 `-2px / 1.025 / 480ms` | 现有设计 | `home-papers.css .paper-card:hover` / `:focus-within` |
| 首页转轮卡片鼠标悬停 `-2px / 1.035 / 480ms` | 现有设计 | `home-papers.css` fine-pointer 媒体条件下 `.paper-orbit-slot .paper-card:hover` 覆盖普通卡片缩放 |
| 功能蓝 `#245BDB` 作为默认按钮 / 链接色 | **生产建议** | 已有 hover 色，建议扩展为功能语义色；尚未应用到官网 |
| 4px 基准间距与 12 / 8 / 4 列栅格 | **规范建议** | 对既有层级进行归纳，避免逐页面随意设值 |
| 控件边界 `#737E90`、错误色 `#A33930` | **规范建议** | 增补表单可读性与状态规则 |
| 44 × 44px 点击区域 | **品牌舒适度目标** | 不声称这是所有 WCAG AA 场景的唯一法定阈值 |

当前 HTML 的 `theme-color` / 内联 favicon 仍有旧的 `#3370FF`，首页部分早期选择器也使用这个近似色。本规范以可见 Logo 和后续主样式中的 `#337FFF` 为品牌标准。后续是否统一这些历史值，应作为独立实施任务处理。

## 如何使用

```html
<link rel="stylesheet" href="path/to/pfm-tokens.css">
```

```css
.example-card {
  background: var(--pfm-surface);
  color: var(--pfm-ink);
  border-radius: var(--pfm-radius-card);
  box-shadow: var(--pfm-shadow-card);
}
```

应将变量有选择地映射到新组件，不要直接把参考页面覆盖到现有站点，也不要全局替换所有旧数值。`components.css` 是参考页布局样式，不是官网的替换样式表。

## 色彩对比度

采用 WCAG 相对亮度方法对不透明 sRGB 实色组合计算。数值保留两位小数。

| 前景 / 背景 | 比值 | 普通文字 4.5:1 |
| --- | ---: | --- |
| `#1F2329` / `#FBFDFF` | 15.48:1 | 通过 |
| `#646A73` / `#FFFFFF` | 5.45:1 | 通过 |
| `#245BDB` / `#FFFFFF` | 5.84:1 | 通过 |
| `#245BDB` / `#FBFDFF` | 5.73:1 | 通过 |
| `#337FFF` / `#FFFFFF` | 3.74:1 | 不通过 |
| `#A6EDFA` / `#FFFFFF` | 1.30:1 | 不通过 |
| `#287058` / `#EDF7F0` | 5.40:1 | 通过 |
| `#A33930` / `#FFF3F1` | 6.07:1 | 通过 |

`#737E90` 控件边界对白色为 4.10:1。淡灰 `#E5E6EB` 仅用于装饰分隔，不能作为输入控件唯一的可辨识边界。品牌蓝和青色光点仍可用于 Logo 与非信息性装饰。Logo 识别色不必机械地替换成链接色。

大字对比阈值为 3:1；大字定义为至少 18pt（约 24 CSS px），或至少 14pt（约 18.67 CSS px）的粗体。正常正文使用至少 4.5:1 的组合。本表没有验证渐变、透明背景、图片叠字或整站全部状态。

参考标准：W3C WCAG 2.2，SC 1.4.3 Contrast (Minimum)、SC 1.4.11 Non-text Contrast、SC 1.4.13 Content on Hover or Focus、SC 2.4.7 Focus Visible、SC 2.5.8 Target Size (Minimum)。

https://www.w3.org/TR/WCAG22/

已核对的 W3C 解释页面（2026-09-28）：

- https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html
- https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html
- https://www.w3.org/WAI/WCAG22/Understanding/content-on-hover-or-focus.html
- https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html

## 交互与内容边界

- 键盘焦点必须可见，不能只提供鼠标悬停反馈。
- QR 展开支持悬停、聚焦、点击和 Escape；真实业务页面需使用审核过的官方二维码。
- 尊重 `prefers-reduced-motion`，关闭自动轮转、位移、缩放和平滑滚动，并保留内容和访问能力。
- 成果中心保持静态工作流。轮转展示只属于首页的成果展示区域。
- 普通卡片和键盘焦点放大 `1.025`；首页三维转轮内的卡片在精细指针悬停时放大 `1.035`。这两个值均来自已批准的 CSS 级联，不是相互冲突的版本。离线参考页展示普通卡片，因此使用 `1.025`。
- 公开文章卡片使用 DOI；内部成员到成果详情。隐藏按钮不等于权限校验。
- 成果修改权限仍为上传本人、实验室负责人和管理员；首页精选仅负责人和管理员操作；PDF 需服务器授权。这些逻辑不由本组件样式实现。
- 专利摘要图沿用现有 784 × 270px 范围内等比缩小规则，不放大原始小图。低分辨率不等于保密；公开前应删除敏感信息。
- 论文示例均明确标为占位内容，没有虚构为实验室新增成果。

## 字体与依赖

使用操作系统字体栈，无网络字体下载、无字体文件分发。不同平台上的字形与换行会略有差异。参考页面无外部库；SVG Logo 引用来自品牌包 `01_Logos`。保留系统字体的许可约束，不将 macOS / Windows 的字体文件打包进公开项目。

## 色板与印刷边界

CSV / GPL / ASE 保持相同的 19 色顺序；其中 Light Blue `#E2F0FD` 来自当前首页的渐变色标，也作为手册中的浅蓝面板色。其余颜色与 JSON 的命名颜色一致。推荐功能色在 CSV 的 `status` 字段标为 `recommended`，不会因为导入色板就自动成为官网现有实现。

HEX 和 RGB 以 sRGB 为准。CSV 中 CMYK 为不含 ICC 配置的简单数学换算：K = 1 − max(R,G,B)，其余分量由 K 归一化；不是印刷认证值，也不指定油墨、纸张或色彩配置。正式印刷请由制作方按目标设备与纸张进行 ICC 转换及打样；不要直接以这些近似值作为颜色验收标准。GPL 和 ASE 保存 RGB 值，不将近似 CMYK 冒充精确的印刷色。

ASE 已检查文件头、分组块、颜色块与 RGB 数值；未声称已在每个商用设计软件版本中实测导入。