中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
ink长文阅读、文化内容、需要安静的界面
| 正文 / 底 | 10.86:1 | ✅ |
| 标题 / 底 | 15.94:1 | ✅ |
| 辅助 / 底 | 5.06:1 | ✅ |
| 主色 / 底 | 13.06:1 | ✅ |
DESIGN.md 是给 AI 编程工具读的设计系统文档。丢进项目根目录, AI 生成界面时就照着里面的规则来,不用你每次描述一遍。
DESIGN.md,粘贴进去按照项目根目录 DESIGN.md 里的设计规范,实现这个页面
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
ink长文阅读、文化内容、需要安静的界面
| 正文 / 底 | 10.86:1 | ✅ |
| 标题 / 底 | 15.94:1 | ✅ |
| 辅助 / 底 | 5.06:1 | ✅ |
| 主色 / 底 | 13.06:1 | ✅ |
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
neo家居、生活方式、品牌官网 · 最百搭
| 正文 / 底 | 10.44:1 | ✅ |
| 标题 / 底 | 15.63:1 | ✅ |
| 辅助 / 底 | 4.87:1 | ✅ |
| 主色 / 底 | 4.46:1 | ⚠️ |
⚠️ 主色 4.46:1 未达 AA —— 只用于色块、边框、24px 以上大字,不要写正文
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
song茶饮、书店、高端服务
| 正文 / 底 | 9.61:1 | ✅ |
| 标题 / 底 | 14.63:1 | ✅ |
| 辅助 / 底 | 4.23:1 | ⚠️ |
| 主色 / 底 | 2.83:1 | ⚠️ |
⚠️ 辅助文字 4.23:1 · 主色 2.83:1 未达 AA —— 只用于色块、边框、24px 以上大字,不要写正文
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
azurite文旅、展览、需要贵气的场景
| 正文 / 底 | 10.32:1 | ✅ |
| 标题 / 底 | 14.69:1 | ✅ |
| 辅助 / 底 | 4.96:1 | ✅ |
| 主色 / 底 | 5.65:1 | ✅ |
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
bamboo健康、教育、环保
| 正文 / 底 | 10.89:1 | ✅ |
| 标题 / 底 | 15.45:1 | ✅ |
| 辅助 / 底 | 4.88:1 | ✅ |
| 主色 / 底 | 4.54:1 | ✅ |
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
vermilion节日、活动页、转化页
| 正文 / 底 | 12.11:1 | ✅ |
| 标题 / 底 | 17.10:1 | ✅ |
| 辅助 / 底 | 5.73:1 | ✅ |
| 主色 / 底 | 5.57:1 | ✅ |
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
dunhuang文化 IP、叙事型页面
| 正文 / 底 | 9.40:1 | ✅ |
| 标题 / 底 | 14.06:1 | ✅ |
| 辅助 / 底 | 4.72:1 | ✅ |
| 主色 / 底 | 4.76:1 | ✅ |
中文网页丑,八成不是设计问题,是排版问题。行高 1.75、行宽 38em、 着重号代替斜体,这些写进了设计系统本身。
night影音、夜间模式 · 唯一深色
| 正文 / 底 | 12.24:1 | ✅ |
| 标题 / 底 | 15.47:1 | ✅ |
| 辅助 / 底 | 5.51:1 | ✅ |
| 主色 / 底 | 7.59:1 | ✅ |
这一节是 8 套共用的,也是和西文设计系统差别最大的地方。
| 规则 | 值 | 为什么 |
|---|---|---|
| 行高 | line-height: 1.75 |
中文字面率高、没有 x-height 起伏,行高比西文需要更大。1.5 会挤 |
| 行宽 | max-width: 38em |
中文每行 30–40 字最舒服。西文常用的 65ch 换算成中文太长 |
| 对齐 | text-align: left |
不要用 justify。中文没有词间空格,两端对齐会拉出难看的字距 |
| 断行 | line-break: strict |
CJK 避头尾:。,、)」不出现在行首,(「不出现在行尾 |
| 强调 | text-emphasis: dot |
中文不用斜体。宋体黑体没有真正的意大利体,浏览器做机械倾斜很丑,用着重号 |
| 中英间距 | 加一个空格 | 「使用 AI 工具」比「使用AI工具」易读——这叫盘古之白 |
| 字体栈 | PingFang SC → Microsoft YaHei → Noto Sans CJK SC |
分别覆盖 macOS/iOS、Windows、Linux/Android。缺一个就有一批人看到系统默认字体 |
色值取自本项目自己的 CSS 实现,不代表任何传统色的权威标准——传统色在不同文献里本就有出入。
这 8 套是美学传统的提炼,不是对任何公司视觉的复刻。
没有覆盖数据可视化配色和繁体中文场景(台标/港标字形与断行规则略有不同)。
深色只有「夜宴」一套,其余 7 套是浅色系统。