粗野主义

# 粗野主义 (Web Brutalism)

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

## 本质

把 HTML 的原始质感当作美学：系统字体、粗黑边框、默认蓝色下划线链接、直角和硬切换。它拒绝精致与"产品感"，用诚实甚至粗鲁的结构表达态度。

## Design Tokens

### 色彩

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

### 字体排印

- 展示 / 标题字体: `Times New Roman` (系统字体, 字重 400 / 700) → fallback `Times, serif`
- 正文字体: `IBM Plex Mono` (Google Fonts, 字重 400 / 700) → fallback `"Courier New", Courier, monospace`
- 等宽字体: `IBM Plex Mono` (Google Fonts, 字重 400 / 700) → fallback `"Courier New", Courier, monospace`
- 字号阶梯（px）: 13 · 16 · 20 · 32 · 56 · 88

### 间距 & 形状

- 基础单位: 4px · 间距阶梯（px）: 4 · 8 · 16 · 24 · 40
- 圆角（sm / md / lg）: 0 / 0 / 0 px
- 边框: 3px solid
- 阴影（sm / md / lg）: 无 / 无 / 无

### 动效

- 时长（fast / base）: 0ms / 0ms
- 缓动曲线: `steps(1, end)`

## 要这样做

- 所有区块、按钮、输入框都用 3px 黑色实线边框画出边界。
- 链接保持默认蓝色并带下划线。
- 标题使用系统 Times 衬线字体，正文与界面使用等宽字体。
- 悬停与选中状态使用瞬间反色，不使用过渡动画。
- 用荧光黄高亮极少数关键信息。

## 不要这样做

- 不要使用圆角、阴影、渐变、模糊或毛玻璃。
- 不要使用柔和的灰色、低饱和配色或精致插画。
- 不要使用缓动动画、渐显或视差效果。
- 不要为了"好看"牺牲可读性和清晰的焦点样式。

## 组件指南

- **按钮**: 直角矩形，3px 黑色边框，白底黑字，等宽字体全大写。悬停时瞬间反色为黑底白字，按下时向右下偏移 2px。不使用图标。
- **卡片**: 3px 黑框包围，无阴影无圆角。标题用大号 Times，元信息用等宽小字，可用荧光黄色块标记标签。
- **表单**: 输入框为 3px 黑框的白色矩形，标签用等宽字体全大写写在上方。聚焦时背景变为荧光黄，不使用柔和的聚焦光晕。
- **导航**: 一行用竖线或方括号分隔的蓝色下划线文字链接，例如 [首页] [作品] [关于]。当前项反色显示。
- **布局**: 单列或简单的表格式网格，区块之间用粗边框直接相接。允许不对齐、超大字号溢出和紧凑的信息密度。
- **图像与图标**: 未经修饰的原始照片、高对比黑白图或像素图。图片用黑框包住，不加圆角，不做柔化处理。

## 可访问性

- 粗边框和高对比是可访问性的优势，但荧光黄背景上的文字要保持足够对比度。
- 没有动效很好，但不要因此去掉聚焦样式：键盘焦点必须清晰可见。
- 超大字号要在窄屏上缩放，避免水平滚动。

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