按鈕
三種按鈕層級，對應不同的操作優先序。Primary 按鈕使用 Honey Drip 動畫效果（見動態規範）。
| 類型 | 外觀 | 使用情境 | 規格 |
|---|---|---|---|
| Primary | Bee Green 底 + Deep Forest 文字 | 主要行動：報名、購買、了解更多 | radius: 24pxpadding: 16px 32px |
| Secondary | 透明底 + Bee Green 邊框與文字 | 次要行動：查看詳情、下載 | border: 1.5px solid |
| Ghost | 透明底 + 白色邊框與文字 | 深色背景上的次要操作 | 用於 Deep Forest 背景 |
語意標籤
Dimension 色系在 UI 上的主要出現位置。消費者看到標籤顏色就知道正在瀏覽哪個維度的蜂癒內容。
🍯 產品
🔬 品質
🧑🌾 人文
🌿 生活
📚 教育
紅淡比蜜
LCA 驗證
陳美秀蜂場
蜂蜜食譜
食農教育
| 維度 | 主色 | 標籤配色 |
|---|---|---|
| 🍯 產品 | #E8A020 | 淺：#FDF3E0 / 深：#7A5010 |
| 🔬 品質 | #1A9E8F | 淺：#E0F5F3 / 深：#0D5349 |
| 🧑🌾 人文 | #A0673A | 淺：#F7EDE6 / 深：#5C3B20 |
| 🌿 生活 | #8BA4B0 | 淺：#F0F4F6 / 深：#3D5A68 |
| 📚 教育 | #B5D429 | 淺：#F6FAE8 / 深：#5D6E14 |
規格：
border-radius: 999px ／ height: 28px ／ font-size: 12px ／ font-weight: 600卡片
三種卡片對應三種內容深度。
攝影圖片
🧑🌾 人文
王秋煌：早上五點的蜂場
石碇養蜂 30 年的經驗，讓他能從蜜蜂的狀態讀出今天的天氣。
蜂蜜產品圖
🍯 紅淡比蜜
石碇春季紅淡比蜜
碳足跡：0.76 kg CO₂e/kg ／ 宜蘭大學全項驗證
25
項農藥殘留檢驗，全數未檢出
📊 來源：宜蘭大學食品科學系 ／ 2025 年度報告
| 卡片類型 | 結構 | 用途 |
|---|---|---|
| Story Card | 大圖 + Dimension 標籤 + 標題 + 摘要 | 蜂農故事、活動介紹 |
| Product Card | 產品圖 + 品名 + 產地標記 + 價格 | 電商、禮盒選購 |
| Data Card | 數字大字 + 說明文 + 資料來源 | 碳足跡數據、驗證統計 |
卡片通用規格：
border-radius: 12px ／ box-shadow: 0 1px 3px rgba(0,0,0,0.08)UI 設計原則
留白優先
元件之間留夠空間。不為了塞更多內容而壓縮。空白本身傳遞品質感。
顏色克制
一個頁面最多出現 2 個 Dimension 色。顏色越少，每個顏色傳遞的語意越清晰。
Hover 回饋
所有可點選元件有明確的 hover 狀態。不能讓用戶猜哪些東西可以點。