teamai-test/.teamai/skills/common/beautiful-article/theme-profiles/tufte.md

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