Design System Preview

Paper 紙感極簡

Minimal, disciplined, accessibility-first design system for AI-generated interfaces — 留白優先、清晰排版、克制的語意色彩。

01Core Palette 核心色板

極夜黑 Primary
標題、主要互動元件
#111111
紫羅蘭 Secondary
連結、強調點綴、focus ring
#8B5CF6
確認綠 Success
正向回饋
#16A34A
警戒橙 Warning
警示指標
#D97706
危險紅 Danger
錯誤、破壞性操作
#DC2626
紙白 Surface
背景、卡片表面
#FFFFFF
墨灰 Text
正文文字
#111827

02Typography 字體系統

H1 — Montserrat · 900 · 40px
Design without noise
H2 — Montserrat · 700 · 32px
留白是一種功能，不是裝飾
H3 — Montserrat · 500 · 24px
Every focus state is visible by default
Body — Roboto · 400 · 16px

正文使用 Roboto 400，行高 1.6，確保長文閱讀舒適。連結使用 紫羅蘭 Secondary 標示，程式碼片段如 --sp-4: 16px 使用 PT Mono 等寬字型。

Weight Range — Montserrat 100 → 900
100 Thin · 400 Regular · 700 Bold · 900 Black

03Buttons 按鈕

Tab 到按鈕上會看到 2px 紫色 focus-visible 外框——用鍵盤試試看。

04Tags & Badges 標籤

success 成功 warning 警告 danger 危險 secondary 強調 neutral 中性

05Cards 卡片

Foundations First

Token 先於元件決策——顏色、字級、間距都定義在系統層，元件只是引用它們。

Keyboard-first

每個互動元件的 focus-visible 狀態永遠可見，鍵盤操作者不必猜測焦點位置。

Accessibility > Novelty

當美觀與 WCAG 2.2 AA 衝突時，優先滿足無障礙需求，不追求視覺新奇感。

06Component State Matrix 元件狀態矩陣

Signature Component 簽名元件
同一顆按鈕的五種顯式狀態並排展示——這是 Paper 系統「無障礙優先」哲學的具體實踐。
Default
Hover
Focus-visible
Active
Disabled

07Color Reference 色彩參照表

色彩 ColorHex角色 Role
極夜黑 Primary#111111主要互動元件、標題、強調文字
紫羅蘭 Secondary#8B5CF6強調點綴、連結、次要操作、focus ring
確認綠 Success#16A34A正向回饋、確認訊息
警戒橙 Warning#D97706警示指標
危險紅 Danger#DC2626錯誤狀態、破壞性操作
紙白 Surface#FFFFFF背景、卡片表面
墨灰 Text#111827正文文字