62 lines
3.5 KiB
Markdown
62 lines
3.5 KiB
Markdown
# Theme Profile · press(书卷 / 编辑)
|
||
|
||
> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
|
||
> 运行时主题持有（`data-theme="press"`）。详尽版本见组件库 canonical md：
|
||
> `src/theme/themes/press/press.md`（写代码 / 公式 / 媒体 / Raw 前请读它）。
|
||
|
||
- **runtime theme id**：`press`（`<ThemeProvider theme="press">`）
|
||
- **气质**：出版物级长读物（参照 Stripe Press）。与 tufte 同宗、共享 Data-Ink 的
|
||
结构纪律（以线代框、内联注、去垃圾表格，绝不用卡片与投影），但人格更外放：把报告
|
||
当成一本被认真设计过的书来排。tufte 让你"凑近读"，press 请你"从一臂之外读一本书"。
|
||
|
||
## 适合 / 不适合的文章类型
|
||
|
||
- **适合**：`essay`、`briefing`、`visual-essay`、`longform`（叙事 / 出版型）、
|
||
`explainer`（偏人文）。需要从容阅读的长文、随笔、白皮书、产品手记。
|
||
- **不适合**：极度密集、需大量边注的数据型报告（那是 tufte 主场）；演示幻灯片。
|
||
|
||
## 排版气质
|
||
|
||
- 正文与标题用当代过渡式衬线（Newsreader → Source Serif 4 / Spectral / Georgia / 宋体），
|
||
气质比 tufte 更现代、更"成书"。
|
||
- 正文偏大（~17px），行距 1.7；标题字号拉开（h1≈3rem），靠体量而非黑体取得分量。
|
||
- 一个浓郁主色（氧化血红）串起全篇：章节号、强调线、Hero、目录高亮。禁用斜体。
|
||
|
||
## Raw 风格
|
||
|
||
可以比 tufte 更有版式感，但仍像为文章专门设计的一页内插图。
|
||
|
||
- 首选：出版物式分栏示意、暖色信息图、小型交互标尺、章节间节奏图、带精细 caption 的
|
||
SVG、可轻微展开 / 切换的解释控件。
|
||
- 构图：更大留白、更强标题层级，氧化血红作识别线索；填色可比 tufte 多一点但克制。
|
||
- 动效：允许短促、柔和、一次性过渡；避免无限循环装饰动画。
|
||
- 自定义 CSS / SVG / React 仍必须用 `--ra-*` token，不引入新品牌色或冷色渐变。
|
||
|
||
## 媒体（图片 / 视频 / 音频）风格
|
||
|
||
- 适合：暖色真实摄影、书籍 / 纸张 / 工作台细节、产品界面截图、低饱和 editorial 插图、
|
||
精修信息图、手稿 / 笔记 / 版面草图。
|
||
- 构图主体清楚、留白充足、色温偏暖；可比 tufte 更完整保留产品上下文，但要裁掉噪声。
|
||
- 图注像出版物 caption，简洁说明来源与上下文，不写营销口号。
|
||
|
||
## 代码 / 公式风格
|
||
|
||
- `CodeBlock` 像一本技术书里的代码页：温暖、清晰、有精修感，但不变成 IDE 截图。
|
||
奶油纸上的浅 code surface + 线边界，行号比 tufte 更从容。
|
||
- Prism token 色从 press token 派生：标签 / 函数用氧化血红 accent，字符串用低饱和绿，
|
||
关键字 / 风险用更热的 risk。
|
||
- `Formula` 像书页里的排版公式，块级公式允许更从容留白，caption 像出版物题注。
|
||
|
||
## 禁止项
|
||
|
||
- 卡片、面板、填色块、投影、圆角。
|
||
- 把主色当装饰滥用（它只承载结构与品牌识别）；第二个红色用于"警示"以外的用途。
|
||
- emoji / 图标当装饰。
|
||
- 图片或 Raw 变成营销落地页 / SaaS 首页 / 仪表盘大屏，而非出版物里的图版。
|
||
- 冷蓝紫 SaaS stock 图、3D 渲染图标、廉价渐变背景、无信息量 hero 氛围图。
|
||
|
||
## 不同信息密度下的表现建议（建议，非限制）
|
||
|
||
- `100% longform`：深度出版文章，体量即层级，Raw 作精修插图。
|
||
- `40-60% briefing / visual-essay`：更强编辑节奏与图文留白，视觉块占比更高，仍是文章。
|