不改代码观感翻倍：把设计变量用对

色板、字号阶梯、间距刻度、圆角阴影——四组变量定下来，整个站的观感就稳了。

模板结构都好，换上自己的内容后观感下降，多半不是内容的问题，而是变量失控：字号随手给、间距凭感觉、颜色越加越多。解决办法是把四组变量先定死。

色板：一个主色走天下

• 主色最多一个，用在选中态、主按钮、强调链接

• 强调色最多一个，且比主色更「跳」，只给 CTA 用

• 灰阶三级足够：正文、次要文字、占位与边框各一档

• 正文与背景的对比度别低于 4.5:1，移动端室外全靠它

FORMA 编辑器的主题色改一处全站生效，先在编辑器里试，比导出后再改 CSS 省事。

字号：用倍数，不用感觉

以正文 1rem（15 或 16px）为基准，往上走倍数阶梯：

--text-sm: 0.875rem    /* 辅助说明 */
--text-base: 1rem      /* 正文 */
--text-lg: 1.25rem     /* 小标题 */
--text-xl: 1.5rem      /* 区块标题 */
--text-2xl: 2.25rem    /* 页面大标题 */

全站字号只从这个列表里挑，层级自然统一。行高正文给 1.6 到 1.8，标题压到 1.2 左右，中文行高太紧会粘在一起。

间距：4 的倍数

间距刻度用 4 的倍数：4 / 8 / 16 / 24 / 32 / 48 / 64。经验值：卡片内部留白 16 到 24，区块之间 48 到 96。两个区块如果看起来「分不清谁和谁一组」，问题九成是间距没用刻度，而是随手写了 13、27 这种数。

圆角与阴影：成对出现

圆角全站统一一个值（8 或 12），按钮、卡片、输入框都一致。阴影最多两档：一档给悬停反馈，一档给弹层。圆角忽大忽小、阴影五颜六色，是模板站最容易露馅的地方。

落地顺序

• 先定色板，再定字号阶梯，然后间距刻度，最后圆角阴影

• 在 FORMA 里改主题色验证一遍，导出后用 CSS 变量做细粒度覆盖

• 定完之后写一个一页纸的变量表，后面所有页面照表执行，不再临时发明数值