# Design System: Minimax 島嶼手感

一套溫暖的無人島設計系統，給低壓力、平易近人的產品用：社群工具、後台儀表板、上手流程、市集、興趣型 App、活潑的 SaaS。Direction from TypeUI's Minimax design skill（typeui.sh）；本實作與配色細節為原創撰寫。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 想像一座剛被登陸的小島 — 曬過太陽的米色沙灘、剛冒出的薄荷嫩葉、咖啡色的漂流木招牌。整套系統把「手工木牌」與「App 圖磚」疊在一起：填色飽滿的圓角卡片像島上的指標牌，藥丸形按鈕像被浪打磨過的鵝卵石，處處帶著微笑弧線。目標是讓使用者一進來就放鬆 — 不是極簡冷淡，是溫暖手作。

**Atmosphere Keywords:** Cozy, Tropical, Handcrafted, Cheerful, Approachable, Low-pressure, Island-craft, Friendly

**Visual Anchors:**
- 暖米紙面底色，配柔和薄荷色分區塊
- 咖啡棕標題字 + 熱帶綠品牌色，色彩對比溫和不刺眼
- 實色填滿（solid-fill）圓角卡片，像 App 圖磚或島嶼招牌
- 藥丸形（fully rounded）按鈕，帶尾隨箭頭與彈跳 hover
- 柔和暖色陰影（暈開，不是硬邊陰影）— 有厚度但不銳利
- 緞帶導覽列、葉片裝飾點綴階層重點

**Mood Board References:**
- 手工木牌與海島度假村指標系統
- 熱帶植物插畫與扁平化葉形圖示
- 溫馨社群 App（如社區公告板、興趣社團）介面語彙
- 咖啡色 + 抹茶綠的手沖咖啡館品牌調性

---

## 2. Color Palette & Roles

### Core Palette（7 色）

| Swatch | 中文名 | 英文名 | Hex | Role |
|--------|--------|--------|-----|------|
| 🟡 | 暖米紙面 | Surface Cream | `#FBFAF1` | 頁面/面板底色 — 主要畫布 |
| 🟢 | 薄荷輕語 | Secondary Mint | `#EAF7EF` | 次要區塊底色 — 分區、資訊面板 |
| 🌿 | 熱帶綠意 | Brand Green | `#008160` | 主要操作、連結、啟用狀態、品牌強調 |
| 🌲 | 深林濃綠 | Brand Strong | `#00684D` | 高強調按鈕、focus 狀態、深色重點 |
| 🟤 | 咖啡棕墨 | Heading Coffee | `#574A30` | 標題、主要介面文字 |
| ☀️ | 陽光橘黃 | Sun Warning | `#E29A2B` | 提醒緞帶、注目高亮、溫暖警示 |
| 🪸 | 珊瑚夕陽 | Coral Accent | `#F4785C` | 裝飾強調色塊、活潑點綴（少量使用） |

**Rule:** 薄荷、珊瑚屬點綴色，只用於小面積裝飾區塊或徽章底色；正文與標題永遠用咖啡棕，不用彩色文字降低可讀性。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Heading 標題 | `#574A30` | h1–h3、卡片標題 |
| Body 正文 | `#5C5340` | 內文段落（咖啡棕降低不透明度感） |
| Muted 輔助文字 | `#8C8168` | caption、次要說明、時間戳 |
| On-Brand 品牌底文字 | `#FFFFFF` | 深色按鈕/品牌色底上的文字 |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#008160` | 同 Brand，成功狀態沿用品牌綠 |
| Warning 警告 | `#E29A2B` | 陽光橘黃，溫暖不刺眼的提醒 |
| Accent 活潑點綴 | `#F4785C` | 珊瑚夕陽，用於徽章/裝飾色塊 |
| Info 資訊 | `#00684D` | 深林濃綠，提示框左邊條 |

### Surface & Depth

| Layer | Background | Shadow | Use |
|-------|-----------|--------|-----|
| Canvas | `#FBFAF1` | — | 頁面底層 |
| Secondary Panel | `#EAF7EF` | — | 分區/資訊區塊底色 |
| Card（實色卡片） | `#FFFFFF` 或 `#EAF7EF` | `0 8px 24px rgba(87,74,48,0.10)` | 島嶼招牌卡、內容磚 |
| Card Hover | 同上 | `0 14px 32px rgba(0,129,96,0.18)` + translateY(-4px) | 可互動卡片 |
| Button（Primary） | `#574A30` | `0 6px 16px rgba(87,74,48,0.25)` | 咖啡棕藥丸 CTA |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-heading` | 'Zilla Slab', serif | 標題、按鈕文字 — 厚實招牌感 |
| `--font-body` | 'Libre Franklin', sans-serif | 正文、UI 標籤、密集控制項 — 高可讀性 |
| `--font-display`（optional） | 'Baloo 2', cursive | 少量品牌 wordmark 場合可選用，圓潤活潑；不建議用於長文或密集 UI |

**Pairing logic:** Zilla Slab 的厚重襯線像木刻招牌字，撐起標題的手工感；Libre Franklin 是專為介面設計的無襯線字，讓正文與控制項在長時間閱讀/操作下維持清晰。Baloo 2 只在需要活潑品牌 wordmark 的稀有場合（如 Logo 旁的口號）點綴使用，非必要不載入。

### Type Scale

| Element | Size | Font | Weight | Line-height |
|---------|------|------|--------|-------------|
| Hero H1 | clamp(2.4rem, 5vw, 3.5rem) | Zilla Slab | 700 | 1.15 |
| H2 | 2rem | Zilla Slab | 700 | 1.2 |
| H3 | 1.375rem | Zilla Slab | 600 | 1.3 |
| Body | 1rem（16px） | Libre Franklin | 400 | 1.7 |
| Small / Caption | 0.85rem | Libre Franklin | 500 | 1.5 |
| Button Label | 1rem | Zilla Slab | 600 | 1 |

### Link Style

- 連結色 `#008160`，底線在預設狀態隱藏
- Hover：底線淡入 + 顏色轉 `#00684D`，過渡 0.15s ease

---

## 4. Component Stylings

### Pill Buttons（系統核心元件）

```css
--radius-pill: 999px;
--btn-shadow: 0 6px 16px rgba(87, 74, 48, 0.25);
--btn-ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* 彈跳 easing */
```

- Primary：咖啡棕 `#574A30` 底 + 白字 + 尾隨箭頭 `→`，padding `0.85rem 1.75rem`
- Hover：`transform: translateY(-3px) scale(1.03)` + 陰影加深，`transition: 0.25s var(--btn-ease)`；箭頭同步右移 `translateX(4px)`
- Secondary：`#EAF7EF` 薄荷底 + 熱帶綠文字，無陰影，hover 轉 `#D9F0E3`
- Disabled：`opacity: 0.45`，無 hover 動效，`cursor: not-allowed`

### Cards（Island Signboard）

- 實色填滿（非透明、非邊框），底色 `#FFFFFF` 或 `#EAF7EF`
- `border-radius: 16px`，`padding: 1.75rem`
- 陰影：`0 8px 24px rgba(87,74,48,0.10)`（柔和暈開，非硬邊）
- Hover：`translateY(-4px)` + 陰影加深至 `0 14px 32px rgba(0,129,96,0.18)`
- 左上或右上可疊加小葉片裝飾 icon（🌿）作為卡片語意標記

### Ribbon Navigation（緞帶導覽）

- 頂部固定條，`background: #FFFFFF`，`border-radius: 0 0 20px 20px`，柔和陰影
- 導覽項目為藥丸形 hover 背景（`#EAF7EF`），中央可放品牌 wordmark
- 行動版收合為底部浮動藥丸列

### Tags & Badges（緞帶徽章）

- 藥丸形（`border-radius: 999px`），padding `0.3rem 0.9rem`
- 語意色：綠＝已完成、黃＝進行中、珊瑚＝精選/新
- 字重 600，字級 0.8rem，全大寫可選

### Leaf Accents（葉片裝飾）

- 小型 SVG 葉形（單色，帶品牌綠或珊瑚），放在卡片角落或 section 標題旁
- 僅作裝飾點綴，不承載資訊，避免密集堆疊（每個視覺區塊最多 1–2 個）

---

## 5. Layout Principles

- **容器**：max-width `1152px`，置中，左右 padding `2rem`（mobile `1.25rem`）
- **8px 間距節奏**：所有 margin/padding 取 8 的倍數（8/16/24/32/48/64px）
- **卡片間距**：grid `gap: 24px`，卡片牆預設 `repeat(auto-fit, minmax(280px, 1fr))`
- **Section padding**：桌面版每個大區塊上下 `5rem`，行動版 `3rem` — 留白要「呼吸」，不擁擠
- **Secondary Surface 分區**：用薄荷底色（`#EAF7EF`）區隔內容區塊，取代邊框線

---

## 6. Depth & Elevation

**柔和暖色陰影，不用硬邊位移陰影。** 陰影公式統一用暖棕色 `rgba(87,74,48,*)` 或品牌綠 `rgba(0,129,96,*)` 作為底色，模擬陽光下的自然投影：

1. 靜置（預設）：`0 8px 24px rgba(87,74,48,0.10)` — 輕微離地感
2. 抬起（hover）：`0 14px 32px rgba(0,129,96,0.18)` + `translateY(-4px)` — 像被海風托起
3. 按鈕陰影：`0 6px 16px rgba(87,74,48,0.25)` — 比卡片更明顯，強調可點擊

Motion 統一用彈跳 easing `cubic-bezier(0.34, 1.56, 0.64, 1)`，時長 0.2–0.3s，讓 hover 有「Q 彈」的島嶼手感而非生硬位移。

**夜間島嶼變體（文件記錄，未在 preview.html 實作）：** 深松石綠底色（約 `#0E2C24`）取代暖米紙面，文字轉為提燈暖白（約 `#F5E9D3`），品牌綠提亮至 `#3DDBA8` 以維持對比。此變體僅作為文件記錄的可選深色模式方向，不在本次 preview 中實作即時切換。

---

## 7. Do's and Don'ts

### Do's ✅

- 卡片一律實色填滿 + 柔和暈開陰影，像 App 圖磚
- 按鈕永遠藥丸形，主要 CTA 帶尾隨箭頭 `→`
- Hover 用彈跳 easing，帶輕微上浮與縮放
- 標題用 Zilla Slab 建立「招牌感」，正文用 Libre Franklin 保可讀性
- 用薄荷 `#EAF7EF` 分區取代邊框線，維持柔軟氛圍
- 葉片/緞帶裝飾點到為止，強化階層而非塞滿版面

### Don'ts ❌

- ❌ 硬邊位移陰影（`4px 4px 0` 這類）— 那是另一套系統的語言，這裡只用柔和暈開陰影
- ❌ 方形直角按鈕或卡片 — 按鈕必須全圓角藥丸，卡片維持 16px 圓角
- ❌ 大面積使用珊瑚色 — 珊瑚僅作點綴，大面積會蓋過品牌綠的主導地位
- ❌ 標題字用於長段落 — Zilla Slab 只適合短標題與按鈕文字
- ❌ 冷灰或純白背景 — 畫布永遠是暖米紙面 `#FBFAF1`
- ❌ 生硬 linear easing 的 hover — 動效必須帶彈跳感

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | 卡片牆 3–4 欄；ribbon nav 完整展開 |
| 768–1023px | 卡片牆 2 欄；container padding 收至 1.5rem |
| ≤640px | 卡片牆 → 1 欄；hero 字級降階；按鈕列直排；ribbon nav 收合為底部浮動列 |
| ≤400px | section padding 收至 2rem；徽章列允許換行 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Minimax 島嶼手感" (island-craft) design system —
a cozy, deserted-island aesthetic for approachable, low-pressure products:

- Surface colors: warm cream page background #FBFAF1, soft mint/sage
  secondary sections #EAF7EF
- Brand colors: leaf green #008160 (primary actions/links), deep palm
  green #00684D (strong buttons/focus states)
- Text: coffee brown #574A30 for headings, #5C5340 for body copy
- Accent bursts (sparingly): sun-gold #E29A2B for warm highlights/ribbons,
  coral #F4785C for cheerful decorative badges
- Fonts: 'Zilla Slab' (700/600) for headings and button labels — chunky
  signboard character; 'Libre Franklin' (400/500) for body/UI text —
  readable for paragraphs and dense controls. Optional: 'Baloo 2' for a
  rare display wordmark only, never for body copy.
- Buttons: FULLY ROUNDED PILLS (border-radius: 999px), coffee-brown
  #574A30 fill with white text, trailing arrow "→", springy hover
  (translateY(-3px) scale(1.03), cubic-bezier(0.34, 1.56, 0.64, 1),
  0.25s), shadow 0 6px 16px rgba(87,74,48,0.25)
- Cards: SOLID FILL (white or mint #EAF7EF, never transparent/bordered),
  border-radius: 16px, padding ~1.75rem, soft warm shadow
  0 8px 24px rgba(87,74,48,0.10), hover lifts to
  0 14px 32px rgba(0,129,96,0.18) + translateY(-4px)
- Spacing: 8px rhythm, 24px gaps between cards, 1152px centered max
  container, generous section padding (~5rem desktop / 3rem mobile)
- Decoration: small leaf icons (🌿) as corner accents, ribbon-style pill
  navigation bar, pill-shaped tags/badges with semantic colors
- Never use hard offset shadows or sharp corners — every shape is soft
  and cushioned, never sharp or flat-bordered
```

---

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