瑞士风格

# 瑞士风格 (International Typographic Style)

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

## 本质

以严格的网格、无衬线字体和不对称排版传达信息的客观主义设计。它相信清晰本身就是美：去掉装饰，用字号、留白和对齐建立层级，只保留一种强调色。

## Design Tokens

### 色彩

- `background` `#F5F3EE` — 页面背景
- `surface` `#FFFFFF` — 卡片、面板等浮起的表面
- `text` `#111111` — 主要文字
- `muted` `#6B6B6B` — 次要文字、说明、占位符
- `accent` `#E30613` — 主要操作、链接、关键强调
- `on-accent` `#FFFFFF` — 放在强调色上的文字与图标
- `border` `#111111` — 分隔线、描边、输入框边框

### 字体排印

- 展示 / 标题字体: `Inter Tight` (Google Fonts, 字重 500 / 700) → fallback `"Helvetica Neue", Helvetica, Arial, sans-serif`
- 正文字体: `Inter Tight` (Google Fonts, 字重 400 / 500) → fallback `"Helvetica Neue", Helvetica, Arial, sans-serif`
- 字号阶梯（px）: 12 · 14 · 16 · 20 · 28 · 40 · 64 · 96

### 间距 & 形状

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

### 动效

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

### 标志性效果

- `--grid-columns`: `12`

## 要这样做

- 先定义 12 列网格，再把每个元素对齐到列线上。
- 用字号与字重对比建立层级，标题与正文的字号比至少 3:1。
- 文字左对齐，右侧自然参差。
- 全站只用一种强调色，并且只用在最关键的元素上。
- 用 1px 线条和留白分组内容。

## 不要这样做

- 不要使用圆角、阴影、渐变或玻璃效果。
- 不要居中对齐大段正文或整个页面布局。
- 不要混用多种字体或使用装饰性字体。
- 不要用图标和插画来弥补层级不清。

## 组件指南

- **按钮**: 直角矩形，实心黑底白字为主按钮；次按钮为 1px 黑色描边。悬停时主按钮变为红色。文字使用中等字重，不加图标装饰。
- **卡片**: 不使用阴影和圆角。卡片用顶部 1px 黑线与留白界定，标题大而粗，元信息用小号灰字。
- **表单**: 输入框只保留底部 1px 黑线或完整细描边，标签在上方左对齐、小号、全大写或中等字重。聚焦时线条变红。
- **导航**: 顶部一行左对齐的文字链接，品牌名粗体置左，当前项用下划线或红色标记，不使用胶囊和图标。
- **布局**: 12 列网格，内容不对称地占据列宽（如标题占 8 列、正文从第 5 列开始）。大量留白，区块之间用细线分隔。
- **图像与图标**: 黑白摄影或几何图形，满列宽出血。图标极少，必要时用简单线性图标。

## 可访问性

- 纯黑白对比度很高，但细字重的小号灰字要确保对比度不低于 4.5:1。
- 不对称布局在窄屏上要回落为单列，阅读顺序与视觉顺序保持一致。

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