圖 貳-10
視覺風格參考卡
色票、字級、按鈕、狀態 — 一套讓親子網安心、清楚、可辨識的設計語言。
Style Guide v2
01
色票
Color Tokens#1F6F8B
親和藍綠
主色／系統識別
#154E61
深湖綠
深底配白字
#EF7A52
珊瑚橘
主要 CTA
#5DAE7E
草綠
使用者／人
#F4C04E
提示黃
判斷／決策
#FAF8F4
暖白
頁面背景
02
字級
Noto Sans TC · 行高 1.75H1育兒資源網30px · 首頁主標
H2育兒資源網22px · 區塊標題
H3育兒資源網18px · 卡片標題
Body育兒資源網16px · 內文
Caption育兒資源網14px · 輔助說明
03
按鈕
Buttons · Primary / Secondary主要動作
次要動作
04
無障礙
Accessibility · WCAG AA✓ 成功
已完成
⚠ 警示
需注意
✕ 錯誤
失敗
白字 × 主色深 對比 7.4 : 1 ✓ AAA
狀態以「顏色＋文字＋圖示」三者並用，於灰階下亦可辨。內文對比皆 ≥ WCAG AA 4.5 : 1。 設計語言不只是好看 — 是讓每位家長與孩子，都能安心讀懂。