Design System Preview 設計系統展示

Retro Wave 復古浪潮

80 到 90 年代 Memphis 派對能量 — 卡帶奶油底・撞色幾何・彈跳圓潤字體

🎨 核心色板 Core Palette

卡帶奶油
#FDF6E3
落日橘
#FF6B35
復古藍綠
#00B8A9
桃紅爆炸
#E63E96
葡萄紫
#6C4AB6
芥末黃
#FFC93C
墨黑
#1A1A2E

✍️ 字體規範 Typography

H1 — Righteous · clamp(2.4rem, 6vw, 3.6rem)

音浪來襲 Turn Up The Volume

H2 — Righteous · 2rem

卡帶正在轉動 Tapes Are Spinning

H3 — Righteous · 1.4rem

街機廳的霓虹燈光

Body — Fredoka · 17px · line-height 1.7

Fredoka 圓潤字腔撐得起長文閱讀,連結是復古藍綠底線,hover 轉芥末黃底,整體維持彈跳友善的性格。

🔘 按鈕 Buttons

🏷️ 標籤徽章 Tags & Badges

新品 New 限定 Limited 熱門 Hot

🗂️ 卡片展示 Cards

隨身聽 Walkman

金屬機殼、雙卡帶艙、耳機孔的懷舊觸感 — 每一台都是一段旅程的配樂。

手提音響 Boombox

雙喇叭、霓虹等化器指示燈,街頭派對的核心裝置,音浪震動整條街。

✨ 招牌裝飾帶 Memphis Showpiece

📖 色彩對照表 Color Reference

色彩Hex角色
卡帶奶油#FDF6E3畫布底色
落日橘#FF6B35Primary — 按鈕、標題強調
復古藍綠#00B8A9Secondary — 連結、資訊提示
桃紅爆炸#E63E96Tertiary — confetti、標籤
葡萄紫#6C4AB6Quaternary — 裝飾形、info
芥末黃#FFC93CHighlight — 圓點、hover 高光
墨黑#1A1A2E文字、外框、硬陰影