yingfungsolar/docs/superpowers/specs/2026-09-11-editorial-redesign-design.md

盈豐太陽能 — 前台 Editorial 極簡重新設計 (Redesign Spec)

• 日期：2026-09-11
• 狀態：已與客戶確認方向
• 背景：初版 UI（見 2026-09-11-ying-fung-solar-design.md）被客戶評為「AI 模板感太重」。本規格取代該 spec 的 §5 設計系統部分；其餘架構／資料庫／路由／SEO 決策不變。

---

1. 設計方向

暖米白 × 琥珀金 × 明體標題 的 editorial 極簡風，似高端工程公司官網。

要消滅嘅「AI 模板痕跡」：

• 綠→天藍漸層（logo 磚、hero 光暈、流程圓圈、CTA 橫額）→ 全站零漸層、零光斑
• 膠囊形按鈕（rounded-full）→ 直角或微圓角（≤4px）
• Pill badge 眉題 →「琥珀短線＋細字 letterspaced 眉題」
• Hero 圖上浮卡 → 圖下髮絲線統計列
• Icon 放淺色圓角磚嘅卡片網格 → 編號式清單／髮絲線格網，無卡片陰影
• 柔和陰影卡片 → 髮絲邊框（hairline）分隔

2. 範圍

• 只改前台：src/theme/system.ts、src/layouts/Base.astro、src/components/site/*.tsx
• 唔郁：資料層、D1 schema、路由、admin（/admin 後台維持現有純 CSS 色系）

3. 新 Design Tokens（src/theme/system.ts）

色彩

Token	值方向	用途
bg 頁面	暖米白 #FAF8F4	主背景
bg.subtle	略深米白 #F3EFE7	分段背景
ink（深色 surface）	墨黑 #1A1917	CTA / Footer / 深色 section
fg	墨 #1A1917	正文
fg.muted	暖灰 #6E6862	次要文字
border.subtle	髮絲 #E7E2D9	分隔線、邊框
brand（唯一彩色）	琥珀金階梯，主色 #C2410C–#D97706 一帶	CTA、編號、重點數字

• 語意 token 名保留（brand.*、fg.muted、border.subtle、bg.subtle）以減少改動；舊 sky 色階移除。
• bg.hero token 移除（Hero 用主背景）。

字體

• 標題：Noto Serif HK（700/900），serif fallback
• 內文：維持 Noto Sans HK
• Base.astro 的 Google Fonts link 加入 Noto Serif HK 字重；global body 背景轉米白

形狀與動效

• 按鈕：實心墨黑或琥珀金，直角／微圓角（rounded="sm" 或 none），唔再係膠囊
• 卡片：去大圓角去陰影，以髮絲線分隔
• 動效：保留簡單 hover（透明度／位移），唔加新動畫庫

4. 各 Section 重構

1. Header：去玻璃模糊 → 米白實底＋髮絲底線；logo 改純文字 wordmark（serif 公司名，唔再係漸層 icon 磚）；CTA 改墨黑直角實心掣；手機 drawer 保留但跟新色
2. Hero：serif 超大標題；眉題改琥珀短線＋細字；剷走圖上浮卡 → 圖下方髮絲線統計列（回本期／系統年期／牌照）；次 CTA 改文字連結「睇完成案例 →」；去背景光斑
3. TrustBar：四欄髮絲分隔列，幼線 icon＋細字，無底色無框
4. Services：icon 卡片 → 編號式清單（01／02／03），serif 標題＋列頂髮絲線，hover 出現箭嘴
5. Features：白卡 → 髮絲線格網（報紙分欄感），編號＋serif 標題
6. Process：漸層圓圈 → 超大 serif 琥珀數字＋髮絲連線
7. Cases：去圓角去陰影；首案例 featured 放大（非對稱）；地點 pill badge 改細字標籤
8. FAQ：白卡 accordion → 髮絲線裸列，serif 問題
9. ContactCta：漸層橫額 → 墨黑實底 section，serif 白標題＋琥珀實心掣
10. Footer：深綠底 → 墨黑底；logo 磚改文字 wordmark；髮絲分隔線
11. WhatsAppFab：綠色圓掣 → 墨黑圓掣（icon 保持白色）
12. Blog 列表／文章頁：serif 標題、髮絲線、琥珀 accent，跟新 tokens
13. SectionHeading：pill eyebrow → 琥珀短線＋細字眉題；預設左對齊

5. 驗證

• npm run build 通過
• npm run dev 目測：RWD、錨點、FAQ accordion、WhatsApp link、無 hydration error

6. 文件同步

• src/AGENTS.md：token 名單更新（移除 sky、bg.hero；加入 ink）
• src/components/site/AGENTS.md：樣式慣例更新（editorial 風、禁用漸層／膠囊／陰影卡）