# Mao Logo — 羽毛母题重设计规范 > 状态:已定稿(方向 1:深色容器 + 写实金羽)· 2026-09-16 > 母题:羽毛(quill / 轻盈的 Agent 执行者) > 主资产:`mao-icon-gold-feather.png`;小尺寸简化版:`mao-icon-simple*.png`;浅底:`mao-mark-light-gold.png`;透明底:`mao-feather-transparent*.png` --- ## 1. Objective 为 Mao(可私有化 AI Agent 平台)重设计主标识。核心要求:以「羽毛」为唯一视觉母题,替换现有双菱形波浪抽象标;保留品牌既有的深灰 + 金的高端调性;全尺寸可用(favicon 16px → 应用图标 → README → 登录页 → 导航栏)。 成功标准: - 16px 下仍可辨认为「羽毛」而非噪点 - 单色(白/黑/金)均可独立成立 - 与深色 UI、浅色 README、CLI 三类环境都协调 - 一眼可识别,与「猫 / Mao」名称形成轻盈、书写、飞翔的联想 ## 2. Product Context Mao 是自托管 AI Agent 管理与协作平台(RBAC、审计、CLOUD/LOCAL 双执行模式)。五端:管理后台、Web/Electron 桌面、安卓壳、`mao-agent` CLI、Embed SDK。 现有品牌资产: - 主图标:深炭灰圆角方 + 双菱形 + 金波浪(`docs/assets/logo.png`、`app-icon-small.png`) - favicon:旧紫色 M 箭头(与主图标不一致,本次一并统一) - 界面主色:深色主题为主,金色为点缀 ## 3. Visual Foundations ### 3.1 母题:羽毛 羽毛的三重语义,全部保留: 1. **羽毛笔(quill)** — Agent 的「书写 / 行动 / 创作」工具 2. **轻盈** — Agent 替你完成繁重工作,体验应是轻的 3. **飞翔 / 升起** — 智能体自主巡游、定时任务、多端漫游 设计不画写实羽毛(写实会在 16px 崩坏),取「可辨认的羽毛剪影 + 羽轴 + 2-3 处柔和缺口」三要素。 ### 3.2 色板 | 角色 | 色值 | 用途 | |------|------|------| | 墨底(Ink) | `#1C1C1E` → `#2C2C2E` | 应用图标深色容器、深色界面底 | | 金(Amber) | `#F5A524` → `#FFD666` | 羽毛主渐变,品牌第一强调色 | | 深金(Deep Gold) | `#C47A0A` | 羽毛根部 / 阴影过渡 | | 素金(Mono Gold) | `#F5A524` | 单色版、小尺寸 | | 纸白(Paper) | `#F5F2EA` | 浅色场景羽毛色 / README 底 | | 纯白 | `#FFFFFF` | 深色底上的单色版 | 渐变规则:金渐变沿羽轴从「尖端亮 `#FFD666` → 根部深 `#C47A0A`」,模拟光照;不使用紫/蓝/青等与现品牌冲突的色相。 ### 3.3 形态 - **方向**:羽尖指向右上、羽根指向左下,约 35–40° 倾斜。倾斜提供动感;垂直放置显得标本化、僵硬。 - **对称性**:不对称。迎风侧(左上)羽片更饱满,背风侧(右下)更窄。对称羽毛会变成树叶或麦穗。 - **羽轴**:从尖端贯穿至羽根,末端露出裸露羽根(quill shaft),长度约占全高的 12–18%。 - **缺口**:羽片外轮廓 2–3 处浅凹(模拟羽支分离),深度不超过羽片宽度的 8%。超过则变成锯齿。 - **圆角**:外轮廓全部圆角,无尖锐折角。尖端是「收尖的弧」,不是「刀尖」。 ### 3.4 容器 - **应用图标**:圆角矩形(squircle 感),圆角率 ~22%,底色 `#1C1C1E`→`#2C2C2E` 径向微渐变,羽毛居中占容器 58–68%。 - **独立标识**:无容器,羽毛直接置于透明底;用于 README、浅色纸面、文档。 - **禁止**:给羽毛描粗外框、加投影、加光晕、加网格线。羽毛自身渐变即全部光影。 ### 3.5 字标(Wordmark) - 字体:几何无衬线(Inter / SF Pro / 微软雅黑皆可),字重 Medium(500–600)。 - 写法:`Mao`(M 大写,ao 小写),不使用全大写 `MAO`(全大写偏军事/命令行工具,与消费级协作平台调性不符)。 - 字距:`-0.02em`(微紧),避免松散。 - 锁定组合:羽毛在左、字标在右,羽毛高度 ≈ 字标 cap-height × 1.6;间距 = 0.55 × 字高。 - 深底字标:`#F5F2EA`;浅底字标:`#1C1C1E`。字标不参与金渐变——金只属于羽毛。 ## 4. Accessibility - 金 `#F5A524` 对墨底 `#1C1C1E` 对比度 ≈ 8.9:1(大图形 3:1 要求轻松通过)。 - 单色版(纯白 / 纯黑)不依赖色彩传达品牌,灰度打印、传真、终端 ASCII 场景可用。 - 最小使用尺寸:数字 16px(favicon)、印刷 6mm。低于此使用单色实心剪影版,不使用渐变版。 ## 5. Voice & Tone 标识本身无文案。品牌语调参考:克制、精确、有手温。不卖萌、不科幻、不堆渐变彩虹。羽毛是工具与轻盈的象征,不是宠物、不是装饰。 ## 6. Implementation Practices - 主交付为 SVG(矢量),PNG 由 SVG 导出;不反向从 PNG 描摹。 - 图标导出尺寸:16 / 32 / 64 / 128 / 256 / 512 / 1024。Electron `AppIcon.icns`、Android 各 dpi、favicon 由 512/256 派生。 - 渐变版仅用于 ≥64px;16–32px 使用单色实心版(渐变在小尺寸变脏)。 - 文件命名:`mao-mark.svg`(纯羽毛)、`mao-icon.svg`(带容器)、`mao-lockup.svg`(羽毛+字标)、`mao-mark-mono.svg`(单色)。 - 替换范围:`docs/assets/logo.png`、`desktop/public/app-icon-small.png`、`desktop/public/favicon.svg`、`admin/public/*`、Android drawable、Electron icns——待方案确认后统一替换,避免只换一处导致五端不一致。 ## 7. Anti-Patterns 以下均不采用: - 写实羽毛摄影/AI 绘图直接当 logo(不可缩放、不可单色) - 羽毛 + 电路板/芯片纹路叠加(科技感堆砌,信息噪音) - 紫/蓝/青渐变(与现金色品牌断层,favicon 旧紫 M 的教训) - 三根以上羽毛的「翅膀群」(缩小后糊成一团) - 给羽毛加人脸、猫耳等具象联想(Mao 虽是猫的拼音,但品牌从未走宠物路线) - 圆形徽章式包裹 + 文字环绕(政务/校徽气质,与开发者工具不符) ## 8. Decision-Making | 决策 | 选择 | 放弃项 | 理由 | |------|------|--------|------| | 母题呈现 | 单支羽毛 | 双羽毛、翅膀、羽毛+菱形混搭 | 双羽毛在 16px 糊;混搭不彻底 | | 容器 | 深色圆角方(仅应用图标) | 圆形、六边形、无容器 | 与现 app-icon 一致,迁移成本最低 | | 渐变方向 | 沿羽轴尖亮根深 | 径向光斑、横向扫光 | 轴向渐变在旋转后仍自然 | | 倾斜角 | 35–40° | 0°(垂直)、45° | 垂直太标本;45° 太「飞行棋」 | | favicon 统一 | 换为羽毛 | 保留旧紫 M | 旧 favicon 与主图标已脱节,趁重设计一并收口 | ## 9. Workflow 1. 本规范 + 矢量概念稿 → 用户选定方向 2. 按选定方向精修路径、导出全尺寸 PNG/ICNS/APK 资源 3. 替换五端引用点,跑一遍 admin/desktop 视觉回归 4. 更新 CHANGELOG、README 引用、`skills/mao-cli/reference/project.md`