北外招协设计系统

这份文档怎样用

制作网页时，先按内容选择布局和组件，再使用现有颜色、字体与间距变量，最后检查手机、键盘操作和亮暗主题。本页面向网页设计与开发；文案编辑见风格指南，标志与印刷物料见品牌指南。

“Token”是设计变量的名称，例如 --ink 表示正文颜色。复用变量可以让多个页面同时适应主题变化。数值以仓库 src/app/globals.css 的当前定义为准；设计说明出现差异时，先核对实现与设计要求，再统一修改。

按内容选择呈现方式

让每个区域有清楚的重点，不以增加卡片、动效或颜色替代内容组织。重要步骤不放进必须横向滑动才能发现的区域。组件清单与参数在下面查阅。

颜色、字体和间距参数

色彩

完整「七大洲四大洋」色彩系统见色彩系统。此处只列中性色与核心结构。

核心品牌色：招协红 --torch-red（#e14b3f）；七大洲 --continent-*；四大洋 --ocean-*（十级色阶与搭配规则见色彩系统文档）。网页界面使用 --accent-* 强调色；品牌色板用于需要明确主题的视觉内容，选色和对比度检查见色彩系统。

禁止：渐变、暖色水洗、纹理纸感、装饰性灰；米白/奶油/泛黄底色。

字体

• 标题行高 1.12–1.28，正文行高 1.65–1.8。
• 标题 text-wrap: balance，段落 text-wrap: pretty。
• 中文一律不用斜体。

间距

间距从 0.5rem 起，按以下刻度递增：

0.5 → 0.75 → 1 → 1.5 → 2.25 → 3.5 → 5.5（单位 rem）

• 用 clamp() 时须保证 390px 与宽屏桌面下都可读。

圆角与边框

• 面板、卡片一律直角（border-radius: 0）。
• 只有圆形控件可用圆形（如主题切换、语言切换按钮的 999px 圆角）。
• 行内代码可用小圆角（4px）。
• 分割线统一用 1px --line；相邻分割线共边，不叠边框。

动效

---

按用途选择现有组件

站内图文以语义块组织。每个块先保证信息完整可读，再加有限、可控的交互。

组件清单

统计类可视化复用数据可视化规范（data-viz.md）：数据卡、横向排名条、环形/占比、玫瑰、词云、时间轴，均需满足色盲安全配色（蓝+橙+金）与「图例文字标注、离线/截图可读」约束。

版式判断

• 正文：自然段、章节、图片序列，优先连续阅读。
• 二至四项同级信息：静态语义网格，首屏完整可见。
• 五项以上同级内容：先考虑列表或分组；只有每项可独立阅读、不会隐藏必要信息时才使用横向卡片。
• 时间与步骤：时间线，不强行做成卡片墙。
• 单图用 EditorialFigure；二至四张纪实照片用 EditorialPhotoSet；长图用 EditorialImageSequence。
• 图片中的重要文字：先 OCR + 人工核对，转为相邻正文/时间线/卡片，图片保留为原始材料。
• 原公众号装饰图、秀米模板、重复截图不进入阅读流。

组件注册

组件目录见 src/design-system/editorial-registry.json。新增故事模式前用 pnpm design:context <intent...> 查询。新增组件须具备：中英文文案、窄屏布局、键盘路径、空内容处理、替代文本、亮暗主题检查。

---

桌面与手机布局

• 编辑出版感：克制网格、充足留白、单一 1px --line 分割线。
• 相邻分割线共边，不叠边框、变换或裁剪伪元素。
• 面板直角（控件才可圆形）。

响应式断点：

• 横向滚动只用于有清晰标签、带键盘控制的轨道；关键阅读内容不得藏进轨道。

---

动效与减少动态效果

• 动效只服务功能：揭示状态变化、保持读者位置、回应操作。
• 只用 transform 与 opacity。
• EditorialReveal 是默认入场原语：JS 加载前内容可见，观察一次，位移不超过 0.65rem，不重复播放。
• 禁自动轮播、视差、WebGL、模糊悬停画廊、文字乱序、滚动劫持、布局位移式入场。
• prefers-reduced-motion 下关闭非必要过渡，改用即时导航。
• 每个交互都要有静态、可键盘读取的状态；动画不能成为理解内容的唯一方式。

---

键盘、图片和辅助阅读检查

• 使用语义化 article、figure、figcaption、section 与标题层级。
• 交互式图库须键盘可达，读屏软件能读出当前是第几项，但不要频繁触发播报。
• 尊重暗色模式、焦点可见性、图片尺寸（避免布局位移）。
• 非首屏图片懒加载；组件运行时本地化：不引入外部在线字体、远程图片示例、分析 SDK 或动画库。

---

交付前完成一次实际检查

1. 在手机和桌面打开页面，检查文字、表格和图片是否完整，是否有无意的横向溢出。
2. 切换亮暗主题，检查文字、边框、按钮和焦点提示的实际对比度。
3. 仅用键盘访问链接、按钮和表单，确认焦点看得见、顺序合理、操作后结果明确。
4. 启用减少动态效果，确认内容仍完整可读，导航不依赖动画。
5. 检查图片替代文本、标题层级、空内容与错误状态，最后核对源文件、实现和说明一致。

开发时查哪些文件

查具体配色见色彩系统，看视觉效果见设计示例，返回规范目录。

返回规范目录