3.6 KiB
3.6 KiB
Theme Profile · vignelli（瑞士国际主义文档）
这是给 AI 写作时读 的 authoring profile，不是 CSS。CSS token 由组件库 运行时主题持有（
data-theme="vignelli"）。本文件是"如何选择和使用这个主题"。 详尽版本见组件库 canonical md：src/theme/themes/vignelli/vignelli.md（写代码 / 公式 / 媒体 / Raw 前请读它）。
- runtime theme id：
vignelli（<ThemeProvider theme="vignelli">） - 气质：瑞士国际主义排版。ReActicle 唯一的 sans 正文 + 冷中性主题。冷中性纸、 一个 grotesque 字族在不同字号上建立层级、发丝网格线、一抹瑞士红、等宽体承载元数据。 完整继承结构纪律（以线代框、去垃圾表格、色彩承载含义）。
适合 / 不适合的文章类型
- 适合：
docs/ 产品文档、spec/ 技术规格、changelog/ release notes、reference/ SDK·API 参考、AI 工具 / 平台文档、explainer、tutorial。 需要强结构、可扫读的中性内容。 - 不适合：温暖叙事（
press）；正式学术论文（knuth）；暗底工程现场（shannon）；幻灯片。
排版气质
- 正文与标题用单一 grotesque 字族（Söhne → Aktiv Grotesk → Helvetica Neue → Arial）， 靠字号与留白、而非堆字重建立层级。
- 标签 / 表头用同一字族小字号；元数据 / 代码用等宽体作 metadata "chip"（以线与字重呈现， 绝不做成彩色胶囊或卡片）。
- 正文 ~17px，行距 1.6；大标题带负字距保持紧致。强调不用斜体（协议级禁用）。
Raw 风格
像一页严格按网格设计的系统文档插图。
- 约束的是气质（冷中性、强网格、系统化、可扫读），不是媒介。
- 典型：网格示意、流程 / 状态图、规格对照表、键盘 / 快捷键图、可切换参数说明、 带 mono 标注的 SVG。
- 构图：强网格对齐、清晰层级、瑞士红作识别线索；填色克制、服务理解。颜色只用
--ra-*。 - 动效：允许短促干脆的一次性过渡（~120ms）；避免无限循环装饰。
媒体（图片 / 视频 / 音频）风格
- 适合：界面截图（裁净 chrome）、信息图 / 流程图 / 网格示意、图标系统说明、线框 / 规格图、 低饱和中性摄影。
- 构图强网格对齐、留白克制、主体清楚；caption 简洁说明来源；必须配 alt。
- 色彩贴近冷中性体系，强调只用瑞士红承载信息。
代码 / 公式风格
CodeBlock像排版严谨的技术规格：冷纸浅 surface + 发丝线，不用暗色编辑器窗口。行号克制。- Prism token 从主题派生：标签 / 函数用瑞士红 accent（克制），关键字 / 风险用 risk 深红， 字符串用绿，其余走墨色 / muted。
Formula像规格里的公式：克制、对齐、发丝线与留白承载。
禁止项
- 卡片、面板、填色块、投影、圆角、彩色左边框强调卡（被点名的 slop）。
- 把瑞士红当装饰；第二个红色用于"警示"以外；用堆字重代替字号层级。
- 紫粉渐变 SaaS hero、霓虹、Tailwind 默认味、emoji / 图标当装饰、3D 渲染图标。
- Raw / 媒体变成营销落地页或仪表盘大屏。
不同信息密度下的表现建议（建议，非限制）
100% docs / reference：系统化长文 + 规格表 + 网格图，正文为主体。60-80% spec / changelog：保留关键规格 + 流程图，mono 元数据带扫读友好。40% briefing：Raw 偏网格图解，文字更短，仍是文档形态。