DSH UI Kit

按 DeepSeek Harness 原生设计语言重写的组件层。颜色/圆角/字体/动效全部走 tokens.css 令牌， 数值逐条取自官方 bundle 的内联样式表与打好的原语组件 CSS。切换明暗：<body data-ds-dark-theme>。

1. 排版

层级不靠字重堆叠：标题 300、正文 300，只用字号和三级色区分主次；品牌词单独 500 切 Montserrat。

display 28/48 300欢迎使用
DeepSeek Harness
h1 28/39 300你希望看到多少工作过程？
h2 20/28 500预览版说明
card-title 20/28 400办公与创作
hero 16/28 300DeepSeek Harness 会以本地文件夹作为工作区，通过调用各种工具，读写本机文件。
subtitle 16/22 300我们会根据你的选择调整界面和工具。
body 14/24正文用二级色，长段落行高 24px，保证中文密排也可读。
card-desc 15/21 300编辑文档、整理数据和制作演示文稿等
caption 14/22三级色用于说明、提示、辅助信息。

2. 按钮

常规 36px / 圆角 12px / 14px·22px·500；引导页专用 44px。主按钮是「黑底白字」，次按钮是「白底（暗色 #48494c）」，不是描边。

primary
onboarding 44
outline / ghost
sm 28
focus-visible

3. 输入框

32px 高、圆角 12px、0.5px 描边；聚焦时描边换成品牌蓝，不加阴影。

默认
已填
聚焦
lg 36

4. 复选与指示器

表单里用 16px 原生复选框（accent-color 走品牌色）；卡片上用 24px 自绘方框，圆角 6px、描边 2px。

原生复选框
卡片指示器

5. 选项卡

识别度三件套：32px 圆角 + 毛玻璃填充 + 双层 accent 阴影；选中时 2px conic 渐变环（14s 匀速旋转）。紫=办公/聚焦结果，蓝=关键细节（默认），青=完整过程。

6. 弹窗

圆角 28px、elevation-prominent 阴影、内容内边距 28px；遮罩只压黑不模糊，且**禁用隐式关闭**（Esc/点遮罩不关）。引导弹窗宽 600px，原语默认 380px。

预览版说明

DeepSeek Harness 目前的 0.2 版本仍处于预览阶段，还有许多地方需要持续改进和打磨，希望听取广大开发者和用户的反馈建议。

我们期待与全球用户和开发者一起，在开源、可复用、可组合的基础设施之上，共同探索智能上限。

跳过设置？

你可以随时前往 设置 → 通用设置 中调整工作过程、性能与用量展示方式。

7. 版式骨架

页面内边距 clamp(40px, 8.333vw, 120px)，内容 min(…, 1200px) 居中；底部导航容器 pointer-events:none，只有按钮自己收事件，空白区域不挡主操作。

↑ content 宽 min(calc(100% - 2×padding), 1200px)

8. 动效节奏

四个数字记住整套节奏：进入 .1s、切屏 40ms、退出 180ms、选中卡描边 14s 匀速；全部带 prefers-reduced-motion 分支（CSS 与 JS 双侧）。

页面进入 .1s ease-out 步骤切换 40ms overlay 退出 180ms 弹窗进入 .2s 卡片底色 .12s 选中环 14s 循环

9. 令牌速览

下面是这套语言最常用的语义令牌（完整 405 个见 tokens.css）。

bg-base
页面底
bg-layer-1
次级面板
bg-layer-2
弹窗面
label-primary
label-secondary
label-tertiary
brand-primary
onboarding-accent
#3964fe
gradient violet
gradient blue
gradient cyan
card-fill 80%