# Veralix Aegis — 设计系统规格 (Design System Spec) 本规格是网站工程实现的唯一权威来源（single source of truth）。所有 Tailwind 配置、CSS 变量、组件样式必须与此一致。 ## 1. 设计原则 - **极简现代（Minimal Modern）**：克制、留白充足、信息层级清晰。 - **可信权威（Trustworthy & Authoritative）**：以排版与结构传达公信力，而非视觉特效。 - **可访问性优先（Accessibility-first）**：所有组件满足 WCAG 2.1 AA。 - **可维护性优先**：token 驱动，组件复用，避免一次性样式。 ## 2. 配色 (Color Tokens) | Token | HEX | 用途 | 对比搭配 | |---|---|---|---| | `--color-primary` (深蓝/ink) | `#0F172A` | 主品牌色、深色区块背景、标题文字 | 白色文字 (对比 17.4:1 ✔ AAA) | | `--color-accent` (亮蓝) | `#2563EB` | CTA、链接、强调、聚焦环 | 白色文字 (对比 4.9:1 ✔ AA) | | `--color-accent-hover` | `#1D4ED8` | 按钮 hover | 白色文字 ✔ | | `--color-bg` (浅灰) | `#F8FAFC` | 页面背景 | — | | `--color-surface` | `#FFFFFF` | 卡片/面板背景 | — | | `--color-border` | `#E2E8F0` | 分割线、卡片边框 | — | | `--color-text` | `#0F172A` | 正文主文字 (在浅底上 17.4:1 ✔) | — | | `--color-text-muted` | `#475569` | 次要文字 (在浅底上 7.5:1 ✔ AA) | — | | `--color-text-inverse` | `#F8FAFC` | 深色底上的文字 | — | | `--color-success` (绿) | `#16A34A` | 状态：通过/已验证 | 白色文字 ✔ AA (大字) | | `--color-warning` (琥珀) | `#F59E0B` | 状态：警示/待处理 | 深色文字 `#0F172A` ✔ | | `--color-danger` | `#DC2626` | 状态：错误/失效 | 白色文字 ✔ | 深色区块（Hero、Footer）用 `--color-primary` 作背景，文字用 `--color-text-inverse`，accent 用更亮的蓝 `#60A5FA` 以保证对比。 ## 3. 排版 (Typography) - **标题字体（Display）**：IBM Plex Sans — 权重 500/600/700 - **正文字体（Body）**：Inter — 权重 400/500/600 - 加载来源：Google Fonts（IBM Plex Sans + Inter），`display=swap`，含 preconnect。 - 等宽（用于哈希/技术展示）：`IBM Plex Mono`。 字号层级 (rem，基准 16px)： | Token | size / line-height | 用途 | |---|---|---| | text-hero | 3.5rem / 1.1 | 仅首页 Hero 大标题 | | text-4xl | 2.5rem / 1.15 | 页面主标题 H1 | | text-3xl | 2rem / 1.2 | 区块标题 H2 | | text-2xl | 1.5rem / 1.3 | 子标题 H3 | | text-xl | 1.25rem / 1.4 | 卡片标题 | | text-lg | 1.125rem / 1.6 | 引导段、强调正文 | | text-base | 1rem / 1.7 | 正文 | | text-sm | 0.875rem / 1.5 | UI、按钮、标签 | | text-xs | 0.75rem | 角标、版权 | 响应式：Hero 在移动端降为 2.25rem；H1 降为 2rem。 ## 4. 间距与栅格 (Spacing & Grid) - **8pt 间距系统**：所有间距为 4/8 的倍数（4,8,12,16,24,32,48,64,80,96,128 px）。 - **12 栏栅格**：最大内容宽度 `1200px`，gutter `24px`，外边距移动端 `16px` / 桌面 `32px`。 - 区块垂直内边距：移动端 `48px`，桌面 `96px`。 - 圆角：`--radius-sm 6px` / `--radius 10px` / `--radius-lg 16px`。 - 阴影：`--shadow-sm`（卡片默认）/ `--shadow-md`（hover/悬浮）。仅轻微，符合极简。 ## 5. 组件库 (Components) 每个组件均含 hover / focus-visible / disabled 状态，键盘可达。 1. **Button**：variants = primary（亮蓝实心）、secondary（深蓝描边）、ghost（无边）；sizes = sm/md/lg。focus-visible 显示 2px accent 聚焦环 + 2px 偏移。 2. **Card**：白底、1px border、radius-lg、shadow-sm；hover 升 shadow-md。用于核心领域、项目、出版物。 3. **StatusBadge**：success/warning/danger/neutral，圆点 + 文字，用于"已验证/待处理"等证据状态语义。 4. **Navbar**：sticky 顶部，logo + 主导航 + 语言切换 + Donate 按钮（accent）。移动端汉堡抽屉。 5. **Footer**：深蓝底，多栏链接 + 组织声明 + 社交 + 版权 + 隐私/条款/可访问性链接。 6. **LanguageToggle**：EN / 中文 切换，保留当前路径。 7. **CookieConsent**：底部横幅，接受/拒绝，localStorage 记忆。 8. **SectionHeading**：eyebrow（小标签）+ H2 + 可选副标题，统一区块头。 9. **MetricCard**：大数字 + 标签，用于影响指标。 10. **Table**：用于出版物/数据列表，斑马纹、响应式横向滚动。 11. **Form fields**：Input / Textarea / Select，带 label、错误态、aria 描述。 12. **Breadcrumb**：次级页面路径导航。 ## 6. 可访问性 (WCAG AA) 检查点 - 所有交互元素 focus-visible 可见聚焦环。 - 文本对比 ≥ 4.5:1（正文）/ 3:1（大字与 UI 组件）。 - 完整键盘导航 + skip-to-content 链接。 - 语义 HTML + ARIA landmarks（header/nav/main/footer）。 - 图片均有有意义的 alt（装饰图 alt="")。 - 表单 label 关联、错误 aria-live 提示。 - prefers-reduced-motion 时禁用非必要动效。 - 语言切换正确设置 ``。 ## 7. 动效 (Motion) - 克制：仅状态过渡（150–250ms ease-out）与首屏淡入。 - 不使用大幅视差或炫技动画（符合研究机构调性）。 - 尊重 prefers-reduced-motion。