30 个原子，
和它们拼出来的东西

间距标度 Spacing Scale

所有间距只能从一个固定档位表里挑，通常是 4 的倍数。界面里永远不该出现 13px、17px、23px —— 那是"随手调的"，眼睛看不出为什么，但整体会散。
徽章、胶囊这类小元件常还需要一个 2px 的半档，页面级留白可以往上取 96；只要仍在同一张表上，就不算破例。

照抄这句所有间距对齐到 4pt 标度：常用 4/8/12/16/24/32/48/64，小元件内边距可用 2，页面级留白可用 96。不要出现这张表以外的数值。

亲密性 Proximity

间距编码关系 —— 靠得近的元素，人眼自动认为是一伙的。这是整个 UI 设计里最重要的一条，也是"业余感"最大的来源：标题离自己的正文，比离上一段还远。

照抄这句按亲密性重排间距：组内元素 8，组之间 24 或 32，保证组间至少是组内的两倍。

字号标度 Type Scale

字号同样只能从档位挑，档位由一个比例数连乘生成（常用 1.2 / 1.25 / 1.333）。比例越大层级越戏剧化，越小越克制。整个界面通常只需要 5–7 档。

照抄这句字号收敛到 12/14/16/20/25/31/39 七档（基准 16、比例 1.25），去掉所有档位外的字号。

字重 Font Weight

粗细。整个界面最多用三档（例如 400 正文 / 500 强调 / 700 标题）。新手的通病是靠加粗制造层级，结果满屏都是粗体 —— 全都在喊等于没人在喊。

照抄这句字重只保留 400 / 500 / 700 三档，正文一律 400，不要用加粗来做层级。

行高 Line-height

行与行的垂直距离，写成字号的倍数。规律：字号越大，行高倍数越小。正文 1.5–1.7，标题 1.1–1.25。行高不够读着窒息，行高过大句子会散架。

照抄这句正文 line-height 1.65，标题 1.15，不要用统一行高。

行长 Measure

一行能放多少字符。英文 45–75 字符，中文 30–45 字。超过就会跳错行。CSS 里一个 max-width: 65ch 就搞定 —— 这是性价比最高的一条排版规则。

照抄这句正文容器加 max-width: 65ch，不要让文字铺满整个屏幕宽度。

字距 Letter-spacing / Tracking

字符间距。规律和行高一样反着来：字越大越要收紧（负值），字越小越要放松（正值）。全大写和小号标签一定要放松，否则糊成一团。这是"廉价"和"精致"之间最细微也最有效的一刀。

照抄这句28px 以上标题 letter-spacing -0.03em；小号大写标签 +0.14em；正文保持 0。

圆角标度 Radius Scale

圆角也要成档（2 / 4 / 8 / 12 / 999）。而且有一条硬公式管嵌套：外圆角 = 内圆角 + 内边距。违反了会看到两条弧线不同心 —— 说不出哪不对，但就是别扭。

照抄这句圆角用 2/4/8/12 四档；嵌套时外层圆角 = 内层圆角 + 内边距。

色阶 Color Ramp

一个颜色不是一个色值，是一条从 50 到 950 的梯度。你要的从来不是"蓝色"，而是"蓝-600 做按钮、蓝-50 做背景、蓝-800 做文字"。现代做法用 OKLCH 生成，保证每一档的感知亮度均匀。

照抄这句用完整 50–950 色阶，不要临时凑色值：背景用 -50，描边用 -200，按钮用 -600，文字用 -800。

语义色 / Token 三层 Semantic Tokens

Token 是三级的，这才是它真正的价值所在。改主题只动第二层，第一层永远不动。有了这层结构，"把危险色调一下"是一次改动，没有它就是全局搜索替换。

照抄这句建立三层 token：primitive → semantic → component，组件里只准引用语义层，禁止硬编码色值。

中性色 Neutrals

界面 90% 的面积是中性色。两条规则：不要用纯黑纯白（#000 在屏幕上过刺，像挖了个洞）；中性色要带一点点色相偏向，偏向主色的方向 —— 纯灰读起来像"没选过"。

照抄这句不要用 #000 / #FFF；中性色向主色的色相偏 2–5 度，正文用 gray-800 而不是纯黑。

对比度 Contrast Ratio

前景色和背景色的亮度比值，有客观数值可算。及格线（WCAG AA）：正文 4.5:1，大字和 UI 元件 3:1。这不是加分项，是及格线 —— 而"字太浅看不清"是 AI 生成界面最高频的毛病。

照抄这句所有文字对比度必须过 WCAG AA：正文 ≥4.5:1，大字和图标 ≥3:1，把每个色对的比值算给我看。

海拔 / 阴影阶梯 Elevation

阴影不是装饰，是"这东西离页面多远"的编码。要成阶梯（4–5 档），越高的层阴影越大越散。而且真实的阴影是向下偏移的（光从上来），不是四面均匀发光。

照抄这句阴影用 5 档海拔阶梯，y 偏移和模糊半径同步增长；下拉用第 3 档，模态用第 4 档。

暗色模式 Dark Mode

暗色不是把颜色反转。三条独立规则：① 降饱和 —— 亮色在暗底上会刺眼振动；② 用「提亮」代替「投影」表达层级 —— 黑底上的黑影是看不见的；③ 底色不要纯黑，用 #0C0F10 这类近黑。

照抄这句做暗色时不要反转：降低饱和度，用背景提亮代替阴影表达层级，底色用近黑不用纯黑。

视觉层级 Visual Hierarchy

让人一眼知道先看哪儿。你手上有六种手段，按有效强度排序如下。新手只会用「尺寸」和「字重」，于是所有元素同时在喊；老手先用「留白」和「明度」，安静得多也有效得多。

照抄这句层级优先用留白和明度对比来做，不要靠加大字号和加粗；每屏只允许一个视觉焦点。

留白 White Space

留白不是"还没填的地方"，是主动划出的呼吸区。分外白（区块之间）和内白（元素内部 padding）。密的界面显得廉价而焦虑，不是因为元素丑，是因为没给它们空间。

照抄这句卡片内边距至少 20，区块之间至少 48；宁可减内容也不要减留白。

对齐 Alignment

每条隐形的对齐轴都是一次视觉承诺。一屏里的对齐轴越少越整齐 —— 通常两条足够（一条主轴 + 一条缩进轴）。新手界面常有四五条互不相干的左边界，说不出哪乱，但就是乱。

照抄这句把左对齐轴收敛到两条：主轴和一条 30px 缩进轴，去掉所有零散缩进。

一致性 / 重复 Consistency & Repetition

同一种东西必须长得完全一样。三张并排卡片，圆角一个 6 一个 8 一个 10，人眼察觉得到但意识不到 —— 结果是"这页面有点廉价"。一致性是设计系统存在的全部理由。

照抄这句抽出一个统一的卡片组件，所有卡片共用同一套圆角/内边距/边框，不允许逐个微调。

视觉重量与平衡 Visual Weight

每个元素都有"视觉重量"，由面积 × 明度 × 饱和度共同决定。一小块高饱和的色，重量等于一大片灰。所以主按钮不用做大，只要它是全屏唯一的实心色块就够。

照抄这句整屏只允许一个高饱和实心按钮，其余动作用描边或纯文字按钮。

光学修正 Optical Adjustment

数学居中 ≠ 看着居中。三角形、图标、引号、圆形都要手动补偿。经典案例是播放按钮 —— 三角形几何居中时永远看着偏左，必须右移约 8%。这条是"精致"的最后一公里。

照抄这句播放三角、图标做光学居中补偿，不要只用 flex center。

gap 而非 margin Spacing Ownership

一条能消掉一半布局 bug 的规则：间距属于容器，不属于元素。子元素不该自带 margin 来决定"我离别人多远"，应该由父容器的 gap 统一决定。margin 会塌陷、会叠加、会在复用时打架。

照抄这句用 flex/grid + gap 布局，禁止子元素自带 margin，也不要写 :last-child 清间距的补丁。

Flex 还是 Grid Flex vs Grid

心智模型只有一句话：Flex 管一维（一行或一列），Grid 管二维（行列同时管）。工具栏、按钮组、列表项内部 → Flex。页面骨架、卡片墙、表单双列 → Grid。

照抄这句页面骨架用 Grid，组件内部一行元素用 Flex，不要用 Flex 硬凑二维布局。

栅格 Grid System

把内容区横向切成 12 等份（因为 12 能被 2/3/4/6 整除），所有元素的宽度都是整数份。加上一个容器最大宽度（常见 1120–1280），页面就不会在大屏上散架。

照抄这句用 12 栏栅格，gutter 24，容器最大宽 1200；主内容 span 8、侧栏 span 4。

响应式 Responsive & Container Query

老做法是断点（看屏幕多宽）。新做法是容器查询（看自己所在的容器多宽）—— 同一个卡片放侧栏里是竖版、放主区里是横版，组件自己就知道，不用外面配合。

照抄这句页面骨架用媒体查询断点，组件内部改用 container query，让组件自适应容器而不是屏幕。

密度 Density

同样的信息，可以铺得紧也可以铺得松。密度由使用场景决定：专业工具（金融终端、后台表格）要紧，让人一屏看到更多；消费产品要松，让人放松。一个产品里密度必须统一。

照抄这句把密度抽成 token（compact/cozy/roomy），全站统一用一档，不要逐个组件调 padding。

组件解剖 Anatomy

每个组件都能拆成有名字的部位。学会这套黑话，你就能精确指到某一块：不是"右边那个小东西"，而是"trailing 区的 badge"。几乎所有组件都是这四段结构。

照抄这句在 trailing 区加一个计数 badge，leading 保持头像，label 两行不变。

状态 States

一个可交互元素不是一个样子，是九个样子。模型默认只给你 default 和 hover —— 剩下七个要你主动要。其中 focus-visible 最常被漏，而它是键盘用户唯一的方向感。

照抄这句给每个可交互元素补齐九态：default/hover/active/focus-visible/disabled/loading/selected/error/empty。

变体矩阵 Variant Matrix

定义一个组件 = 填一张二维表：变体（primary / secondary / ghost / danger）× 尺寸（sm / md / lg）。把表填完，组件就定义完了 —— 这是最容易交给模型的一类活。

照抄这句按 variant×size 矩阵实现按钮：primary/secondary/ghost/danger × sm/md/lg，每格都要有完整九态。

界面的五种状态 The Five States

这条对你和模型协作最值钱。任何一块展示数据的区域都有五种状态，而模型默认只做第五种（理想态）。把这五个字当验收清单用，一次能拦下大半返工。

↑ 点标签切换。注意空态不是一片空白 —— 它是引导用户迈出第一步的地方，是新手最重要的一屏。

照抄这句这个模块把五态都做出来：空、加载、部分、错误、理想。空态要有引导文案和主行动按钮。

动效 Motion

两个参数：时长（UI 动效 120–300ms，超过 400ms 就觉得卡）和缓动曲线（进场用 ease-out 快起慢停，出场用 ease-in）。linear 是机器人的动法，几乎永远是错的。

照抄这句过渡统一 150ms ease-out，进场 ease-out、出场 ease-in，禁止 linear，并加 prefers-reduced-motion 兜底。