- 产品：面向 AI 内容营销团队的本地优先创作与云端治理系统。
- 用户：内容策略、编辑、审核、项目管理、租户管理员与平台运营人员。
- 界面类型：公共官网、登录注册、内容工作台、审核界面、使用文档与独立平台后台。
- 设计目标：让公共品牌与高频工作面属于同一套 Content Work OS，同时保持营销表达和生产效率各自应有的密度。
apps/web/src/marketing/marketing.css中当前首页是品牌视觉基准。首页首屏使用浅青绿像素场景、居中品牌叙事和真实任务摘要组成单一构图；产品品牌、任务状态和客户下一步保持主导。- 工作台、平台后台、登录注册、文档和公开页面复用首页的中性灰白、清亮蓝焦点、Logo、字体与图标语言，但不复制营销页的大标题或内容编排。
- 工作面以白色、浅灰背景、中性边框和严格网格承载高频操作；近黑色用于主要命令，清亮蓝只用于品牌、选中态、链接和焦点，侧栏保持白色，不得形成大面积蓝色区域。
- 颜色用于区分品牌交互、对象类型和系统状态。品牌主题以白色为主、明亮蓝为辅，不使用粉色主题，也不把整个界面染成单一蓝色。
- 一级产品品牌统一为 Content Work OS。
ContentCloud CLI、npm 包名、API 路径、Workspace 文件和其他兼容性技术标识在完成独立迁移前保持不变。- 面向用户的一级导航、页头、登录注册、官网和文档首页不得再把
ContentCloud作为产品主标题。
- Logo 使用
30 x 30模块网格：六个清亮蓝模块形成开放的C，右下浅天蓝模块表示可启用的内容能力。 - 标志本身不包含文字、底框或装饰性渐变；需要品牌名时使用
BrandLockup，不得重复拼装另一套 Logo。 - 浅色表面：主图形
#4c91ff，信号模块#8bd8ff。 - 深色表面：主图形
#ffffff，信号模块#dbeafe。 - 常规 UI 尺寸为
30-46px；favicon 使用带冷白底的独立版本，必须在16px下仍可辨认。
- 功能图标使用 Lucide，不手绘功能型 SVG。
- 全局线宽为
1.75；图标只承担操作和对象识别，不作为背景装饰。 - 图标按钮必须提供可访问名称或 tooltip；Logo 不作为可点击功能图标使用。
- Ink command
#172033：主要按钮和高权重命令面；避免把主操作做成大块企业蓝。 - Ink command hover
#263149。 - Glacier blue
#4c91ff：品牌主图形、选中项和少量高权重焦点。 - Link blue
#3f83ef：链接、导航选中态和信息状态。 - Sky signal
#8bd8ff：Logo 信号模块和少量能力提示。 - Focus blue
#76b4ff：键盘焦点环，不作为大面积背景。 - Ice blue
#eff6ff：选中项、信息状态和来源对象的柔和表面。
- Page
#f8faff - Panel
#ffffff - Subtle
#fbfdff - Raised
#edf3f9 - Ink
#172033 - Text
#52627b - Muted
#65738c - Border
#e3eaf3
- Sources
#4c91ff/#eff6ff - Knowledge
#397860/#edf4ef - Strategy
#3b6f8f/#edf4f8 - Production
#b45b3c/#fff3ed - Review
#c24f5f/#fff1f2
分类色表达对象类型和生产阶段，不表达成功或失败。品牌采用明亮蓝白体系时，仍保留绿、蓝灰、陶红和玫红等对象色提高后台扫描效率；这些颜色只出现在内容分类和系统状态，不参与品牌主视觉。
- Info
#4386ec - Success
#0b7f53 - Warning
#a9651a - Danger
#c24f5f
语义色只表达系统状态，不承担品牌装饰。
- UI / Body：平台原生 humanist sans 栈，优先 Avenir Next、Segoe UI Variable、苹方与微软雅黑。
- Data / Code：系统等宽字体栈；数字列启用 tabular nums。
- 策略：不加载远程字体，保证本地优先环境、离线开发和隐私边界。
- 工作面尺度：正文
11 / 11.5 / 12 / 13 / 14px，紧凑面板标题15-25px。 - 官网尺度：Hero 可使用独立大字号，但不得把 Hero 字号带入后台、侧栏、表单或卡片。
- 字距：统一为
0，不使用负字距压缩品牌名或标题。
- 基础单位为
4px；表格和管线保持固定节奏，表单保留8-16px组间距。 - 工作台最大内容宽度为
1440px，页面使用响应式网格；固定格式组件必须定义稳定轨道或尺寸。 - 小元素圆角
6px，控件和卡片8px，弹层12px；状态 pill 可使用完全圆角。 - 页面区块保持无框架或全宽带状布局。卡片只用于重复对象、弹层和确实需要边界的工具，不允许卡片套卡片。
- 移动端最低支持宽度为
320px；品牌名、标题、按钮和长单词不得造成横向滚动或被裁切。
- 首屏使用独立的浅青绿像素场景
/images/content-work-os-pixel-field.webp，采用居中品牌标题、双 CTA、四周白色像素片段和底部任务摘要露出的构图；登录注册继续使用/images/content-work-os-studio.webp自然光场景。 - Hero 保持品牌优先，像素片段只承担轻量场景氛围；下一段任务摘要承载固定输入、人工确认、版本状态和唯一下一步，不使用与业务无关的漂浮节点或装饰流程图。
- 首页紧接客户创作流程、结果资产目录、资产复用闭环、三执行平面和能力状态表，视觉内容必须来自产品文档与当前代码事实。
- 首页内容状态来自 Registry 和文档目录，不静态承诺未实现能力。
- 桌面采用左侧首页同源场景图、右侧白色表单工作面的两栏布局。
- 移动端隐藏场景图，只显示完整表单；注册长表单必须在常用高度下可自然滚动。
- 表单不使用装饰卡片包裹，主要动作使用近黑色命令面；桌面继续使用现有自然光场景图与原白色轻遮罩。
- 侧栏使用白色与冰蓝选中面，内容区使用白色、浅灰背景和中性边框；不得出现大面积深蓝背景，也不得把整个后台染成蓝色。
- 工作台优先扫描、比较和重复操作；平台后台优先租户、用户、能力开关与运行状态。
- 微信公众号文章按租户显式开关，视频剧本默认能力的状态表达不得依赖颜色猜测。
- 文档、设备授权和公开审核页复用共享 Logo、颜色、字体与按钮。
- 文档正文维持阅读宽度和语义标题层级，不套用营销 Hero。
- 产品介绍使用“任务输入与项目参考 -> Content Work OS 创作任务 -> 创作资产、交付和专业工具”的三段式叙事。
- 中心使用
BrandLockup与“创作任务”文字，高权重核心面使用近黑命令色，不使用机器人头像或“ContentCloud Agent”，避免暗示一个自主 Agent 拥有平台状态。 - 客户叙事图与平台架构图分别维护。前者解释输入与结果，后者解释客户面、运营面、业务域、Runtime 和执行者边界。
- 工具节点先使用能力类别；供应商 Logo 只用于已验证集成或明确标记状态的示例，不做无边界 Logo 墙。
- 架构文档使用组件名称，不使用供应商 Logo 替代能力、契约或执行者类型。
- 横向三段图在移动端改为纵向顺序，不等比缩小；文字、连接关系和状态必须在
390 x 844与最低320px下可读。
详细叙事、文案和验收规则见 docs/product/00-product-narrative.md。
- 微交互时长为
150-200ms，只过渡颜色、透明度和 transform，不使用transition: all。 - 必须尊重
prefers-reduced-motion，所有键盘交互保留focus-visible。 - 深浅背景文本满足 WCAG AA；图标按钮、菜单、表单错误和租户能力开关必须有可访问名称。
- 验收至少覆盖
1440 x 1000和390 x 844，并确认scrollWidth不大于布局视口宽度。
| Date | Decision | Rationale |
|---|---|---|
| 2026-07-26 | 从 Rubik 蓝平台主题改为 Editorial Studio | 单一蓝色更像基础设施控制台，无法表达内容生产阶段。 |
| 2026-07-27 | 采用冷白工作面、近黑命令和多阶段分类色 | 保持创作者工具气质与高频后台扫描效率。 |
| 2026-07-31 | 一级品牌升级为 Content Work OS | 统一官网、工作台、后台、登录注册、文档和公开页面的产品心智。 |
| 2026-07-31 | 首页当前版本成为唯一视觉基准 | 用户已确认首页背景、布局和内容，不再以品牌统一为由重做首页。 |
| 2026-07-31 | 采用开放 C 模块 Logo 与青绿能力信号 | 同时表达 Content、可组合工作模块和按租户启用的内容能力。 |
| 2026-07-31 | 产品端切换为松绿品牌 token，保留多组对象色 | 形成同一主题，同时避免后台变成单一绿色界面。 |
| 2026-08-05 | 首页在自然光场景背景上叠加产品系统画布 | 用户明确要求保留首页背景图，同时直接体现资产目录、创作闭环、平台分层和多执行者关系。 |
| 2026-08-11 | 官网、后台与登录统一为明亮蓝白主题 | 用户否定石墨、青绿和暗蓝方案；保留原背景图，以白色、皇家蓝、天蓝和冰蓝形成更轻的统一视觉。 |
| 2026-08-11 | 官网能力叙事以 Infra 文档和公开目录为事实源 | 明确区分本地可用、服务端可用、执行框架已接通与外部依赖，避免把底层实现写成真实账号或自动发布已接通。 |
| 2026-08-12 | 对标参考站的中性工作室层级，蓝色只保留为焦点 | 用户否定大面积皇家蓝和高饱和天蓝；采用白色主表面、浅灰工作区、近黑命令、清亮蓝焦点，并将 Studio 调整为 112px 紧凑导航、约 404px 上下文栏和开放工作面。 |
| 2026-08-12 | 采用参考站的白色留白、胶囊控件和柔和浮层，品牌色改为冰川蓝 | 用户再次否定普通企业蓝观感；颜色只替代参考站的粉色强调，不把页面整体染蓝，官网保留原自然光背景图，登录、Studio 与后台共享同一套冷白表面和墨色命令。 |
| 2026-08-17 | 首页改为 Catpaw 同类居中绿色像素场景 | 复用透明导航、居中 Hero、白色像素片段、双 CTA 和下一段露出的构图与动效机制；不复制对方品牌素材、Logo 或文案，继续使用 Content Work OS 的真实任务内容。 |