← 回後台

TDNA Stylebook

依《TDNA 品牌視覺系統 VI 2.1》。這頁與後台共用同一支 /assets/tdna.css——這裡看到的樣子，就是後台的樣子。新增元件請先在這裡長出來，再拿去用。

改樣式只改 admin/assets/tdna.css。頁面內不要寫 inline style，也不要在單一頁面另開 <style>；需要新變化就在這裡加一個 class。

深色模式的色票是另一組，兩種都要看過。

1. 色彩計畫（CIS 原色）

印刷 CMYK 與數位 HEX 出自 VI 色彩計畫頁，色值不得更動。UI 不直接用原色，改用下一節的語意 token。

黃 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

2. 語意 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() 混紙色得到的淺底，Hub 公開頁（hub.dna.org.tw）只能用這裡的 token，不另寫色碼。

CIS 綠 #00993E 與紅 #E4003D 當文字時對白底不足 4.5:1，故 --good／--bad 用壓深後的 #007A31／#C7002F；當作色塊填色時仍用原色。

3. 字型與字級

品牌字型為 TT Hei CHS Variable（中）與 TT Commons Pro（英）。網頁無授權，代用 Figtree + Noto Sans TC，皆為幾何無襯線，重量對應得上。

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

4. 間距

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

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

5. 按鈕 .btn

一個畫面只有一顆 .pri。破壞性動作用 .danger，且一定要有二次確認。表格列內動作用 .sm。

最小點擊高度：桌機 36px、窄螢幕 44px（已在 CSS 內處理，不必個別設定）。

6. 表單 .fields

兩欄網格，跨欄加 .wide；錯誤時在 label 加 .bad，訊息放 .err。窄螢幕自動變單欄、字級 16px 以免 iOS 縮放。

7. 狀態標籤 .pill

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

狀態只用外框加文字色，不用整塊填色——列表裡整排色塊會蓋過資料本身。

8. 指標卡 .kpi

會員數
1,248人
本月 +36
本月收入
328,400元
含補助款
待付款
7筆
3 筆已逾期
同步檔案
5,651
74 GB 待處理

9. 面板與圖表 .panel

近六個月支出

單位：千元
4 月84
5 月132
6 月176
7 月108

待辦

4 項
  • 匯款檔尚未上傳
    財務 · 3 筆逾期
    今天
  • 活動核銷待補收據
    秘書處
    3 天
  • Drive 授權即將到期
    系統
    7 天
  • 理監事名冊已更新
    已完成
    昨天

10. 表格 .tbl

窄螢幕橫向捲動，不讓中文逐字斷行。金額欄加 .num 右對齊；長文字欄加 .cut 截斷。

日期項目類別狀態金額
2026-09-05數位遊牧論壇場地租金與設備活動已付款48,000
2026-09-03講師鐘點費活動待付款12,000
2026-08-28會員系統主機月費行政退件3,200

共 3 筆

11. 訊息

說明區塊 .note：虛線框，放前置條件、限制、注意事項。

操作成功的短訊息用 toast，3 秒自動消失；錯誤不要用 toast，留在畫面上。
沒有符合條件的資料

12. 用與不用

該這樣

  • 顏色一律走 var(--token)，深色模式才會跟著對。
  • 新元件先加進這頁，確認淺／深色都看得懂再上線。
  • 品牌條（10px 黃）只出現在頁面或卡片左緣，一頁一次。
  • 標誌用 assets/*.svg 原檔，留白依 VI：標誌高度 50%。

不要這樣

  • 頁面裡寫死 hex、寫 inline style、或單頁另開 <style>。
  • 把 CIS 八色當狀態色亂用——狀態只有 good／warn／bad／brand。
  • 改標誌顏色、比例、加陰影或漸層（VI 明列禁止）。
  • 同一畫面出現兩顆 .btn.pri。
已儲存

Hub 審核與電子報

學生資格申請 · 待審核

證明文件限授權審核者查看。

Taiwan Nomad Hub
串連社群、探索活動、共享資源。
待人工審核