设计基础
以角色而非色值、以容器而非页面建立统一视觉语言。
Kitseed 面向需要长时间阅读与操作的产品界面：内容先被看见，操作保持明确，层次通过空间和轻量边界建立。装饰应帮助理解状态。
Canvas
#efeff0 / #09090aWorkspace
#f9f9fa / #121213Panel
#ffffff / #1a1a1bControl
#ffffff / #232325Foreground
#202022 / #f4f4f5Muted
#606063 / #a0a0a3Brand
#0f766e / #0f766eBrand subtle
#eaf5f3 / #0d2826颜色有明确职责
| 角色 | Tokens | 使用原则 |
|---|---|---|
| 页面与表面 | bg、panel、elevated、control | 依次表达画布、内容、浮层和可编辑区域 |
| 文字 | fg、fg-muted、fg-subtle | 主信息、辅助解释、元数据；弱化文字仍需清晰可读 |
| 边界 | line、line-strong | 分隔内容与描绘可操作控件，避免同时增加重阴影 |
| 主操作 | brand 及其前景、浅底和边界 | 每个局部任务保留清晰的主操作 |
| 语义状态 | success、warn、danger 系列 | 始终搭配文案或图标，颜色不承担唯一信息 |
在项目中覆盖语义变量，而非逐个覆盖组件颜色。深色主题拥有独立表面层级，不能只把浅色页面反转。
字体与信息层级
正文、元信息和代码使用稳定的层级。工作区正文偏紧凑，标题适度强调；数字对齐使用 tabular figures，链接、标识与代码使用等宽字体。中文长句自然换行，不用固定高度截掉说明。
Geist 字体随附 OFL 许可。更换品牌字体时保留系统回退字体，并重新检查中英混排、字重和字符宽度。
圆角、空间和密度
rounded-control 用于按钮与输入，rounded-panel 用于内容面板，rounded-window 用于较大容器与浮层。不要用同一种大圆角覆盖所有层级。
布局从实际容器出发：先给文字可收缩的空间，再为固定操作保留位置。面板内部使用统一间距；长列表用分隔线组织，避免每一行都再包卡片。
桌面允许紧凑的信息密度；触屏需要舒适的点击区域。缩小文档预览的宽度，观察同一组件如何安排内容，而不是仅缩放整个画面。
状态是组件的一部分
| 状态 | 应有表现 |
|---|---|
| Hover / Active | 轻量表面变化，操作反馈及时 |
| Focus visible | 键盘焦点清晰可见，不随鼠标状态消失 |
| Disabled | 无法操作的原因可理解，不依赖变灰解释 |
| Pending | 防止重复提交，保留任务上下文 |
| Error | 指向具体字段或动作，提供恢复办法 |
| Empty | 解释当前没有什么，以及下一步能做什么 |
动态与可访问性
动态用于说明浮层出现、反馈完成或状态变化。遵守 prefers-reduced-motion；骨架和旋转指示只提供视觉补充，等待状态还需要可访问文本。
语义、键盘和焦点先于样式。Tooltip 不能替代名称，Badge 不能只靠颜色表达状态，导航不能用普通按钮伪装链接。
文档画布与产品界面
文档外壳和组件预览分别使用独立样式。画布里的主题与宽度控制仅用于评估组件，不会更改已安装项目的运行时偏好。预览适合比较状态，生产接入仍需在真实布局与数据下验收。