風格速覽

一、全站基礎色（主品牌）

延伸色

二、中性色階（5 階）

三、子品牌完整色票

四、字級階梯

全頁統一 Noto Sans TC。字級採七階：39 / 30 / 24 / 19 / 16 / 14 / 13。字重三段式：h1=500、其餘標題=400、內文系列=300。

強調大字段落使用規則

觸發條件：段落 font-size ≥ 22px 且作為獨立呈現的段落（pull quote、promise panel、強調區），即視為「強調大字段落」。

• 內文字數 ≤ 40 字（含標點），超過就拆段或縮字級
• letter-spacing 0.04em ~ 0.08em、line-height 1.4 ~ 1.6，避免大字密集
• 每個 section 最多一個強調塊
• 用 <br> 強制斷在逗點/句點後，不可斷在詞中（例「不容妥協」四字必須同行）

Statement Section 判斷標準（命中即違規）

一個 section 同時命中以下 3 條以上，即視為 Statement Section、禁用：

1. 整個 section 內只有一句話（沒有上下文鋪陳、沒有圖、沒有列表）
2. 該句字級 ≥ 22px
3. 容器寬度 ≥ 880px（撐滿大容器）
4. 上下 Section padding ≥ 96px（大量負空間）
5. 內容是空洞金句（沒講事實，只是情緒性二分法或口號式宣告）

例外：設計者明確標註是為了強化活動主旨（如「2026 雙 11 限定」主視覺標語）才能用，並要在文件中註記為何要破例。

「空洞金句」識別與改寫

原則：講具體事實、有可驗證的數字 / 動作，而不是用抽象口號塑造氣氛。

五、按鈕

0 圓角、padding 16px 32px、字重 500、letter-spacing 0.04em。主 CTA 主綠底白字、hover 變深綠。次要按鈕用文字底線型（無背景無框）。
⚠️ 任何標題裝飾不准做成這個按鈕樣式——綠底白字 + padding 的視覺特徵專屬於 CTA，避免使用者誤點。

六、圓角與間距

圓角 0px

所有元素統一 0 圓角，例外：頭像 / 圓形圖示用 50%（圓形）。

間距尺度（4px 倍數，常用值偏大）

兩方塊之間的空隙 = 對應的間距大小。Section padding 預設 112~128px。

七、RWD 斷點與調整策略

三段斷點

Mobile-first：基本樣式為 mobile，@media (min-width: 768px) 接 tablet、@media (min-width: 1200px) 接 desktop。SCSS 現有 550 / 580 / 941 等斷點 sweep 為三段。

跨版型 RWD 共通策略

→ 各版型在此基礎上加自身欄數 / 排列調整，見「九、常用版型」。

八、整體排版策略

頁面層級的全站排版邏輯，所有版型都遵循此策略。不同段落的容器寬度可不一樣，但同一個區塊內對齊規則必須一致——例：純文字段落接圖片時，文字左邊跟圖左邊要對齊；左右並排時兩欄寬度比例固定。避免「邊界靠近但沒對齊」，比明顯不同寬還醜。

1. 頁面容器策略

1.1 同區塊對齊規則（明確判斷標準）

原則：不同 section 之間容器寬度可以不一樣，但同一個 section 內所有元素的容器寬度必須對齊一致。

違規 vs 合規對照

實作判斷

寫一個 section 時，問 3 個問題：

1. 這 section 內用了幾種容器寬度？理想 1 種，最多 2 種（第 2 種必須是視覺層如大圖、banner）
2. 同類元素（標題、內文、卡片、按鈕）左邊界是否完全切齊？右邊界呢？
3. 如果不齊，差距是 ≥ 64px 還是 < 32px？
   • ≥ 64px：明顯不同寬，視覺可接受
   • < 32px：「邊界靠近但沒對齊」，這比明顯不同還醜，必須改

常見錯誤修法

2. 懸浮元素（極簡：盡量不用）

3. 表格處理（依 mobile 適配策略）

桌機用完整 table；mobile 依資料密度選擇下列三策略之一：

4. Modal / 對話框

5. 通知 Toast

九、常用版型

保留 8 個本質性版型：列表頁 / 詳情頁 / 表單頁 / Landing Page / Banner Slider / 圖文搭配 / 圖片段落 / 圖片按鈕組。前 5 個是頁面層級版型；後 3 個是區塊層級版型，可組合進前 5 個。

十、表單元素

十一、Icon 系統（Font Awesome）

十二、錯誤訊息與提示

十三、無障礙基本要求

• 色彩對比 ≥ 4.5:1（WCAG AA）
• 字級最小 12px，原則 13px 以上
• Focus 狀態必須可見（input、button、link）
• 觸控面積 ≥ 44×44px
• 圖片 alt：內容圖必填、裝飾圖留空
• Tab 鍵盤導覽合理

十四、AI 友善網站（SEO / AEO）

讓 AI 搜尋引擎（ChatGPT、Perplexity、Gemini 等）能正確理解、引用網站內容。原則是「結構清楚 + 內容明確 + 機器可讀」。

1. 語意化 HTML 結構

2. Heading 內容原則

• H1：頁面主標題，**包含核心關鍵字**（如「無毒農粥寶寶 - 安心副食品」）
• H2：主要區塊標題（如「商品介紹」「規格」「評論」「安全檢驗」）
• H3：子區塊（如「分階段商品」「使用方式」）
• 視覺需要大字但語意上不是標題 → 用 <p class="text-large">，**不要用 heading 標籤**

3. 內容結構（AEO 友善）

4. Metadata 與結構化資料

5. 圖片 alt 文字

• 內容圖：alt 描述圖片內容（如「金黃奇異果切片，露出黃色果肉」）
• 商品圖：alt 含商品名 + 主特徵（如「無毒農粥寶寶 八口味米糊組合」）
• 裝飾圖：alt=""（空字串，避免 AI 干擾）
• 避免：「圖片」「banner」「圖 1」這種無意義 alt
• 避免堆關鍵字（如「奇異果 紐西蘭 黃金 進口 水果」）

6. URL 與內部連結

• URL 簡短、語意清楚：/Products/Kitchenette ✓ vs /p?id=12345 ✗
• 內部連結 anchor text 描述性：「無毒農粥寶寶系列」 ✓ vs 「點這裡」 ✗
• 麵包屑導覽 + Schema BreadcrumbList

7. AI Crawler 設定

十五、Loading / 空狀態 / 提示框

十六、動畫 / 過場原則

十七、未涵蓋的項目

• 多語系字型對應
• 暗色模式
• 動態互動（hover 卡片放大、3D 等）
• 攝影 brief 細節（攝影師作業規範另文）

十八、QC 檢查清單

交付前逐項對照，缺一不可。

色票與字型

• 主色 #4ba83b 完全沿用品牌色，未被改動
• 子品牌主色（粥寶寶 / 等家寶寶 / 益菓保）沿用；綠拿鐵走草綠系（#bacb62 / #6da333 / #91ba57 + 暖橘 #f7ad39）
• 延伸色：極淺綠 #EFF5E5
• 中性色階完整（#1a1a1a / #595757 / #999 / #ffffff / #ecf0f1）
• 字型全部 Noto Sans TC
• 字級階梯 39 / 30 / 24 / 19 / 16 / 14 / 13 完整
• 字重 500 / 400 / 400 / 400 / 300 / 300 / 300（整體偏細）

版型與比例

• 圓角 0px 整體視覺接受
• Section padding 112~128px（桌機）的留白比例
• 容器 880px max（Blog 720px / 表單 524px）
• Banner 桌機 21:9 寬螢幕、mobile 1:1，無左右切換按鈕
• 商品卡 4:5 直立式
• 圖文搭配 60/40 不對稱、4:5 直立、64~96px 大間距
• 圖片按鈕組「圖下卡片式」，禁用 overlay 變體

設計收斂

• Hero 內無 CTA 按鈕
• 標題不做成像按鈕的視覺（無背景塊、邊框、Pill）
• 無連結的卡片/區塊無 hover 效果
• 同區塊內對齊規則一致（文字邊界跟圖邊界對齊）
• 無單字裝飾，無放大的單一字 decoration
• 圖片下方無 caption（預設）
• 無整片深綠 panel + 白字
• 強調大字段落 ≤ 40 字，加寬 letter-spacing
• 無 Statement Section（滿版單句金句）
• 標題換行在逗點或合適分段處（不斷詞）
• 手機版按鈕置中或對齊其他元素邊界

其他

• CTA 主綠底白字 / 0 圓角 / hover 變深綠
• 次要按鈕用文字底線型
• 表單 input 改底線式（無框）
• Icon 改 thin line（fontAwesome thin）
• 無障礙標準（4.5:1、44px 觸控）可達成
• AI 友善網站（H1 唯一、semantic HTML、Schema.org）落實
• 不可用版型清單有無遺漏

附錄：樣本組合（看色票字型一起運作）

十九、不可用版型（明確禁止）

每一項都附視覺壞範例，讓後續做設計或 agent 能對照辨識。D 風格的精神是「減法 × 不誤導」，不確定的元素先砍。

視覺類禁用

結構類禁用

引導與點擊行為禁用

文案類禁用