设计规范
Prism 棱镜设计语言
GEO 平台的设计语言：一束光，折射成光谱。核心隐喻、五条原则、参考来源与交互式演示。
一束光，折射成光谱。 GEO 把一份内容（白光）折射到搜索、AI 回答、社媒、站群和多种语言（光谱）。界面就是那块棱镜：本身透明、精确、不抢戏；颜色只在光被折射的地方出现，也就是有信息的地方。
打开交互式演示 ↗：每条规则都能在演示页里直接点、播放和切换亮暗主题。
本节是官网、用户端、管理端、站群默认主题与 SDK 文档共用的设计规范（v3 草案，2026-11-03）。令牌在 packages/tokens，组件在 packages/ui/src/prism。
核心隐喻
三层映射
| 隐喻 | 界面中的对应 | 规则 | 令牌 |
|---|---|---|---|
| 白光 Light | 中性底与文字 | 冷调近白；暗色主题是“暗室”，近黑但不纯黑 | canvas surface container ink |
| 棱镜 Glass | 所有界面表面：光学玻璃板 | 厚度 = 层级；顶边受光的高光代替描边；越高越亮 | elev-1…elev-4 edge |
| 光谱 Spectrum | 颜色：6 条领域色带、状态色、数据 | 颜色只表达信息；领域按波长排序 | distribution…ai |
| 主光 Key light | 品牌色 Iris | 一屏只有一束主光：主操作与当前位置 | brand |
| 折射 Refraction | 动效 | 从光源（触发点）出发，向外散开，关闭时收回原处 | spring-* |
为什么适合 GEO
- 产品本身就是折射：一篇文章进入平台，变成多语言版本、多个站点、多个社媒帖子，再被搜索引擎和 AI 回答引用。界面用同一个意象解释这件事：内容是光，渠道是光谱。
- 颜色有了来源：领域色是同一束光的不同波长，排序、明度、饱和度都有统一规则。
- 层级有了物理依据：玻璃板的厚度、受光、投影让层级变成可推导的规则，而不是逐个组件决定。
- 动效有了方向：所有运动都回答“光从哪里来”。出现、展开、选中都从触发点开始，没有无来由的闪现。
五条原则
规范没有覆盖的情况，回到这五条做取舍。
| # | 原则 | 含义 | 怎么做 | 反例 |
|---|---|---|---|---|
| 1 | 一束主光 | 每屏只有一个主操作被点亮 | 主按钮唯一使用 brand 实底；品牌色面积 ≤ 10%（主按钮 + 当前导航 + 焦点环）；其他操作用次按钮或文字按钮 | 页头放两个蓝色主按钮；整块卡片用品牌色铺底 |
| 2 | 色即信息 | 颜色只出现在领域识别、数据、状态 | 中性色打底；领域色只用于图标块、图表、分类徽标；状态色只表达状态；装饰不用色 | 为了“好看”给卡片随机配色；用状态红色做强调 |
| 3 | 光有来处 | 每个运动都有原因和方向 | 菜单从触发按钮展开（transform-origin 指向触发点）；对话框从页面中心略下方升起；关闭时收回原处 | 弹层从屏幕角落飞入；列表项随机顺序出现 |
| 4 | 玻璃有厚度 | 层级靠厚度表达，不靠线条 | 卡片 = surface + elev-1 + 顶边高光；越高的层越亮、投影越柔越宽；分组靠留白与明度 | 卡片、表格、侧栏都画 1px 边框；卡片里再套带边框的卡片 |
| 5 | 光随手动 | 任何输入在 100ms 内得到光学反馈 | 悬停受光（抬升 + 指光）、按下下沉（0.97）、聚焦有光束（焦点环收拢）、选中光穿过（折射展开） | 点击后无反馈等待接口返回；只有颜色变化没有位移或层级变化 |
参考来源
| 来源 | 借鉴了什么 | 与 Prism 的差别 |
|---|---|---|
| Apple HIG | 弹簧动画（response + 阻尼比）、44pt 触控目标、磨砂材质、跟手与可打断 | Apple 的材质强调折射变形；Prism 的玻璃是平板，只用厚度、顶边高光和投影，不做形变 |
| Material 3 | 状态层（悬停 / 按下叠加墨色）、窗口尺寸类别、动效令牌化、强调色只给主操作 | M3 用色调表面区分层级；Prism 用投影 + 高光，且领域色有固定语义 |
| Fluent 2 | 密度档位（紧凑 / 默认 / 舒适）、焦点环可见性、键盘优先 | Fluent 以描边为主；Prism 不用结构线 |
| Tide 潮汐 | 弹簧参数在构建时转成 CSS linear()；每个组件一个特征动作 | Tide 的动作有挤压形变；Prism 的动作是光学的：受光、折射、光扫，不改变形状 |
| 墨韵 | 转场逐条成表、手势阈值写成数字、“减弱动效”单独一节、规则与代码同源 | 墨韵面向平板触控、只用物理模型；Prism 面向桌面后台，弹簧与淡变并存 |