# 品牌识别 — bikedo.app

> bikedo.app 视觉识别指南：字标、配色、字体与语调。

Source: https://bikedo.app/zh/brand
Locale: zh

如何使用 bikedo.app 品牌。

字标、配色、字体以及我们谈论产品方式的简短指南。如果你在合作伙伴网站、媒体素材包或社区帖子里使用 BikeDo 的素材，这里就是依据。

---

## 字标

两色、两个字重、一个 Clay 强调。Inter Black，字间距略收紧。

- 字标始终为 「bikedo.app」（小写）。「.app」后缀始终为 Clay。
- 字标周围的留白至少为「b」字高的距离。不要挤压。
- 在正文中将产品写作 BikeDo（CamelCase）— 切勿写「BikeDo App」或「BikeDo API」。

---

## 图标

应用标志 — 深色方块上 Clay 色的小写「b」。同一个标志可用作应用图标、网站图标，以及页脚或签名中的图标。

![bikedo.app](https://bikedo.app/brand/app-icon-512.png)

- **应用图标** — 圆角方形，Black/Charcoal 上的 Clay「b」。iOS 与 Android，App Store 与 Google Play。 ([PNG 1024](https://bikedo.app/brand/app-icon-1024.png))
- **网站图标 / 小** — 字母更大，便于 16–32 px 下辨识。浏览器标签页、书签和 PWA。 ([.ico](https://bikedo.app/brand/favicon.ico))
- **矢量源文件** — 用于大尺寸渲染和印刷的母版 SVG — 缩放不损失质量。 ([SVG](https://bikedo.app/brand/icon.svg))

- 不要改色、拉伸或旋转标志。保持比例和留白。
- 图标已内置深色背景 — 不要在另一个深色方块上无间距地放置。

---

## 壁纸

品牌配色的桌面壁纸 — charcoal 上的标志，5K。可选纯标志或带标语版本。

![bikedo.app wallpaper](https://bikedo.app/brand/wallpapers/wallpaper-plain.jpg)

- **仅标志** — charcoal 上居中的 bikedo.app 标志。简洁，无标语。5120×2880。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-5120x2880.png))
- **带标语 · PL** — 带品牌标语的标志。5120×2880 — 可选语言。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-5120x2880.png))
- **带标语 · EN** — 带品牌标语的标志。5120×2880 — 可选语言。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-5120x2880.png))
- **超宽屏** — 适配超宽屏和双显示器的宽幅裁切。5120×1008。 ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-ultrawide-5120x1008.png))

**手机版**

- **仅标志** — 仅标志，置于下半部分（适配锁屏）。iPhone 与 Android。 ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-plain-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-plain-phone-android-1080x2400.png))
- **带标语 · PL** — 带标语的标志，置于下半部分。iPhone 与 Android。 ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-pl-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-pl-phone-android-1080x2400.png))
- **带标语 · EN** — 带标语的标志，置于下半部分。iPhone 与 Android。 ([iPhone](https://bikedo.app/brand/wallpapers/wallpaper-en-phone-iphone-1290x2796.png) · [Android](https://bikedo.app/brand/wallpapers/wallpaper-en-phone-android-1080x2400.png))

**社交 / 分享**

用于分享和社交预览的 Open Graph 1200×630 图片。

- **仅标志** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-plain-og-1200x630.png))
- **带标语 · PL** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-pl-og-1200x630.png))
- **带标语 · EN** ([PNG](https://bikedo.app/brand/wallpapers/wallpaper-en-og-1200x630.png))

---

## 配色

以峡谷为灵感。一个暖色强调（Clay），两个深色，两个中性，两种文本色。每个颜色都有定义好的角色 — 保持在该轨道。

| Name | Hex | Role |
|------|-----|------|
| Clay | `#C45E3A` | 主强调色。CTA、链接、焦点环、激活状态。绝不用作页面背景。 |
| Black | `#1A1A1A` | 页面背景（深色界面）。移动 App 与 Web 的默认底色。 |
| Charcoal | `#2D2D2D` | 深色界面上的卡片／面板背景。比 Black 略亮。 |
| Stone | `#4A4A4A` | 深色界面的边框、分隔线、细线。降到 30–60% 透明度作为柔和分隔。 |
| Text light | `#F5F5F5` | 深色界面的主文字。Black/Charcoal 上的标题与正文。 |
| Text muted | `#78716C` | 次要文字、说明、提示、占位符。在 Black 上满足正文尺寸的 WCAG AA。 |
| Sand | `#E8DED5` | 浅色界面（营销、样机）的边框。与 Light bg 搭配。 |
| Light bg | `#F8F6F3` | 浅色主题与样机的灰白色。不使用纯白。 |

---

## 字体

产品与正文使用 Inter。营销页面的编辑标题使用 Playfair Display。不要混用 — 一个界面一种角色。

- **Inter** — UI ＋ 正文
- **Playfair Display** — 编辑标题

Hierarchy:

- H1 — Playfair, 48–60px: _为你的自行车打造更简单的家。_
- H2 — Playfair, 28–36px: _无需电子表格的维修历史。_
- 正文 — Inter, 16–18px: 两次点击即可记录一次保养。加张照片。分享给车店。当车辆易主时，完整的历史会随车流转。
- 说明 — Inter, 12–13px: 上次保养于 14 天前 · 1,240 公里

---

## 语调

BikeDo 像一个懂自行车、平静且专业的朋友。自信、具体、不浮夸。我们不喊话。

### 建议

- **将字标作为「bikedo.app」使用，「.app」用 Clay。** — 配合 Inter Black/Bold 并保留呼吸 — 至少留出「b」字高的留白。
- **在正文里把产品写作「BikeDo」（CamelCase）。** — 句中 CamelCase 比小写字标更易读。
- **Clay 要克制 — Black/Charcoal 页面上唯一的强调。** — 如果一切都强调，那就没有强调。Clay 应把目光引向下一步操作。
- **标题与按钮使用句首大写（sentence case）。** — 句首大写更像在说话，而不像企业产品。

### 避免

- **正文中不要写「BikeDo App」「BikeDo Mobile」或「BikeDo API」。** — 它就是 BikeDo — App 与 API 是实现细节，不是名称的一部分。
- **不要更改字标的颜色分配。** — 「bikedo」在深色背景始终用 Text light（浅色背景用 Charcoal）；「.app」始终用 Clay。
- **不要让 Clay 叠在 Clay 上，也不要给「.app」后缀重新着色。** — 会失去固定品牌的辨识信号。
- **不要用纯白作为背景。** — 使用 Light bg（#F8F6F3）。纯白在土质色板旁显得冰冷。
- **不要把 tagline 与字标并排锁定。** — 如果需要 tagline，请放在字标下方独立一行，使用 Text muted。

---

需要这里没有的素材（矢量 logo、OG 模板、合作伙伴徽章）吗？发邮件到 hello@bikedo.app。