NYCU LIFE DESIGN SYSTEM
UI Style Guidelines
完整保留原始九章規格，並將原始 palette、production semantic tokens 與無障礙配對清楚分層。原始色值可以作為設計參考，但只有標示為 AA Normal 的組合可直接用於一般文字。
COLOR / LIGHT
淺色色彩
保留原始 Figma palette 作為 primitive reference。文字與元件實作應優先使用 semantic tokens，不應直接把所有色票視為可互換的品牌色。
品牌色 標題、主要操作、圖標與品牌區塊
輔助色 — 綠 只用於類別與狀態區分
輔助色 — 橘／金 只用於類別與提醒
灰階色 文字、背景、邊框與層級
狀態色
這些是 primitive 狀態色，不代表可以直接搭配白字。Production UI 請使用已驗證的 info/success/warning/danger surface + text semantic pairs。
COLOR / DARK
深色色彩
原始深色 palette 透過降低飽和度與調整明度建立舒適視覺。Production dark mode 仍應透過 semantic role 映射，而不是直接反轉 primitive palette。
品牌色
輔助色 — 綠
輔助色 — 橘／金
灰階色 沿用同一組 primitive，依角色反轉用途
狀態色（深色）
ACCESSIBLE COLOR
色彩對比
實作時先選 Production semantic role，再查閱原始 palette。AA Normal 代表一般文字達 4.5:1；Large text 的 3:1 門檻只適用於至少 24px regular 或約 18.7px bold，UI 的 3:1 則只適用於辨識元件與狀態所必要的圖形。
Production semantic roles 實作優先使用
canvas#F7F9FC#000000surfaceRaised#FFFFFF#111111textPrimary#17213F#F5F7FFtextSecondary#4B5674#C5CEE0actionPrimary#0045F2#1B41C5actionOnPrimary#FFFFFF#FFFFFF原始淺色模式配對
原始深色模式配對
容易誤用的組合
這些配色常看起來鮮明，但不能直接當作一般內文。低於 3:1 的組合只可作裝飾；3–4.49:1 僅限大字或有明確尺寸條件的 UI 圖形。
Production 規則
一般文字只使用 canonical tokens.json 中通過 4.5:1 的 semantic pairs。綠、橘與狀態 primitive 不直接搭配白字；使用對應的 surface/text token。自動檢查由 npm run check 執行。
TYPOGRAPHY
文字排版
網站與 UI 以 Noto Sans TC 為第一順位，使用 400、500、600、700。原始 H1–H6 尺寸保留作為歷史基準；production code 將視覺 role 與 HTML heading semantics 分開。
原始排版層級
繁中文字體搭配系統西文字體。
原始設計系統的 Android／Web 字體組合。
目前品牌網站與產品介面的統一選擇。
| 層級 | 用途 | 字重 | 字號 |
|---|---|---|---|
H1 | 頁面主標題 | Bold 700 | 36px |
H2 | 模塊標題 | Semibold 600 | 28px |
H3 | 小標題／內容子標題 | Medium 500 | 20–24px |
H4 | 正文 | Regular 400 | 16px |
H5 | 輔助與說明文字 | Regular 400 | 14px |
H6 | 標籤／版權／最小字號 | Regular 400 | 12px |
Production 視覺角色
短版品牌 hero，不用來代表 HTML H1。
頁面與主要章節標題。
卡片群組與功能標題。
正文，line-height 1.75。
輔助內容，不低於可讀對比。
文字顏色
原始正文與標題基準。
在白底不達一般文字 AA，只限裝飾、停用或另行驗證。
Production 輔助文字的可讀替代。
LAYOUT
格線系統
12 欄系統
由 12 欄與 11 個 gutter 組成，原始 gutter 為 24px。可組合成 1、2、3、4 欄內容。Production responsive adaptation 使用 mobile 4 欄、tablet 8 欄、desktop 12 欄。
佈局模式
COMPONENT FOUNDATIONS
間距與圓角
圓角半徑 數值為原始參考
尺寸越大的組件使用越大的圓角。按鈕圓角原則上不超過高度的 1/4。嵌套時使用同心圓角：內層 radius = 外層 radius − padding。
圓頭容器
大組件
卡片、小組件
按鈕、輸入、小標籤
padding 4px
同心圓角
外層 20px − padding 4px = 內層 16px
基本間距 4px 倍數系統
選擇離散 token，不使用 28px、36px 等任意中間值。8–16px 用於緊密關係；24–32px 用於同組區塊；48–64px 用於章節；96px 用於大型頁面分隔。
ELEVATION
陰影與材質
不使用純黑陰影。保持柔和、低對比，讓層級清楚而不是讓卡片漂浮。材質效果只能小面積使用，且不得降低文字對比。
0 12px 32px rgba(55, 65, 81, 0.10)- Color
- #374151
- X / Y
- 0 / 12
- Opacity
- 10%
- Blur
- 32px
材質效果
材質層只承載短標籤或裝飾。長文必須回到高對比 solid surface。
ICONOGRAPHY
圖標
使用 Google Material Symbols Rounded。選擇圓潤、有圓角的圖標，不使用過於尖銳的造型；圖標 weight 應與相鄰文字粗細接近。
Outlined（預設）
Filled
推薦尺寸
點選色票即可複製色碼。