慢食旅 × 炭烤職人牛排
適合首頁與 94小確幸商品卡使用。
NT$1,580 NT$1,980
這個頁面用來確認全站輕量頁面的基本設計規範,包括色票、字型、字級、字重、按鈕、卡片、圖片比例、表單與間距。之後各頁面會以這份基礎 CSS 為底延伸設計。
全站基礎色彩,之後主要透過 vivi-base.css 的 CSS 變數管理。
#1C1C1C
用於主要文字、重要標題、主按鈕背景,讓整體保持穩定與高級感。
#393432
用於導覽列、次重要標題、深色輔助文字,取代原本偏綠的利休鼠,讓整體更沉穩中性。
#996515
用於橘色重點按鈕、CTA、標籤、價格與重點提示。
#FFFFFB
用於全站主要背景,明亮乾淨但不刺眼。
#FCFAF2
用於區塊背景、頁面分段與列表區域,形成柔和紙感層次。
#F3E8D0
用於圖片 placeholder、卡片內層與溫暖內容區塊。
#ffffff
用於商品卡、品牌卡、表單、彈出區塊與主要內容卡片背景。
#787878
用於說明文字、輔助資訊、分類、日期與 meta 文字。
全站統一使用 H3 目前的系統無襯線字體,不混用襯線字;不載入 Google Fonts,以效能優先。
找回生活裡的小確幸
42–68px
Bold 600
--vivi-fw-bold
找回生活裡的小確幸
34px
Bold 600
--vivi-fw-bold
頁面主標題
46px
Bold 600
--vivi-fw-bold
頁面主標題
30px
Bold 600
--vivi-fw-bold
區塊標題
32px
Bold 600
--vivi-fw-bold
區塊標題
24px
Bold 600
--vivi-fw-bold
卡片標題與內容標題
20px
Bold 600
--vivi-fw-bold
卡片標題與內容標題
17px
Bold 600
--vivi-fw-bold
與你一起探索風格品牌、在地美食、質感住宿與美好體驗。
18px
Regular 400
--vivi-fw-regular
與你一起探索風格品牌、在地美食、質感住宿與美好體驗。
15px
Regular 400
--vivi-fw-regular
這是一般內文,用於說明文字、商品描述與頁面段落。
16px
Regular 400
--vivi-fw-regular
這是一般內文,用於說明文字、商品描述與頁面段落。
14px
Regular 400
--vivi-fw-regular
分類、輔助說明、小型標籤文字
14px
Regular 400
--vivi-fw-regular
分類、輔助說明、小型標籤文字
12px
Regular 400
--vivi-fw-regular
更小的補充資訊或 meta 文字
12px
Regular 400
--vivi-fw-regular
更小的補充資訊或 meta 文字
11px
Regular 400
--vivi-fw-regular
--vivi-fw-regular
--vivi-fw-bold
全站按鈕分為主要按鈕、次要按鈕、橘色重點按鈕與文字連結。
商品卡、品牌卡、故事卡都以同一套圓角、邊框、陰影基礎延伸。
適合首頁與 94小確幸商品卡使用。
NT$1,580 NT$1,980
適合品牌卡、分類入口卡使用。
用來確認未來首頁、商品卡、品牌卡與文章卡的圖片裁切規格。
用於電子報、搜尋、登入入口、品牌地圖篩選等表單欄位。
確認全站共用 spacing scale,讓區塊、卡片與文字距離一致。
全站 AJAX 載入更多與 Popup 載入中的標準樣式,基準來自 生活誌 / 社團動態頁。
首頁 Loop List 下方的上一頁、dots、下一頁統一納入全站基礎設定;後續社團、票券、Profile 等 Loop List 可沿用同一組 class。
首頁 生活誌 Loop Item 圖片右上角的 ••• 按鈕已納入全站基礎設定;後續所有卡片需要更多選單時,統一沿用這組 class。
社團內品牌列表與 Profile 追蹤中列表統一沿用此卡片、格線、管理員查看、追蹤與分享按鈕設定。
用於頁面上方的功能切換按鈕,例如 生活社團列表頁的所有社團、我的社團。
Header 已納入網站基礎設定,尺寸、Logo、導覽文字、Icon、購物車、會員下拉與手機版 Header 都由 vivi-base.css 的 Header token 控制。
--vivi-header-height
--vivi-header-height-mobile
--vivi-header-logo-width
--vivi-header-link-color
--vivi-header-hover-bg
--vivi-header-cart-badge-bg