TDNA

TDNA 品牌識別系統

Corporate Identity System · VI 2.1 · Aug 2024

台灣數位遊牧者協會(Taiwan Digital Nomad Association, TDNA)的品牌規範。標誌、色彩、字型出自《TDNA 品牌視覺系統 VI 2.1》(呂罰 Kipha Lu 設計及編譯),數位介面 token 與後台、Hub 公開頁共用同一支 tdna.css。製作任何對外物件前先讀這一頁;有疑問以 VI 原檔為準。

1. 品牌介紹

TDNA 致力於整合政府和產業界的資源,協助數位遊牧者在職涯發展和交流方面取得成功:專業技能培訓、創業資源連結、職涯發展指導。透過多樣化的資源整合與專業訓練,促進台灣數位遊牧者生態系統的蓬勃發展;並與社群合作各類活動和論壇,為數位遊牧者創造交流與合作的機會。

關鍵詞:

數位創意實驗

3. 色彩計畫

為保持品牌視覺一致性,任何品牌相關製作物請優先取用本計畫中的顏色,並依印刷(CMYK)與數位(HEX)色號正確填入。色值不得更動。

黃 Yellow#FFD028
CMYK 0,19,88,0
青 Cyan#10B8D9
CMYK 71,0,13,0
粉 Pink#F9D2E5
CMYK 0,25,0,0
橘 Orange#E74310
CMYK 0,84,100,0
綠 Green#00993E
CMYK 93,2,100,0
紅 Red#E4003D
CMYK 0,100,67,0
洋紅 Plum#C54090
CMYK 23,86,0,0
藍 Blue#004E9D
CMYK 100,71,2,0
淺灰 Grey#F6F6F6
CMYK 0,0,0,5
近黑 Black#1E1F1C
CMYK 75,65,65,80

CSS 變數:--cis-yellow --cis-cyan --cis-pink --cis-orange --cis-green --cis-red --cis-plum --cis-blue --cis-grey --cis-black(見 tdna.css)。

4. 品牌文字

中文品牌字型 TT Hei CHS Variable(Extralight 到 Black),英文品牌字型 TT Commons Pro(Light 到 ExtraBlack),皆為授權字型,用於印刷與主視覺。網頁無授權,代用 FigtreeNoto Sans TC:同為幾何無襯線,重量對應得上。

中文 · TT Hei CHS Variable(網頁:Noto Sans TC)

400 台灣數位遊牧者協會 自由接案
500 台灣數位遊牧者協會 自由接案
700 台灣數位遊牧者協會 自由接案
900 台灣數位遊牧者協會 自由接案

英文 · TT Commons Pro(網頁:Figtree)

400 Digital Nomad ABCDEFG abcdefg 0123456789
500 Digital Nomad ABCDEFG abcdefg 0123456789
700 Digital Nomad ABCDEFG abcdefg 0123456789
800 Digital Nomad ABCDEFG abcdefg 0123456789

網頁字級

26 / 800 頁面標題 Page title
18 / 800 對話框標題 Modal
30 / 800 KPI 數值 1,248
15 / 700 面板標題 Panel
14 / 400 內文預設 body,數字採 tabular-nums 對齊:1,204 1,999
12 / .12em uppercase 標籤 Label

5. 輔助圖形

輔助圖形取自標準字的 Slab Serif 筆畫特色,將幾何末端以方塊計算,色彩與規律交錯組成,形成多元、數碼、數位含義的圖騰。完整組合可橫向等比延續;本款為可變性圖形,以左右鏡像對稱為前提。

輔助圖形原檔尚未轉出 SVG,請直接取用 VI 2.1 PDF 第 5 章與 TDNA Brand Assets.ai

6. 數位介面 token

後台(admin.dna.org.tw)與 Hub 公開頁(hub.dna.org.tw)不直接用 CIS 原色,只讀這一層語意 token;深色模式與無障礙對比都在這裡調完,元件不必知道。

--brand主要動作、連結、選取態
--spine側欄/卡片左側 10px 品牌條
--surface面板底
--paper頁面底
--good完成、已付款、連線中
--warn待處理、逾期提醒
--bad錯誤、刪除、失敗
--ink主文字、toast 底
--muted次要說明、表頭
--ink2次級內文、欄位標籤
--tint-blue主辦方框、提示區底
--tint-greenHub 卡片色條、合作標章底
--tint-yellowHub 卡片色條
--tint-pinkHub 卡片色條

四個 --tint-* 都是 CIS 原色以 color-mix() 混紙色得到的淺底,不另寫色碼。CIS 綠 #00993E 與紅 #E4003D 當文字時對白底不足 4.5:1,故 --good--bad 用壓深後的 #007A31/#C7002F;當作色塊填色時仍用原色。

間距

--s1--s6 = 4 / 8 / 12 / 16 / 24 / 32px。元件內距用 s3–s4,區塊間距用 s5–s6。不寫其他數值。

s1 4 s2 8 s3 12 s4 16 s5 24 s6 32

元件

已付款待處理失敗進行中已封存

完整元件清單(表單、表格、指標卡、面板、訊息)在後台 /stylebook,需登入。

用與不用

該這樣

  • 顏色一律走 var(--token),深色模式才會跟著對。
  • 品牌條(10px 黃)只出現在頁面或卡片左緣,一頁一次。
  • 標誌用本頁 SVG 原檔,留白依 VI:標誌高度 50%。
  • 中文用台灣用語;英文標準字全大寫 TAIWAN DIGITAL NOMAD ASSOCIATION。

不要這樣

  • 頁面裡寫死 hex 或另開一套色碼。
  • 把 CIS 十色當狀態色亂用——狀態只有 good/warn/bad/brand。
  • 改標誌顏色、比例、加陰影或漸層(VI 明列禁止)。
  • 自行拼組標誌與標準字。

7. 下載