基於商品/訂單/活動/子品牌/Blog 頁的事實規範。⚠️ 表示視覺估值，待精確取色。
調性：粉紅主視覺 + 棕字 logo + 蔬果聯想點綴 + 米白底
調性：偏黃淡綠主視覺 + 橄欖綠強調 + 黃色重點 + 珊瑚紅 CTA
#7B914E 為文字（CSS 最高頻），主色偏黃淡綠 ⚠️ 為視覺估值。CTA 用珊瑚紅 #FF755A。黃 #CAA940 跟 Blog 金同色共用。
調性：粉紅按鈕為主 + 深珊瑚紅 logo + 白底
#FFA3A3；#E66659 為 logo / 標題色（不當按鈕）。黃色基本上不日常用、藍色亦少用，僅特殊版型（如「修繕申請」「我要贊助」這類三色並列按鈕）會用到濃黃 + 淡藍。⚠️ 為視覺估值。
調性：墨綠主標 + 主品牌綠勾號 + 淺灰背景 + 深紅／淺紅強調 + 黃點綴
#2D5A35 為主標題色（如「健康補給站」「吃葉黃素還是無感」）；主品牌綠 #4ba83b 用於勾號 / 小強調。深紅 #B5384A 為標題強調紅（蝦紅素 / 醫師專欄等），淺紅 #F4DEDB 為米粉背景。⚠️ 為視覺估值。
主色 #F8C058、輔色 #D34226、文字 #935E29、字型 GenSenRounded
兩方塊之間的空隙 = 對應的間距大小
Mobile-first：基本樣式為 mobile，@media (min-width: 768px) 接 tablet、@media (min-width: 1200px) 接 desktop。SCSS 現有 550 / 580 / 941 等斷點 sweep 為三段。
| 屬性 | mobile | tablet | desktop |
|---|---|---|---|
| 容器 max-width | 全寬 - 32px | 全寬 - 64px | 1140px |
| 內容左右 padding | 16px | 32px | 用 max-width 收 |
| Section 上下 padding | 32px | 48px | 64px |
| h1 字級 | 28px | 32px | 36px |
| h2 字級 | 22px | 26px | 28px |
| body 字級 | 16px | 16px | 16px |
| 按鈕 padding | 10px 20px | 12px 24px | 12px 28px |
| 主 nav | 漢堡選單 | 漢堡或展開 | 橫向展開 |
| 圖片裁切 | 1:1 / 4:3 | 4:3 / 16:9 | 16:9 |
→ 各版型在此基礎上加自身欄數 / 排列調整，見「九、常用版型」。
頁面層級的全站排版邏輯，所有版型都遵循此策略。
| 頁面類型 | 容器策略 | 說明 |
|---|---|---|
| 商品列表 / 詳情 | max-width 1140px 置中 | 標準商業頁 |
| Blog 列表 / 文章 | max-width 1140px 置中 | 同上 |
| 訂單 / 結帳 / 聯絡我們 | max-width 524px 置中 | 單欄表單 |
| 會員中心 / 後台型功能頁 | 不受寬度限制（全寬） | 需要橫向空間放 sidebar + 主內容 |
| 首頁 / 子品牌 LandingPage | 全寬，內部各區塊各自有容器 | Hero 區塊全寬，內容區塊用 1140px 容器 |
| 元素 | 位置 | 規格 |
|---|---|---|
| 主 FAB（電話訂購、LINE、回頂部） | 右下角 | 距右 20px、距下 20px；圓形 48×48px；多顆垂直排列、gap 12px |
| 錨點導航（長頁面 section 跳轉） | 桌機：左側 sticky；手機：頂部 sticky 橫向滾動 | 桌機寬 200px、距左 32px |
| Sticky 底部 CTA（mobile only） | 畫面底部 | 高 64px、白底 + 上邊陰影；用於詳情頁的「加入購物車」「立即捐款」 |
| 主 nav | 頂部 sticky | 下捲時隱藏、上捲時顯示 |
頁面範例（右下角懸浮元素示意）
桌機用完整 table；mobile 依資料密度選擇下列三策略之一：
| 策略 | 適用情境 | 做法 |
|---|---|---|
| ① 橫向滾動 | 欄數少（≤ 4 欄）、列數中等 | 外層 overflow-x: auto，table 維持完整結構 |
| ② 卡片化 | 資料密度高（每 row 多欄、需閱讀） | 每 row 變獨立卡片，用 label/value 對照 |
| ③ 隱藏次要欄 | 列數多、欄有主次差異 | mobile 顯示 2~3 個關鍵欄，桌機顯示全部 |
| 屬性 | 規格 |
|---|---|
| 遮罩 | 背景 rgba(0,0,0,0.5) |
| 容器 | 桌機 max-width 480px / mobile 全寬 - 32px；置中 |
| 圓角 / padding | 4px / 24px |
| 關閉 | 右上 X 圖示 + 點遮罩可關 |
| 屬性 | 規格 |
|---|---|
| 位置 | 右上角（距邊 20px）/ mobile 頂部全寬 |
| 寬度 | 桌機 320px / mobile 全寬 - 32px |
| 消失 | 成功 3 秒 / 錯誤手動關閉 |
| 動畫 | 滑入（300ms ease-out） |
保留 8 個本質性版型：列表頁 / 詳情頁 / 表單頁 / Landing Page / Banner Slider / 圖文搭配 / 圖片段落 / 圖片按鈕組。前 5 個是頁面層級版型；後 3 個是區塊層級版型，可組合進前 5 個。
用於：商品列表、Blog 列表、訂單列表、會員紀錄等
| 屬性 | mobile | tablet | desktop |
|---|---|---|---|
| 欄數（商品） | 2 | 3 | 3 |
| 欄數（Blog / 訂單） | 1 | 2 | 2~3 |
| 卡片 gap | 12px | 16px | 24px |
| 篩選器 | 頂部 chip carousel | 頂部 chip carousel | 頂部 chip carousel |
| 分頁器 | 下方置中 | 下方置中 | 下方置中 |
→ 實況確認：商品列表 mobile (375px) 2 欄，tablet (768+) 3 欄。篩選器是頂部 chip 橫向 carousel（如「熱門主打 / 大富翁聯名 / 小寶寶 / 中寶寶...」），不是 sidebar 或摺疊。
用於：商品詳情、Blog 文章、活動詳情
| 屬性 | mobile | tablet | desktop |
|---|---|---|---|
| 主 layout | 上下堆疊（圖→資訊） | 上下堆疊 | 左圖右資訊（50/50） |
| 圖片寬度 | 100% | 100% | 50% |
| 主 CTA 位置 | sticky bottom | inline | inline |
| 側欄 | 不顯示或下方 | 下方 | 右側 30% 或無 |
用於：訂單確認、結帳、會員資料、聯絡我們
| 屬性 | mobile | tablet | desktop |
|---|---|---|---|
| 容器寬度 | 全寬 - 32px | 524px 置中 | 524px 置中 |
| 欄位 layout | 單欄 | 單欄 | 單欄（部分雙欄如姓名/電話） |
| 欄位 gap | 12px | 16px | 16px |
| 送出按鈕 | 全寬 | 自動寬 | 自動寬 |
用於：活動專頁、子品牌（粥寶寶 / 綠拿鐵 / 等家寶寶 / 益菓保）、首頁、未來新版介紹頁
| 屬性 | mobile | tablet | desktop |
|---|---|---|---|
| Hero 高度 | 50vh / 49vw | 50vh | 60vh / 21vw |
| Hero 文字位置 | 置中 | 置中或左對齊 | 左對齊 |
| 區塊堆疊 | 單欄堆疊 | 單欄或雙欄 | 左右交替雙欄 |
| 區塊間距 | 32px | 48px | 64~96px |
| CTA 按鈕 | 全寬 | 自動寬 | 自動寬，可並排多顆 |
用於：首頁 Hero、商品列表 Hero、活動主視覺、子品牌 Hero、會員專區頂部
desktop（16:9）
mobile（1:1 維持方形）
| 屬性 | mobile（現況 → 規範） | desktop（現況 → 規範） |
|---|---|---|
| 比例 | 1:1 方形（維持現況） | ~21:9 → 改 16:9 |
| 容器寬度 | 330px（含 padding） | 1040px / 全寬 或 1140px |
| 左右箭頭 | 顯示 | 顯示 |
| 圓點位置 | 圖片外下方獨立區域（不疊在圖片上） | |
| 圓點數量 | ≤ 8 個 | ≤ 8 個 |
| 自動播放間隔 | 3 秒（現況） → 5 秒（規範） | 3 秒 → 5 秒 |
| 切換動畫時間 | 1000ms → 300~500ms | 1000ms → 300~500ms |
| 切換方式 | swipe + 箭頭 + 圓點 | swipe + 箭頭 + 圓點 |
| 套件 | slick carousel | slick carousel |
用於：產品介紹、品牌故事、產地報導、Landing Page 中段
| 屬性 | mobile | tablet | desktop |
|---|---|---|---|
| 主 layout | 上下堆疊（圖→文） | 上下堆疊 | 左圖右文 50/50（或反向） |
| 圖片比例 | 4:3 | 4:3 或 16:9 | 4:3 或 16:9 |
| 圖片寬度 | 100% | 100% | 50% |
| 圖文間距 | 16px（圖下） | 24px | 48px（中間 gap） |
| 多段交替 | 全部圖在上 | 全部圖在上 | 左圖右文 / 右圖左文交替 |
<figure> + <figcaption> 寫圖說（語意 + AEO 友善）。用於：產地實景、檢驗實驗室、團隊照、產品大圖、品牌氛圍圖
feature
雙圖 1:1
三圖 4:3
四圖 1:1
| 形式 | mobile | tablet | desktop |
|---|---|---|---|
| 單張大圖 | 全寬 16:9 | 全寬 16:9 | 全寬或 1140px max |
| 雙圖並排 | 上下堆疊 | 雙欄 1:1 | 雙欄 1:1 或 4:3 |
| 三圖網格 | 上下堆疊 | 雙欄 + 一 | 三欄 4:3 |
| 四圖網格 | 雙欄 1:1 | 雙欄 1:1 | 四欄 1:1 |
| 圖片 gap | 8~12px | 16px | 24~32px |
| 圖說（caption） | 圖下 12px、note 13px、灰字 #999；用 <figcaption> | ||
用於：分類入口（蔬果 / 加工品 / 水產）、子品牌入口、活動入口、首頁主要 CTA 區
A. 圖下卡片式
蔬果
產地直送
加工品
天然製作
水產
急速冷凍
B. 圖內覆蓋式
| 屬性 | mobile | tablet | desktop |
|---|---|---|---|
| 卡數 | 1（縱列） | 2 | 3~4 |
| 圖片比例 | 16:9 | 4:3 | 4:3 |
| Hover | 圖片 zoom 5% | 同 | 圖 zoom 5% + 文字加深 + 陰影 0 4px 16px |
| 卡片 gap | 12px | 16px | 24px |
| 整張可點擊 | 用 <a> 包整張卡片（語意 button-like） | ||
讓 AI 搜尋引擎（ChatGPT、Perplexity、Gemini 等）能正確理解、引用網站內容。原則是「結構清楚 + 內容明確 + 機器可讀」。
| 規則 | 說明 |
|---|---|
每頁只有一個 <h1> | 且包含核心關鍵字（商品名 / 類別名 / 品牌名） |
| H2~H6 嚴格層級遞進 | 不跳級（不能 H1 → H3）；不為視覺用 heading |
| 區塊用 semantic tag | <article> <section> <nav> <main> <header> <footer> <aside> |
列表用 <ul> / <ol> | 不用 <div> 模擬列表 |
表格用 <table> | <thead> <tbody> 完整；不用 div grid 假表格 |
引述用 <blockquote> | 不用單純 italic / 引號 |
<p class="text-large">，**不要用 heading 標籤**| 原則 | 做法 | 例子 |
|---|---|---|
| 問答式 | 用問題當 H2/H3，下方接答案 | H2「無毒農跟有機認證有什麼差別？」+ 段落答案 |
| 倒金字塔（結論先行） | 段落第一句寫結論，後面補充細節 | 「我們每批檢驗 365 天。為了讓...」 |
| 用 list / table 結構化 | 重點資訊用 <ul> 或 <table>，AI 容易解析 | 商品規格表、檢驗項目清單 |
| 具體數據 | 用具體數字、單位、日期 | 「殘留量 ≤ 國家標準的 1/2」「365 天每日篩檢」 |
| 避免空洞行銷 | 不寫「最好的」「業界第一」「革命性」 | 改寫成「全台唯一千萬等級質譜實驗室」（具體事實） |
| 項目 | 規則 |
|---|---|
<title> | 60 字內，包含主關鍵字 + 品牌名（如「益菓DHA魚油｜無毒農益菓保」） |
<meta name="description"> | 155 字內，自然描述頁面，不堆關鍵字 |
| Open Graph | og:title / og:description / og:image / og:url（社群分享預覽用） |
| Schema.org JSON-LD | 商品頁 → Product；文章 → Article；組織 → Organization；FAQ → FAQPage；麵包屑 → BreadcrumbList |
alt=""（空字串，避免 AI 干擾）/Products/Kitchenette ✓ vs /p?id=12345 ✗| 項目 | 規則 |
|---|---|
| robots.txt | 開放主流 AI bot：GPTBot / ClaudeBot / PerplexityBot / Google-Extended / CCBot |
| sitemap.xml | 完整列出所有公開頁，每月更新 |
| SSR / 靜態化 | **重要內容直接出現在 HTML**，不等 JS 渲染（AI 多半不執行 JS） |
| 頁面載入速度 | 3 秒內首屏可見（影響 AI 抓取頻率） |
A 階段：除既有 slider（商品 carousel）外無動態效果，沿用既有行為。
本段保留框架，**留給 B/C 方案決定是否加入動態**。若加，原則：
A 是「規範化」，不是「重做」：
#003254 砍除；等家寶寶紫色 #C2C2FF 砍除（專案色不在品牌）#4e9854 收編回 #4ba83b<style> 標籤回歸 SCSS#CAA940、#008000、#5cb0df、新版益菓保、綠拿鐵#4ba83b 統一一致；商品綠 #4e9854 已砍#008000、Blog 金 #CAA940、冷凍藍 #5cb0df 視覺認可#FF755A
每一口食物，都是一個選擇。選擇相信，或選擇懷疑。
我們相信，消費者有權利知道自己吃的東西從哪裡來、怎麼種的、農藥殘留幾種。不是口號，是承諾。
＊資料更新日期：2026-04-30｜以官網公告為準
每一項都附視覺壞範例，讓後續做設計或 agent 能對照辨識。
紫到藍、彩虹漸層等套版方向
強大的功能，極致的設計
一眼 AI Slop 的模板感
當項目符號、按鈕 icon、標題開頭
機器人、燈泡、齒輪等抽象示意
$9,999、99.9% uptime 這種 demo 味
16:9 / 4:3 / 1:1 以外的奇怪比例
雙線、虛線、漸層邊框
除既有 hover 簡述外的彈出框
5px、7px、10px、13px、25px 等
A 統一 4px
「賦能」「閉環」「抓手」「下沉」
「完美的」「極致的」「革命性的」
對應規範文件：方案A-現有規範.md