新粗野主义

# 新粗野主义 (Neo-Brutalism / Neubrutalism)

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

## 本质

在扁平化的产品界面上加入粗黑描边、不模糊的硬投影和高饱和纯色块。它借用了 Web 粗野主义的"不加掩饰"，却保留了清晰的层级和可用性，看起来像可以按下去的实体贴纸。

## Design Tokens

### 色彩

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

### 字体排印

- 展示 / 标题字体: `Archivo Black` (Google Fonts, 字重 400) → fallback `"Arial Black", "Helvetica Neue", Arial, sans-serif`
- 正文字体: `Public Sans` (Google Fonts, 字重 400 / 600 / 700) → fallback `system-ui, -apple-system, "Segoe UI", sans-serif`
- 字号阶梯（px）: 13 · 15 · 18 · 22 · 30 · 44 · 64

### 间距 & 形状

- 基础单位: 4px · 间距阶梯（px）: 4 · 8 · 12 · 16 · 24 · 32 · 48
- 圆角（sm / md / lg）: 6 / 10 / 16 px
- 边框: 3px solid
- 阴影（sm / md / lg）: `2px 2px 0 #000000` / `4px 4px 0 #000000` / `8px 8px 0 #000000`

### 动效

- 时长（fast / base）: 80ms / 140ms
- 缓动曲线: `cubic-bezier(0.3, 0, 0.2, 1)`

### 标志性效果

- `--nb-blue`: `#7DA8FF`
- `--nb-green`: `#74E3B5`

## 要这样做

- 所有容器、按钮、输入框都加 3px 纯黑描边。
- 使用纯黑、零模糊的偏移投影（如 4px 4px 0 #000），全站方向一致。
- 用黄、粉、蓝、绿等高饱和纯色块区分区域，每块只用一种颜色。
- 按钮按下时向投影方向位移并收起投影，模拟实体按压。
- 标题使用超粗无衬线字体，正文使用清晰的无衬线字体。

## 不要这样做

- 不要使用模糊阴影、渐变或玻璃效果。
- 不要在彩色背景上使用白色文字。
- 不要省略描边——没有描边的硬投影看起来像渲染错误。
- 不要使用细字重或衬线字体作标题。

## 组件指南

- **按钮**: 粉色或黄色实心按钮，3px 黑描边、4px 黑色硬投影；悬停时向左上抬起、投影变大，按下时向右下位移、投影消失。
- **卡片**: 白色或彩色卡片，粗描边加 8px 硬投影；顶部可放一块彩色标签条，标签像贴纸一样略微旋转。
- **表单**: 输入框有粗黑描边和小号硬投影，聚焦时背景变黄；错误信息放在带描边的粉色块中。
- **导航**: 顶部导航本身就是一个描边容器；品牌名用超粗字体，当前项用彩色胶囊标出。
- **布局**: 清晰的卡片式网格，区块之间留出足够空隙让投影显现；可以用一条描边的跑马灯色带分隔区块。
- **图像与图标**: 扁平插画、粗描边的图标与贴纸；照片也要加上黑色描边和硬投影。

## 可访问性

- 彩色背景上统一使用纯黑文字，确保对比度；不要在粉色或蓝色上放白字。
- 按压位移动效在 prefers-reduced-motion 下应关闭，只保留颜色变化。

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