新拟态

# 新拟态 (Neumorphism / Soft UI)

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

## 本质

元素和背景使用完全相同的颜色，只靠左上方的浅色高光和右下方的深色阴影塑造凸起，靠内阴影表达凹陷。界面像用一整块软塑料或黏土压制而成，安静、柔和、触感强。

## Design Tokens

### 色彩

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

### 字体排印

- 展示 / 标题字体: `Nunito` (Google Fonts, 字重 700 / 800) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- 正文字体: `Nunito` (Google Fonts, 字重 400 / 600) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- 字号阶梯（px）: 12 · 14 · 16 · 18 · 24 · 34 · 48

### 间距 & 形状

- 基础单位: 8px · 间距阶梯（px）: 8 · 12 · 16 · 24 · 32 · 48 · 64
- 圆角（sm / md / lg）: 12 / 20 / 32 px
- 边框: 不使用边框
- 阴影（sm / md / lg）: `3px 3px 6px #A3B1C6, -3px -3px 6px #FFFFFF` / `6px 6px 12px #A3B1C6, -6px -6px 12px #FFFFFF` / `10px 10px 24px #A3B1C6, -10px -10px 24px #FFFFFF`

### 动效

- 时长（fast / base）: 150ms / 300ms
- 缓动曲线: `cubic-bezier(0.25, 0.8, 0.25, 1)`

### 标志性效果

- `--neu-inset`: `inset 4px 4px 8px #A3B1C6, inset -4px -4px 8px #FFFFFF`
- `--neu-inset-deep`: `inset 6px 6px 12px #A3B1C6, inset -6px -6px 12px #FFFFFF`

## 要这样做

- 让元素与背景使用完全相同的颜色（如 #E4E9F0）。
- 凸起元素使用双向外阴影：左上浅色 #FFFFFF、右下深色 #A3B1C6。
- 输入框、选中项和按下状态使用双向内阴影表示凹陷。
- 使用 12–32px 的大圆角，不加描边。
- 只用一种强调色，用于最重要的操作与焦点光晕。

## 不要这样做

- 不要使用描边、硬投影或高饱和的背景色。
- 不要在纯白或深色背景上使用双向阴影。
- 不要用浅灰色作正文颜色。
- 不要只靠阴影区分按钮和非交互卡片。

## 组件指南

- **按钮**: 与背景同色的胶囊按钮，带双向外阴影；按下时变为内阴影。主按钮可以使用强调色文字或强调色填充加柔和阴影。
- **卡片**: 与背景同色的大圆角卡片，用较大的双向阴影凸起；卡片内部的图标放在内凹的圆形槽中。
- **表单**: 输入框是内凹的槽（双向内阴影），聚焦时加一圈强调色的细光晕；复选框和开关也用凹凸表达状态。
- **导航**: 导航放在一个凸起的长条容器中，当前项为内凹的胶囊。
- **布局**: 大量留白，让阴影有空间扩散；元素之间至少保持 24px 以上的间距。
- **图像与图标**: 单色线性图标，嵌在凹陷或凸起的圆形中；避免照片和彩色插画破坏单一材质的错觉。

## 可访问性

- 元素边界只靠阴影，对比度极低：重要按钮请加强调色文字或填充，确保可识别。
- 焦点状态必须有清晰的描边或光晕，不能只靠阴影变化。
- 文字与背景至少保持 4.5:1 的对比度，正文不要使用浅灰色。

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