# 盈豐太陽能 — 前台 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 風、禁用漸層／膠囊／陰影卡）