# Claude How To - 设计系统

## 视觉识别

### 图标设计概念：指南针 + 代码括号

Claude How To 的图标使用**指南针加 `>` 代码括号**来表示“在代码中导航”：

```
     N (green)
     ▲
     │
W ───>─── E     Compass = Guidance/Direction
     │          > Bracket = Code/Terminal/CLI
     ▼
     S (black)
```

它带来了以下效果：
- **视觉清晰**：一眼就能看出这是“代码导航指南”
- **象征意义**：指南针 = 找到方向；`>` = 代码/终端
- **可扩展性**：从 16px 到 512px 都能正常工作
- **品牌一致性**：以极简配色匹配开发者工具气质

---

## 色彩系统

### 配色

| 颜色 | 十六进制 | RGB | 用途 |
|-------|-----|-----|-------|
| 黑色（主色） | `#000000` | 0, 0, 0 | 主描边、文字、南针 |
| 白色（背景） | `#FFFFFF` | 255, 255, 255 | 浅色背景 |
| 灰色（辅助） | `#6B7280` | 107, 114, 128 | 次要刻度、次级文字 |
| 亮绿色（强调） | `#22C55E` | 34, 197, 94 | 北针、中心点、强调线 |
| 接近黑色（深色背景） | `#0A0A0A` | 10, 10, 10 | 深色模式背景 |

### 对比度（WCAG）

- 黑底白字：**21:1** AAA
- 灰底白字：**4.6:1** AA
- 绿底白字：**3.2:1**（仅用于装饰，不用于正文）
- 深色背景白字：**19.5:1** AAA

### 强调色规则

**亮绿色（#22C55E）仅用于高亮：**
- 指南针北针
- 中心点
- 强调下划线/边框
- 绝不作为背景色
- 绝不用于正文

---

## 字体排版

### Logo 字体
- **字体族**：Inter、SF Pro Display、-apple-system、Segoe UI、sans-serif
- **“Claude”**：42px，700 字重（加粗），黑色
- **“How-To”**：32px，500 字重（中等），灰色（#6B7280）
- **副标题**：10px，500 字重，灰色，字间距 1.5px，大写

### 界面字体
- **字体族**：Inter、SF Pro、系统字体（sans-serif）
- **字重**：400-600
- **风格**：简洁、易读

---

## 图标细节

### 指南针规格

指南针图形由以下几何元素组成：

```
Element             | Stroke/Fill    | Color
--------------------|----------------|------------------
Outer ring          | 3px stroke     | Black / White (dark mode)
North tick          | 2.5px stroke   | Black / White (dark mode)
Other cardinal ticks| 2px stroke     | Gray / White 50% (dark mode)
Intercardinal ticks | 1.5px stroke   | Gray / White 40% (dark mode)
North needle        | filled polygon | #22C55E (always green)
South needle        | filled polygon | Black / White (dark mode)
> bracket           | 3px stroke     | Black / White (dark mode)
Center dot          | filled circle  | #22C55E (always green)
```

### 尺寸递进

```
16px  → 仅环 + 指针 + 箭头（最简版）
32px  → 增加方位刻度
64px  → 增加中间方位刻度
128px → 全细节，所有元素都清晰
256px → 最高细节，较粗描边
```

---

## 尺寸指南

### Logo 尺寸

- **最小**：200px 宽（用于网页）
- **推荐**：520px（原始尺寸）
- **最大**：无限制（矢量格式）
- **宽高比**：约 4.3:1（宽：高）

### 图标尺寸

- **最小**：16px（favicon）
- **推荐**：64-256px（应用、头像）
- **最大**：无限制（矢量格式）
- **宽高比**：1:1（正方形）

---

## 间距与对齐

### Logo 留白

```
┌─────────────────────────────────────┐
│                                     │
│        最小留白空间                 │
│         （logo 高度 / 2）          │
│                                     │
│    [COMPASS]  Claude                │
│               How-To                │
│                                     │
└─────────────────────────────────────┘
```

### 图标中心点

所有图标都以画布中心为基准：
- 256px 画布使用 128×128 中心点
- 128px 画布使用 64×64 中心点
- 与其他 UI 元素保持对齐

---

## 无障碍性

### 颜色对比
- 所有文字都满足 WCAG AA（最低 4.5:1）
- 绿色强调色只用于装饰，不承担信息传达
- 不依赖红绿配色表达含义

### 可扩展性
- 矢量格式保证任意尺寸都清晰
- 即使在 16px 下，几何形状依然可辨识
- 细节会随可用空间逐步增加

---

## 应用示例

### Web 页眉
- 尺寸：520×120px logo
- 文件：`logos/claude-howto-logo.svg`
- 背景：白色或深色（#0A0A0A）
- 内边距：至少 20px

### 应用图标
- 尺寸：256×256px
- 文件：`icons/claude-howto-icon.svg`
- 背景：白色或深色
- 用途：应用快捷方式、头像

### 浏览器 Favicon
- 尺寸：32px（主用），16px（备用）
- 文件：`favicons/favicon-32.svg`
- 格式：SVG，显示清晰锐利

### 社交媒体
- 头像：256×256px 图标
- 横幅：520×120px logo（居中）

### 文档
- 章节标题：按需缩放的 logo
- 小节图标：64×64px favicon
- 内联图标：32×32px favicon

---

## 文件格式细节

### SVG 结构

所有 SVG 文件都采用扁平设计：
- 无渐变（仅用纯色）
- 无滤镜效果（不使用模糊、发光或阴影）
- 干净的描边和填充几何结构
- 使用 `viewBox` 实现响应式缩放
- 代码可读且带注释

### 跨浏览器兼容性

- Chrome/Edge：完全支持
- Firefox：完全支持
- Safari：完全支持
- iOS Safari：完全支持
- 所有现代浏览器：完全支持

---

## 自定义

### 更换强调色

如果你想创建不同强调色的变体：

1. 把所有 `#22C55E` 替换成你的强调色
2. 确保装饰性元素的对比度仍高于 3:1
3. 保持黑/白/灰结构不变

### 缩放

```css
svg {
  width: 256px;
  height: 256px;
}
```

SVG 会通过 `viewBox` 自动缩放，不需要额外变换。

---

## 版本控制

在 git 中跟踪设计变更：
- 正常版本化 SVG 文件，因为它们本质上是文本
- 随设计变更一起打 tag
- 在提交中包含 `DESIGN-SYSTEM.md`

---

**最后更新**：2026 年 2 月
**设计系统版本**：3.0