Web Styles

---
name: web-styles
description: 网页视觉方向八选一：主色、字体、版式节奏一次给齐
---

# 网页视觉方向

## 什么时候用

**做任何 HTML 交付物之前**，先来这儿挑一个方向，再去 `use_skill html-page` 按骨架写。
顺序反了没用——先写完 CSS 再来调色，只会调出一张涂了新颜色的旧脸。

不用问用户挑哪个。看内容自己定，把结论写进开场白一句话：
「这次走 XX 风：主色 XX，参照物是 XX。」用户不满意会当场说，比停下来等他选快得多。

## 怎么挑（看内容，不看喜好）

| 内容是什么 | 挑这个 |
|---|---|
| 深度文章、行业观察、人物报道、复盘 | 1 编辑杂志 |
| 数据报告、白皮书、产品文档、对比评测 | 2 瑞士国际主义 |
| 作品集、个人主页、极简工具页、声明页 | 3 极简黑白 |
| 监控面板、日志、开发者工具、技术方案 | 4 暗色终端 |
| 餐饮、手作、母婴、宠物、生活方式、活动邀请 | 5 暖色手作 |
| 文化、展览、书单、年度回顾、怀旧主题 | 6 复古印刷 |
| 发布页、活动页、社区、面向年轻人的产品 | 7 高饱和野兽派 |
| SaaS 落地页、App 介绍、后台界面示意 | 8 柔和拟物 |

拿不准就用 **2 瑞士国际主义**——它最不容易出错，且不长成默认那张脸。
同一次任务里做多个页面，**用同一个方向**，别一页一个风格。

---

## 1 · 编辑杂志

像一份认真排过的深度报道。读者是来读长文的。

- **配色**：底 `#faf8f5`（暖白纸感）· 正文 `#1c1917` · 主色 `#8b2e1f`（砖红，只用在小标题和链接）· 辅助 `#78716c`
- **字体**：标题衬线 `Georgia, "Songti SC", "SimSun", serif`；正文无衬线；标题字号拉到正文的 2.5-3 倍
- **版式**：单栏 `680px` 居中，行高 1.75；首段可以做首字下沉；引用用大号斜体独占一屏宽，不加框
- **标志性细节**：小标题上方一条 1px 细线 + 一个全大写的英文栏目名（`ANALYSIS` / `FIELD NOTES`）
- **别做**：卡片、阴影、圆角。杂志里没有卡片

## 2 · 瑞士国际主义

网格、留白、左对齐。信息多而不乱，最适合报告。

- **配色**：底 `#ffffff` · 正文 `#111111` · 主色 `#d92027`（正红，只用于强调数字和当前项）· 辅助 `#9ca3af`
- **字体**：全站一个无衬线族，靠字重（400/700）和字号分层级，不换族
- **版式**：12 栏网格，所有元素左对齐钉死；标题不居中；大量留白，宁可空着也不填装饰
- **标志性细节**：章节用 `01 / 02 / 03` 两位数编号，编号比标题小但同色；表格只有横线没有竖线
- **别做**：渐变、投影、居中标题、彩色背景块

## 3 · 极简黑白

只有黑、白、一个灰。靠排版本身说话。

- **配色**：底 `#ffffff` · 正文 `#000000` · 主色 `#000000`（就是黑，靠尺寸和位置制造重点）· 辅助 `#e5e5e5`（分隔线）
- **字体**：一个无衬线族，字号跨度拉到极大（正文 16px，主标题 72px+）
- **版式**：超宽留白，元素少但每个都大；可以只有一屏
- **标志性细节**：hover 时只变下划线或反白，不变色
- **别做**：任何第四种颜色。加了就不是这个风格了

## 4 · 暗色终端

像一块正在运行的屏幕。适合技术内容和监控面板。

- **配色**：底 `#0d1117` · 正文 `#c9d1d9` · 主色 `#3fb950`（信号绿）· 辅助 `#f85149`（告警红）
- **字体**：等宽 `ui-monospace, "SF Mono", Menlo, Consolas, monospace` 贯穿全站，中文回退到 `"PingFang SC", sans-serif`
- **版式**：紧凑，行高 1.5；数据用定宽对齐；卡片改成 1px 描边的方框，不用阴影
- **标志性细节**：状态点用 `●` 加颜色；关键行前面加 `$ ` 或 `> ` 提示符
- **单色调**：这个方向**只做暗色**，`<head>` 里写死 `<meta name="color-scheme" content="dark">`，交付时说明一句

## 5 · 暖色手作

有温度、有手感。适合吃的、用的、陪伴的。

- **配色**：底 `#fdf6ec` · 正文 `#44403c` · 主色 `#c2703d`（陶土橙）· 辅助 `#7d8f69`（橄榄绿）
- **字体**：正文用系统无衬线但字号偏大（17-18px）、行高 1.8；标题可以用衬线增加手写感
- **版式**：圆角 16-20px，元素之间留够气；图片做圆角或不规则遮罩；允许轻微倾斜（`transform: rotate(-1deg)`）
- **标志性细节**：分隔用手绘感的波浪线或点线（内联 SVG 画），不用直线
- **别做**：正红、正蓝、纯黑。所有颜色都要往暖里偏一点

## 6 · 复古印刷

像一张套色印歪了一点的海报。适合文化、展览、年度回顾。

- **配色**：底 `#f2ebe0`（纸）· 正文 `#2b2b2b` · 主色 `#e4572e`（油墨橘）· 辅助 `#2364aa`（油墨蓝）
- **字体**：标题用粗字重拉满字距收紧；正文常规
- **版式**：两个主色**故意重叠**一小块并用 `mix-blend-mode: multiply` 做套印效果；元素允许压边出血
- **标志性细节**：给底色加一层极淡的噪点（用 `background-image` 内联一个 SVG `feTurbulence`）
- **别做**：渐变、发光、圆润的阴影。这是印刷，不是屏幕

## 7 · 高饱和野兽派

粗黑边、硬阴影、大色块。适合发布页和年轻向的产品。

- **配色**：底 `#fff8e7` · 正文 `#000000` · 主色 `#ffd23f`（亮黄）· 辅助 `#3d5afe`（电光蓝）
- **字体**：标题极粗（800-900 字重）、字号极大、字距收紧到 `-0.02em`
- **版式**：所有块 `border: 2px solid #000` + 硬投影 `box-shadow: 6px 6px 0 #000`（没有模糊半径）；圆角 0-4px
- **标志性细节**：hover 时块往右下位移 2px、阴影缩到 4px，像被按下去
- **别做**：柔和阴影、半透明、渐变。这个风格的一切边界都是硬的

## 8 · 柔和拟物

干净、可信、略带微立体。适合 SaaS 和后台示意。

- **配色**：底 `#f6f8fb` · 正文 `#1f2937` · 主色 `#2563eb` · 辅助 `#64748b`
- **字体**：常规无衬线，字号克制（正文 15-16px），靠字重和颜色分层
- **版式**：卡片白底、圆角 12px、阴影 `0 1px 2px rgba(16,24,40,.06), 0 4px 12px rgba(16,24,40,.05)` 两层叠加
- **标志性细节**：主按钮用同色系的 2% 渐变 + 1px 内高光（`inset 0 1px 0 rgba(255,255,255,.2)`）
- **⚠️ 这是最容易撞脸的一个方向**。只有内容真的是 SaaS / 后台时才用；用了就必须在主色上偏离默认蓝
  （换成墨绿 `#0f766e`、深紫 `#6d28d9` 或砖红 `#b91c1c` 都行），否则做出来跟满大街的模板一模一样

---

## 用完之后

1. 把方向名和主色写进开场白一句话，让用户知道你不是随手挑的
2. 上面每个方向给的 hex 是**起点**，可以按内容微调色相，但**角色数量不能超过 4 个**
   （底色 / 正文 / 主色 / 辅助）——这是 `html-page` 的硬规范
3. 深浅色：除了 4 暗色终端是单色调，其余七个方向都要按 `html-page` 硬规范第 3 条配一套
   `prefers-color-scheme: dark` 的变量。暗色版不是把底色改黑就完事——主色在深底上通常要提亮 10-15%
4. 挑完就去 `use_skill html-page`，骨架、响应式、自检清单都在那儿