# BitBee Design Guidelines — v1.0 · 2026-09-22

> 品牌與公關視覺指南。規格取自 bitbee.work 線上產品（`src/app/globals.css`、各頁實作）與官方標誌原始檔，是對外素材的單一事實來源。
> 入口：https://communication.bitbee.work · Tokens：`/brand/bitbee-tokens.css`

**一句話：溫暖的蜂蜜、清楚的獎勵。** BitBee 是「做任務、領比特幣」的獎勵任務平台。視覺用奶油底與蜂蜜漸層營造親切感；獎勵數字、狀態與操作必須一眼看懂。

---

## 1. 標誌 Logo

官方標誌 = 蜜蜂圖示 + 「Bitbee」字標（B 大寫）。原始檔：`bitbee-logo.ai`（Adobe Illustrator）。

| 檔案 | 用途 |
|---|---|
| `bitbee-logo.svg` / `.png` | 標準橫式，淺色底 |
| `bitbee-logo-on-dark.svg` / `.png` | 深色底（字標反白，圖示不變） |
| `bitbee-logo-on-honey.svg` / `.png` | 蜂蜜色底 |
| `bitbee-mark.svg`、`bitbee-mark-512/1024.png` | 單獨圖示：App icon、頭像、favicon、貼圖 |
| `bitbee-logo.ai` | 可編輯原始檔 |

- **留白**：四周至少保留「蜜蜂眼睛直徑 × 2」。
- **最小尺寸**：橫式高 24px（螢幕）／8mm（印刷）；圖示 20px。
- **標誌色封存**：蜂蜜 `#FFA61D`／`#FFB210`、翅膀 `#E3F9F0`、黑 `#000000`。只能使用提供的檔案。
- **禁止**：重新上色、改字體、拉伸、旋轉、加陰影或描邊、把圖示放在低對比的蜂蜜漸層上、把字標寫成「BitBee」字串代替標誌。
- **文字中的品牌名**：一般文案寫 **BitBee**；中文稱「比特蜜蜂」。貨幣單位寫 **HONEY**（全大寫）。

## 2. 色彩 Color

| 名稱 | Token | HEX | 用途 |
|---|---|---|---|
| Honey | `--bb-honey` | `#F5A623` | 品牌主色、焦點框、進度 |
| Honey Light | `--bb-honey-light` | `#FFD06B` | 捲軸、淡強調 |
| Honey Dark | `--bb-honey-dark` | `#E09100` | 蜂蜜上的圖示、深強調 |
| Amber | `--bb-amber` | `#FFBF42` | 漸層中段 |
| Peach | `--bb-peach` | `#FF9A76` | 漸層尾端 |
| Cream | `--bb-cream` | `#FFF8E7` | 頁面底色 |
| Warm White | `--bb-warm-white` | `#FFFDF5` | 卡片 |
| Ink | `--bb-ink` | `#2D1B00` | 主要文字 |
| Ink 2 | `--bb-ink-2` | `#7A6543` | 次要文字 |
| Muted | `--bb-muted` | `#A89375` | 註解、時間戳 |
| On Honey | `--bb-on-honey` | `#5A3600` | 蜂蜜按鈕上的文字 |
| Stripe | `--bb-stripe` | `#3D3D3D` | 蜂紋裝飾、深色區塊 |

**品牌漸層**：`linear-gradient(135deg, #F5A623 0%, #FFBF42 50%, #FF9A76 100%)`。用於 App 頁首、主要按鈕、社群主視覺，一個畫面只出現在一到兩處。

**訊號色**（只表達意義，不作裝飾）：
- 獲得 `+HONEY`／`+BTC`：`#EA580C`
- 扣除：`#DC2626`
- 完成／兌換：`#10B981`
- LINE 相關操作：`#06C755`（僅限 LINE 登入、加好友、分享）

**對比**：小字只用 Ink／Ink 2。蜂蜜色不可當作白底上的內文字色。

## 3. 字體 Typography

- **Inter**：拉丁字母、數字、HONEY／BTC 數額。
- **中文**：PingFang TC（Apple）／Noto Sans TC（其他）。
- 層級靠字重與大小，不靠顏色。

| 角色 | 大小 / 行高 | 字重 |
|---|---|---|
| 行銷主標 | 40–56px / 1.15 | 900 Black |
| App 頁面標題 | 18px / 1.3 | 900 |
| 卡片標題 | 15–16px / 1.4 | 700 |
| 內文 | 14–16px / 1.6 | 400–500 |
| 獎勵數額 | 14px（清單）～ 48px（總額） | 800–900 |
| 標籤 / 註解 | 10–12px | 700，字距 0.05em |

## 4. 版面、形狀、層次

- **行動優先**：內容欄寬 ≤ 480px，左右 16–24px 邊距。底部固定四分頁導覽（任務／首頁／獎勵／成就），需避開 iOS 安全區。
- **圓角**：卡片 20px、按鈕與輸入框 16px、標籤與分頁為膠囊形。
- **陰影**：卡片用帶蜂蜜色的柔和陰影 `0 2px 8px rgba(245,166,35,.08)`；主按鈕懸停時才浮起。
- **背景**：奶油底加極淡的放射狀蜂蜜光暈；六角蜂巢紋只用於登入與品牌主視覺。
- **B2B／行銷頁**：白底、大黑字主標，關鍵詞用橘色，數據用橘色大數字，頁尾深色。

## 5. 元件 Components

- **主按鈕**：品牌漸層、文字 `#5A3600`、字重 700、圓角 16px。
- **次按鈕**：白底、蜂蜜細框。
- **LINE 按鈕**：`#06C755` 綠底、白字、左側 LINE 圖示。
- **任務卡**：溫白卡片，標題在左、`+5 HONEY` 在右（橘色），下方主按鈕。
- **獎勵紀錄列**：圖示圓底、名稱與時間戳；數額靠右，並附狀態小字（已發放為綠、已扣除為紅）。
- **分段切換**：淡蜂蜜底，選取項目為白色膠囊，右側附計數徽章。
- **進度條**：兌換用綠色，成就用蜂蜜色，兩端標數值。

## 6. 動態 Motion

- 蜜蜂圖示可輕微彈跳或漂浮（`bee-bounce`、`bee-float`），獎勵到帳時卡片彈出（`pop-in`，0.4s）。
- 主按鈕有緩慢流光（3s），蜂紋裝飾條緩慢流動。
- 必須尊重 `prefers-reduced-motion`；印刷與靜態輸出一律不帶動態。

## 7. 應用情境 Applications

| 情境 | 規格 | 要點 |
|---|---|---|
| App 頁首 | 滿版 | 品牌漸層，白色標題加副標，左側放單獨圖示 |
| OG / 分享卡 | 1200×630 | 奶油或漸層底、橫式標誌、一句主張、可選 QR |
| IG / FB 貼文 | 1080×1080 | 一則訊息一張圖；獎勵數額用 Inter Black |
| 限時動態 | 1080×1920 | 上下各保留 250px 安全區 |
| LINE 官方帳號訊息 | 圖文訊息 1040 寬 | 按鈕文字 ≤ 8 字，行動動詞開頭（領取、前往） |
| 聯名 Co-branding | 橫式並排 | 以細直線或 × 分隔，雙方視覺高度相同，各自保留留白 |
| 貼紙 / 印刷 | 圖示單獨使用 | 最小 20mm；需要時加白色外框（Die-cut） |
| 簡報 | 16:9 | 白底或奶油底，標誌放左上，重點用橘字 |

## 8. 語氣 Voice

- **直接、友善、可驗證**：「完成任務，領取 5 HONEY」優於「超多好康等你拿！」。
- 獎勵說明必須寫清楚兌換比例與上限（例：100 HONEY = 10 LINE Points，每人每 7 天最多 3 組，可一次或分次兌換）。
- 不承諾收益，不作投資建議，不誇大比特幣價值。
- 合作案例需附可查證的數據來源。
- 媒體聯絡：pr@bitbee.work

## 9. 下載 Downloads

- 完整品牌套件：`/brand/bitbee-brand-kit.zip`
- 標誌 SVG／PNG／AI：`/brand/`
- 色彩與字體 tokens：`/brand/bitbee-tokens.css`
- 本規範：`/design.md`