OpenClaw Console Design — 控制台设计系统（免费版）
一套经过真实生产运维系统验证的控制台设计体系：明暗双主题、功能编码配色、移动端完整适配。
本包提供设计令牌 + 布局骨架 + 基础组件，可直接复制进项目使用。
何时使用
- 要搭建后台管理台、运维控制台、AI/Agent 管理界面、数据看板、监控大屏
- 需要一套统一的暗色（或明色）设计语言，而不是临时拼凑配色
- 希望 AI 生成的界面在视觉上"像产品"，而不是每页各写各的样式
何时不用
- 消费级 C2C 页面、营销落地页（本体系偏工具/中后台密度）
- 只需要单个组件、不需要整套体系时（直接抄对应片段即可）
快速开始
- 复制
assets/theme-base.css到项目样式入口，全局引入。 - 按
references/design-tokens.md的语义选用令牌，不要硬编码颜色值。 - 按
references/components.md的类名与结构拼装页面。
明暗主题切换：在根元素设置 data-theme="light" 即可，默认是暗色。
<html data-theme="light"> <!-- 明色 -->
<html> <!-- 暗色（默认） -->
核心设计原则
1. 颜色是功能编码，不是装饰
这是本体系最重要的一条。每个强调色绑定一类语义，全站保持一致：
| 令牌 | 色值（暗色） | 语义 |
|---|---|---|
--accent |
#4f8cff |
主操作 / 模型 |
--accent-2 |
#a78bfa |
工作流 |
--accent-3 |
#39c5cf |
Agent |
--green |
#3fb950 |
健康 / 在线 |
--yellow |
#d6a020 |
告警 |
--red |
#f85149 |
错误 / 危险 |
--pink |
#ec6cb9 |
记忆 / 知识库 |
同一语义在任何页面都用同一个色。用户学会一次，全站通用。
2. 中性色分四层，不要只用黑白
背景 --bg-950 / --bg-900 / --bg-850，卡片 --card / --card-2 / --card-hover。
层级靠背景递进而非靠边框堆砌，这是暗色界面"透气"的关键。
3. 文本三级，各司其职
--text（正文）→ --text-2（次要/说明）→ --text-3（弱化/标签）。
禁止用 opacity 降透明度来制造层级——在明色主题下会失真。
布局骨架
.app (flex, height 100vh / 100dvh)
├── .sidebar 224px，可折叠至 64px
│ ├── .brand 56px 高
│ ├── .nav 滚动区
│ └── .sidebar-foot
└── .main
├── .topbar 56px 高
└── .content padding 22px 26px 60px
移动端（≤768px）：侧栏变抽屉，出现底部标签栏，宽表格自动转卡片流。
使用约束
- 令牌只改
:root里的变量，不要在组件里覆盖具体色值。 - 表单字号在移动端必须 ≥16px，否则 iOS Safari 聚焦时整页缩放。
- 触控目标 ≥40px。
- 视口高度优先用
dvh（手机地址栏会裁掉vh的底部内容）。
免费版包含 / 不含
包含：完整设计令牌（明暗双主题）、布局骨架、按钮/徽标/卡片/输入/表格/模态框等基础组件、响应式与移动端适配规则。
不含（付费版提供）：按品牌色/行业自动生成整套定制主题、14 个业务模块的完整页面模板、命令面板/Toast/工作流画布/甘特图/对话面板等高级交互组件。
许可
免费使用，可商用。保留署名即可。完整设计体系出自 Horizo Work Console（OpenClaw 运维控制台），经真实生产环境验证。
