CC Switch 设计系统

色彩

骨架是中性灰，彩色只表达「能操作」和「是什么状态」。 主题色只有一个：橙 #F97316，它占的是 --action-* 和 --ring 这组槽位—— 一个视图只有一个实心橙按钮。模式色、语义色各管各的，不和主题色混用。

主题色 · 操作色

对比度：浅色主题实心按钮白字 2.8:1，按钮文字统一用 600 字重补偿；橙色当文字用时一律换 --action-text（浅 #C2410C 5.2:1 / 深 #FB923C 7.5:1）。深色主题实心按钮压暗为 #EA580C + 白字（3.6:1），焦点描边用更沉的 #D77A3C。

中性面与文字

模式色

模式色只出现在：模式 tab、侧栏模式标签、当前生效的供应商卡片、模式切换的主按钮。其他地方不用。

语义色

橙 vs 琥珀：主题橙和 warning 琥珀色相接近。警告永远是「soft 底 + 三角图标 + 文字」，从不单独用一块橙/琥珀色表达状态；橙色只出现在能点的东西上。

字体

系统字体栈（SF Pro / 苹方 / Segoe UI / 微软雅黑），不加载网络字体。正文 13px，桌面工具的密度； 字号只用下面 8 个角色（text-badge … text-metric），数字列用等宽数字。

间距 · 圆角

4px 基础刻度。页面左右留白 24px，卡片之间 8px，卡片内 12px。控件高度只有三档：28（卡片、对话框里）、32（页头、输入框）、36（分段控件、页签）。

嵌套圆角：内圆角 = 外圆角 − 内衬。分段控件轨道 10、内衬 3 → 选中块 7。

层级 · 阴影

平面靠描边分层，阴影只给「浮起来」的东西。深色主题的 shadow-sm 带一圈 8% 白描边，代替看不见的投影。

z 轴：对话框 40 → 嵌套 50 → 确认 60 → 命令面板 80 → Tooltip 130 → 说明卡 120（与 Tooltip 互斥，不会同时出现）。

动效

快、短、只改颜色和位置。默认 150ms；菜单 / 弹层 / 提示淡入 + 轻微放大（tailwindcss-animate 的 animate-in fade-in-0 zoom-in-95），关闭时反向；分段选中块、页签下划线 200ms 滑动；打开菜单的触发器按下不缩放；按下按钮缩到 scale .96；系统开了「减少动态效果」时 framer-motion 位移全部跳过； 切换明暗主题期间暂停所有过渡（.theme-switching），避免整页闪一下。

按钮

一个视图只有一个实心按钮。其余用描边 neutral（卡片上的「切换」「设为默认」）或透明 quiet（页头次要操作）。 模式色实心按钮只用于「切换到这个模式」。

模式色按钮

尺寸

图标按钮 · HoverTip

工具栏、卡片操作、模式行右侧一律用纯图标按钮，文字放进 HoverTip：鼠标移上去立即出现深色胶囊，说清楚这一下会做什么。 按钮本身仍要 aria-label。

HoverTip 与 HelpTip 分工：HoverTip 只报「这个按钮是什么 / 做什么」；规则和术语解释放 HelpTip 的「?」说明卡（见通知条一节）。

输入

高 32、圆角 6、border-strong 描边；聚焦时描边和 3px 光晕换主题色。标签在上，说明在下，出错时说明换成红字，不弹 toast。密钥、URL、模型名用等宽。

开关 · 勾选

开关轨道 30×18（表格里成排用 26×16），开 = 主题色、圆点反色；点击区域用伪元素扩到 38×28。成排、不该抢眼的开关用 tone="neutral"（开 = 深灰）。

分段控件 · 页签

分段控件是按钮组（aria-pressed），用在模式和页内筛选；下划线页签换整块内容。两者不混用。分段选中块是白底 + 小阴影，不用主题色。 切换有动画：选中块和页签下划线都是单独的一块，点哪项就 200ms 滑过去（src/components/ui/sliding-indicator.tsx）；页面刚打开时不播，系统开了「减少动态效果」时直接跳。

徽章

高 20、全圆角、11px / 500。用 soft 底 + text 色，不用实心彩色块。一张卡片上最多两个。

供应商卡片

最小高 58、圆角 10。普通卡片白底细描边，hover 描边加深 + 小阴影，拖拽手柄和右侧操作只在 hover / 聚焦时出现。右侧操作全部是图标按钮（主操作 → 排序 → 编辑 → ⋯），名字由 HoverTip 报； 有禁用原因时改挂说明卡报原因，不叠两层提示。状态（使用中 / 路由中）是文字不是按钮，照旧写字。 当前生效的那张用所在模式的 soft 底 + fill 描边。

主操作图标对照（ProviderCardActions.tsx · BUTTON_ICON）

设为默认 = 星标（OpenClaw 选默认模型）、启用 / 停用 = 电源；没对上的 key 回退为圆点图标，新加按钮时在 BUTTON_ICON 里补一条。

聚合页的「设为默认」不占主操作位：行上只留名单的添加 / 移除，「设为默认」在 ⋯ 菜单最前面（CardPresentation.menuItems），点了之后的后果用警示色写在名字下面，不能点时列出来并写原因。

供应商图标框固定白底深色图标，深色主题里也不反色——单色品牌图标继承浅色文字会看不见。

通知条 · 说明卡

通知条圆角 10、左侧 16px 图标、soft 底，不用左边框强调色。只有一行时图标、文字、按钮整行上下居中；有第二行时图标对齐第一行。应用页顶部的通知槽按严重程度从上到下排。

说明卡 HelpTip（「?」）

菜单 · 对话框 · Toast

Toast 是白卡片（深色主题为深灰）、底部居中、2 秒消失；状态只看图标颜色——成功绿勾、失败红、警告琥珀、提示灰；带关闭按钮时一律在右上角（RTL 镜像到左上）。对话框圆角 14、遮罩 --overlay、shadow-lg。确认危险操作时，按钮写具体动作（「删除」），不写「确定」。会丢东西、要重启这类后果写在对话框或 toast 里，不进说明卡。

数据展示

数字列右对齐、tabular-nums；状态码、模型名、时间用等宽；额度条 >30% 绿、10–30% 琥珀、<10% 红。

连接模式

每个应用有三种连接方式：直连（直接写配置文件）、 路由（本地代理按队列 / 故障转移）、聚合（多家模型合并）。 模式 tab 保留图标 + 文字、不挂提示；同一行右侧的故障转移、路由设置是纯图标 + HoverTip。

侧栏

宽 200（收起 72），bg-sidebar 底。行高 28、圆角 6，当前项 bg-selected。应用行右侧的小标签用模式 text 色写当前模式。

交互原则

Do / Don't