扁平化

# 扁平化 (Flat Design)

你正在构建一个前端界面。请在每一个页面和组件中一致地应用 **扁平化** 视觉风格。下面的 design tokens 和规则是硬性约束，而不是参考建议。

## 本质

对拟物的彻底反叛：没有渐变、没有投影、没有材质，用大面积纯色块、简洁图标和清晰的文字组织界面。它让界面更轻、更快，也更适应各种屏幕尺寸。

## Design Tokens

### 色彩

- `background` `#ECF0F1` — 页面背景
- `surface` `#FFFFFF` — 卡片、面板等浮起的表面
- `text` `#2C3E50` — 主要文字
- `muted` `#566573` — 次要文字、说明、占位符
- `accent` `#2471A3` — 主要操作、链接、关键强调
- `on-accent` `#FFFFFF` — 放在强调色上的文字与图标
- `border` `#BDC3C7` — 分隔线、描边、输入框边框
- `highlight` `#F1C40F` — 次级强调、徽标、选中态

### 字体排印

- 展示 / 标题字体: `Lato` (Google Fonts, 字重 700 / 900) → fallback `"Helvetica Neue", "Segoe UI", Arial, sans-serif`
- 正文字体: `Lato` (Google Fonts, 字重 400 / 700) → fallback `"Helvetica Neue", "Segoe UI", Arial, sans-serif`
- 字号阶梯（px）: 12 · 14 · 16 · 20 · 26 · 36 · 52

### 间距 & 形状

- 基础单位: 8px · 间距阶梯（px）: 8 · 16 · 24 · 32 · 48 · 64
- 圆角（sm / md / lg）: 4 / 6 / 8 px
- 边框: 2px solid
- 阴影（sm / md / lg）: 无 / 无 / 无

### 动效

- 时长（fast / base）: 150ms / 250ms
- 缓动曲线: `ease-out`

### 标志性效果

- `--flat-turquoise`: `#1ABC9C`
- `--flat-orange`: `#E67E22`
- `--flat-red`: `#E74C3C`

## 要这样做

- 全部使用纯色填充，不使用任何渐变、阴影、高光或纹理。
- 用一组明亮的纯色（青绿 #1ABC9C、橙 #E67E22、红 #E74C3C、黄 #F1C40F）作为区块色。
- 按钮使用纯色实心与 4–6px 圆角，悬停只改变颜色明度。
- 图标使用单色简单几何图形，放在纯色圆形中。
- 用全宽的纯色色带分隔页面区块。

## 不要这样做

- 不要使用 box-shadow、text-shadow 或渐变。
- 不要使用写实图标、照片纹理或拟物控件。
- 不要在亮色块上放置小号白色正文。
- 不要让按钮在视觉上和普通文字无法区分。

## 组件指南

- **按钮**: 纯色实心按钮，小圆角、无阴影无渐变；悬停时颜色略微变亮，按下时略微变暗。次按钮为 2px 同色描边。
- **卡片**: 白色卡片，没有阴影，用浅色背景或 2px 浅灰描边与页面区分；顶部可以有一条纯色色带。
- **表单**: 输入框为 2px 浅灰描边、白底，聚焦时描边变为主色；不使用内阴影。
- **导航**: 纯色顶部栏，白色文字链接；当前项用底部色条或背景色块标记。
- **布局**: 整块的纯色区块（全宽色带）分隔内容，网格清晰，留白充足。
- **图像与图标**: 纯色几何插画与单色图标，常放在彩色圆形中；不用写实照片质感。

## 可访问性

- 许多经典扁平配色（如青绿、橙色）上的白字达不到 4.5:1，正文请使用更深的颜色或深色文字。
- 可点击元素要有明确的形状（实心按钮、下划线链接），不要只靠颜色区分。

_由风格博物馆（Style Museum）生成。_