# Design System: Cream 奶油圓融

> 溫暖圓角的產品介面設計系統 — 奶油與柔霧灰交替鋪底，活力藍領銜互動層，邊框取代陰影撐出結構。Direction from TypeUI's Cream design skill（typeui.sh）；本實作與配色細節為原創撰寫。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** A calm, capable SaaS surface built for trust. Two soft neutral backgrounds — cream and gray — alternate down the page so the eye always has a fresh section to land on, while a single vivid blue owns every interactive moment. Depth comes from a defined hairline border, never a shadow; every shell — card, button, input, tab, alert, tooltip — shares one generous 24px radius so the whole interface reads as one continuous, rounded material. Small compact controls drop to a crisp 4px radius, giving the system a quiet two-tier rhythm instead of one uniform curve everywhere.

**Atmosphere Keywords:** Warm, Rounded, Friendly, Structured, Approachable, Trustworthy, Calm, Capable

**Visual Anchors:**
- Cream 與 Soft Gray 兩色版面交替鋪底 — 每個內容區塊自動輪替
- 24px 大圓角外殼統一卡片、輸入框、按鈕、選單、彈窗
- 4px 小圓角專屬 checkbox / 小型 chip 等緊湊控制項
- 卡片一律「淺色調自身版面底色 + 1.5px 邊框」，不用陰影堆深度
- 單一活力藍貫穿主要互動層（按鈕、連結、focus 狀態）
- Montserrat 撐起全篇字體個性，標題粗重、內文清爽

**Mood Board References:**
- 現代 SaaS 首頁與 onboarding 流程（Linear、Notion 風格的溫和幾何感）
- 教育科技 / 預約系統的親和儀表板
- 圓角卡片 + 邊框設計語言（近年 fintech / marketplace 產品）

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | English | Hex | Role |
|--------|--------|---------|-----|------|
| 🟡 | 奶油底 | Cream Surface | `#FBF6EC` | Primary section background — alternates with Soft Gray |
| ⚪ | 柔霧灰 | Soft Gray Surface | `#F0F1F4` | Secondary section background — alternates with Cream |
| 🔵 | 活力藍 | Vivid Blue | `#2F6FED` | Primary action — buttons, links, focus rings, brand accents |
| ⬛ | 墨黑標題 | Ink Heading | `#1E2029` | Heading text — dark, high-contrast, never pure black |
| ⚪ | 暖灰正文 | Warm Body Gray | `#6B6D76` | Body copy, captions, muted secondary text |
| 🟤 | 髮絲邊框 | Hairline Border | `#E3E1DA` | Card/input/table borders — the system's only depth cue |
| 🔷 | 天藍點綴 | Sky Tint | `#A9C6FF` | Extended chart-accent — dashboards, data viz, soft highlights |

### Card Tints（版面淺色卡片 — 系統核心規則）

| Token | Hex | Use |
|-------|-----|-----|
| Cream Card 奶油卡面 | `#FFFEFA` | Card background when sitting on a Cream section — lighter tint of `#FBF6EC` |
| Gray Card 灰面卡片 | `#FAFBFD` | Card background when sitting on a Soft Gray section — lighter tint of `#F0F1F4` |

**Rule:** 卡片永遠比自己所在版面的底色再淺一階，搭配 `--border` 邊框，絕不使用陰影建立層次。

### Extended Blue Scale（儀表板 / 資料視覺化備用）

| Token | Hex | Use |
|-------|-----|-----|
| Blue 50 | `#EAF1FF` | 淺底標記、hover 背景 |
| Blue 200（= Sky Tint） | `#A9C6FF` | 圖表次要數列、輕量強調 |
| Blue 500（= Vivid Blue Primary） | `#2F6FED` | 圖表主數列、按鈕、連結 |
| Blue 700 | `#1E4FC2` | Hover / active 深色態、圖表對比色 |

**Rule:** 落地頁與行銷內容只用 Primary 藍一色即可；儀表板 / 資料圖表才啟用完整藍階，避免品牌語彙被稀釋。

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#2F9E63` | 綠色提示、完成狀態 |
| Warning 警告 | `#D98E1F` | 警示文字、待處理狀態 |
| Danger 危險 | `#DB4B3F` | 錯誤訊息、刪除確認 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Montserrat', sans-serif | 標題、按鈕、標籤、導覽、UI 文字 — 700–800 |
| `--font-body` | 'Inter', 'Montserrat', sans-serif | 長段落內文 — Montserrat 的幾何感在長文閱讀略顯生硬，搭配人文感更強的 Inter 撐住可讀性 |

**Pairing logic:** Montserrat 定義整個系統的視覺個性 — 所有標題、按鈕、標籤、導覽都用它，是「這是 Cream 系統」的第一印象；Inter 只負責長段落正文，字重與字面比例都貼近 Montserrat，換字不換氣質，讀者幾乎不會察覺切換。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| H1 | clamp(2.4rem, 5vw, 3.4rem) | display | 800 | line-height 1.15，letter-spacing -0.01em |
| H2 | 2rem | display | 700 | margin-top 3rem |
| H3 | 1.375rem | display | 700 | |
| Body | 17px | body | 400 | line-height 1.7 |
| Body Medium | 17px | body | 500 | 強調段落 |
| Caption / label | 0.8125rem | display | 600 | letter-spacing 0.02em, uppercase 選用 |

### Link Style

- 連結色 `#2F6FED`，無底線
- Hover：底線淡入 + 顏色略深至 `#1E4FC2`
- Focus：2px `#2F6FED` 外圈，offset 2px

---

## 4. Component Stylings

### Radius Tokens（系統核心 token）

```css
--r-lg: 24px;   /* cards, inputs, modals, menus, tables, tabs, alerts, buttons, tooltips */
--r-sm: 4px;    /* checkboxes, small chips, compact box controls */
```

24px 是系統的招牌圓角 — 幾乎所有可見容器都用它，讓介面讀起來像同一種材質裁切出來的。只有尺寸很小的方框控制項（checkbox、小 chip）改用 4px，避免過大圓角讓小元素變成橢圓。

### Cards

- 背景：所在版面的 Card Tint（奶油面用 `#FFFEFA`，灰面用 `#FAFBFD`）
- 邊框：`1.5px solid #E3E1DA`，圓角 `--r-lg`
- **不用陰影**；hover 僅允許極淺陰影 `0 4px 16px rgba(30,32,41,0.06)` 作為輕微升起感，不可作為主要深度語言
- Padding 1.75rem–2rem，內容間距靠 spacing scale 而非邊框粗細變化

### Buttons

- Primary：`#2F6FED` 底、白字、圓角 `--r-lg`（圓角矩形，非全膠囊）
- Secondary：透明底 + `1.5px solid #E3E1DA` 邊框 + `#1E2029` 文字，圓角 `--r-lg`
- Disabled：`opacity: 0.4`，游標 not-allowed
- Hover：Primary 加深至 `#1E4FC2`；Secondary 背景轉 Cream/Gray Card 色
- 尺寸：padding `0.75rem 1.75rem`，字重 600

### Tags & Badges（4px 小圓角規則）

- 小型 chip：`--r-sm` 4px，padding `2px 10px`，display 字型 600，0.75rem
- 色彩用 Blue 50 底 + Blue 700 字，或中性灰底 + 墨黑字
- 數字徽章：24px 方形、`--r-sm`，非圓形 — 與大圓角卡片形成明確的「大圓角容器／小圓角控制項」對比

### Tabs

- Tab bar 容器：`--r-lg`，柔灰底
- 選中 tab：白色/卡片色底 + `--r-sm`縮排包住文字區塊，浮起於 tab bar 之上，不加陰影只加邊框

### Alerts

- 容器 `--r-lg`，1.5px 邊框依語意色（success/warning/danger），底色為該語意色的 10% 透明度淡底
- 左側不用色條，靠邊框整圈定義— 維持「邊框而非裝飾條」的一致語言

### Tooltips

- 深墨底 `#1E2029`、白字、`--r-lg`（縮小版，通常視覺上接近全圓角因為尺寸小）、無邊框（深底本身已提供對比，不需邊框）

---

## 5. Layout Principles

- **交替版面（Alternating Sections）**：內容區塊由上到下輪流使用 Cream `#FBF6EC` 與 Soft Gray `#F0F1F4` 當作 section 背景，每個 section 內的卡片再用對應的 Card Tint 淺一階 — 這是本系統的核心版面規則
- **Container**：max-width 1120px，置中，左右 padding 24px（mobile 20px）
- **Section 垂直節奏**：每個 section 上下 padding 5rem（mobile 3rem），維持穩定呼吸感
- **卡片牆**：`repeat(auto-fit, minmax(260px, 1fr))` grid，gap 1.5rem
- **邊框優先於分隔線**：區塊之間不用 `<hr>`，靠 section 背景色切換本身當作分隔

---

## 6. Depth & Elevation

**No shadow-heavy depth.** 這個系統的深度語言是「邊框定義結構，陰影只做極輕的點綴」：

1. 平放（預設）：卡片只有 `1.5px solid #E3E1DA` 邊框，背景比版面淺一階
2. 輕微升起（hover，選用）：極淺陰影 `0 4px 16px rgba(30,32,41,0.06)`，幅度必須小到幾乎察覺不到硬邊，只是柔化過渡
3. Modal / 彈出層：`0 12px 32px rgba(30,32,41,0.12)` 是全系統唯一允許的「明顯」陰影，用來把彈層與版面拉開距離

**Rule of thumb：** 邊框負責「這是一個容器」，陰影只負責「這個容器暫時浮在別的容器之上」。同一張卡片絕不同時靠邊框加重陰影堆兩次深度。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有大型容器（卡片、輸入框、彈窗、選單、表格、tab、alert、按鈕、tooltip）一律 24px 圓角
- 緊湊控制項（checkbox、小 chip）一律 4px 圓角，形成刻意的雙層節奏
- 卡片背景永遠是所在 section 背景的淺色調，搭配邊框，不加陰影
- Section 背景在 Cream 與 Soft Gray 之間交替，維持版面呼吸感
- 活力藍只做主要互動色，不要分散到多個同等強度的品牌色
- 標題全用 Montserrat 700/800，長段落內文用 Inter 撐可讀性

### Don'ts ❌

- ❌ 厚重陰影或多層陰影堆疊 — 立刻破壞邊框語言
- ❌ 卡片背景與所在 section 同色 — 會讓卡片邊界消失
- ❌ 落地頁 / 行銷內容混用完整藍階 — 品牌識別會被稀釋，藍階只留給儀表板
- ❌ 在大容器上用 4px 圓角，或在小 chip 上用 24px 圓角 — 兩級圓角不可互換
- ❌ 純黑 `#000000` 標題 — 墨黑標題是 `#1E2029`
- ❌ Section 背景連續兩個相同色（永遠交替，不重複）

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | Container 1120px，卡片牆多欄，section padding 5rem |
| 768–1023px | Container 佔滿寬度 92%，卡片牆 2 欄，section padding 4rem |
| ≤640px | 卡片牆 → 1 欄，按鈕列直排，section padding 3rem，H1 降至 2rem，字級整體 -1px |
| ≤480px | Container padding 16px，Tag/badge 列允許換行，表格改橫向捲動 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Cream 奶油圓融" style — a warm, rounded SaaS design system:

- Two alternating section backgrounds down the page:
  Cream #FBF6EC and Soft Gray #F0F1F4 — never repeat the same one twice in a row
- Cards are a lighter tint of whatever section they sit in:
  Cream Card #FFFEFA on Cream sections, Gray Card #FAFBFD on Soft Gray sections
- Cards use a 1.5px solid #E3E1DA border for structure — NOT box-shadow.
  Only allow a barest hover shadow: 0 4px 16px rgba(30,32,41,0.06)
- Radius system (two tiers, apply consistently):
  24px on ALL large shells — cards, inputs, modals, menus, tables, tabs, alerts,
  buttons, tooltips
  4px on compact box controls — checkboxes, small chips/badges
- Primary action color: Vivid Blue #2F6FED, filled buttons with white text,
  rounded rectangle (24px radius, not a full pill)
- Heading text: Ink #1E2029 (never pure black). Body text: Warm Gray #6B6D76
- Extended blue scale for dashboards/data viz only: #EAF1FF / #A9C6FF / #2F6FED / #1E4FC2
  (keep landing/marketing content to the single primary blue)
- Fonts: 'Montserrat' 700–800 for all headings, buttons, labels, nav, UI chrome;
  'Inter' 400–500 for long-form body paragraphs only
- Layout: max-width 1120px container, generous section padding (~5rem desktop),
  card grids with repeat(auto-fit, minmax(260px, 1fr))
- Depth language: border defines "this is a container", shadow only ever means
  "this is temporarily floating above" — never stack both on the same element
```

---

*Direction extracted from TypeUI's Cream design skill (typeui.sh). Implementation and palette details are original.*