# Design System: Terracotta 陶土誌

> Direction from TypeUI's Terracotta design skill（typeui.sh）；本實作與配色細節為原創撰寫。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 一份印在暖色紙上的獨立雜誌。整個介面只服務一件事——閱讀。陶土色只當作單一強調色，像編輯在稿紙上蓋的一枚印章，不做成大面積的裝飾色塊；真正撐起氣質的是墨棕 serif 標題、寬鬆的行距，以及克制的分隔線。系統拒絕玻璃擬態、霓虹光暈、厚重陰影——任何會搶走文字注意力的視覺效果都不允許出現。

**Atmosphere Keywords:** 陶土、曬過太陽的紙、文學、克制、獨立誌、手工感、長文閱讀、編輯排版

**Visual Anchors:**
- 暖奶油紙面（`#F3E9D8`）作為全頁畫布，白色只留給前景卡片與表單
- 陶土色 `#C56A3C` 是唯一強調色——連結、按鈕、引言標記、選中狀態
- 墨棕 `#3A241C` serif 標題撐起頁面層級，而非陶土色本身
- 用細線（1px rule）取代卡片陰影做分區，深度來自留白而非模糊陰影
- 大字級 pull quote 搭配左側陶土細邊，是系統最具識別度的元件

**Mood Board References:**
- 獨立文學雜誌／說書型部落格的排版節奏
- 陶藝工作室的釉色與晒穀場的暖沙色調
- 老派印刷品的頁邊留白與襯線標題

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | English Name | Hex | Role |
|--------|--------|--------------|-----|------|
| 🟧 | 陶土棕 | Terracotta Clay | `#C56A3C` | Primary — 連結、按鈕、強調記號、選中狀態，唯一強調色 |
| 🟨 | 暖沙紙 | Warm Sand Paper | `#F3E9D8` | Secondary — 全頁畫布底色，主導背景 |
| 🟫 | 焦墨棕 | Ink Brown | `#3A241C` | 標題與編輯層級文字，pull quote、byline |
| ⬛ | 墨色 | Ink Black | `#111827` | 內文正文、UI 文字 |
| 🟤 | 灰棕霧 | Muted Taupe | `#6F5A4E` | Metadata、caption、次要文字 |
| ⬜ | 淨面白 | Surface White | `#FFFFFF` | 前景卡片、表單、Modal——不做全頁底色 |

### Derived Tokens（衍生色）

| Token | Hex / Value | Use |
|-------|-------------|-----|
| `paper-soft` | `#F8F0E4` | 稍淺的暖色，用於安靜的內嵌區塊 |
| `clay-soft` | `rgba(197,106,60,0.14)` | Hover 背景、callout 淺底、選中列 |
| `rule` | `rgba(58,36,28,0.22)` | 編輯分隔線、卡片群組邊界 |
| `focus-ring` | `#C56A3C` | 鍵盤 focus 外框 |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#16A34A` | 儲存成功、有效欄位 |
| Warning 警告 | `#D97706` | 送出前提醒、未完成步驟 |
| Danger 危險 | `#DC2626` | 錯誤、刪除確認 |
| Info | `#C56A3C` | 沿用 Primary，不另設藍色資訊色 |

**Rule:** 陶土色只做標記用途，不做大面積色塊；除陶土外不引入第二種裝飾色（如鼠尾草綠、芥末黃）。

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-primary` | 'DM Serif Display', serif | 標題、UI 文字、按鈕、導覽、內文——單一襯線字型貫穿全系統 |
| `--font-mono` | 'JetBrains Mono', monospace | 程式碼、metadata、時間戳、footnote 編號 |

**Pairing logic:** Terracotta 刻意只用一個字型家族。DM Serif Display 的高對比筆畫在標題尺寸展現文學氣質，在正文尺寸（18px）搭配寬鬆行高依然可讀——這個「單字型貫穿」的決定本身就是系統的識別特徵，避免襯線標題配無襯線內文的常見組合。

### Type Scale

| Size | Element | Weight | Line-height |
|------|---------|--------|-------------|
| 40px | Hero / 文章主標 | 400 | 1.15 |
| 32px | 頁面標題、pull quote | 400 | 1.2 |
| 24px | 卡片標題、小節導言 | 400 | 1.3 |
| 18px | 正文（預設長文閱讀） | 400 | 1.65 |
| 16px | 次要 UI 文字、標籤、緊湊內文 | 400 | 1.5 |
| 14px | Caption、byline、footnote | 400 | 1.4 |

### Reading Rules

- 長文正文一律 18px，行高 1.55–1.75
- 文章欄寬控制在 60–75 字元
- 標題一律用墨棕，不用陶土色（對比不足）
- 連結靠陶土色 + 底線雙重標示，不單靠顏色
- 避免大量全大寫文字套用 serif 顯示字

---

## 4. Component Stylings

### Buttons

- Primary：陶土色實心底 + 白字，圓角 `radius-md`（10px），無漸層無陰影
- Secondary：透明底 + 1px rule 邊框 + 墨棕文字
- Hover：Primary 略為加深陶土色；Secondary 邊框轉為陶土色
- Focus-visible：3px 陶土色外框，offset 3px
- 所有主要按鈕高度 ≥ 44px

### Links

- 陶土色 + 底線，hover 加粗底線或加深顏色
- 標籤具體：「閱讀完整文章」而非「更多」

### Pull Quote（招牌元件）

- 32–40px DM Serif Display，墨棕色
- 左側 3px 陶土色實線邊 + `padding-left: 24px`
- 前後留白充足，避免密集出現打斷閱讀節奏

### Cards（Story Card）

- 白底或 `paper-soft` 底，`rule` 細邊或僅靠留白分隔
- 圓角 `radius-lg`（16px），不用厚重陰影
- 標題 24px serif + 分類標籤（陶土色小字）+ metadata（14px 灰棕霧）
- 圖片比例在同一 grid 中保持一致

### Tags / Category Labels

- 陶土色文字 + `clay-soft` 底，圓角 `radius-sm`（6px），全大寫小字級 12–13px

### Forms

- Label 永遠可見，不用 placeholder 取代
- Input：白底 + 1px rule 邊框，圓角 10px，18px 文字，高度 ≥ 44px
- Focus：3px 陶土色外框 + 邊框轉陶土色
- 錯誤訊息與欄位程式化關聯，danger 色 + 文字說明

### Newsletter Block

- 暖沙紙或白底面板，墨棕標題 + 簡短信任文案
- 陶土色 Primary 按鈕，欄位精簡

---

## 5. Layout Principles

- **閱讀優先的單欄結構**：文章主欄 max-width 680px，側邊留白而非塞側欄
- **編輯分隔線取代卡片框**：章節之間用 1px rule 分隔，不做整塊色底切換
- **留白節奏**：段落間距 24px、章節間距 32px+，pull quote 前後加倍留白
- **圖片即敘事**：圖說緊貼圖片下方，14px 灰棕霧，避免文字疊圖
- **Sticky 極簡**：若有導覽列，維持墨棕文字 + 暖沙紙底，不做玻璃模糊效果

---

## 6. Depth & Elevation

**沒有厚重陰影。** 深度語言來自對比與留白，而非模糊陰影：

1. 畫布層：暖沙紙 `#F3E9D8`，全頁底色
2. 前景層：白色卡片/表單，靠留白與 1px rule 與畫布分離，不疊加陰影
3. 強調層：陶土色標記（按鈕、連結、pull quote 邊線）浮在前景之上
4. Modal：白底面板 + 極輕陰影（若使用，`0 8px 24px rgba(58,36,28,0.12)`），避免玻璃感或霓虹光暈

Motion 極簡：hover 只做顏色加深或底線變化，`transition: 0.15s ease`；不做視差捲動，尊重 `prefers-reduced-motion`。

---

## 7. Do's and Don'ts

### Do's ✅

- 全頁背景一律暖沙紙 `#F3E9D8`，白色只留給前景物件
- 陶土色只用在按鈕、連結、選中狀態、pull quote 邊線——當作「印章」而非「油漆」
- 標題與內文統一用 DM Serif Display，長文行高拉開到 1.6+
- 用細線與留白建立層級，不靠陰影
- Metadata、時間戳用 JetBrains Mono，維持技術資訊的清晰

### Don'ts ❌

- ❌ 純白全頁背景 — 破壞「曬過太陽的紙」的溫度
- ❌ 陶土色鋪滿整個區塊或當作每個標題的顏色
- ❌ 厚重陰影、玻璃擬態、霓虹光暈、漸層按鈕
- ❌ 引入第二個裝飾強調色（薄荷綠、芥末黃等）
- ❌ 正文小於 16px 或行高小於 1.5，長文閱讀會吃力
- ❌ Placeholder 取代欄位 label

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | 文章欄 680px 置中，pull quote 可延伸至欄寬外 40px |
| 641–1023px | 欄寬滿版留邊 48px，卡片牆 2 欄 |
| ≤640px | 卡片牆 → 1 欄，Hero 標題降至 32px，正文維持 18px 不縮小，按鈕維持 44px 高 |
| 高對比模式 | 保留 1px rule 邊框與 focus 外框，不依賴顏色單獨表示狀態 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Terracotta" editorial style:

- Canvas: warm sand paper #F3E9D8 as the full-page background;
  white #FFFFFF reserved for foreground cards, forms, and modals only
- Single accent color: terracotta clay #C56A3C — used ONLY for links,
  primary buttons, pull-quote left borders, category tags, and focus rings
- Headings and editorial emphasis use ink-brown #3A241C, NOT the clay accent
- Body text uses ink #111827, minimum 18px, line-height 1.55–1.75,
  column width 60–75 characters
- Typography: 'DM Serif Display' for ALL headings AND body/UI text
  (single serif family throughout); 'JetBrains Mono' for code,
  timestamps, and metadata only
- Pull quotes: 32-40px DM Serif Display in ink-brown, 3px clay-colored
  left border, padding-left 24px
- Depth via 1px rules (rgba(58,36,28,0.22)) and whitespace — no heavy
  shadows, no glassmorphism, no gradients, no neon
- Border radius: 6px small badges, 10px inputs/buttons, 16px cards
- Buttons/inputs minimum 44px height; focus-visible = 3px clay outline
  with 3px offset
- Do not introduce a second decorative accent color beyond terracotta
```

---

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