3.3 KiB
3.3 KiB
Theme Profile · andy(Headspace 静谧 / 温柔)
这是给 AI 写作时读 的 authoring profile,不是 CSS。CSS token 由组件库 运行时主题持有(
data-theme="andy")。本文件是"如何选择和使用这个主题"。 详尽版本见组件库 canonical md:src/theme/themes/andy/andy.md(写代码 / 公式 / 媒体 / Raw 前请读它)。
- runtime theme id:
andy(<ThemeProvider theme="andy">) - 气质:温暖人文派(Headspace)。暖奶油纸、友好南瓜橙、暖灰墨(非纯黑)、通体 圆体无衬线(Quicksand + Nunito)。七套里唯一同时用大圆角 + 柔和暖阴影的主题。 柔软、平静、治愈,重在让人安心。完整继承语义化组件契约。
适合 / 不适合的文章类型
- 适合:健康 / 心理 / 生活方式、引导式
tutorial、温柔的上手与安抚、产品价值观叙事、 需要"柔软 UI"质感与亲和力的explainer。面向普通人、降低压力感。 - 不适合:学术论文(
knuth);冷调规格(vignelli);暗底工程(shannon); 密集数据报告(tufte);俏皮黄黑(freddie);需要锋利严肃感的内容;幻灯片。
排版气质
- 标题 / 标签用 Quicksand(几何圆体),正文用 Nunito(人文圆体);呼应 Headspace 微笑曲线。
- 正文 ~17px,行距 1.7(舒展);标题
display: 700,圆体偏粗最 friendly。强调不用斜体(协议级禁用)。 - 亮橙作填充、加深橙作文字:圆圈章节号 / pill 用亮南瓜橙;链接 / 结构用加深烧橙保证可读。
Raw 风格
像一页柔软、圆润、令人放松的插图。
- 约束的是气质(暖橙系、大圆角、柔阴影、大留白、平静),不是媒介。
- 典型:圆角步骤卡、柔和进度 / 呼吸动画、圆形数据图、温柔问答、blob / imperfect-circle 装饰。
- 构图:大留白、大圆角、柔阴影;颜色只用
--ra-*(橙用--hs-orange)。 - 动效:平缓顺滑、可有舒缓循环(如呼吸引导),但不喧闹。
媒体(图片 / 视频 / 音频)风格
- 适合:圆润吉祥物 / blob 插画、暖色生活摄影、暖橙柔和渐变背景、友好圆角图标。
- 构图留白充足、圆角裁切、主体平静;caption 温柔;必须配 alt。
- 色彩暖橙为主,辅柔蓝 / 柔绿情绪色,低饱和柔和。
代码 / 公式风格
CodeBlock像友好 App 文档里的代码卡片:暖桃 surface + 大圆角 + 可有极轻阴影,不用暗色终端。- Prism token:标签 / 函数用加深橙 accent(克制),关键字用 risk 红,字符串用绿,其余走暖墨 / muted。
Formula像温柔标注:克制、对齐,可有圆角 surface。
禁止项
- 纯黑墨、硬直角、冷色——立刻破坏"柔软治愈"识别。
- 亮南瓜橙作正文 / 小字(对比不足,用加深 accent)。
- 柔阴影 + 大圆角滥用成浮夸卡片堆叠;紫粉霓虹、Tailwind 默认味;用斜体强调。
不同信息密度下的表现建议(建议,非限制)
100% explainer / tutorial:柔软长文 + 圆角步骤卡 + 枕头 callout,正文为主体。60-80% 引导内容:保留关键步骤 + 温柔插画,圆圈章节号点睛。40% briefing:Raw 偏柔和图解 / 呼吸动画,文字更短,仍是治愈形态。