慢食旅 × 炭烤職人牛排
適合首頁與 94小確幸商品卡使用。
NT$1,580 NT$1,980
VIVI DESIGN SYSTEM v1
VIVI 薇薇
VIVI 薇薇
網站基礎設定
這個頁面用來確認全站輕量頁面的基本設計規範，包括色票、字型、字級、字重、按鈕、卡片、圖片比例、表單與間距。之後各頁面會以這份基礎 CSS 為底延伸設計。
目前用途
- 確認網站整體視覺方向
- 檢查桌機版與手機版字級
- 統一按鈕、卡片、價格、表單樣式
- 統一 AJAX 載入更多與 Popup 載入中樣式
- 統一卡片右上角更多選單按鈕
- 統一頁面切換按鈕，例如所有社團、我的社團
- 作為後續首頁、品牌地圖、94小確幸的基準
01 色票 Colors
全站基礎色彩，之後主要透過 vivi-base.css 的 CSS 變數管理。
墨色
#1C1C1C
用於主要文字、重要標題、主按鈕背景，讓整體保持穩定與高級感。
藍墨茶
#393432
用於導覽列、次重要標題、深色輔助文字，取代原本偏綠的利休鼠，讓整體更沉穩中性。
品牌橘色
#996515
用於橘色重點按鈕、CTA、標籤、價格與重點提示。
胡粉白
#FFFFFB
用於全站主要背景，明亮乾淨但不刺眼。
白練
#FCFAF2
用於區塊背景、頁面分段與列表區域，形成柔和紙感層次。
鳥之子
#F3E8D0
用於圖片 placeholder、卡片內層與溫暖內容區塊。
白
#ffffff
用於商品卡、品牌卡、表單、彈出區塊與主要內容卡片背景。
素鼠
#787878
用於說明文字、輔助資訊、分類、日期與 meta 文字。
02 字型 Typography
全站統一使用 H3 目前的系統無襯線字體，不混用襯線字；不載入 Google Fonts，以效能優先。
Hero
Desktop
找回生活裡的小確幸
42–68px
Bold 600
--vivi-fw-bold
Mobile
找回生活裡的小確幸
34px
Bold 600
--vivi-fw-bold
H1
Desktop
頁面主標題
46px
Bold 600
--vivi-fw-bold
Mobile
頁面主標題
30px
Bold 600
--vivi-fw-bold
H2
Desktop
區塊標題
32px
Bold 600
--vivi-fw-bold
Mobile
區塊標題
24px
Bold 600
--vivi-fw-bold
H3
Desktop
卡片標題與內容標題
20px
Bold 600
--vivi-fw-bold
Mobile
卡片標題與內容標題
17px
Bold 600
--vivi-fw-bold
Body Large
Desktop
與你一起探索風格品牌、在地美食、質感住宿與美好體驗。
18px
Regular 400
--vivi-fw-regular
Mobile
與你一起探索風格品牌、在地美食、質感住宿與美好體驗。
15px
Regular 400
--vivi-fw-regular
Body
Desktop
這是一般內文，用於說明文字、商品描述與頁面段落。
16px
Regular 400
--vivi-fw-regular
Mobile
這是一般內文，用於說明文字、商品描述與頁面段落。
14px
Regular 400
--vivi-fw-regular
Small
Desktop
分類、輔助說明、小型標籤文字
14px
Regular 400
--vivi-fw-regular
Mobile
分類、輔助說明、小型標籤文字
12px
Regular 400
--vivi-fw-regular
XS
Desktop
更小的補充資訊或 meta 文字
12px
Regular 400
--vivi-fw-regular
Mobile
更小的補充資訊或 meta 文字
11px
Regular 400
--vivi-fw-regular
Font Weight / 字體粗細
全站只保留 Regular 400 與 Bold 600 兩種粗細；各字級的粗細在上方 Desktop / Mobile 欄位同步顯示。
Regular
400 / 一般內文、描述、輔助資訊
--vivi-fw-regular
Bold
600 / 標題、按鈕、標籤、價格、重點文字
--vivi-fw-bold
03 按鈕 Buttons
全站按鈕分為主要按鈕、次要按鈕、橘色重點按鈕與文字連結。
04 卡片 Cards
商品卡、品牌卡、故事卡都以同一套圓角、邊框、陰影基礎延伸。
05 圖片比例 Image Ratio
用來確認未來首頁、商品卡、品牌卡與文章卡的圖片裁切規格。
16:9
4:3
7:5
5:3
9:11
06 表單 Forms
用於電子報、搜尋、登入入口、品牌地圖篩選等表單欄位。
07 間距 Spacing
確認全站共用 spacing scale，讓區塊、卡片與文字距離一致。
XS
8px
SM
12px
MD
16px
LG
24px
XL
32px
2XL
48px
3XL
64px
08 AJAX Loading
全站 AJAX 載入更多與 Popup 載入中的標準樣式，基準來自 生活誌 / 社團動態頁。
列表底部自動載入
已顯示全部內容
Popup / Modal 載入中
請稍候，正在載入內容。
09 Loop List Pagination / Dots
首頁 Loop List 下方的上一頁、dots、下一頁統一納入全站基礎設定；後續社團、票券、Profile 等 Loop List 可沿用同一組 class。
標準狀態
多頁狀態
10 More Action Button / 更多按鈕
首頁 生活誌 Loop Item 圖片右上角的 ••• 按鈕已納入全站基礎設定；後續所有卡片需要更多選單時，統一沿用這組 class。
卡片右上角狀態
更多選單固定使用同一套圓形按鈕
單顆按鈕狀態
標準 34px，使用基礎色票、邊框、陰影與 hover 狀態。
12 Profile / Brand Loop Item / 人物與品牌帳號卡片
社團內品牌列表與 Profile 追蹤中列表統一沿用此卡片、格線、管理員查看、追蹤與分享按鈕設定。
13 Page Tabs / 頁面切換按鈕
用於頁面上方的功能切換按鈕，例如 生活社團列表頁的所有社團、我的社團。
14 Header / 頁首
Header 已納入網站基礎設定，尺寸、Logo、導覽文字、Icon、購物車、會員下拉與手機版 Header 都由 vivi-base.css 的 Header token 控制。
Header Tokens
--vivi-header-height
--vivi-header-height-mobile
--vivi-header-logo-width
--vivi-header-link-color
--vivi-header-hover-bg
--vivi-header-cart-badge-bg