| version |
alpha |
| name |
CLHS Pocket |
| description |
Design system for the CLHS Pocket Android app. |
| colors |
| primary |
primaryDark |
onPrimary |
primaryContainer |
onPrimaryContainer |
secondary |
secondaryDark |
secondaryContainer |
tertiary |
success |
successDark |
warning |
warningDark |
danger |
dangerDark |
backgroundLight |
backgroundDark |
surfaceLight |
surfaceDark |
surfaceElevatedLight |
surfaceElevatedDark |
surfaceContainerLight |
surfaceContainerDark |
surfaceVariantLight |
surfaceVariantDark |
textLight |
textDark |
textSecondaryLight |
textSecondaryDark |
outlineLight |
outlineDark |
outlineVariantLight |
outlineVariantDark |
#1565C0 |
#82B1FF |
#FFFFFF |
#BBDEFB |
#002171 |
#4F6354 |
#B6CCBB |
#D2E8D7 |
#33618D |
#126738 |
#81C995 |
#946C00 |
#FDE293 |
#BA1A1A |
#FFB4AB |
#FBFCFF |
#121212 |
#FBFCFF |
#121212 |
#FFFFFF |
#1E2025 |
#EEF2F6 |
#1E2225 |
#DDE3EA |
#43474E |
#1A1C1E |
#E2E2E6 |
#43474E |
#C3C7CF |
#73777F |
#8D9199 |
#C3C7CF |
#43474E |
|
| typography |
| display |
title-lg |
title-md |
body |
body-zh |
label |
numeric |
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Roboto |
3rem |
700 |
1.1 |
0 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Roboto |
1.375rem |
600 |
1.25 |
0 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Roboto |
1.125rem |
600 |
1.35 |
0 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Roboto |
1rem |
400 |
1.5 |
0 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Noto Sans TC |
1rem |
400 |
1.65 |
0 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
Roboto |
0.8125rem |
600 |
1.25 |
0 |
|
| fontFamily |
fontSize |
fontWeight |
lineHeight |
letterSpacing |
fontFeature |
Roboto |
1rem |
600 |
1.3 |
0 |
tnum |
|
|
| rounded |
| sm |
md |
lg |
xl |
pill |
8px |
16px |
24px |
32px |
9999px |
|
| spacing |
| xs |
sm |
md |
lg |
xl |
section |
4px |
8px |
16px |
24px |
32px |
64px |
|
| components |
| button-primary |
button-primary-hover |
card |
card-dark |
hero-card |
chip |
chart-primary |
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.primary} |
{colors.onPrimary} |
{typography.label} |
{rounded.md} |
14px |
|
| backgroundColor |
textColor |
rounded |
{colors.primary} |
{colors.onPrimary} |
{rounded.md} |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.surfaceContainerLight} |
{colors.textLight} |
{rounded.md} |
16px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.surfaceContainerDark} |
{colors.textDark} |
{rounded.md} |
16px |
|
| backgroundColor |
textColor |
rounded |
padding |
{colors.primaryContainer} |
{colors.onPrimaryContainer} |
{rounded.lg} |
24px |
|
| backgroundColor |
textColor |
typography |
rounded |
padding |
{colors.surfaceVariantLight} |
{colors.textSecondaryLight} |
{typography.label} |
{rounded.pill} |
8px |
|
| backgroundColor |
textColor |
rounded |
size |
{colors.primary} |
{colors.onPrimary} |
{rounded.sm} |
12px |
|
|
壢中成績的 Android 介面是「安靜、可信、可重複使用的成績工具」，不是行銷式儀表板。設計重點是讓學生快速確認平均、排名、科目落點與趨勢，因此資訊層級、數字可讀性和狀態辨識要優先於裝飾。
Android app 採 Material 3 語彙：藍色作為主要行動與資料焦點，綠色處理成長/優勢，黃橘色處理提醒，紅色只用於錯誤或低分風險。
色彩以 Material 3 的 light/dark scheme 為核心。Android 的 ScoreTheme.kt 是 app 端主要來源。
- Primary 用於主要 CTA、選取狀態、目前資料點、進度與重點數字。
- Surface 用於卡片、底部導覽、彈窗與表格容器；不要把大面積內容做成過亮或過飽和。
- Success / warning / danger 只表達成績語意或系統狀態，不應當作裝飾色。
Android 使用 Material 3 預設 Roboto；中文說明可使用 Noto Sans TC 作為文件與展示文字參考。
數字欄位、平均、排名、百分比、分數差距必須使用 tabular numbers 或等寬數字特性，避免資料更新時水平跳動。中文說明文字使用較寬鬆 line-height，標題保持短句，不做過度行銷化文案。
畫面應以「總覽 → 排名/平均 → 科目細節 → 圖表/趨勢 → 操作」的閱讀順序組織。手機 app 優先單欄、卡片堆疊，不要讓同一層級資訊密度過高。
常用間距以 8px 系列建立：8px 用於小元素內距，16px 用於卡片內容，24px 用於卡片群組，32px 以上用於區塊分隔。
深色模式偏向低陰影、靠 surface 色階與細邊框建立層級。Light mode 可以使用柔和陰影，但卡片不應浮得太重。產品內頁要避免大面積裝飾光暈。
互動狀態以 subtle background、outline、primary tint 或 1-2px 位移呈現；不要用大幅縮放造成資料版面跳動。
標準卡片使用 16px 圓角，重要摘要卡可用 24px。小標籤、分布條、chip 使用 pill 或 9999px。App icon 保持圓角方形，不要把產品 UI 裡的資料卡做成過度有機或不規則形狀。
圖表中的 bar、legend marker、distribution segment 可用 4-12px 小圓角；表格列與資料行保持穩定高度，避免 hover 改變布局。
Primary button 用於登入、同步、下載、重新載入與主要確認動作；同一畫面只保留一個最強 primary CTA。次要動作使用 tonal、outline 或 text button。
成績卡應包含科目名稱、分數、班平均/標準差等必要上下文；高低分顏色要搭配文字標籤，不可只靠顏色傳達。排名與百分比要同時顯示目前值與總數或 PR 說明。
圖表卡要優先讓資料可讀：清楚 legend、足夠 label 空間、淡色 grid、強調我的成績與班級平均。Radar、bar、distribution chart 應共享同一套 primary/outline/semantic colors。
Modal 用於登入、分享、免責與確認流程。Modal 文字要短，表單錯誤用 inline feedback，避免清空使用者已輸入內容。
Do:
- 保持工具感：資訊密度可以高，但層級要清楚。
- 使用 Material 3 color roles 和既有 tokens，不臨時創造近似藍色。
- 讓平均、排名、百分比等數字對齊且容易比較。
Don't:
- 不要把學生資料、帳密、token 或正式環境 secret 寫進 UI、文件範例或截圖。
- 不要用單一顏色家族鋪滿整個 app；藍色是焦點，不是背景全部。
- 不要在產品內頁使用大 hero、過多裝飾卡片或阻礙掃讀的動畫。
- 不要只用顏色表示成績好壞；必須保留文字或數字上下文。