排版与配色

页面好不好看，大约 80% 由排版决定（字号、字重、行距、对齐），剩下靠一套像样的颜色撑场面。不用懂代码。这张卡把每条规则都渲染成能直接看到的真实示例，照着对比，你就能准确告诉 Agent 怎么把字和颜色调对，也能一眼看出它哪里没调好。

1. 排版系统（Typography）

先定一套字号刻度（Type Scale）

别随手挑字号。开工前定一套刻度，然后坚持用它。推荐刻度（单位 px）：

每档用在哪：

用好字体（Good Fonts）

• 舍得用专业字体：免费字体能用，但好字体间距更好、字重更全，还带特殊功能。
• 选字重齐全的字体：至少要有 Regular(400)、Medium(500)、Semi-bold(600)、Bold(700)。
• 安全推荐：中性界面字体有 Inter、Source Sans Pro、Open Sans、IBM Plex Sans；易读的衬线正文字体有 Lora、Merriweather、Source Serif Pro。
• 别用系统默认字体做正经产品，它会传递"没花心思设计"的信号。
• 控制在 1 到 2 个字体家族：一个给标题、一个给正文（或两者用同一个）。

盯住你的行长（Line Length）

一行太长读着累。最佳行长是每行 45 到 75 个字符（约 20 到 35em 宽能达到）。宽屏上要限制内容宽度，别让文字铺满；或者用多栏布局，在宽屏里避免长行。

对齐基线，而不是居中（Baseline, Not Center）

把不同字号的文字放一起时（比如标题旁边挂一个徽标），要按基线（文字坐的那条隐形线）对齐，不要按中线居中。不同字号视觉重量不同，居中会显得没对齐；基线对齐才自然。

行距随字号变（Line-height Is Proportional）

行距（line-height）该随字号和行长变化，不要全文用一个值：

不是每个链接都要上颜色（Not Every Link Needs a Color）

在导航菜单、卡片标题这类地方，一看就知道能点，再加蓝色或下划线只会制造视觉噪音。链接样式（蓝色 / 下划线）只留给：

• 段落里的行内链接（需要从正文里跳出来）；
• 重要的 CTA（行动召唤按钮）。

页脚、导航、面包屑这类次要链接，跟周围文字同色，靠轻微的 hover 效果暗示可点就够了。

为可读性而对齐（Align with Readability）

用好字间距（Letter-Spacing）

• 大标题：稍微收紧字间距（-0.02em 到 -0.05em）。
• 全大写文字：一定要加宽字间距（+0.05em 到 +0.1em）。全大写不加间距会显得很挤。
• 正文：别碰字间距。字体在正文字号下本身就是最优间距。
• 小字：略微加宽字间距，提升小尺寸下的可读性。

2. 配色系统（Color）

丢掉 hex，改用 HSL（Ditch Hex for HSL）

HSL（色相 Hue、饱和度 Saturation、明度 Lightness）比 hex 直观：

• H 色相：色轮上 0 到 360°（0 是红，120 是绿，240 是蓝）。
• S 饱和度：0 到 100%（0 是灰，100 是鲜艳）。
• L 明度：0 到 100%（0 是黑，100 是白）。

用 HSL 你可以：调 L 做出深浅；调 S 让颜色更鲜或更灰；转 H 配出和谐色板；还能推算对比度和无障碍。

你需要的颜色比你以为的多（You Need More Colors）

一套完整的设计系统需要：

• 8 到 10 档灰（从近白到近黑）；
• 5 到 10 档主色（从极浅的着色到极深）；
• 每个强调色 5 到 10 档（成功绿、警告黄、危险红、信息蓝）；
• 合计 40 到 60 多个颜色值。

别想着 5 个颜色就够用。背景、边框、文字、图标、hover、禁用态，都需要不同档位。

提前定好你的各档颜色（Define Your Shades Up Front）

建色板的流程：

1. 定基准档，你会拿来做按钮背景的那个（取范围中间）。
2. 定最浅档，一个带色的浅背景（L 很高、S 很低）。
3. 定最深档，浅背景上可读的文字色（L 很低）。
4. 补中间档，在两极之间均匀分布出 5 到 9 档。
5. 逐档检验，浅档做背景、中档做边框 / 图标、深档做文字。

别让明度吃掉饱和度（Don't Let Lightness Kill Saturation）

只改 L 做深浅，颜色会发灰、掉鲜艳度。正确做法：

• 变亮时：把色相往最近的亮色转（青 180°、品红 300°、黄 60°），最多转 20 到 30°。
• 变暗时：把色相往最近的暗色转（红 0°、绿 120°、蓝 240°）。
• 离基准越远，越要加饱和度，极浅和极深档需要更高的 S 才不发灰。
• 不同颜色感知亮度不同：同样的 L 下，黄看起来比蓝亮得多。

灰不必是死灰（Greys Don't Have to Be Grey）

纯中性灰（#666、#999）显得没生气。更好的做法是给所有灰加一点点色调。

• 暖灰：掺一丝黄 / 橙色相，显得友好、有机。
• 冷灰：掺一丝蓝色相，显得干净、现代、专业。
• 饱和度压低（5 到 15%），让它仍读作"灰"，但显得是有意为之。
• 让灰的色调与你的品牌主色相呼应，整体更协调。

无障碍不等于丑（Accessible Doesn't Have to Mean Ugly）

WCAG 对比度要求：

• 正常文字：对比度至少 4.5:1。
• 大字（18px 粗体或 24px 常规以上）：至少 3:1。

做得又达标又好看：

• 翻转对比方向：与其在彩色背景上放深色文字（很难凑到 4.5:1），不如在浅色背景上放彩色文字。
• 用色相换对比：需要"彩底加浅字"时，挑天生更亮的色相（青、粉、黄），别一味拉高明度。
• 用 WebAIM Contrast Checker 这类工具检测。（工具链接以官方为准，本卡不内嵌外链。）

别只靠颜色传达信息（Don't Rely on Color Alone）

色盲用户（约 8% 男性、0.5% 女性）分不清只靠颜色区分的信息。补救：

• 颜色变化旁加图标或符号（向上箭头配绿色表示涨，向下箭头配红色表示跌）；
• 图表里用图案或纹理，而不只是不同颜色；
• 带颜色的状态指示加文字标签；
• 同时拉开明暗。即便色相在色盲眼里看着一样，深浅差异仍然有效。

（好例里圆形表示成功、方形表示失败，再加文字；就算看不出红绿，也分得清。）

3. 80% 法则：排版本身就是设计

排版大约占了多数界面设计的 80%。掌握下面这些，你的设计就会显得专业。

用排版搭建视觉层级

1. 字号对比：标题要明显大于正文（不是只大 2px）。
2. 字重对比：强调用粗、正文用常规、元数据用细。
3. 颜色对比：主内容深色、次要中灰、第三级浅灰。
4. 间距对比：标题上方留白多于下方（它"属于"后面跟着的内容）。

排版系统要定的变量

设计令牌（Design Tokens）的命名约定

用语义名，别用基于尺寸的名字。这样以后改实际尺寸时不用改名字。

卡住或拿不准，就把页面截图发给你的 AI 老师（Agent），问"按排版与配色原则，这页的字和颜色该怎么改？"