设计约 2 分钟

设计系统

产品与本站共享的令牌、调色板、动效曲线与可访问性规则。

更新于 2025年11月1日约 2 分钟编辑此页

本页目录

设计系统是一组可执行的约束，不是情绪板。下面每个值都在 app/styles/globals.css 或 app/lib/theme/registry.ts 中有对应实现；一旦漂移，测试就会失败。

四条法则#

渐进式隐藏 —— 功能通过形态与状态自解释，而不是靠帮助文本。
交互归一化 —— 同一个动作在任何地方都有相同的形状、热区与焦点处理。
渐进式披露 —— 先给决策，把内部细节折叠到被请求为止。
物理级动效 —— 动效解释因果；退场比入场更快。

令牌#

分组	规则
颜色	只用 OKLCH。组件消费语义令牌，绝不出现 hex/rgb/hsl 字面量。
字体	拉丁用 Inter Variable，中文回退系统字体；代码与标识用 JetBrains Mono。
圆角	控件 10px、卡片 16px、浮层 20px、舞台 24px。
材质	surface / card / panel / float 四档阴影；暗色用顶部高光替代软阴影。
间距	8pt 基准；区块节奏 `clamp(72px, 10vw, 144px)`。

主题色轴typescript

:root[data-accent='emerald'] {  --accent-h: 162;  --accent-c: 0.135;  --accent-l: 0.535;} --color-primary: oklch(var(--accent-l) var(--accent-c) var(--accent-h));

调色板#

纸白 —— 温暖中性浅色。长时间阅读不会像纯白那样发冷。
石墨 —— 近黑中性。最安静的暗色表面。
午夜 —— 冷调深蓝，层级更分明。
暗色表面按亮度分层：背景 → 卡片 → 浮层 → hover。边框亮度高于所有表面。

动效#

令牌	曲线	用途
`--ease-standard`	`cubic-bezier(0.2, 0, 0, 1)`	hover、颜色、宽度。
`--ease-emphasis`	`cubic-bezier(0.16, 1, 0.3, 1)`	入场、Hero 揭示。
`--ease-exit`	`cubic-bezier(0.4, 0, 1, 1)`	退场，比入场短 25–40%。

可访问性#

每个可交互元素都有可见焦点环；移除焦点环视为缺陷。
目标尺寸：触控 44px，密集桌面面 32px，绝对下限 24px。
对比度：正文与元数据至少 4.5:1；大字 3:1。
prefers-reduced-motion 移除大幅位移动画，同时保持状态变化可读。

测试令牌，而不是截图

对比度由测试套件从 OKLCH 计算。一个调色板不能因为在一台显示器上看着还行就上线。