# 粗野工业风 · Industrial Brutalism

> 来源技能：`industrial-brutalist-ui`

## 风格定位

融合瑞士排版印刷与军事终端美学的硬朗界面。网格刚硬、字号对比极端、色彩功利，呈现"解密蓝图"般的工业质感。适用于数据密集型仪表板、作品集或需要硬朗权威感的编辑类站点。

## 配色

| 角色 | 色值 | 用途 |
|------|------|------|
| 纸底 | `#F2F0E9` | 页面背景，复古纸张感 |
| 卡片 | `#FBFAF5` | 面板填充 |
| 墨黑 | `#0E0E0E` | 正文、边框、按钮 |
| 警示红 | `#E61919` | 强调、危险标注 |
| 信号黄 | `#FFD400` | 高亮标记 |
| 军绿 | `#0A6B3A` | 成功/正向状态 |

## 字体

- **展示字体**：Archivo Black（900 字重，本地 woff2）
- **等宽字体**：JetBrains Mono 400/700（标签、编号、元数据）
- **中文**：系统栈（PingFang SC / Microsoft YaHei）

## 布局特点

- 刚性网格，无圆角或极小圆角
- 2px 实线墨黑边框，硬阴影 `5px 5px 0` 偏移
- 卡片、按钮、表单均保持平面硬朗形态
- 大标题与正文形成极端字号对比

## 交互特性

- 按钮悬停位移 + 硬阴影偏移
- 卡片悬停边框变红 + 轻微上浮
- 滚动入场（IntersectionObserver + 阶梯延迟）
- 走马灯横幅分隔区块

## 降级与无障碍

- `prefers-reduced-motion`：停用全部动画，内容直接可见
- `:focus-visible`：3px 实线描边
- 响应式断点：1100px / 1024px / 768px / 640px / 480px

## 文件结构

```
粗野工业风/
├── index.html ~ admin.html   （7 页面，与主目录 0 差异）
└── assets/
    ├── logo.svg
    ├── style.min.css          （完整设计系统）
    ├── site.min.js            （基础功能 + 风格交互）
    └── vendor/fonts/          （Archivo Black + JetBrains Mono 本地字体）
```