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