COMPONENTS · BUTTONS & BADGE
按鈕與徽章
主要按鈕是墨色,次要按鈕是粗線外框。黎明橘只留給文字連結。
按鈕
LIVE EXAMPLE
DO
Primary = ink 底 + paper 字。
DON'T
做黎明橘填色按鈕。
WHY按鈕是工具,不是聲音;讓重點色留給編輯室。
可操作的狀態範例
LIVE EXAMPLE
此頁按鈕展示外觀，未連接訂閱或閱讀服務；停用範例不可點擊。
App Store 徽章
LIVE EXAMPLE
此為示意重繪，未連接下載地址。正式上線需換成 Apple 官方徽章素材，遵循官方留白與最小尺寸，不修改圖形、字體或比例。
CSS
.btn-primary { background: var(--ink); color: var(--paper); border-radius: 6px; padding: 10px 20px; }
.btn-secondary { border: 1px solid var(--ink); color: var(--ink); }
a { color: var(--accent); text-underline-offset: 3px; }WHEN TO USE
何時使用
Primary 表示當前唯一主要動作；Secondary 是次要操作；TextLink 是閱讀導覽。App Store 徽章只用於真實下載入口。
BEHAVIOR
狀態與互動
| 狀態 | 行為 / 呈現 |
|---|---|
| 預設 Default | 墨底紙字 / 粗線外框 / 橘色底線連結；主要命中區至少 44 × 44px。 |
| 滑過 Hover | 主要按鈕墨底略淡、次要按鈕 paperDeep；連結保留底線，尺寸不跳動。 |
| 焦點 Focus | 2px 曙光橘外框，4px offset；圖示按鈕提供可讀名稱與提示。 |
| 停用 Disabled | 使用原生 disabled 與降低透明度；載入時避免重複提交並保留動作名稱。 |
GUARDRAILS
使用邊界
DO
一個情境只有一個主要動作；送出中、完成與失敗有清楚回饋。
DON'T
用橘色填滿按鈕，僅用顏色表示停用，或把非官方重繪徽章作正式商店素材。