# 本站视觉规约

## 1. 站点角色

这是一个公开展示型资料馆，不是产品官网，也不是文档中心首页。

它的任务只有三件事：

- 让人先建立视觉判断
- 让人快速定位参考源
- 让后续工程能复用这套展示方式

## 2. 气质定义

关键词：

- 温和
- 克制
- 公开
- 展陈感
- 非营销

不应该出现的感觉：

- SaaS 落地页
- 商业转化页
- 技术文档首页
- 普通 demo 展示页

## 3. 视觉来源

本站不是简单复刻参考源，而是把两种来源重新组织成一个新的公共入口：

- `cockpit`
  提供工作台类的壳层秩序、浅色表面和密度控制
- `code2x`
  提供站群类的角色划分、浅色氛围和克制前台文案

本站自己的任务，是把这两套来源整理成“样本馆”而不是“产品站”。

## 4. 布局原则

- 首页必须先给出强视觉入口，再给出归档说明
- 主信息区优先展示样本，不优先展示文档链接
- 文档入口放在后半段，作为归档层
- 两个主展区卡片必须有明确主次，不做平均铺陈
- 页面宽度要充足，不能做成狭窄博客版式

## 5. 色彩与材质

- 主题为浅色、暖纸面、柔和阴影
- 不使用高饱和主色做按钮强调
- 表面应该接近纸、玻璃和轻雾之间的状态，但不过度炫技
- 阴影要软，边框要细，圆角要中度克制

## 6. 字体与层级

- 标题：`Noto Serif SC`
- 正文：`Source Sans 3`
- 标题负责气质，正文负责清晰阅读
- 正文不宜过细，按钮不宜过粗
- 单页主标题要短，留足停顿感

## 7. 文案规则

- 优先解释，不优先推销
- 句子短，不喊口号
- 少用感叹句和空洞形容词
- 按钮像“入口”或“查看”，不要像“立即体验”“马上开始”

## 8. 图片规则

- 首页 hero 使用大图双拼，建立馆藏感
- 展区页图片优先承担样本陈列职责
- 非首屏图片统一延迟加载
- 图片说明只写必要信息，不复述整页内容

## 9. 交互规则

- 按钮要轻，像展馆导览，不像营销 CTA
- 动效只做轻量进入和悬停反馈
- 不做大幅位移动效
- 不做抢注意力的浮动元素

## 10. 公开边界

允许：

- 截图
- 来源说明
- 规则说明
- 静态展区页

不允许：

- 服务器信息
- SSH 凭据
- 私有部署路径
- 内部运维脚本
- 登录
- 留资
- 支付
- 订单
- 业务表单
- 转化导向 CTA

## 11. 复用方式

如果要把这套方式复制到其他工程，至少保留下面几项：

- 浅色暖纸面主题
- Serif 标题 + Sans 正文的组合
- 强首屏样本入口
- 归档信息后置
- 按钮克制
- 文案收束

如果只保留目录结构、不保留这些气质，这套站点就会退化成普通资料页。