Design System Preview

Gradient 光譜流動

Gradients as the primary design language — 深電紫到熱粉的過渡即是這套系統的視覺主詞
Color transitions, not static fills, communicate hierarchy and energy.

Core Palette 核心色板

電紫 Primary
#990FFA
熱粉 Secondary
#E60076
中界洋紅
#BF07B8
皓白 Surface
#FFFFFF
墨黑 Text
#111827
成功綠
#16A34A
危險紅
#DC2626

Typography 字體樣張

H1 — Space Grotesk · 700 · clamp(1.8rem, 4vw, 2.2rem) · gradient text

色彩過渡就是介面

H2 — Space Grotesk · 700 · 30px

Vibrant, Kinetic, Flow-driven

H3 — Space Grotesk · 600 · 24px

卡片與 section 標題

Body — Montserrat · 16px · line-height 1.6

幾何開放字形讓正文快速可讀,連結用純電紫(hover 轉熱粉),技術內容用 JetBrains Mono

Buttons 按鈕

Hover 時漸層位置位移,給互動一個「活著」的色相回饋。

Tags & Badges 標籤徽章

New Trending Live Ending Soon

小面積徽章用純色,不勉強塞漸層 — 純色是系統的備援語言。

Cards 卡片

音樂節活動

淺漸層底色 + hover 浮現漸層邊框,展現系統的招牌能量。

創作者作品集

8pt 網格對齊,讓漸層的視覺能量落在可預期的節奏裡。

社群動態

陰影帶一點 Primary 色調,呼應系統色軸而非純黑灰。

Spectrum Progress Bar 光譜進度條

32%
68%
94%

進度條隨填充比例穿越整段紫→洋紅→粉光譜,而非單色拉長 — typeui.sh 原文明確點名的招牌用法。

Color Reference 色彩對照

色彩Hex角色
電紫#990FFAPrimary — 漸層起點、主要動作
熱粉#E60076Secondary — 漸層終點、hover
中界洋紅#BF07B8漸層中段、小面積過渡代表色
皓白#FFFFFFSurface — 背景、卡片
成功綠#16A34ASemantic — Success
警告橙#D97706Semantic — Warning
危險紅#DC2626Semantic — Danger