设计系统
本文档迁移自仓库根目录的 DESIGN.md。它定义 UltimateUI 文档站的视觉语言：
接近 Vercel 的开发者平台质感，白色画布、黑色 ink CTA、极细 hairline、几何
sans 标题、mono 技术标签，以及只在 hero 尺度使用的多色 mesh gradient。
设计基调
页面默认使用近白背景，文字以 #171717 为主，次级正文为 #4d4d4d。装饰系统
只有一个：由 cyan、blue、violet、magenta、coral 和 amber 组成的 hero 级 mesh
gradient。它不能缩小成图标、不能裁成小色块，也不要被替换为单色渐变。
关键特征：
- 主 CTA 始终使用黑色 ink pill，辅 CTA 使用白底细边框 pill。
- 章节 eyebrow、代码块、命令和技术标签使用 mono 字体。
- 标题使用句式大小写，字重上限为 600。
- 卡片依靠 inset hairline 和多层弱阴影建立层次，不使用重投影。
- 页面节奏在
canvas-soft -> canvas -> primary dark band之间切换。
颜色
| Token | 值 | 用途 |
|---|---|---|
primary / ink | #171717 | 主 CTA、标题、深色 section 背景 |
on-primary | #ffffff | 深色背景上的文字 |
body | #4d4d4d | 次级正文、导航链接、页脚链接 |
mute | #888888 | 低优先级说明、占位文字 |
hairline | #ebebeb | 1px 分隔线、卡片和输入框边框 |
canvas | #ffffff | 卡片、弹窗、导航栏 |
canvas-soft | #fafafa | 页面默认背景 |
canvas-soft-2 | #f5f5f5 | inset 区域、代码面板内层 |
link | #0070f3 | 正文链接和信息状态 |
error | #ee0000 | destructive / validation 状态 |
warning | #f5a623 | pending / caution 状态 |
violet | #7928ca | preview gradient 起点 |
cyan | #50e3c2 | brand gradient cyan stop |
highlight-pink | #ff0080 | preview gradient 高饱和 stop |
Brand Gradient
| Pair | 起点 | 终点 | 用途 |
|---|---|---|---|
| Develop | #007cf0 | #00dfd8 | blue -> teal |
| Preview | #7928ca | #ff0080 | violet -> pink |
| Ship | #ff4d4d | #f9cb28 | coral -> amber |
三组渐变在 hero 中合并为一个 mesh gradient。它是页面唯一的大型装饰，不要在 按钮、图标或小卡片里重复使用。
排版
字体策略：
- 几何 sans：
Geist, Inter, system-ui，用于标题、正文、按钮和导航。 - Mono：
Geist Mono, JetBrains Mono, ui-monospace，用于代码、命令、eyebrow。 - 展示标题字重 600；按钮字重 500；正文字重 400。
- 正文不要使用 mono。
| Token | Size | Weight | Line Height | Letter Spacing | 用途 |
|---|---|---|---|---|---|
display-xl | 48px | 600 | 48px | -2.4px | Hero 标题 |
display-lg | 32px | 600 | 40px | -1.28px | 章节标题 |
display-md | 24px | 600 | 32px | -0.96px | 卡片标题、价格层级 |
display-sm | 20px | 600 | 28px | -0.6px | 小型展示标题 |
body-lg | 18px | 400 | 28px | 0 | lead paragraph |
body-md | 16px | 400 | 24px | 0 | 默认正文 |
body-sm | 14px | 400 | 20px | -0.28px | 次级正文、导航 |
caption | 12px | 400 | 16px | 0 | 徽标、小字 |
caption-mono | 12px | 400 | 16px | 0 | mono eyebrow |
code | 13px | 400 | 20px | 0 | 代码和终端 |
button-lg | 16px | 500 | 24px | 0 | 营销 CTA |
button-md | 14px | 500 | 20px | 0 | 导航和小按钮 |
原则：
- 大标题可以负字距；正文保持中性字距。
- 标题使用 sentence case，可用句点形成产品语气。
- mono 只表达技术层，不用于普通段落。
布局
基础间距单位是 4px。
| Token | 值 |
|---|---|
xxs | 4px |
xs | 8px |
sm | 12px |
md | 16px |
lg | 24px |
xl | 32px |
2xl | 40px |
3xl | 48px |
4xl | 64px |
5xl | 96px |
6xl | 128px |
section | 192px |
容器最大宽度约 1400px。桌面端内容横向 gutter 为 24px，移动端为 16px。 三列 feature、三列 pricing 和五列 template grid 都需要在移动端逐级降到单列。
响应式策略：
| 范围 | 行为 |
|---|---|
< 600px | hero 垂直堆叠，导航折叠，feature/pricing 变单列 |
600-959px | 三列 grid 降为两列 |
960-1199px | 完整三列 |
1200-1399px | 内容居中并接近最大宽度 |
>= 1400px | 背景全宽，内容保持 1400px 上限 |
层级与阴影
| Level | Treatment | 用途 |
|---|---|---|
| 0 Flat | 无阴影、无边框 | hero band、深色整段 |
| 1 Inset Hairline | 0 0 0 1px #00000014 inset | 默认卡片边界 |
| 2 Subtle Drop | 两层极弱投影 + inset hairline | template card |
| 3 Soft Stack | 中等弱投影 + inset hairline | feature card |
| 4 Float Stack | 较宽弱投影 + inset hairline | pricing、callout |
| 5 Modal | modal 级三层投影 + inset hairline | 弹窗、dropdown |
不要使用单个重投影。卡片边缘必须通过 inset hairline 保持清晰。
圆角
| Token | 值 | 用途 |
|---|---|---|
none | 0px | 全宽 band |
xs | 4px | 最小 inline 控件 |
sm | 6px | 导航按钮、输入框 |
md | 8px | feature/template card |
lg | 12px | pricing/card-large |
xl | 16px | 大图卡片 |
pill-sm | 64px | tab ghost |
pill | 100px | marketing CTA |
full | 9999px | icon button、ghost nav |
组件
Buttons
button-primary：黑色 100px pill，白字，营销主 CTA。button-secondary：白色 pill，黑字，hairline 边框。button-primary-sm：导航/卡片内小型黑色按钮，约 28-32px 高。button-secondary-sm：小型白色按钮。tab-ghost：白底 pill，用于居中 tab 行。icon-button-circular：圆形 icon button，白底，hairline 边框。
Cards
card-marketing：白底、24px padding、8px 圆角、Level 3 shadow。card-marketing-large：白底、32px padding、12px 圆角、Level 4 shadow。card-soft：canvas-soft背景的浅色卡片。template-card：白底、16px padding、8px 圆角，顶部 16:9 缩略图。code-editor-mockup：黑底 mono 代码面板，24px padding，8px 圆角。pricing-card：白底 pricing tier。pricing-card-featured：黑底反相 featured tier。
Forms
form-input：白底、hairline 边框、40px 高、6px 圆角。form-input-sm：32px 高。form-input-lg：48px 高，用于 hero CTA。
Navigation
nav-bar：白底、64px 高、sticky top、24px desktop padding。nav-link：14px 次级文字，hover 时使用 ghost pill。footer：白底 4 列导航，列标题使用 mono caption。
Signature Sections
hero-band：白底，mesh gradient 背景，mono badge、display-xl 标题、body-lg lead、CTA row。feature-mesh-band：带 mesh 氛围背景的二级 feature 区。showcase-band-light：canvas-soft背景。showcase-band-dark：黑底反相 section，常放 code editor mockup。logo-strip：单色 SVG logo row，24px 高。badge-secondary：浅灰小 pill。banner-marketing：顶部 announcement pill。link-inline：#0070f3正文链接，hover underline。
Do
- 使用
#171717作为主要 CTA 色。 - 营销 CTA 使用 100px pill；导航控件使用 6px 圆角。
- 标题使用 600 字重和 sentence case。
- 只在 hero / 大型 band 使用 mesh gradient。
- 使用 stacked shadows 和 inset hairline。
- 在浅色画布、白色卡片和黑色反相 band 之间建立节奏。
- 技术标签和代码使用 mono。
Don't
- 不新增第六种 accent 色。
- 不使用全大写标题。
- 不使用单个重投影。
- 不把 mesh gradient 缩小为图标或小色块。
- 不把展示字体加粗到 700/800。
- 不把正文设置为 mono。