3.3 KiB
3.3 KiB
Theme Profile · freddie（Mailchimp 暖黄 / 友善）
这是给 AI 写作时读 的 authoring profile，不是 CSS。CSS token 由组件库 运行时主题持有（
data-theme="freddie"）。本文件是"如何选择和使用这个主题"。 详尽版本见组件库 canonical md：src/theme/themes/freddie/freddie.md（写代码 / 公式 / 媒体 / Raw 前请读它）。
- runtime theme id：
freddie（<ThemeProvider theme="freddie">） - 气质：温暖人文派（Mailchimp）。纯白纸、近黑 Peppercorn 墨、Cavendish 明黄 只作荧光笔 / 色块（绝不作文字色）。俏皮柔和的衬线标题（Fraunces）压在干净 grotesque 正文（Hanken）之上。机灵、亲切、有人味，但仍专业。完整继承结构纪律。
适合 / 不适合的文章类型
- 适合：产品介绍、
tutorial/ 上手指南、changelog 叙事、功能explainer、FAQ、 亲和力强的营销味长文。面向普通用户、需要温度与幽默的内容。 - 不适合：学术论文（
knuth）；冷调系统规格（vignelli）；暗底工程现场（shannon）； 极密集数据报告（tufte）；柔软治愈向（andy）；幻灯片。
排版气质
- 标题用 Fraunces（仿 Cooper / Means 的柔软俏皮），正文 / 标签用 Hanken Grotesk（仿 Graphik）。
- 正文 ~17px，行距 1.65；标题靠
display: 600+ 柔轴，不靠超粗。强调不用斜体（协议级禁用）。 - 黄是荧光不是墨：链接 = 黑字 + 黄 highlight（hover 填满）；章节号 = 黑字 + 黄贴纸（略旋转）。
Raw 风格
像一页友好、带手作感的产品说明插图。
- 约束的是气质（黑 / 白 / 黄、适度圆角、舒展留白、一点人情味），不是媒介。
- 典型：步骤 / 流程图、对比示意、带黄色 highlight 的标注、友好小数据图、可点开 FAQ。
- 构图：留白舒展、黄只作强调、适度圆角；颜色只用
--ra-*（黄用--mc-yellow）。 - 动效：允许短促、带一丝回弹的过渡；避免无限循环装饰。
媒体（图片 / 视频 / 音频）风格
- 适合：精修产品截图、温暖摄影、scruffy / 手绘风插画、流程示意、带人物的友好配图。
- 构图留白舒展、主体清楚、可有一点不规整的人味；caption 简洁；必须配 alt。
- 色彩贴近黑 / 白 / 黄，强调用黄色块承载，不引入紫粉冷渐变。
代码 / 公式风格
CodeBlock像友好的代码片段：暖浅 surface + 发丝线 + 适度圆角，不用暗色编辑器窗口。- Prism token：标签 / 函数走墨色或暖红，关键字用 risk 红，字符串用绿；黄不作语法色。
Formula像正文里的友好标注：克制、对齐，可有极淡圆角 surface。
禁止项
- 把 Cavendish 黄当文字 / 链接 / 语法色（不可读，破坏识别）。
- 紫粉渐变、霓虹、Tailwind 默认味、把 emoji / 图标当装饰。
- 大圆角 + 大投影的卡片堆叠（那是
andy的柔软领域）；用斜体强调。
不同信息密度下的表现建议（建议，非限制）
100% explainer / tutorial：友好长文 + 步骤图 + 黄色 callout，正文为主体。60-80% 产品介绍：保留关键步骤 + 截图，黄色强调点睛。40% briefing：Raw 偏友好图解，文字更短，仍是亲切产品形态。