基础 — Prism 设计语言（受 Apple 启发的默认主题）
原则
三条原则贯穿整个系统。当某个设计决策存在争议时，回到这里。
- Clarity（清晰） — 文本清晰可读，图标精准，留白充足。功能由形式自然生发，而非依赖装饰。
- Deference（克制） — 界面退居其次，让内容主导。克制用色、轻量效果——绝不与内容争夺注意力。
- Depth（层次） — 分层、过渡与真实动效构建出空间感，帮助用户理解结构并保持上下文。
设计令牌
令牌分为三层；界面只引用语义层与组件层，因此重新换肤和深色模式都只需改动一处。
- Primitive（原始层） — 具体取值：
blue-600 = #0066CC - Semantic（语义层） — 按意图命名：
color.accent → blue-600 - Component（组件层） — 绑定到某个组件：
button.bg → color.accent
在代码中，令牌是 CSS 变量（var(--color-accent)、var(--s-4)、var(--radius-card)）。切勿硬编码原始值。
颜色
中性灰承担了界面约 95% 的部分。颜色保留给关键操作、状态和品牌时刻——每屏不超过一种强调色。
中性色阶
| 令牌 | 值 | 令牌 | 值 | |
|---|---|---|---|---|
| Gray 0 | #FFFFFF | Gray 400 | #86868B | |
| Gray 50 | #F5F5F7 | Gray 500 | #6E6E73 | |
| Gray 100 | #E8E8ED | Gray 600 | #424245 | |
| Gray 200 | #D2D2D7 | Gray 800 | #1D1D1F | |
| Gray 300 | #AEAEB2 | Gray 900 | #000000 |
系统色（谨慎使用） — Blue #0066CC（主色）、Green #1D8A4E（成功）、Orange #C2410C（警告）、Red #C5283D（危险）。
语义令牌 — --label-primary:#1d1d1f、--label-secondary:#6e6e73、--label-tertiary:#86868b、--color-accent:#0066cc。
- ✓ DO — 用中性灰构建层级；把强调蓝留给页面上唯一最重要的操作。状态色只在需要时短暂出现。
- ✕ DON'T — 不要在一屏堆叠多个彩色按钮，也不要用高饱和度色填满大面积背景——那会让颜色失去信号作用。
排版
使用系统字体（SF Pro / 苹方 SC）。字号按比例阶梯递增；大标题收紧字距，正文放宽行高。拉丁文与中文共用一套阶梯。
| 样式 | 字号 / 字重 / 字距·行距 |
|---|---|
| Large Title | 34 / 700 / −0.02em |
| Title 1 | 28 / 640 / −0.015em |
| Title 2 | 22 / 600 / 0 |
| Headline | 17 / 600 |
| Body | 17 / 400 / 行高 1.5 |
| Subhead | 15 / 400 / 1.45 |
| Footnote / Caption | 13 / 400 / 1.4 |
字体栈：-apple-system, "SF Pro Text", "PingFang SC", system-ui, sans-serif。
- ✓ DO — 每屏最多三种字号以构建层级；正文每行 45–75 个字符，行高 1.5。
- ✕ DON'T — 不要用纯黑
#000排正文；不要将长段落居中；正文字号不要低于 13px。
间距与栅格
所有间距都是 4 的倍数，以 8 为基础节奏。两个元素关联越紧密，间距越小；分组之间则留出更大的呼吸空间。
| 令牌 | px | 用途 |
|---|---|---|
--s-1 | 4 | 紧凑——图标 ↔ 文本 |
--s-2 | 8 | 基础节奏 |
--s-3 | 12 | 输入框内边距 |
--s-4 | 16 | 卡片内边距、列表行 |
--s-5 | 24 | 组件之间 |
--s-6 | 32 | 区块内的分组 |
--s-7 | 64 | 主要区块之间 |
布局栅格 — 灵活的 12 列、24 间隔。优先使用 gap 而非 margin。内容主列宽度上限约 720px；超过后让留白增长，而不是拉伸行长。
响应式断点
| 断点 | 宽度 | 列数 | 边距 |
|---|---|---|---|
| Compact | < 600 | 4 | 16 |
| Regular | 600–1024 | 8 | 24 |
| Large | ≥ 1024 | 12 | ≥ 40 |
列数与边距随宽度增长；可读的内容主列保持有界，布局始终避开安全区域和刘海。
阴影高度
用单一的阴影阶梯表达高度。阴影柔和、低不透明度、略偏冷色；层级越高离用户越近，阴影越大越弥散。
| 令牌 | 值 | 层级 |
|---|---|---|
--shadow-1 | 0 1px 2px rgba(0,0,0,.06) | 卡片 |
--shadow-2 | 0 4px 12px rgba(0,0,0,.08) | 下拉菜单、抬升的卡片 |
--shadow-3 | 0 12px 32px rgba(0,0,0,.12) | 浮层、底部弹层 |
--shadow-4 | 0 24px 60px rgba(0,0,0,.18) | 模态框 |
深色模式
深色模式不是简单的反色。背景用近黑色而非纯黑，用分层阴影高度表达高度感，并把强调色略微提亮以保持对比度。
| 背景 | 层 | 标签 | 强调色 | |
|---|---|---|---|---|
| Light | #FFFFFF | #F5F5F7 | #1D1D1F | #0066CC |
| Dark | #000000 | #1C1C1E | #F5F5F7 | #3393FF |
同名令牌通过 [data-theme="dark"] 和 prefers-color-scheme 切换。