Material Design

# Material Design (材料设计)

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

## 本质

Google 提出的设计系统：把界面想象成一张张有厚度的"数字纸"，用高度（elevation）和阴影表达层级，用鲜明的主色和有意义的动效引导操作，按压时像墨水一样扩散出涟漪。

## Design Tokens

### 色彩

- `background` `#F6F5F8` — 页面背景
- `surface` `#FFFFFF` — 卡片、面板等浮起的表面
- `text` `#1D1B20` — 主要文字
- `muted` `#5F5B66` — 次要文字、说明、占位符
- `accent` `#6200EE` — 主要操作、链接、关键强调
- `on-accent` `#FFFFFF` — 放在强调色上的文字与图标
- `border` `#C9C5D0` — 分隔线、描边、输入框边框
- `highlight` `#03DAC6` — 次级强调、徽标、选中态

### 字体排印

- 展示 / 标题字体: `Roboto` (Google Fonts, 字重 400 / 500) → fallback `"Helvetica Neue", Arial, sans-serif`
- 正文字体: `Roboto` (Google Fonts, 字重 400 / 500) → fallback `"Helvetica Neue", Arial, sans-serif`
- 字号阶梯（px）: 12 · 14 · 16 · 20 · 24 · 34 · 48 · 60

### 间距 & 形状

- 基础单位: 8px · 间距阶梯（px）: 4 · 8 · 16 · 24 · 32 · 48 · 64
- 圆角（sm / md / lg）: 4 / 4 / 8 px
- 边框: 1px solid
- 阴影（sm / md / lg）: `0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12)` / `0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12)` / `0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12)`

### 动效

- 时长（fast / base）: 150ms / 250ms
- 缓动曲线: `cubic-bezier(0.4, 0, 0.2, 1)`

### 标志性效果

- `--primary-variant`: `#3700B3`
- `--on-highlight`: `#000000`
- `--error`: `#B00020`

## 要这样做

- 用规范的 elevation 阴影表达层级：卡片 1dp、按钮 2dp、应用栏 4dp、FAB 6dp。
- 主要操作使用实心主色按钮，文字大写、中等字重、4dp 圆角。
- 为可点击元素加上按压涟漪和 8% 透明度的悬停状态层。
- 使用 Roboto 与 Material 字阶，间距遵循 8dp 网格。
- 动效使用标准缓动 cubic-bezier(0.4, 0, 0.2, 1)，时长 150–300ms。

## 不要这样做

- 不要使用硬投影、描边投影或彩色阴影。
- 不要在一个页面上使用多个浮动操作按钮。
- 不要用主色填充大面积背景。
- 不要使用玻璃模糊或拟物纹理。

## 组件指南

- **按钮**: 主按钮为实心主色、2dp 阴影、4dp 圆角，文字大写、中等字重；次按钮为描边或纯文字按钮。按压时出现涟漪，悬停时阴影升高。
- **卡片**: 白色卡片、8dp 圆角、1dp 阴影，悬停或选中时升高到 8dp；操作按钮放在卡片底部的操作区。
- **表单**: 填充式（filled）或描边式文本框，标签在框内上方；聚焦时底部指示线变为主色并加粗。
- **导航**: 主色顶部应用栏（App Bar），带 4dp 阴影；当前标签用底部指示条标记，主要操作用浮动操作按钮（FAB）。
- **布局**: 8dp 网格，卡片式布局，内容放在浅灰背景上的白色表面中。
- **图像与图标**: 鲜明的扁平插画或满幅照片，图标使用 Material Icons 一类的线性或填充图标。

## 可访问性

- 主色上的文字使用 on-primary 颜色，并检查 4.5:1 对比度；青色强调色上应使用黑色文字。
- 涟漪动效在 prefers-reduced-motion 下应减弱，状态层仍需保留以提示焦点。

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