65 lines
3.5 KiB
Markdown
65 lines
3.5 KiB
Markdown
# Theme Profile · tufte（Data-Ink）
|
||
|
||
> 这是给 **AI 写作时读** 的 authoring profile，不是 CSS。CSS token 由组件库
|
||
> 运行时主题持有（`data-theme="tufte"`）。本文件是"如何选择和使用这个主题"。
|
||
> 详尽版本见组件库 canonical md：`src/theme/themes/tufte/tufte.md`（写代码 /
|
||
> 公式 / 媒体 / Raw 前请读它）。
|
||
|
||
- **runtime theme id**：`tufte`（`<ThemeProvider theme="tufte">`）
|
||
- **气质**：Edward Tufte 数据墨水比。页面上每一滴墨水都承载信息。去除卡片、
|
||
填色、阴影、圆角、装饰色。留下文字、发丝级参考线、充裕页边、由排版承载的含义。
|
||
|
||
## 适合 / 不适合的文章类型
|
||
|
||
- **适合**：`longform`、`full-report`、`explainer`、`review`（技术 / 数据型）、
|
||
`tutorial`。以论点与证据为主角的长文阅读。
|
||
- **不适合**：需要 10 米外观看的幻灯片（正文字号刻意偏小）；移动端优先且需要大量
|
||
边注的场景。
|
||
|
||
## 排版气质
|
||
|
||
- 正文与标题用老式（old-style）衬线（et-book → Palatino / Georgia / 宋体），字重 400。
|
||
- 标签 / 注释 / 表头用人文 sans，小字号。
|
||
- 正文刻意偏小（~16px），行距 1.6；标题层级克制（h1≈2.5rem，h2≈1.7rem）。
|
||
- 强调靠字重 / 颜色 / 间距，不靠斜体（协议级禁用斜体），不靠厚黑体。
|
||
|
||
## Raw 风格
|
||
|
||
像作者为当前段落手画的一张小图，不是营销组件。
|
||
|
||
- 约束的是**气质**（克制、线条化、数据密集、低装饰），不是**媒介** —— 可用任意
|
||
HTML / CSS / React，按需才用 SVG / canvas。
|
||
- 典型：细线折线 / 散点 / slopegraph、小坐标轴、可拖动阈值线、局部高亮、文本旁注、
|
||
微型 sparkline、轻量可调参数控件、紧凑对照排版。
|
||
- 构图：少填充、多线条；信息密度可以高，但每条线 / 每个元素都要有含义。
|
||
- 动效：默认无；必须交互时只用即时响应或极轻过渡，不用弹跳 / 漂浮 / 循环装饰。
|
||
- 颜色 / 字体 / 间距必须取自 `--ra-*`，不自造 palette。
|
||
|
||
## 媒体（图片 / 视频 / 音频）风格
|
||
|
||
- 适合：真实数据图、论文 / 报告截图、表格截屏、产品界面局部、低饱和摄影、黑白或
|
||
暖纸感线稿、地图 / 时间轴 / 细线示意图。
|
||
- 构图留白充足、主体清楚、边缘干净；必须配清晰 caption / source / alt。
|
||
- 截图优先裁掉浏览器 chrome。
|
||
|
||
## 代码 / 公式风格
|
||
|
||
- `CodeBlock` 像正文里的精密标本：纸面轻 surface + 发丝线，不用深色编辑器壳 / 发光边框 /
|
||
彩色标题栏。行号可见但退后。
|
||
- Prism token 色从主题派生：结构 / 标签用青灰 accent，关键字 / 警示用暖红 risk，
|
||
字符串用低饱和绿。
|
||
- `Formula` 像正文里的数学标注，块级公式只用发丝线与留白承载。
|
||
|
||
## 禁止项
|
||
|
||
- 卡片、面板、填色块、投影、圆角；比 `#D8D2C2` 更深的网格线。
|
||
- emoji / 图标当装饰；色彩用于"承载含义"以外的任何用途。
|
||
- 库存感 hero 图、3D 插画、渐变背景、装饰光斑、强饱和科技蓝紫、卡通人物。
|
||
- 在 Raw 里写出与 Data-Ink 相反的装饰性组件（仪表盘大屏、粒子背景、玻璃拟态）。
|
||
|
||
## 不同信息密度下的表现建议（建议，非限制）
|
||
|
||
- `100% longform / full-report`：克制长文为主，Raw 点亮关键概念，数据证据优先。
|
||
- `60-80% explainer / review`：保留核心证据 + 图解，正文仍是主体。
|
||
- `40% visual-essay`：仍成立，但 Raw 应偏图解 / 证据、低装饰，文字更短。
|