零阴影零渐变
box-shadow: none。层级由纯色与留白决定，而非光影——界面因此干净且加载极快。
- 类别 通用风格
- 年代 2010s 现代
- 复杂度 低
- 最适合 Web 应用 · 移动端 · SaaS · MVP
- 性能 极快加载
扁平三原则
用颜色与留白区分层级，用图标与粗体构成动线，用毫秒级交互保持轻快。
图标先行
简化 SVG 图标一眼即懂，配合 800 字重标题构成快速扫读的视觉动线。
轻快响应
交互只做 150–200ms 的颜色与透明度偏移，无重绘负担，体验快如静态页。
按钮与控件
状态变化只用颜色表达：悬停加深一档，按下再深一档，禁用转灰。
限时特惠
v2.0
全部控件不小于 44px 触控高度；焦点环为 3px 活力橙，键盘可达。
开始 14 天试用
三个字段，一分钟完成。无需信用卡，随时取消。
配色板
六色封顶：四个高饱和功能色，加一深一浅两个中性色。
#2471A3主蓝 · 操作
#C0392B警示红 · 危险
#1E8449成功绿 · 通过
#E67E22活力橙 · 强调
#22313F墨青 · 文本
#ECF0F1云灰 · 面板
字体级阶
Rubik 的几何骨架与圆润端点，正好落在「友好」与「利落」的中间。
扁平 Flat
内容优先，装饰归零
扁平化在 2010 年代重塑了整个互联网：当阴影与纹理退场，颜色、字重与间距成为仅有的三种语气。
Flat · No Shadow