# e 等公務園＋首頁提案品牌規格

三款首頁共用清楚、可信賴的政府學習服務骨架；第一款採藍灰資訊介面，第二款採清爽萊姆綠模組，第三款以深綠與亮綠建立 AI 學習入口。

```css
:root {
  --bg: oklch(0.9926 0.0110 123.45);
  --surface: oklch(1 0 0);
  --fg: oklch(0.2077 0.0398 265.75);
  --muted: oklch(0.5544 0.0407 257.42);
  --border: oklch(0.9067 0.0128 228.94);
  --accent: oklch(0.4684 0.0753 181.38);
}
```

- 顯示字體：`Avenir Next`, `PingFang TC`, `Noto Sans TC`, sans-serif
- 內文字體：`-apple-system`, `PingFang TC`, `Noto Sans TC`, sans-serif
- 數字／代碼：`ui-monospace`, `SFMono-Regular`, Menlo, monospace

姿態規則：

1. 內容以大尺寸水平容器、明確章節標題與高密度卡片建立政府服務的可信度。
2. 第一款使用 `#2b6db6` 藍色與 `#24364d` 藍灰；詳細課程資訊直接露出。
3. 第二款使用 `#4d7c0f` 苔綠、`#a3e536` 萊姆綠及 `#fbfef6` 淡綠底；卡片更輕、更模組化。
4. 第三款使用 `#1a685d` 深綠與 `#a3e536` 亮綠；首屏聚焦 AI 推薦、年度進度與課程搜尋。
5. 圖像以設計檔內的學習人物、課程照片與 e+ 智慧助理素材為主，不另造風格。

## 已確認學習環境

學習環境以冷調藍灰資訊介面承載高密度課程操作，紫藍主色只用於主要操作與進度狀態；它是獨立視覺契約，不由入口網站主題覆蓋。

```css
:root {
  --bg: oklch(0.9618 0.0086 247.91);
  --surface: oklch(1 0 0);
  --fg: oklch(0.3285 0.0474 254.96);
  --muted: oklch(0.5202 0.0394 257.87);
  --border: oklch(0.9288 0.0126 255.51);
  --accent: oklch(0.5571 0.1320 274.28);
}
```

- 顯示字體：`Inter`, `Arial`, `Noto Sans TC`, `Noto Sans`, system-ui, sans-serif
- 內文字體：`Inter`, `Arial`, `Noto Sans TC`, `Noto Sans`, system-ui, sans-serif
- 數字／代碼：`Inter`, `Arial`, ui-monospace, `SFMono-Regular`, Menlo, monospace

姿態規則：

1. 主體維持播放器、學習狀態與課程資訊的三區層級；桌面並列、平板以下改為抽屜，不重排資訊優先序。
2. 淺色模式以 `#eef3f8` 頁底、`#ffffff` 表面、`#24364d` 文字建立清楚的政府學習服務介面。
3. `#5d6bc0` 紫藍只承擔主要按鈕、進度與選取狀態；成功、警告與失敗沿用來源的語意色。
4. 卡片圓角、陰影、播放器比例、固定工具與助理浮動按鈕均依來源 HTML 原值保留。
5. 響應式行為沿用 `1024px`、`760px`、`400px` 與 `1600px` 門檻，並保留深色模式與減少動態偏好。