# Brand

URL: https://flow.lanstar.dev/docs/brand

`brand/`、`Apps/FlowMac/AppIcon.icon` 與網站的 `favicon.svg`、`apple-touch-icon.png`、`og.png` 皆由 `scripts/generate-brand.py` 產生；修改幾何或配色時改腳本後重跑，不直接編輯輸出檔，也不在 Icon Composer 修改 `AppIcon.icon`。

需要 `brew install svgo librsvg`；`og.png` 的文字需安裝 Inter Display 與 Inter，中文用系統的 PingFang TC。

```sh
scripts/generate-brand.py                # 重新產生全部輸出，SVG 以 SVGO 最佳化
scripts/generate-brand.py --png tmp/brand # 另輸出 brand/ 的 PNG 預覽
uv run --with fonttools scripts/generate-brand.py --wordmark InterDisplay-SemiBold.otf  # 重描 wordmark
```

| `brand/` | 用途 |
|---|---|
| `flow-mark.svg` | 主圖形：音量條輪廓構成播放鍵 |
| `flow-mark-small.svg` | 32 px 以下的像素對齊版 |
| `flow-wordmark.svg` | Wordmark 外框（Inter Display SemiBold，OFL-1.1） |
| `flow-lockup.svg`／`flow-lockup-ink.svg` | 圖形加 wordmark，深底／淺底用 |
| `flow-appicon.svg` | 非 Liquid Glass 的平面 App 圖示，供網站與 DMG |
| `flow-sheet.svg` | 構造、尺寸、lockup 與播放狀態總覽 |
| `flow-mark.json` | 主圖形幾何，供網站 Logo（`website/src/components/site/logo.tsx`） |

| 名稱 | 色碼 | 用途 |
|---|---|---|
| INK | `#0B0B0C` | 底色 |
| LIGHT | `#F4F1EA` | 圖形與文字 |
| SIGNAL | `#FF5A1F` | 唯一強調色，播放點 |
| TRACE | `#5FD4FF` | 標註與構造線，少量使用 |