DESIGN EXAMPLES · 设计示例
北外
01
设计 Token
权威定义在 src/app/globals.css。一切颜色、字体、间距与动效均从这里取，不另立数值。
底色
亮 #ffffff
暗 #0d1117
正文 / 主文字
亮 #111318
暗 #f5f7fa
深色表面
亮 #0d1117
暗 #080b10
次要文字
亮 #626b78
暗 #a8b1be
默认分割线
亮 ink 19%
暗 ink 18%
焦点描边
亮 #1f5aa8
暗 #87aae0
图表主序列 / 主强调
亮 #2a5b9e
暗 #7b9fd2
第三序列 / 警示强调
亮 #a57218
暗 #cea653
语义错误 / 峰值
亮 #b84f42
暗 #d47c70
语义成功
亮 #277158
暗 #6ba88f
招协红（核心品牌）
亮 #e14b3f
暗 #f0705f
字体 · Typography
--font-display大标题 / 界面标题Noto Sans Variable + CJK--font-cjk中文阅读正文Noto Sans SC Variable · 苹方 · 微软雅黑--font-world各语种译文按语言切换 Noto 字体一百种语言，同一个世界
标题行高 1.12–1.28，正文行高 1.65–1.8。中文一律不用斜体；面板、卡片一律直角。
间距 · Spacing
0.5rem0.75rem1rem1.5rem2.25rem3.5rem5.5rem动效 · Motion
--motion-fast150ms快速反馈（hover、按下）--motion-base200ms标准过渡（颜色、位移）--motion-slow220ms面板展开、复杂进入--motion-easecubic-bezier(0.22, 1, 0.36, 1)统一缓动曲线02
色彩系统
招协红是核心品牌色，七大洲与四大洋两组色板用于区分主题。网页界面使用--accent-* 强调色；品牌色板用于需要明确主题的视觉内容。
每格依次标出色阶编号、色值，以及格内文字（墨黑或白色）与该色的对比度。普通文字至少需要 4.5，大号文字至少需要 3。点击色块可复制色值。
招协红 · 身份（核心品牌色）
七大洲 · 世界的多彩（次级）
四大洋 · 连接的蓝（次级）
图表安全色板 · 蓝 / 金 / 橙
数据图优先使用蓝、金、橙及其深浅变化，避免只靠红绿区分；每个图例都带文字标签。色块标注的是浅色主题色值。
03
图表组件
官网数据板块与「回声」栏目共用这些图表组件。它们只用 CSS 和内联 SVG 绘制，不加载外部脚本，截图后仍保持原样。
183个
建交国
中国已与 183 个国家建立外交关系
101项
语言
北外开设的语种数
125个
本科专业
北外本科专业总数
以下图表使用虚构的示例数据，只用于展示组件效果，类别、区域和数值都不对应任何真实的学院、地区或统计。
示例 · 排名条
示例 · 占比环形图
- A 类1643.2%
- B 类1232.4%
- C 类924.3%
示例 · 玫瑰图
- 区域 A12项
- 区域 B22项
- 区域 C18项
- 区域 D8项
- 区域 E4项
示例 · 时间节点
- 05.01
120 人次 · 开始
- 06.15
460 人次 · 高峰
- 07.20
210 人次 · 回落
- 08.10
90 人次 · 结束
示例 · 词云
字号代表词频 | 数据来源见原文
04
规范文档
本页展示现有组件与配色效果。制作时先查对应指南，再核对具体内容、尺寸和使用场景。