Design System Preview

Frosted Glass 毛玻璃 ❄️

玻璃擬態設計系統 — 多彩漸層底、半透明玻璃卡片、柔霧景深
Glassmorphism · Soft Gradient Mesh · Floating Panels

🎨 Core Palette 核心色板

天霧紫 Sky Lilac
#A78BFA
霧藺青 Aqua Mist
#5EEAD4
蜜桃光 Peach Glow
#FDBA74
薄霧粉 Blush Pink
#F9A8D4
玻光白 Glass White
#FFFFFF
石墨灰 Ink Slate
#1E293B
雲灰 Cloud Gray
#64748B

✍️ Typography 字型規範

H1 — Poppins 700

輕盈通透 Floating Glass

H2 — Poppins 600

玻璃層級與景深系統

H3 — Poppins 600

每一片玻璃都在漸層之上漂浮

Body — Inter 400 · 16px · line-height 1.7

玻璃卡片永遠半透明,讓背景的柔霧漸層透出來。連結是天霧紫色,hover 會加深並加上底線,維持在半透明背景上依然清晰可讀。

🔘 Buttons 按鈕

Primary 為漸層實色膠囊按鈕;Secondary 為玻璃底;Hover 一律 translateY(-2px) + 陰影加深

🏷️ Tags & Badges 標籤徽章

推薦 Recommended 清新 Fresh 溫暖 Warm 精選 Featured

🗂️ Glass Cards 玻璃卡片

柔霧漸層背景

四色 radial-gradient 疊加,讓每片玻璃背後都有色彩可以穿透,是整個系統成立的前提。

半透明浮動層

backdrop-filter: blur(16px) 搭配低透明度白底,hover 時上浮並加深陰影,模擬玻璃被托起。

✨ Signature Showpiece 招牌展示

Layered Glass 分層玻璃

展示面板用最強的 blur(24px) + saturate(160%),背後四個模糊色塊製造景深與色彩暈染 — 這是系統模糊層級最深、最具代表性的一層。

色塊層 filter: blur(70px),opacity 0.5–0.6,置於玻璃面板之後(z-index: -1)

📖 Color Reference 色彩對照表

色彩Hex角色
天霧紫 Sky Lilac#A78BFAPrimary — 主漸層、連結、主要按鈕
霧藺青 Aqua Mist#5EEAD4Secondary — 次漸層、次要強調
蜜桃光 Peach Glow#FDBA74暖色漸層、標籤高光
薄霧粉 Blush Pink#F9A8D4徽章、裝飾色塊
玻光白 Glass White#FFFFFFSurface — 卡片玻璃面(低透明度)
石墨灰 Ink Slate#1E293B主文字色
雲灰 Cloud Gray#64748B次要/輔助文字色