SOS 设计系统
艺术方向
高端、沉稳、公民化、以人为中心。想象一下编辑杂志遇上应急操作室——自信而不危言耸听。
应做： 超大标题、大量留白、强烈的左对齐网格，搭配有意的非对称布局、偶尔的通栏区域、微妙的电影感光照（每节最多一个柔和径向渐变）、仅在叠加层上使用克制的玻璃效果、将应急红用作精确强调色。
不应做： 霓虹发光、饱和红色背景、表情符号图形、随处可见的通用仪表盘卡片、带有沉重投影的浮动卡片、持续旋转的物体、多个相互冲突的渐变、粒子背景。
经验法则：如果红色覆盖超过视口的约5%，就太多了。
颜色令牌
在 src/app/globals.css 的 Tailwind v4 @theme 中一次定义。组件仅使用令牌工具类（bg-ink、text-paper、text-accent），绝不使用原始十六进制。
| 令牌 | 值 | 用途 |
|---|---|---|
--color-ink | #101318 | 主要深色背景 |
--color-ink-raised | #1B2027 | 深色表面、手机边框、深色卡片 |
--color-ink-line | #2A313B | 深色上的分割线 |
--color-paper | #F5F6F7 | 浅色部分背景 |
--color-paper-line | #E1E4E8 | 浅色上的分割线 |
--color-accent | #D93642 | 强调色：行动号召、关键标记、状态点 |
--color-accent-strong | #B8232F | 浅色背景上的强调文字（在 #F5F6F7 上 AA 级别） |
--color-accent-soft | #F6E8EA | 浅色上的着色背景、徽章 |
--color-text-dark | #171A20 | 浅色上的正文 |
--color-text-light | #F7F8FA | 深色上的正文 |
--color-muted-dark | #9AA2AD | 深色上的弱化文字（在 #101318 上 ≥ 4.5:1） |
--color-muted-light | #5E6672 | 浅色上的弱化文字（在 #F5F6F7 上 ≥ 4.5:1） |
对比度说明：
#858D98（提供的弱化色）仅在大号文字时通过深色对比度要求；正文请使用--color-muted-dark。- 白色文字在
#D93642按钮上约为 4.6:1 —— 适合 ≥ 16px 半粗体的按钮标签。任何更改后请验证。 - 浅色背景上的红色文字必须使用
--color-accent-strong。 - 切勿仅通过颜色传达状态 —— 请搭配标签或图标。
状态颜色（仅限跟踪部分）：待处理 = 琥珀色 #C98A1B + 时钟图标，进行中 = 强调色红色 + 无脉冲点，已清除 = 绿色 #2F8F5B + 勾选图标。始终带有标签。
排版
- 字体：通过
next/font/google使用一个可变无衬线字体（首选：标题使用 Inter Tight + 正文使用 Inter，或单独使用 Geist）。display: "swap"，子集latin，最多 2 个字体家族。 - 标题：字重 600–700，字体间距紧凑（
-0.03em到-0.045em），行高 0.95–1.05。 - 正文：字重 400，行高 1.6，最大宽度约 65 个字符。
- 眉标题：12–13px，大写，
tracking-[0.18em]，字重 500，弱化颜色，通常前面带一条短红色规则。
流体缩放（在 @theme 中作为 --text-* 放置）：
--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem); /* 英雄区 h1 */
--text-h2: clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body: 1rem; /* 在 ≥ md 时为 1.0625rem */
--text-small: 0.875rem;
--text-eyebrow: 0.8125rem;
在 320px 宽度下，英雄区标题必须适应而不溢出 —— 请特别测试 "Every Second Matters."。
布局与间距
- 容器：
max-w-[1440px]，侧边内边距clamp(1.25rem, 4vw, 4rem)。 - 在 ≥ lg 断点下使用 12 列网格；非对称跨度（例如 7/5、5/7、offset-1）。
- 部分垂直节奏：上下
clamp(5rem, 10vw, 10rem)。 - 间距比例：4px 基准（Tailwind 默认）。优先使用 6、8、12、16、24、32 步长。
- 圆角：小控件 6px，卡片 14px，手机框架外部约 2.6rem。
表面与部分节奏
交替使用深色和浅色来创建章节： 英雄区（深色）→ 关于（浅色）→ 工作原理（深色）→ 类别（浅色）→ 展示（深色，通栏）→ 注册（浅色）→ 跟踪（深色）→ 协调（浅色）→ 常见问题（浅色）→ 最终行动号召（深色，电影感）→ 页脚（深色）。
光照：每个深色部分最多一个 radial-gradient，低透明度（≤ 0.18），红色或冷灰色调。静态 —— 从不动画。
玻璃效果：bg-white/5 + backdrop-blur-md + 1px ink-line 边框，仅用于导航和小型叠加层。无大型模糊面板（性能原因）。
组件
- 主要按钮： 强调色背景，浅色文字，最小高度 48px，水平内边距 20–28px，悬停时右移 2px 的微妙箭头图标。
- 次要按钮： 透明，1px 边框（深色上为
ink-line/ 浅色上为paper-line），相同大小。 - 无商店/下载按钮 —— 此页面无安装行动号召，请参阅 CLAUDE.md "范围：展示，而非安装漏斗"。
- 眉标题： 红色 24px 规则 + 大写标签。
- DraftBadge： 小型琥珀色轮廓药丸标签 "草稿 — 待确认"；仅用于包含草稿内容的部分。
- 类别磁贴： 图标（24px lucide，描边 1.5）+ 标题 + 一行描述；发丝边框，无沉重投影；悬停 = 边框颜色变化 + 上移 2px。
- 手机框架： 请参阅
app-screenshot-showcase技能。
图标
仅使用 lucide-react，描边 1.5，尺寸 20/24/32。每个概念一个图标；图标支持文字，绝不替代文字。
完成视觉工作前的检查清单
- 仅使用令牌；组件中无原始十六进制
- 红色使用受限制；状态不单独依赖颜色
- 标题层次一目了然；每个视口一个主导元素
- 深色/浅色节奏完整
- 已检查任何新颜色配对的对比度
- 在 320px 下看起来有设计意图，而非仅仅是缩小