图像规范
模板中图片占位的统一约定——比例、加载、缩放。45 个模板遵守同一套规则。
画幅比例 16:10
比 16:9 多 6% 纵高，中文排版不局促；比 4:3 更接近现代屏幕。MacBook 原生比例，mockup 事实标准（1440×900、1920×1200）。
骨架屏占位
图片加载前用纯 CSS 骨架屏占位，避免布局偏移（CLS）。@keyframes 驱动 opacity 脉冲，零 JS 依赖。骨架条宽度递减模拟真实行长分布。
transform scale 缩放
hover 缩放用 transform: scale()，不走 width/height。transform 在 GPU 合成层执行，不触发 reflow，60fps 平滑。配合 overflow: hidden 裁切边缘。
配色库
8 套 oklch 色板，按行业分类。每套含主色、辅色、中性色、语义色四层，可直接复制为 CSS :root。
即将上线
配色库正在从 45 个模板中提炼行业通用色板，敬请期待。
字体配对
6 套中英文字体组合，覆盖正文/标题/代码三场景。每套标注适用风格和字体回退栈。
即将上线
字体配对库建设中——从模板中提炼已验证的中英文组合方案。
设计原则
版式画廊遵循 7 条通用设计原则 + 5 条 AI 输出约束。不是宣言，是每个模板通过 P0 门禁前的检查清单。
通用设计原则 · 7 条
唯一真相源
每条数据只有一个家。tokens.json 是视觉属性的唯一权威，所有视图从它派生。不因展示需要建冗余数据副本。
语义优先
命名表达意图而非数值。--color-primary 而非 --blue-500。变量名自述其设计角色，读者无需查色值表。
少即是多
不添加未请求的功能。三个一样的才算模式。不处理不可能发生的错误。200 行能压到 50 行则不压。
工具退后
设计工具服务于设计系统，不是反过来。token 文件是人类可读的 JSON，不是某个工具的专有格式。
静态优先
默认交付纯 CSS + 语义 HTML。JS 是增强层，不是依赖项。无 JS 环境下页面核心体验不受损。
诚实
不把推测包装成事实，不把个案包装成规律。不确定的说"不确定"。数字断言必须跑程序验证。
精确到底
字号、行高、字距、对比度——每个视觉决策有可量化依据。设计审查不看"感觉"，看数据。
AI 输出约束 · 5 条
可审计性
所有 CSS 值从 :root 变量派生。任何视觉属性可沿变量链追溯到 tokens.json 源值。审计路径完整、机械、不可绕行。
确定性
同一份 tokens.json + 同一份 template.html = 逐像素一致的输出。消除环境差异、时间差异、模型随机性。
排版即编辑
版式的第一职责是传达内容结构。标题、正文、标注之间的层级关系依靠字号和间距，不依靠颜色或装饰。
CSS 是接口协议
模板通过 CSS 自定义属性声明自己的视觉合约。外部工具（验证器、品牌渲染器、对比度检查器）通过读 tokens.json 与模板通信。
按面分级
颜色、间距、圆角、阴影、动效——每层独立声明，不耦合。换色不碰间距，调间距不染半径。分层即分责。
推荐资源
设计工程领域的经典书籍与常用工具——覆盖排版、配色、设计系统、CSS 工程。
《The Elements of Typographic Style》
Robert Bringhurst 著。排版圣经，网页排版的底层逻辑都在这本书里。
《Thinking with Type》
Ellen Lupton 著。从字母结构到网格系统，适合设计师和前端工程师共读。
《Refactoring UI》
Adam Wathan & Steve Schoger 著。从程序员视角讲界面设计，实用至上。
《Designing with Type》
James Craig 著。字体选择与组合的系统方法论。
《Grid Systems in Graphic Design》
Josef Müller-Brockmann 著。网格系统的开山之作，理解 layout 的底层逻辑。
《Practical Typography》
Matthew Butterick 著。在线免费，网页排版实操指南，字体选择、行距、对比度的具体建议。