Act I — Design System Preview

Storytelling 章節敘事

介面即故事 — Inter 旁白正文・Abril Fatface 章節標題
Every screen is a chapter with a beginning, middle, and end

Core Palette 核心配色

敘事藍
#3B82F6
敘事紫
#8B5CF6
淡藍鋪底
#EFF6FF
淡紫鋪底
#F5F3FF
書頁白
#FFFFFF
墨色文字
#111827
邊界灰
#E5E7EB

Typography 字體反差樣張

H1 — Abril Fatface · 40px

Every Screen Is a Chapter

▲ dramatic switch from Inter body to Abril Fatface display
H2 · 32px

開場,鋪陳,收束

Body — Inter · 18px · line-height 1.65

Inter 是敘事者中性的旁白聲音,負責推進閱讀而不搶戲;連結是故事的下一步,用敘事藍標記。技術數據如 #8B5CF6 用 JetBrains Mono 呈現。

Buttons 按鈕

Primary 敘事藍實心底,Secondary 透明底 + 灰邊框,focus-visible 為 3px 藍色外框

Tags & Badges 標籤

Chapter 01 Featured Resolved Pending Conflict

Story Cards 故事卡

Chapter 01

The Hook

Every story begins with a line that makes the reader want the next one.
Featured

轉折的那一刻

當敘事藍轉為敘事紫,讀者知道——這是關鍵的節拍。

Chapter Marker 章節標記(招牌元件)

01

Beginning 開場

Hero 語句鉤住讀者的第一句話

02

Middle 鋪陳

建立理解與信任的內容區塊

03

End 收束

清楚的行動呼籲,故事有明確結尾

大號 Abril Fatface 編號 + 標題,標記三幕結構的轉折點

Color Reference 色彩對照

色彩Hex角色
敘事藍#3B82F6Primary — 連結、按鈕、active 狀態
敘事紫#8B5CF6Secondary — 強調節拍、精選內容
書頁白#FFFFFFSurface — 全頁背景
墨色文字#111827正文、標題文字
邊界灰#E5E7EB分隔線、卡片邊框
成功綠#16A34ASemantic — 故事解決、目標達成
危險紅#DC2626Semantic — 錯誤、衝突狀態

Ready for Chapter Two?

準備好進入下一章了嗎?