# TDF 2027 CIS｜品牌識別系統

> 版本：1.0（2026-09-01）
>
> 品牌所有者：台灣數位遊牧者協會（TDNA / Taiwan Digital Nomad Association）
>
> 適用：官網、TDF App、社群、簡報、PR Kit、票券、識別證、指標、背板與印刷品。
>
> 本文件是 TDF 2027 品牌規範的單一真相來源；視覺範例見 [`design/brand/cis.html`](../design/brand/cis.html)。

---

## 1. 品牌架構

### 1.1 主從關係

- **TDNA** 是主辦與背書品牌，負責組織信用。
- **Taiwan Digital Fest 2027 / TDF 2027** 是對外活動品牌，負責所有參與者接觸點。
- 對外主標使用 `TAIWAN DIGITAL FEST 2027`；空間不足時可縮寫為 `TDF 2027`。
- 主辦署名固定使用 `HOSTED BY TAIWAN DIGITAL NOMAD ASSOCIATION · TDNA`；不把 TDNA 字樣硬塞進 TDF 標誌。

### 1.2 三地關係

花蓮、台東、綠島是**平等並列**的三個目的地，不使用 Act I／II／III、第一站／壓軸等階層語言。固定順序僅供資訊閱讀：

`HUALIEN · TAITUNG · GREEN ISLAND`

`花蓮 · 台東 · 綠島`

### 1.3 正式名稱

| 情境 | 寫法 |
|---|---|
| 英文全名 | `Taiwan Digital Fest 2027` |
| 英文短名 | `TDF 2027` |
| 中文說明 | `台灣數位遊牧節 2027`，僅在需要中文解釋時使用 |
| 主辦單位 | `Taiwan Digital Nomad Association (TDNA)`／`台灣數位遊牧者協會` |
| 活動日期 | `APR 19 — MAY 31, 2027`／`2027.04.19—05.31` |

---

## 2. 品牌核心

### 2.1 定位

> TDF 不是一場單點活動，而是亞太數位遊牧社群在東台灣展開的 43 天共同生活。

### 2.2 核心主張

- **Community-led**：真實社群先於流量與推銷。
- **Work × Nature × Innovation**：工作、自然、創新並存。
- **One festival, three places**：三地平等，共用一個節慶身份。
- **International, locally rooted**：面向國際，落地地方文化。

### 2.3 固定標語

**英文主標語**

`Where digital nomads meet nature & innovation.`

**中文對應**

`數位遊牧者，相遇於山海與創新。`

英文標語在國際素材中優先；中文不是逐字翻譯，而是固定在地版本，不任意改寫。

### 2.4 品牌性格

| 是 | 不是 |
|---|---|
| 開放、直接、有文化感 | 官腔、神祕、過度包裝 |
| 活潑但有秩序 | 兒童化、遊戲化過頭 |
| 國際且貼近地方 | 觀光罐頭、異國獵奇 |
| 社群感 | 推銷感、假造熱鬧 |

---

## 3. 標誌系統

### 3.1 品牌圖記

正式圖記為 `site/public/assets/brand/favicon.svg` 的非對稱風車格：黑色結構線包覆黃、青、桃紅、深藍與中央白色。它代表不同路徑在中央相遇，也是蒙德里安格線與像素模組的最小單位。

### 3.2 字標與組合

- **完整字標**：`TAIWAN DIGITAL FEST`，使用 Jersey 10、大寫、正常字距。
- **年份**：`2027` 必須與字標同一視覺層級或作獨立色塊，不寫成裝飾性上標。
- **導覽短標**：`TDF 2027`，使用 Space Grotesk 700；`TDF` 可放入黃色黑框色塊。
- **主辦背書**：置於主標下方或頁尾，尺寸不超過主標字高的 25%。

### 3.3 安全距離與最小尺寸

- 以圖記寬度的 `1/4` 為四周最小安全距離。
- 數位圖記最小 `16 × 16 px`；一般介面建議不小於 `24 × 24 px`。
- 印刷圖記最小 `8 × 8 mm`；完整字標最小寬度 `32 mm`。
- 小於 32 px 時只用圖記，不加文字或主辦背書。

### 3.4 背景版本

- 全彩圖記優先放在白色、淺灰或無干擾的實色底。
- 只有單色製程時使用純黑或純白版本；不可自行改成其他單色。
- 照片底必須先加完整白／黑色塊，不直接壓在複雜影像上。

### 3.5 禁止事項

- 不拉伸、旋轉、斜切或加圓角。
- 不重排圖記內部色塊、不更換色票、不加漸層。
- 不加陰影、描邊、發光、立體或透明效果。
- 不把合作夥伴標誌放進圖記內。
- 不用 AI 重新描繪標誌；必須使用正式向量檔。

---

## 4. 色彩系統

印刷以 CMYK 為準，螢幕／網頁以 HEX／RGB 為準。不得新增近似色或漸層替代正式色票。

| 角色 | 色名 | HEX | RGB | CMYK |
|---|---|---|---|---|
| 主色 | 亮黃色 | `#FFD028` | 255, 208, 40 | 0, 19, 88, 0 |
| 主色 | 青藍色 | `#10B8D9` | 16, 184, 217 | 71, 0, 13, 0 |
| 主色 | 橘紅色 | `#E74310` | 231, 67, 16 | 0, 84, 100, 0 |
| 點綴 | 淺粉色 | `#F9D2E5` | 249, 210, 229 | 0, 25, 0, 0 |
| 點綴 | 綠色 | `#00993E` | 0, 153, 62 | 93, 2, 100, 0 |
| 點綴 | 桃紅色 | `#E4003D` | 228, 0, 61 | 0, 100, 67, 0 |
| 點綴 | 紫紅色 | `#C54090` | 197, 64, 144 | 23, 86, 0, 0 |
| 輔色 | 深藍色 | `#004E9D` | 0, 78, 157 | 100, 71, 2, 0 |
| 基底 | 淺灰色 | `#F6F6F6` | 246, 246, 246 | 0, 0, 0, 5 |
| 基底 | 深灰黑色 | `#1E1F1C` | 30, 31, 28 | 75, 65, 65, 80 |
| 基底 | 白色 | `#FFFFFF` | 255, 255, 255 | 0, 0, 0, 0 |
| 結構 | 黑色 | `#000000` | 0, 0, 0 | 0, 0, 0, 100 |

### 4.1 使用原則

- 白／淺灰是主要閱讀底；黑色負責格線，深灰黑負責長文。
- 黃、青、橘是主視覺與行動重點；同一畫面選一個主導色即可。
- 粉、綠、桃紅、紫紅用於分區與節奏，不同色不可暗示三地排名。
- 深藍用於沉穩資訊、標題或深色底。
- 一個資訊元件最多使用一個實色底與一個文字色。

### 4.2 無障礙配色

一般文字至少達 WCAG AA `4.5:1`；大型文字至少 `3:1`。

| 底色 | 一般文字 |
|---|---|
| 黃、青、淺粉、橘、綠、淺灰、白 | 黑 `#000000` |
| 桃紅、深藍、深灰黑、黑 | 白 `#FFFFFF` |
| 紫紅 | 黑或白皆可；同一元件只選一種 |

橘底白字、綠底白字只限大型展示字；深灰黑不可放在橘、綠、桃紅、紫紅或深藍上作小字。

### 4.3 開發用變數

```css
:root {
  --tdf-yellow:  #FFD028;
  --tdf-cyan:    #10B8D9;
  --tdf-pink:    #F9D2E5;
  --tdf-orange:  #E74310;
  --tdf-green:   #00993E;
  --tdf-magenta: #E4003D;
  --tdf-purple:  #C54090;
  --tdf-blue:    #004E9D;
  --tdf-gray-50: #F6F6F6;
  --tdf-ink:     #1E1F1C;
  --tdf-white:   #FFFFFF;
  --tdf-black:   #000000;
}
```

---

## 5. 字體系統

| 用途 | 字體 | 字重 | 規則 |
|---|---|---|---|
| 所有英文標題、年份、短數字 | Jersey 10 | 400 | 所有層級的英文標題皆採像素風；不用於介面與段落 |
| 英文介面、內文 | Space Grotesk | 400 / 500 / 700 | 介面維持清楚易讀，段落使用正常大小寫 |
| 所有繁中標題 | Cubic 11 | 700 | 所有層級的繁中標題皆採粗體像素風；行高至少 `1.45` |
| 繁中介面、內文 | Noto Sans TC | 400 / 500 / 700 | 不用像素字體排中文長文 |
| 系統備援 | sans-serif | — | 字型未載入時保持可讀，不延遲內容 |

### 5.1 建議階層

- Display：Jersey 10，`64–164 px`／行高 `.82–.9`。
- H1：Jersey 10 400，`40–72 px`／行高 `.9–1`。
- H2–H6：Jersey 10 400，`28–44 px`／行高 `1–1.1`。
- 繁中 H1–H6：Cubic 11 700，沿用各層級字級，行高 `1.45`、字距 `.08em`；換行時須保留足夠行距，不得重疊。
- Body：Space Grotesk 或 Noto Sans TC 400，`16–18 px`／行高 `1.45–1.7`。
- Eyebrow：Space Grotesk 700，`14–16 px`，大寫，字距 `.16–.26em`。
- Caption：`14 px` 起／行高 `1.4`，所有頁面的可見文字、標籤、按鈕與提示皆不可低於 14 px。

英文優先時，中文作第二行且不小於英文內文的 75%；中文模式則交換層級，不要同時讓兩種語言爭奪主標。

---

## 6. 版式與圖形語言

### 6.1 蒙德里安格線

- 基準模數為 `8 px`；位置與尺寸優先對齊整數模數。
- 桌面與大型輸出使用 `5 px` 黑線；手機與小尺寸使用 `3 px`。
- 採非對稱格線，但資訊閱讀順序必須清楚。
- 色塊彼此用黑線分隔，不用陰影、玻璃、漸層或圓角製造層級。
- 空白是正式色塊；不要為填滿版面而增加裝飾。

### 6.2 像素風

- 像素感來自英文標題使用 Jersey 10、繁中標題使用 Cubic 11，搭配整數格、硬邊與有限色票，不靠低解析度輸出。
- 像素插畫使用清楚輪廓、1× 基準網格與 `image-rendering: pixelated`。
- 不混用 8-bit、霓虹 cyberpunk、復古遊戲 UI 等無關語彙。
- 文字、QR code 與人物照片保持高解析、不可像素化。

### 6.3 三地識別

三地可在單一素材中使用不同色塊，但尺寸、字級與位置權重必須一致；不可長期綁定唯一顏色，避免把地點誤認成票種或排名。

---

## 7. 影像與插畫

### 7.1 攝影

- 優先使用真實參與者、共同工作、地方文化、自然環境與夜間社群紀實。
- 自然光、真實膚色、可見環境脈絡；保留人與人互動，不擺拍「拿筆電看海」。
- 不用罐頭商務照、不過度 HDR、不用假造人潮或社群證明。
- 照片裁切不切手、臉或重要地方元素；人物肖像須有授權。

### 7.2 像素羊

像素羊是社群角色，不是主標誌。它可用於活動情境、功能空狀態與輕量動態；不可取代品牌圖記，也不可出現在正式公文或高密度資訊表格中。

### 7.3 圖示

- 優先使用單色線性 SVG，線寬一致、端點俐落。
- 圖示放在方形格內，使用正式色票；不加陰影與擬物材質。
- 功能圖示不可只靠顏色傳意，必須附文字或可存取標籤。

---

## 8. 文案與語氣

- 國際對外內容 **English-first，中文其次**。
- 直接說日期、地點、費用與限制；不使用「全球頂尖」「史上最大」等無證據宣稱。
- 用 `community`、`live together`、`workation`、`local connection`；少用 `networking opportunity`、`exclusive lifestyle`。
- CTA 使用明確動詞：`Explore`、`Join`、`Apply`、`Buy tickets`。
- 日期採 `Apr 19 — May 31, 2027`；中文採 `2027 年 4 月 19 日至 5 月 31 日`。
- 標題可不加句號；段落使用正常標點，不用連續驚嘆號。

---

## 9. 動態規範

- 進場與狀態切換以 `180–240 ms` 為主，使用 ease-out；大型區塊最多 `400 ms`。
- 動畫採整格滑入、色塊翻轉或硬切，不用彈跳、漂浮、粒子與長時間循環。
- hover 不能是唯一回饋；鍵盤 focus 必須清楚可見。
- 遵守 `prefers-reduced-motion`，關閉位移、視差與自動播放。

---

## 10. 應用規格

| 應用 | 尺寸／要求 |
|---|---|
| OG / 分享圖 | `1200 × 630 px`，四周至少 40 px 安全區 |
| IG 直式貼文 | `1080 × 1350 px`，主標置於中央安全區 |
| Story / Reels 封面 | `1080 × 1920 px`，上下各保留 250 px UI 安全區 |
| 簡報 | `16:9`，每頁一個主訊息，格線 5 px 等比縮放 |
| A 系列印刷 | CMYK、300 dpi、四邊出血 3 mm、文字轉外框 |
| 識別證／票券 | QR code 四周保留 4 modules，不以品牌色改變 QR 深色模組 |
| 指標 | 中英雙語、高對比，關鍵方向資訊不使用 Jersey 10 |

所有數位輸出須保留文字可讀性與替代文字；社群圖上的必要資訊同時放入貼文文字，不只存在圖片內。

---

## 11. 共同品牌

- TDF 與合作夥伴標誌以黑色分隔線或完整留白區分，不混成單一新標誌。
- TDF 為主辦素材時，TDF 標誌視覺面積至少等於最大合作夥伴標誌。
- 夥伴主辦、TDF 協力時，可交換主次，但仍遵守各自安全距離。
- TDNA 背書置於頁尾或主標下方；政府與贊助商標誌集中在獨立 logo wall。
- 不任意把合作夥伴標誌單色化；依對方品牌規範使用原檔。

---

## 12. 資產與治理

### 12.1 正式資產

| 資產 | 路徑 |
|---|---|
| 品牌圖記 SVG | `site/public/assets/brand/favicon.svg` |
| 16 / 32 px 圖示 | `site/public/assets/brand/favicon-16.png`、`favicon-32.png` |
| Apple Touch Icon | `site/public/assets/brand/apple-touch-icon.png` |
| OG 主視覺 | `site/public/assets/brand/og-image.png` |
| OG 可編輯來源 | `design/brand/og-image-render.html` |
| CIS 視覺手冊 | `design/brand/cis.html` |
| 官網實作 token | `site/src/styles/global.css` |

只有以上路徑是正式資產；探索稿不得直接交付或上線。

### 12.2 出稿檢查

- [ ] 品牌名稱、日期與地點拼寫正確。
- [ ] 三地平等呈現，沒有 Act I／II／III 階層。
- [ ] 使用正式標誌與色票，未變形、加效果或重畫。
- [ ] 英文／中文層級符合受眾情境。
- [ ] 文字對比達 AA，鍵盤 focus 與替代文字齊全。
- [ ] 印刷檔含 CMYK、3 mm 出血與 300 dpi；數位檔尺寸正確。
- [ ] 照片、人物、合作夥伴標誌與字體授權已確認。
- [ ] 輸出檔與可編輯來源都存入正式路徑。

任何新色彩、字體、標誌變體或長期子品牌，須先更新本文件再投入製作，避免「做完才補規範」。