editorial-minimal

editorial-minimal

一种鲜明统一的视觉身份。启用此套规范后，整个页面都说同一种语言：一张恰好做成网站的印刷大报。

1. 配色（固定）

• 纸张背景：#F5F1EA（暖调灰白色）。深色变体：#EFEAE1。
• 墨色：#1A1A18（暖调近黑色）。次级墨色：#6B675E。
• 强调色：朱红色 #E34A2B（或深红色，如 #C73E1D）。每页只用一种。
• 细线：rgba(26, 26, 24, 0.14)。
• 不使用其他颜色。任何地方都不使用渐变。不设置深色模式区块。

2. 字体排印（固定）

• **展示文字：**选用有个性的衬线字体——Fraunces、Newsreader，或有力度的系统衬线字体（Georgia、Charter）。字号设为 clamp(2.8rem, 7vw, 6.5rem)，行距紧凑（0.98–1.08），使用常规字重——让字号承载表达力。
• **标签／元数据：**使用等宽字体（IBM Plex Mono、SF Mono、ui-monospace）或小型大写字母；大写，字距 0.10–0.15em，字号 11–13px。
• **正文：**使用简洁的无衬线字体，或 16–18px 的衬线字体；行高 1.6–1.7，最大宽度 32–40em。
• 可选的编辑风格点缀：斜体衬线字体的重点引文、超大首字编号（如以展示文字字号呈现的“01”）。

3. 构图（固定）

• **非对称分栏主视觉：**超大字号内容占据 7/12 栏，右侧剩余 5/12 栏用于窄索引栏（编号 + 标签）。
• **带编号的区块：**每个区块都以编号（“01 — 方法”）和顶部细线开头。页面应当像目录一样清晰易读。
• **处处使用细线：**用 1px 线划分列、行和页脚。对齐必须精确，展现清晰的网格纪律。
• **优先用行而非卡片：**功能以编辑式索引呈现（带编号的行之间用线分隔），而非三个圆角框。如需使用卡片：直角、纸面上的纸面色调面板（#EFEAE1）、1px 墨色细线——绝不使用 rounded-2xl，也绝不优先添加阴影。
• 留白：主视觉内边距 ≥ 15vh，区块间距 96–160px。

4. 内容处理

• **不使用表情符号图标。**可使用数字、排版符号（→、—、*），如有需要也可使用单个绘制字形。
• **指标应具有编辑风格：**将数字排成带细线行分隔的等宽字体表格——无需任何素材也能呈现艺术指导感。
• **不使用带浏览器外框的截图。**如需展示产品，可使用带文字的色调面板，或带细线边框的简洁满版图片。
• **CTA：**使用一个纯色朱红方形按钮 + 一个仅含文字的大写链接。绝不使用两个同等醒目的按钮。

5. 动效（几乎没有）

• 一个入场动效：内容在滚动时淡入并向上平移 8–12px，时长 400ms，采用较长的缓动。
• 一个微交互：内部链接悬停时通过 background-size 技巧显示下划线。不使用循环动效、视差光球或悬浮徽章。

6. 检查清单（出现以下情况即判定页面不合格……）

• 出现纸张／墨色／朱红色以外的颜色。
• 主要界面上出现任何 ≥ 6px 的圆角。
• 标题小于约 2.8rem，或宽于约 22em。
• 正文列占满全宽。
• 主视觉居中且对称。
• 界面中出现表情符号。

---

拿不准时，想想瑞士大报会怎么做？