基础 · FOUNDATION
设计原则 Principles
高级、克制、好上手。三个字：墨 · 纸 · 朱。进来就安静下来，觉得「这很简单，我马上能开始」。
纲领：一体感，不是数字苛政
目标只有一个：整个网站看起来是一块材料切出来的。每个板块共用同一套视觉词汇，而不是东一块西一块各说各话。
数字（4 和 8 的倍数）只是手段。当所有间距、高度、圆角都取自同一把梯子，画面自然产生统一的呼吸节奏，拼凑感就消失了。所以规则很简单：需要一个尺寸时，不要发明数字，从梯子上取一档。 拿不准取哪档，就看同类组件用了哪档，跟它一致——一致性比精确性重要。
五条原则
| 原则 | 意思 | 落到界面上 |
|---|---|---|
| 一屏一枚朱印 | 红只出现一次，永远标「你在这里 / 下一步」 | 朱色是导航信号，不是装饰；同屏第二处红就是错 |
| 留白即上手 | 首页至少八成是留白 | 能收进次级入口的，绝不摆在主动线上 |
| 设计语言自解释 | 不需要教程 | 看到红就知道点哪，看到卡片就知道能进；圆＝徽章不可点，方角＝控件可点 |
| 剧场只在首次 | 开屏动画只播一次、可跳过 | 产品内动效 150–250ms，只传递状态；尊重减少动效设置 |
| 地图即导航 | 阶段顺序＝解锁顺序＝侧栏顺序 | 三者同构，用户不用在脑子里做换算 |
两条铁律
✓ 要**光影铁律**：阴影只从质感类（
.zzm-btn .zzm-card .zzm-input）取，组件里禁止散写 box-shadow。一体感来自全站共用同一个光照模型✓ 要**按钮禁胶囊**：文字按钮一律圆角矩形（sm/md 8 · lg 12），999 胶囊只留给不可点的徽章
不要做的事
✗ 不要鲜艳纯红。红必须是哑光的朱砂 / 印泥色，而且用量极少
✗ 不要营销优先的首屏：大 Hero、多个 CTA、社交证明横幅。第一眼必须是学习内容本身
✗ 不要奶油色、米色暖纸底。白就是中性白，不偏暖
✗ 不要打卡中断、红点焦虑这类胁迫式活跃机制。地图只照亮位置，不制造焦虑
✗ 不要模糊背景（backdrop-filter）。性能代价大，全域禁用
✗ 不要网络字体。系统字体就是这套系统的一部分
无障碍
- 正文对比度达到 WCAG AA（≥ 4.5:1）。
- 全站尊重
prefers-reduced-motion：开屏降级为静帧，动画与过渡时长压到 0.01ms。 - 键盘可达：焦点可见，统一为朱色光晕
0 0 0 3px rgba(166,64,47,.2)。 - 红色只做冗余信号：同时有图标或文字，不单靠颜色传达意思。
跨项目复用：移植骨，不移植皮
这套系统诞生在「纸·墨·朱」网页课程站里。带到别的产品时：
- 可以直接搬：间距梯、控件高度梯、圆角梯、细线三档、五层光照模型的结构。
- 要重新标定：品牌朱
#A6402F和纸面#F6F6F4属于课程站的身份；微拟物凸键的强度在网页上成立，搬进 macOS 原生窗口会显旧，保留五层结构、把幅度降一个数量级。 - 深色界面：顶部反光要从
rgba(255,255,255,.88)左右降到.055左右——深底上任何高于 .1 的白线都会变成刺眼亮边；投影要加深。