NYCU LIFE UI Style Guidelines

Accessibility: WCAG 2.1 AA · v1.0 · 2026.02.14 · Figma Source

01. 淺色色彩

品牌色 — 標題文字 / 按鈕 / 圖標 / 卡片區塊

Primary

#0045F2

Secondary 1

#2462FF

Secondary 2

#4D7FFF

Secondary 3

#CCDBFF

Secondary 4

#2455A8

輔助色 — 綠 — 作為區分類別使用

Primary

#80DA0A

Secondary 1

#98E236

Secondary 2

#AFED5E

Secondary 3

#D5F1B1

Secondary 4

#EDF0F5

輔助色 — 橘/金 — 作為區分類別使用

Primary

#F2A500

Secondary 1

#FFBA24

Secondary 2

#FFC64D

Secondary 3

#FFE5AD

Secondary 4

#6C4C08

灰階色 — 文字顏色（重要程度與深淺成正比）/ 背景色 / 描邊色

Black

#000000

Gray 1

#333333

Gray 2

#374151

Gray 3

#4B5563

Gray 4

#6B7280

Gray 5

#9CA3AF

Gray 6

#D1D5DB

Gray 7

#F3F4F6

White

#FFFFFF

狀態色

Info #A0C3FF Success #0FBD81 Warning #F5913D Error #FC4C4D

02. 深色色彩

降低整體色彩飽和度，適量增加明度，使視覺上更舒適

品牌色

Primary

#2F60DA

Secondary 1

#527AE0

Secondary 2

#BECDF4

Secondary 3

#D9E3FC

Secondary 4

#EDF0F5

輔助色 — 綠

Primary

#8BD22D

Secondary 1

#A3E052

Secondary 2

#D1F0A8

Secondary 3

#E3F6CB

Secondary 4

#EDF0F5

輔助色 — 橘/金

Primary

#E0A629

Secondary 1

#E5B54D

Secondary 2

#F5DBA3

Secondary 3

#F7ECD4

Secondary 4

#FFF7E5

灰階色 — 文字顏色（重要程度與深淺成正比）/ 背景色 / 描邊色

Black

#000000

Gray 1

#333333

Gray 2

#374151

Gray 3

#4B5563

Gray 4

#6B7280

Gray 5

#9CA3AF

Gray 6

#D1D5DB

Gray 7

#F3F4F6

White

#FFFFFF

狀態色（深色）

Info #A9C5F5 Success #11D491 Warning #E9A063 Error #ED5B5B

03. 色彩對比（淺色與深色模式）

不固定，僅為建議配色參考。色彩對比符合無障礙網頁 WCAG 2.1 AA 級規範。除了藍色以外的 Brand Color 同樣可參考此配色組合。

淺色模式

Primary

#0045F2

On Primary

#FFFFFF

Secondary 2

#4D7FFF

On Secondary 2

#FFFFFF

Secondary 3

#CCDBFF

On Secondary 3

#2462FF (Secondary 1)

Secondary 3

#CCDBFF

On Secondary 3

#2455A8 (Secondary 4)

深色模式

Secondary 3

#E5EBFA

On Secondary 3

#2F60DA (Primary)

Secondary 2

#2F60DA

On Secondary 2

#BECDF4

Secondary 1

#527AE0

On Secondary 1

#EDF0F5 (Secondary 4)

Primary

#2F60DA

On Primary

#D9E3FC (Secondary 3)

除了藍色以外的 Brand Color，同樣可參考此配色組合

04. 文字排版

字體：蘋方(PingFang) + SF Pro (Apple) / 思源黑體 + Roboto (Win/Android)。行高建議設置為字號的 1.2-1.5 倍。段間距建議設置為字號 2-2.5 倍，閱讀起來更舒適。注意不要讓標題字過密，應留出行距與上下間距。

層級	範例	字重	字號
`H1`	頁面主標題 H1	Bold (700)	36px
`H2`	模塊標題 H2	Semibold (600)	28px
`H3`	小標題/內容子標題 H3	Medium (500)	20-24px
`H4`	正文 H4	Regular (400)	16px
`H5`	輔助與說明文字 H5	Regular (400)	14px
`H6`	標籤/版權/最小字號 H6	Regular (400)	12px

字體顏色

Gray 1 #333333 — 正文、標題、按鈕文字，通常選用深灰色

Gray 5 #9CA3AF — 註釋或輔助性文字，通常選用淺灰色

05. 格線系統

頁面尺寸 1440px

LOGO 導航欄 (60-100px)

12 欄系統

最小點擊區域 44px
（符合 WCAG2.1標準）

內容區域 1200px

首屏高度 900px

頁腳（>80px）

12 欄系統

由 12 個欄和 11 個間距組成，可搭建不同內容配置比例，靈活排列成2列、3列、4列等多種佈局方式。

（列間距默認為24px）

佈局模式

100%

50%

33.3%

25%

06. 按鈕

內間距規範:

Padding Left Right → 1.5 x font size
Padding Top Bottom → 1 x font size

圖標與文字間距 > 5px（依據字號大小調整）

圖標大小 16 - 20px（與文字視覺高度對齊即可）

按鈕尺寸

Small (28 - 32px)

Normal (36 - 40px)

Medium (40 - 48px)

按鈕狀態

	Normal	Icon Text	Outline
Rest
Hover
Pressed
Disable

07. 組件（間距與圓角）

圓角半徑 Radius（數值不固定，僅供參考）

尺寸越大的組件適用越大的圓角（不超過按鈕高度的1/4）

同心圓角：內層圓角 = 外層圓角 - padding，確保嵌套元素的圓角視覺對齊

20px 圓頭容器

16px 大組件

12px 卡片、小組件

8px 按鈕、輸入框、小標籤

基本間距（使用4的倍數系統）

8-16px 小間距
應用於小元素（按鍵）、強相關文字之間

24-32px 中間距
應用於小模塊、同組元素之間

32-64px 大間距
應用於大模塊、頁面段落之間

64-96px 超大間距
應用於頁面與模塊之間分割

08. 陰影與材質

陰影規範

不使用純黑色，保持柔和度，讓頁面更乾淨且協調統一

#374151

x: 0  y:12
透明度：10%
模糊：32

也可適時加入材質效果增加網頁質感

毛玻璃效果

液態玻璃效果

09. 圖標

Icon Resources：Google Material Symbols · 預設樣式：Rounded

圖標規範

適用較為圓潤具有圓角的圖標，不適合稜角分明的圖標

Spacing

圖標尺寸 24px 高寬，筆畫粗細 2px

alarm

Margins 2 px

Full size 24 px

Icon sets

Outlined（預設）

alarm

bedtime

favorite

cottage

add_reaction

policy

Filled

alarm

bedtime

favorite

cottage

add_reaction

policy

Style 樣式

Rounded

Weight 粗細

圖標應挑選與其搭配文字粗細相當

Size 尺寸