包豪斯

# 包豪斯 (Bauhaus)

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

## 本质

源自德国包豪斯学校的现代主义设计语言：把图形还原为圆、方、三角等基本几何形，把色彩收敛到三原色与黑白，用不对称的构图和功能优先的排版取代装饰。

## Design Tokens

### 色彩

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

### 字体排印

- 展示 / 标题字体: `Jost` (Google Fonts, 字重 500 / 700) → fallback `Futura, "Century Gothic", "Avenir Next", sans-serif`
- 正文字体: `Jost` (Google Fonts, 字重 400 / 500) → fallback `Futura, "Century Gothic", "Avenir Next", sans-serif`
- 字号阶梯（px）: 12 · 14 · 16 · 20 · 28 · 44 · 72

### 间距 & 形状

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

### 动效

- 时长（fast / base）: 150ms / 260ms
- 缓动曲线: `cubic-bezier(0.65, 0, 0.35, 1)`

### 标志性效果

- `--bauhaus-blue`: `#1D4E9E`

## 要这样做

- 只使用红 #D42A20、黄 #F4C21B、蓝 #1D4E9E 三种原色，加上近黑与暖白。
- 用圆、方、三角三种基本形构成插图、图标和装饰。
- 采用不对称构图：标题偏向一侧，几何构图放在另一侧。
- 使用几何无衬线字体，标题粗而大，英文可全小写。
- 用 2px 黑线和纯色色带划分区块。

## 不要这样做

- 不要使用渐变、阴影、圆角按钮或拟物质感。
- 不要引入三原色以外的彩色（粉色、紫色、青色等）。
- 不要使用衬线体或手写体。
- 不要把所有元素都居中对称排列。

## 组件指南

- **按钮**: 直角矩形，主按钮红底白字，次按钮黑色描边，文字前可放一个小几何形（圆、方或三角）作为图标。悬停时颜色在三原色之间切换。
- **卡片**: 卡片顶部放一块由几何形组成的小构图作为"插图"，下方是粗体标题与正文；用 2px 黑线框定，不用阴影。
- **表单**: 输入框为直角细框或粗底线，标签前加一个彩色小方块；聚焦时底线变为蓝色，错误信息用红色块标出。
- **导航**: 左侧品牌名配三个彩色几何点；右侧文字链接用小写或中等字重，当前项下方加一条色带。
- **布局**: 不对称的网格：大标题占左侧大半，右侧是几何构图；色带（尤其是蓝色或黄色）横穿页面分隔区块。
- **图像与图标**: 用纯色几何形拼贴代替照片；需要照片时用高对比的黑白摄影，与色块叠放。

## 可访问性

- 黄色背景上只能放黑色文字；白字放在黄色上对比度严重不足。
- 不要只用颜色区分状态，配合形状或文字（例如错误信息前加符号）。

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