设计系统定位
对齐 ui-ux-pro-max 的「Style + Typography + Color + UX」组合策略：先定义信息结构，再定义视觉语言，最后约束交互与可访问性。
Grid
12 列网格 + 固定间距节奏
12 列网格 + 固定间距节奏
Hierarchy
H1/H2/Body 明确语义层级
H1/H2/Body 明确语义层级
Density
中高信息密度但可快速扫描
中高信息密度但可快速扫描
关键词
Swiss GridEditorial RhythmFunctional ClarityNeutral PaletteHigh Legibility
配色系统（Color Mood）
中性底色 + 单强调色，避免风格漂移。
Background#F4F4F1
Surface#FFFFFF
Text#101418
Muted#55606F
CTA#EA5B2A
字体与排版（Typography Mood）
- 标题：偏几何无衬线，突出决策信息。
- 正文：高可读字体，行高 1.55-1.75。
- 每行字符建议 60-75 字符，避免阅读疲劳。
反模式（Anti-patterns）
- 过多渐变、阴影和装饰性纹理，削弱信息优先级。
- 标题层级混乱（大小仅差 1-2px），导致结构不可读。
- 动画位移过大，破坏稳定感。
交付前检查（Pre-delivery Checklist）
- 可点击元素均具备明显状态变化与 cursor: pointer。
- 焦点样式在键盘导航下清晰可见。
- 移动端 375px 不出现横向滚动。
- 核心内容在首屏 8 秒内可被用户扫读理解。
示例组件区
操作组件
展示按钮层级与表单输入状态。
数据组件
CTR6.8%
Conv.3.2%
Engagement+18%
NPS52