# 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 应偏图解 / 证据、低装饰，文字更短。