杂志编辑风

# 杂志编辑风 (Editorial / Magazine)

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

## 本质

把印刷杂志的版式语言搬到屏幕上：高对比度的衬线大标题、栏目标签与导语组成的阅读层级、首字下沉、多栏正文、细线与双线分隔。它相信好的排版本身就能吸引人读下去。

## Design Tokens

### 色彩

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

### 字体排印

- 展示 / 标题字体: `Playfair Display` (Google Fonts, 字重 700 / 900) → fallback `"Didot", "Bodoni 72", Georgia, serif`
- 正文字体: `Source Serif 4` (Google Fonts, 字重 400 / 600) → fallback `Georgia, "Times New Roman", serif`
- 字号阶梯（px）: 12 · 14 · 17 · 21 · 28 · 40 · 64 · 96

### 间距 & 形状

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

### 动效

- 时长（fast / base）: 150ms / 300ms
- 缓动曲线: `cubic-bezier(0.25, 0.1, 0.25, 1)`

### 标志性效果

- `--measure`: `66ch`
- `--double-rule`: `4px double #1A1A1A`

## 要这样做

- 标题使用高对比的衬线展示字体（如 Playfair Display），正文使用易读的衬线字体。
- 为每篇内容建立"栏目标签 → 标题 → 导语 → 署名 → 正文"的层级。
- 正文行宽控制在约 66 个字符；宽屏下使用两到三栏，栏间加 1px 细线。
- 文章开头使用首字下沉（约三行高）。
- 用 1px 细线和双线分隔版面，栏目标签使用深红色小型大写字母。

## 不要这样做

- 不要使用圆角卡片、阴影或渐变。
- 不要用无衬线字体作大标题。
- 不要让正文跨满整个宽屏。
- 不要使用鲜艳的多色配色——只保留一种强调色。

## 组件指南

- **按钮**: 按钮像文字链接：小型大写字母、字距加宽，外加 1px 细框；主按钮为近黑实心。避免圆角胶囊。
- **卡片**: 卡片就是一篇文章的预览：栏目标签（深红小型大写）、衬线标题、导语和署名，顶部一条细线，没有背景和阴影。
- **表单**: 订阅框式表单：米色底、细线框，输入框只有底线，标签用小型大写字母。
- **导航**: 居中的报头（Masthead）使用大号衬线品牌名，上下双线；栏目导航为小型大写字母，用竖线分隔。
- **布局**: 多栏网格，正文行宽约 66 个字符；头条大图大字，次要文章分栏排列，栏间用细线隔开。
- **图像与图标**: 高质量摄影，配图注（caption）与图片来源；图片可以出血或跨栏。

## 可访问性

- 正文字号至少 17px，行高约 1.5–1.6；浅色细衬线在小字号下要特别检查清晰度。
- 多栏布局在窄屏上应回落为单栏，阅读顺序保持一致。

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