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