Core Palette 核心色板
Typography 字體樣張
H1 — Bangers + ZCOOL KuaiLe · 32px
STOP THE SCROLL 攔住視線
H2 · 24px
Every Headline Shouts 每個標題都在吶喊
H3 — Noto Sans TC Bold · 20px
Bangers 只有一個字重，靠大小與色彩堆出層次
Body — Noto Sans TC · 16px · line-height 1.6
正文使用 Noto Sans TC 維持速讀清晰度，連結為動能藍，hover 掃向電光紫，呼應整個系統的漸層動能語彙。
Buttons 按鈕
Hover 向左上位移 + 陰影加大；:active 向右下壓入，陰影收縮成 2px 2px 0
Tags & Badges 標籤
FEATURED
TRENDING
NEW
LIMITED
Comic Cards 漫畫卡片
PANEL 01
Hero Headline Test
左上角網點裝飾方塊呼應印刷漫畫的角落標記，3px 墨黑框統一所有卡片。
PANEL 02
Conversion Block
硬陰影 4px 4px 0，零模糊 — 每張卡片都像被剪下來貼上的紙板。
Speech Bubble & Starburst 招牌元件
「這個系統讓我的活動頁在三秒內留住了訪客。」— 一位虛構的滿意用戶
50%
OFF
對話框（CSS 三角尾巴）與爆炸星形徽章（clip-path）— 全頁最多出現一個爆炸徽章，維持衝擊感
Color Reference 色彩對照
| 色彩 | Hex | 角色 |
|---|
| 動能藍 | #3B82F6 | Primary — CTA、連結 |
| 電光紫 | #8B5CF6 | Secondary — 漸層終點 |
| 動感黃 | #FCD34D | 爆炸徽章、網點高光 |
| 漫畫墨黑 | #0A0A0A | 框線、硬陰影 |
| 標題黑 | #111827 | 文字 |
| 衝擊紅 | #DC2626 | Semantic — 限時、危險動作 |