Kimi Web 设计规范

这是 Web 端(apps/kimi-web)的设计 token 与组件标准。所有数值与 src/style.css 的 :root token 保持一致——改 token 时同步改这里。

结论先行:颜色、圆角、字体、阴影都收敛成一套可复用的 token;圆角按 8 / 12 / 16 的规律分层(列表项 → 输入框/卡片 → 对话框)。

颜色 Color

中性色撑起层级(墨→正文→次要→淡),蓝色是唯一强调色,语义色只在状态里出现。

中性 / 文字 / 线

ink

#14171c · 标题/主文字

text

#3f454d · 正文

dim

#697079 · 次要

muted

#8b929b · 弱化

faint

#aeb4bc · 占位/最弱

line

#e7eaee · 边框

panel2

#f3f5f8 · 浅底

canvas

#f4f6fa · 画布(Modern)

蓝色强调 + 语义色

blue

#1565c0 · 主操作

blue2

#0d4f9e · hover/强调字

soft

#e9f0fa · 选中底/hover

bluebg

#eef4fc · 用户气泡

#0e7a38 · 成功

warn

#92660a · 警告/活动

err

#b91c1c · 错误

圆角 Radius

这是这次重点统一的部分。Modern 用一套 8 / 12 / 16 的规律:越"大块"的容器圆角越大。Terminal 主题刻意保持 3–4px 的硬朗感,不走这套。

--r-xs · 6px

徽章/头像方块

--r-sm · 8px

列表项·tab·按钮·状态控件

--r-md · 12px

输入框·工具卡

--r-lg · 16px

对话框·引导卡

用户提到的"输入框圆角和 session/workspace 列表成规律":列表项(session 行、workspace chip)= --r-sm 8px,输入框高一档 = --r-md 12px,对话框再高一档 = --r-lg 16px。圆形头像/点用 50%;气泡用专门的非对称圆角 18px 18px 6px 18px(表达"指向")。

Token	值	用在哪	样例
`--r-xs`	6px	workspace 头像方块、计数徽章	xs
`--r-sm`	8px	session 行、workspace chip、tab、发送/附件键、状态控件	sm
`--r-md`	12px	输入框、工具调用卡	md
`--r-lg`	16px	对话框、引导卡、移动端底部 sheet	lg

字体 Typography

两套字族分工:chrome/代码/路径/时间戳用等宽 --mono;Modern 的正文用 --sans。这是 Modern 和 Terminal 观感差异的关键。

26px标题 H1

18px区块标题 H2

14px正文 / 聊天内容 / session 标题(基准 body)

13px输入框、tab、控件

12px状态行、次要信息

11px时间戳 · 徽章 · 路径(mono)

--mono = SF Mono / ui-monospace;--sans = -apple-system / PingFang SC。Terminal 全程 mono;Modern 下 body 切到 sans,但路径/代码/时间戳仍按元素保留 mono。

阴影 Shadow

只在 Modern 用,把白色卡片/输入框从画布上"抬起"。两档:卡片轻投影 + 浮层重投影。

--shc 轻(卡片/气泡)

--sh 重(输入框/弹层)

组件 Components

下面都是用上面 token 拼出来的真实组件镜像(Modern 主题)。

按钮 Button

primary（主操作,blue + --r-sm）· ghost（次操作）

输入框 Composer（单行,--r-md,发送键 --r-sm 靠右下）

输入消息… 发送 ↵

状态控件 Status controls（服务于输入框的功能按钮,--r-sm,hover 软蓝)

模型 kimi-k2.6 思考 high 计划关权限手动 ctx 12k/200k

会话列表项 Session row（--r-sm,选中=软蓝+内描边）

现在的整个页面的字号…0m ago

民法典关于居住权的规定3h ago

工作区 Workspace chip（--r-sm,头像 --r-xs,选中=墨底)

Kkimi-code-web

Kkimi-code

标签栏 Tabs（--r-sm 软胶囊)

~/chat~/files~/tasks

工具调用卡 Tool card（--r-md,白底+轻投影)

▾Read· src/style.css✓

读取 312 行…

用户气泡 User bubble（非对称大圆角)

把超时改成可配置

对话框 Dialog（--r-lg,顶部 2px 蓝条)

切换模型

选择一个用于当前会话的模型。

两个主题 Themes

同一套数据,两种外观。Modern 是默认。

	Terminal	Modern（默认)
字体	全程 mono	正文 sans,chrome/代码 mono
圆角	硬朗 3–4px	8 / 12 / 16 规律
聊天	行式 `user@kimi $`	气泡(用户右侧软蓝,助手左侧纯文本)
聊天底色	白	白(正文区),侧栏浅灰
阴影/动画	无	轻投影 + 入场微动画

实现:html[data-theme="modern"] 挂在根节点。Modern 的逐组件覆盖必须写在全局 src/style.css——组件内 scoped 的 :global(html[data-theme=modern]) .x 赢不过基础样式(踩过坑:输入框一直是方角、tab 没胶囊就是这原因)。