先排优先级
一屏一个视觉主动作。标题、说明、元数据和入口按稳定顺序出现。
01 · Principles
三条规则，优先于所有装饰
简约不等于信息少；它意味着每一种视觉差异都有任务，用户不必先理解设计师的表达再寻找入口。
颜色必须有语义
一个墨蓝负责链接、选择与焦点；红黄绿只表达真实状态，不负责热闹。
结构制造质感
优先使用对齐、留白与分隔线。圆角、阴影和动效必须说明理由。
02 · Tokens
暖灰画布与单一墨蓝
中性色承担绝大部分面积。强调色只用于用户可以行动或需要注意的位置；点击右上角可实时检验深色主题。
Canvas
#F7F7F5Surface
#FFFFFFInk
#1B1B1AMuted
#5F625EAccent
#2E5EAASelected
#E9F0FA03 · Typography
熟悉、舒适、层级稳定
默认使用系统字体，只保留常规与半粗两类视觉权重。中文正文靠适当行高提高舒适度，不靠陌生字体制造风格。
H1
研究、构建与持续记录
H2
把复杂问题整理成清楚入口
BREAK
把研究、系统与工具做成可用的长期资产
BODY
好的个人网站不需要同时证明它会多少种视觉效果。它应帮助访客迅速理解内容，并在需要深入时提供稳定、可预测的路径。
SMALL
中文、English、123 与 code 混排测试
05 · Page Pattern
首页不是卡片展览
身份、核心入口与精选内容依次展开。页面可以信息丰富，但不需要给每项信息不同的颜色和容器。
06 · Visual References
借鉴规则，不复制品牌外观
这些官方资料分别支撑内容优先、排版尺度、网格、语义令牌与无障碍门槛。每一项都直接链接到原始来源。
W3C / WCAG 2.2
对比度、回流、焦点可见与目标尺寸构成可测试底线。
阅读标准 ↗GOV.UK
从用户需求出发、做得更少，并用清晰布局控制长文行宽。
查看布局 ↗U.S. Web Design System
用 measure token 约束行长；长文目标约 66 字符。
查看排版 ↗IBM Carbon
8px mini unit、productive/expressive 分工与克制动效。
查看网格 ↗GitHub Primer
用 functional token 表达用途，避免组件直接消费原始色值。
查看颜色 ↗Microsoft Fluent 2
用 alias token 跨主题保持一致的语义角色。
查看令牌 ↗Apple HIG
减少字体数量、避免过细字重，并协同使用字号、字重与颜色。
查看排版 ↗Tuch et al.
视觉复杂度与原型熟悉度会在极短暴露下影响第一印象。
查看研究 ↗