# Design System: Refined 誌上優雅

> Direction from TypeUI's Refined design skill（typeui.sh）；本實作與配色細節為原創撰寫。以 Playfair Display 領銜的 serif-forward 系統——藍紫色只作配角，讓字體本身扛起「這是精品」的視覺權威。這是雜誌排版的優雅嫁接進奢華 SaaS 產品的介面語言，而不是報紙紀律的黑白編輯系統。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Refined 相信「字體就是介面」。多數 UI 系統預設幾何無襯線字型，Refined 反其道而行，讓 Playfair Display 這種高對比、過渡期（transitional）襯線字擔綱大字級標題，帶出精品雜誌與出版業的排印自信。但這不是印刷品的網頁複刻——色彩（天青藍、紫羅蘭）依然大量出現在按鈕、連結、資料視覺化，只是刻意退居輔助角色：眼睛先被字體吸引，再被色彩引導去互動。系統適合需要傳達「品質、權威、品味」的產品：作品集網站、精品電商、高階 SaaS、創意代理商——任何字體本身就是品牌一部分的場合。

**Atmosphere Keywords:** Editorial, Authoritative, Curated, Luxurious, Typographic, Generous, Considered, Publishing-grade

**Visual Anchors:**
- Playfair Display 高對比襯線標題，24–32px 承載系統最重的視覺份量
- 白色畫布 `#FFFFFF` 讓襯線字型的筆畫對比充分呼吸
- 天青藍 `#3B82F6` + 紫羅蘭 `#8B5CF6` 只做互動元素與強調點，不做滿版色塊
- 4px 基礎間距單位，慷慨留白 — 襯線字型需要空間才不顯擁擠
- 40+ 元件家族的完整覆蓋 — 這是可上生產環境的 SaaS 系統，不是純排版展示
- 每個互動元件明確定義 default / hover / focus-visible / active / disabled / loading / error 七態

**Mood Board References:**
- 高級雙月刊的封面字體排印（masthead typography）
- 精品電商的產品詳情頁（大字級品名 + 克制色彩）
- 出版社官網的作者頁與書介排版
- 書籍排版的行距與留白邏輯，套進數位產品的元件系統

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | English Name | Hex | Role |
|--------|--------|--------------|-----|------|
| 🔵 | 天青藍 | Primary | `#3B82F6` | 主要動作、連結、關鍵互動元素 |
| 🟣 | 紫羅蘭 | Secondary | `#8B5CF6` | 輔助強調、次要動作、視覺重點 |
| ⬜ | 皓白 | Surface | `#FFFFFF` | 畫布 — 讓襯線字型的筆畫對比充分呼吸 |
| ⬛ | 墨黑 | Text | `#111827` | 內文與標題 — 逼近全黑的「紙上印墨」對比 |
| 🟢 | 成功綠 | Success | `#16A34A` | 確認、正向回饋、有效狀態 |
| 🟠 | 警告橙 | Warning | `#D97706` | 警示提醒、待處理狀態 |
| 🔴 | 危險紅 | Danger | `#DC2626` | 錯誤、破壞性動作、警示 |

**Rule:** 色彩刻意收斂。天青藍標記可互動元素，紫羅蘭做次要強調與資料視覺化的第二色，但兩者從不佔滿大面積色塊——版面的視覺重量永遠先由字體扛起，色彩只負責「引導下一步」。

### Derived Surfaces（衍生層，原創延伸）

| Layer | Hex | Use |
|-------|-----|-----|
| 象牙邊界 Ivory Border | `#E7E2D8` | 卡片邊框、分隔線、輸入框描邊 |
| 書頁灰 Paper Gray | `#6B7280` | 次要文字、caption、meta 資訊 |
| 淺藍底 Primary Tint | `#EFF4FF` | Primary 色的 10% 底色，用於選中狀態、hover 背景 |
| 淺紫底 Secondary Tint | `#F3EEFE` | Secondary 色的 10% 底色，用於次要標籤背景 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Playfair Display', 'Noto Serif TC', serif | 標題、品名、大字級展示文字 — 系統的靈魂 |
| `--font-body` | 'Inter', 'Noto Sans TC', sans-serif | 內文、UI 控制項、表單、標籤 — 保證小字級可讀性 |
| `--font-mono` | 'JetBrains Mono', monospace | 程式碼區塊、技術性內容 |

**Pairing logic:** Playfair Display 在 24–32px 以上才展現它的編輯份量與義大利體特色，因此只用於 h1/h2/品名/巨大數字。12–16px 的控制項文字改用 Inter——原文規格明確指出「小字級serif 若犧牲可讀性，一律優先讀性」，因此本實作不強行把 Playfair 塞進按鈕與表單標籤。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | 32px（hero: clamp(2rem, 5vw, 2.6rem)） | display | 700 | line-height 1.2 |
| h2 | 24px | display | 600 | |
| h3 | 20px | display | 600 | 卡片標題級距 |
| Body | 16px | body | 400 | line-height 1.7 |
| Small / caption | 12–14px | body | 400–500 | line-height 1.6，字距 0.01em 補償小字級可讀性 |
| Mono | 14px | mono | 400 | |

### Link Style

- 連結色 `#3B82F6`，無底線
- Hover：色轉 `#2563EB` + `text-underline-offset: 3px` 底線淡入
- Focus-visible：`2px solid #3B82F6` 外框 + 2px offset，鍵盤操作清楚可見

---

## 4. Component Stylings

### Editorial Stat（招牌元件）

大字級 Playfair Display 數字 + 細髮線底標 + Inter 小型大寫標籤，用於儀表板指標、定價頁數字、成果展示：

```css
.editorial-stat .num { font-family: 'Playfair Display'; font-size: 3rem; font-weight: 600; }
.editorial-stat .rule { height: 1px; background: #E7E2D8; margin: 12px 0 8px; }
.editorial-stat .label { font-family: 'Inter'; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7280; }
```

這個元件把「印刷品的數字排印權威」搬進產品儀表板 — 大數字用襯線而非等寬字體展示，是本系統與一般 SaaS dashboard 最明顯的差異。

### Cards

- 白底 + `1px solid #E7E2D8`，`border-radius: 12px`，padding 24px
- Hover：邊框轉 `#3B82F6`，輕微 `box-shadow: 0 4px 16px rgba(17,24,39,0.06)`（極淺，不搶字體風采）
- 標題用 h3（Playfair Display 20px），內文用 Inter 14px

### Buttons

- Primary：`#3B82F6` 底、白字、`border-radius: 8px`，padding 10px 24px，Inter 600
- Secondary：透明底 + `1px solid #3B82F6`，文字 `#3B82F6`
- Hover：底色加深 `#2563EB` / 邊框加深，輕微 `box-shadow`
- Disabled：opacity 0.4，游標 not-allowed

### Tags / Badges

- 膠囊形，`Primary Tint` 或 `Secondary Tint` 底色 + 對應深色文字
- Inter 12px，字距 0.03em，全部大寫用於分類標籤（如 FEATURE、EDITION）

### Table

- 表頭底線 `1px solid #111827`（比一般表格重，呼應印刷版面的規矩感）
- Row 分隔線 `1px solid #E7E2D8`
- 數字欄位可選 Playfair Display 增加編輯感（僅限彙總列/重點數字）

### Pull Quote（次要裝飾元件）

- 左側 3px `#8B5CF6` 色條 + Playfair Display italic 22px 引言文字 + Inter 12px 來源標註
- 用於見證、推薦語、內容摘錄

---

## 5. Layout Principles

- **4px 基礎間距**：scale 為 4 / 8 / 12 / 16 / 24 / 32px
- **容器寬度**：max-width 1120px，慷慨的 side padding（桌面 48px）
- **垂直節奏**：標題與內文間至少 16px，section 間至少 64px — 襯線字型需要空間才不顯擁擠
- **卡片牆**：3 欄 grid（桌面），gap 24px
- **表單**：label 與 input 間 8px，欄位間 20px，錯誤訊息 4px 貼近欄位下方

---

## 6. Depth & Elevation

深度語言剋制而非戲劇化 — 陰影永遠是極淺灰階，絕不搶過字體的視覺權威：

1. 平面（預設）：`1px solid #E7E2D8` 邊框，無陰影
2. 抬升（hover）：邊框轉 Primary 色 + `0 4px 16px rgba(17,24,39,0.06)`
3. 浮層（dropdown/popover）：`0 8px 24px rgba(17,24,39,0.12)`
4. 對話框（modal）：`0 16px 48px rgba(17,24,39,0.18)` + 半透明黑色 overlay `rgba(17,24,39,0.4)`

Motion：`transform`/`box-shadow`/`border-color` 過渡 0.15–0.2s ease，微妙不誇張。

---

## 7. Do's and Don'ts

### Do's ✅

- 大字級（≥24px）標題一律用 Playfair Display，帶出編輯權威感
- 小字級控制項（≤16px）一律用 Inter，保證可讀性優先
- 色彩只做互動標記與強調點，不做滿版色塊或背景填色
- 留白要慷慨 — 襯線字型的筆畫細節需要呼吸空間
- 每個互動元件完整定義七種狀態（default/hover/focus-visible/active/disabled/loading/error）

### Don'ts ❌

- ❌ 把 Playfair Display 塞進 12px 以下的按鈕或表單標籤 — 犧牲可讀性
- ❌ 大面積藍紫色塊背景 — 這裡色彩是配角不是主角
- ❌ 黑白單色系統（那是 magazine-editorial 的語言）— Refined 保留全彩互動語彙
- ❌ 誇張陰影或漸層填色 — 深度語言是極淺灰階，不是視覺特效
- ❌ 緊湊間距 — 緊密排列會讓 Playfair Display 的字形擠壞，破壞優雅感
- ❌ 忽略 focus-visible 樣式 — 鍵盤可及性是系統硬性規格，不是選配

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1120px | 容器滿版，卡片牆 3 欄 |
| 768–1119px | 容器 padding 收至 32px，卡片牆 2 欄 |
| ≤767px | 卡片牆 1 欄，hero h1 降至 clamp 下限，表單欄位滿寬，nav 收合為漢堡選單 |
| 列印 | 隱藏互動元件，色彩降階為單色印刷友善對比 |

---

## 9. Agent Prompt Guide

給 AI agent 重現此風格的最小提示：

```
Create a page in the "Refined 誌上優雅" style — a serif-forward editorial system:

- Canvas: crisp white #FFFFFF, deep near-black text #111827
- Display font: 'Playfair Display' for h1/h2/h3 (24-32px) and large
  numerals only — this carries the system's visual authority
- Body font: 'Inter' for everything ≤16px (body, buttons, labels,
  forms) — readability first at small sizes
- Accent colors used sparingly, only on interactive elements:
  primary blue #3B82F6, secondary violet #8B5CF6 — never large
  color blocks or gradient fills
- Signature component "Editorial Stat": huge Playfair Display number
  + 1px hairline rule + small-caps Inter label underneath
- Spacing: 4px base unit (4/8/12/16/24/32), generous — serif
  letterforms need room to breathe, never crowd them
- Cards: white, 1px solid #E7E2D8 border, 12px radius, hover shifts
  border to primary blue with a very subtle shadow (0 4px 16px
  rgba(17,24,39,.06)) — shadows stay faint, never compete with type
- Focus-visible: 2px solid #3B82F6 outline, always present
- Never: pack Playfair Display below 12px, large flat color blocks,
  heavy shadows or gradients, monochrome-only palettes
```

---

*Direction from TypeUI's Refined design skill（typeui.sh）；本實作與配色細節為原創撰寫。2026-07-13.*