docs/assets/logo-design/DESIGN.md

Rama main · réplica de lectura del repositorio original.

# 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`