介面即故事 — Inter 旁白正文・Abril Fatface 章節標題
Every screen is a chapter with a beginning, middle, and end
Inter 是敘事者中性的旁白聲音,負責推進閱讀而不搶戲;連結是故事的下一步,用敘事藍標記。技術數據如 #8B5CF6 用 JetBrains Mono 呈現。
Primary 敘事藍實心底,Secondary 透明底 + 灰邊框,focus-visible 為 3px 藍色外框
Hero 語句鉤住讀者的第一句話
建立理解與信任的內容區塊
清楚的行動呼籲,故事有明確結尾
大號 Abril Fatface 編號 + 標題,標記三幕結構的轉折點
| 色彩 | Hex | 角色 |
|---|---|---|
| 敘事藍 | #3B82F6 | Primary — 連結、按鈕、active 狀態 |
| 敘事紫 | #8B5CF6 | Secondary — 強調節拍、精選內容 |
| 書頁白 | #FFFFFF | Surface — 全頁背景 |
| 墨色文字 | #111827 | 正文、標題文字 |
| 邊界灰 | #E5E7EB | 分隔線、卡片邊框 |
| 成功綠 | #16A34A | Semantic — 故事解決、目標達成 |
| 危險紅 | #DC2626 | Semantic — 錯誤、衝突狀態 |
準備好進入下一章了嗎?