Constructivism · Design Notes
9 条形式法则 / 设计系统 / 交互模式 / 踩坑清单
这一组文档记录的是「设计 HTML」这件事本身：一个具体风格的美学考据， 加上实现过程中沉淀下来的、可跨项目复用的规则与踩坑。 所有关键数值都经过实测或精算，未验证的部分明确标注。
目的：把「构成主义」从一堆风格印象，压缩成可以照着做决策的形式规则。 阅读顺序：先看第 0 节建立坐标系，再看第 3 节的九条形式法则（这是真正要用的部分），第 2 节的代表作…
A这是一份可直接翻译成 CSS 变量的规格书。所有色值都经过 WCAG 对比度实测，所有字体都经过西里尔覆盖核实——不是凭感觉挑的。 实测方法与版本见文末"数据来源与验证状态"。
A验证规则：本清单中每一条都标注了验证方式。星数与许可证来自 api.github.com 的实际返回（不是搜索结果摘要），字体西里尔覆盖来自 Google Fonts 官方元数…
A每个配方都给出：要解决什么视觉问题 → 可复制代码 → 坑 → 兼容性。 兼容性结论来自 MDN 页面上的 Baseline 标识（本环境实测抓取），不是凭印象。
A目标风格：强对角线构图、红/黑/白三色撞色、巨型无衬线大写标题、几何原语（楔形/射线/圆环）、文字沿斜线或沿路径、半调网点、套印错位、纸张颗粒、硬边零圆角。
A检索时间：2026-10-12（Asia/Shanghai） 所有 URL 均为本次实际访问到的页面。凡无法验证的一律写「未找到」，不做记忆推测。
B本文件只记录能跨项目复用的规则与数值。具体到「构成主义」这一风格的美学考据在 01-美学谱系与形式法则.md，实现配方在 04-技术实现手册.md。 全目录导航见 README…
B提取自 soviet-press 的「报纸 → 海报 → 文章抽屉」两级返回。 这套模式解决的是一个很常见、但多数实现都会做错的问题： 点击驱动的状态机，返回键和 ESC 行为…
B每一条都是本次实际踩到并修掉的，不是从文档里抄的。 格式：现象 → 原因 → 修法 → 可复用判据。 其中很大一部分只有靠"截图看"或"算一遍"才能发现 —— 看代码是看不出来…
B本次抓到的问题里，大多数靠看代码发现不了。这份文档是那套"能真的抓到问题"的验证手段。 配套脚本在仓库的 src/verify/，可直接改路径复用。
B这个文件夹装的是「设计 HTML」这件事本身的经验：一个具体风格（构成主义）的美学考据， 加上从实现过程中沉淀出来的、可跨项目复用的规则与踩坑。 边界：动画 / 视频那条线不在…