# Design System: Colorful Pop 繽紛波普

> 多彩繽紛歡樂風設計系統 — 白底上跳出五色糖果調，大圓角、圓潤字型、彩色 blob 裝飾。熱鬧但不失序：靠大量留白與「一區一主色」的紀律，把糖果罐般的視覺能量收進整齊的版面裡。原創系統，不對應任何既有品牌。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 想像一個氣球攤位或糖果店的招牌——高彩度、圓滾滾、每個元素都像被吹飽氣的氣球。但攤位老闆很懂陳列：每一區只用一個主色頂色，其他顏色退到裝飾層，靠大留白讓熱鬧不變成雜亂。這套系統的紀律不在減色，而在「分區用色」與「大量呼吸空間」。

**Atmosphere Keywords:** Joyful, Candy-bright, Rounded, Buoyant, Playful-but-organized, Friendly, Energetic, Whimsical

**Visual Anchors:**
- 白底 + 五色糖果調（粉、黃、藍、綠、橙）
- 大圓角（16-32px）與全圓角膠囊按鈕（9999px）
- 有機 blob 形狀裝飾（`border-radius` 不對稱橢圓）背景點綴
- Baloo 2 圓潤粗體標題 + Nunito 圓潤內文
- 色彩帶陰影（shadow 顏色取自元件本身色相，非純黑）
- 彈跳互動（hover/press 微縮放，模擬氣球彈性）

**Mood Board References:**
- 兒童生日派對氣球牆
- 糖果包裝紙與馬卡龍色盤
- 遊樂園導覽地圖插畫
- 現代兒童教育 App 介面

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🩷 | Bubblegum Pink 泡泡糖粉 | `#FF6FB5` | Primary — CTA、hero 重點、主要強調 |
| 🟡 | Sunshine Yellow 陽光黃 | `#FFD23F` | 次強調 — 標籤、星星裝飾、提示徽章 |
| 🔵 | Sky Blue 天空藍 | `#3EC1FF` | 資訊 — 連結、info 標籤、次要按鈕 |
| 🟢 | Grass Green 草地綠 | `#4CD97B` | 成功 — 完成狀態、正向標籤 |
| 🟠 | Tangerine Orange 橘子橙 | `#FF8A3D` | 警示/能量 — 限時標籤、高能量裝飾 |
| ⬛ | Licorice 甘草黑 | `#2B2438` | Text — 標題與內文，非純黑帶暖紫調 |
| ⬜ | Cloud White 雲朵白 | `#FFFFFF` | Canvas — 頁面底色 |

**Rule:** 每個版面區塊只指定一個「主色」當該區塊的重點色（按鈕、邊框、陰影色調），其餘四色只能以小面積（圓點、blob、標籤）出現，避免五色同時等量競爭視覺焦點。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#2B2438` | 標題、內文 |
| Text Light 次要 | `#6B6478` | caption、輔助說明 |
| Text on Color 彩底文字 | `#FFFFFF` | 深色糖果底（如按鈕）上的文字 |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Grass Green | `#4CD97B` | 完成勾選、正向回饋 |
| Warning 提醒 | Tangerine Orange | `#FF8A3D` | 限時、需注意 |
| Info 資訊 | Sky Blue | `#3EC1FF` | 提示框、次要連結 |
| Delight 強調 | Bubblegum Pink | `#FF6FB5` | 主要 CTA、慶祝時刻 |

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas | `#FFFFFF` | — | 頁面底 |
| Surface | `#FFFFFF` | `2px solid` 該區主色 20% 透明 + 色彩陰影 | 卡片 |
| Blob layer | 各色 12-20% opacity | 無邊框 | 背景裝飾，z-index 在內容之下 |
| Elevated | `#FFFFFF` | `0 12px 24px` 主色 25% 透明陰影 | Hover 卡片、彈出層 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Baloo 2', 'Nunito', sans-serif | 標題、按鈕、大型數字 — 圓潤粗體 |
| `--font-body` | 'Nunito', 'Baloo 2', sans-serif | 內文、說明文字 — 圓潤但收斂的可讀字重 |

**Pairing logic:** 兩個字型都出自「圓潤無襯線」家族，字重差異負責分工——Baloo 2 的球形筆畫撐起標題的歡樂感，Nunito 更中性的字腔讓長段落不會太吵，兩者視覺同源不打架。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2.4rem, 6vw, 3.6rem) | display | 800 | line-height 1.2 |
| h2 | 2rem | display | 700 | |
| h3 | 1.4rem | display | 700 | |
| Body | 17px（mobile 16px） | body | 400/600 | line-height 1.7 |
| Caption / tag | 0.85rem | display | 700 | |

### Link Style

- 連結色 Sky Blue `#3EC1FF`，`text-decoration: none`，底部 3px 實線
- Hover：底線變粗至 5px 並轉為 Bubblegum Pink，文字輕微上浮 `translateY(-1px)`

---

## 4. Component Stylings

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

```css
--radius-card: 24px;
--radius-lg: 32px;
--radius-pill: 9999px;
--shadow-color: 255, 111, 181; /* 隨區塊主色替換 RGB */
--shadow-pop: 0 10px 22px rgba(var(--shadow-color), 0.28);
```

所有卡片、面板一律 `--radius-card` 或更大；按鈕、標籤一律全圓角膠囊；陰影顏色跟隨元件主色而非灰黑，是這套系統「彩色陰影」的核心特徵。

### Cards

- 白底 + 24px 圓角 + 2px 主色 20% 透明邊框
- Hover：`translateY(-4px) scale(1.015)` + 陰影加深至該色 28% 透明
- 卡片內縮圖/圖示用圓形容器（`border-radius: 50%`），底色為主色 15% 透明

### Buttons（Bouncy Button）

- Primary：主色實心底，全圓角膠囊，白字，`box-shadow: 0 8px 0 rgba(主色,0.35)`
- Hover：`translateY(-2px)`，陰影加深
- Active/press：`translateY(2px)` + 陰影收為 `0 4px 0`（模擬按下彈力球）
- Secondary：白底 + 2px 主色框 + 主色字

### Tags / Badges

- 全圓角膠囊，各色 15% 透明底 + 同色實色文字
- 圖示前綴用 emoji（🎈🍭⭐️）取代 icon font

### Blob Decoration

```css
border-radius: 62% 38% 47% 53% / 45% 41% 59% 55%;
```

用於 hero 背景與空白角落裝飾，色彩取 12-20% opacity 避免搶內容焦點；可疊加 2-3 個不同尺寸 blob 錯位排列製造層次，但同一畫面 blob 顏色數不超過 2 種。

### Divider / Confetti

- 章節分隔可用一排小圓點（confetti dots）取代純線條：多色 8px 圓點間距排列
- 純線條分隔則用 2px 淺灰 `#EDEBF2`，不用彩色線

---

## 5. Layout Principles

- **大留白**：區塊間距最小 48px，卡片內距最小 24px — 熱鬧的顏色需要更多呼吸空間才不吵
- **一區一主色紀律**：每個 section 只指定一個強調色（按鈕/邊框/陰影同色），其餘顏色只做小面積點綴
- **卡片牆**：`repeat(auto-fit, minmax(220px, 1fr))` grid，gap 24px
- **Blob 分層**：裝飾 blob 一律 `position: absolute` + `z-index: 0`，內容區塊 `z-index: 1` 以上，blob 永不干擾可讀性
- **圓形錨點**：icon、頭像、數字徽章一律圓形容器，呼應全站的「圓」語言

---

## 6. Depth & Elevation

**彩色柔陰影，禁止純黑陰影。** 深度層級：

1. 平放（預設）：極淺陰影或無陰影，`0 2px 8px rgba(43,36,56,0.06)`
2. 抬起（hover）：`0 10px 22px` 該元件主色 25-30% 透明度陰影 + 輕微上浮/縮放
3. 按下（active）：陰影收縮、位移歸零，模擬氣球被壓下去的彈力回饋

Motion 用 `cubic-bezier(0.34, 1.56, 0.64, 1)`（overshoot 彈跳曲線），時長 0.2-0.3s，讓每個互動都有一點「彈一下」的生命感。

---

## 7. Do's and Don'ts

### Do's ✅

- 每個 section 鎖定一個主色，其餘四色只做點綴，維持秩序
- 陰影顏色跟隨元件色相，不用純黑/純灰陰影
- 圓角一律 ≥16px，按鈕/標籤全圓角膠囊
- Hover/press 用彈跳曲線 `cubic-bezier(0.34,1.56,0.64,1)`
- Blob 裝飾放在內容之下的裝飾層，opacity 控制在 12-20%

### Don'ts ❌

- ❌ 同一畫面五色等量出現、互相競爭焦點
- ❌ 純黑陰影、直角邊框、方形按鈕
- ❌ 陰影模糊度不足（太硬會變回工業風，失去氣球感）
- ❌ Blob 不透明度超過 30% — 會蓋過內容可讀性
- ❌ 內距/間距小氣（<16px）— 顏色越多越需要留白撐開

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤768px | 卡片牆降為 1-2 欄；hero blob 尺寸縮小 40%，避免遮擋內文 |
| ≤480px | body 16px；h1 觸發 clamp 下限；按鈕全寬 `width: 100%`；section 間距收至 32px |
| Reduced motion | `prefers-reduced-motion` 時彈跳動畫改為簡單 `opacity` 淡入，取消 translateY/scale |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Colorful Pop" style — a joyful, candy-bright,
well-organized design system:

- Palette: white canvas #FFFFFF, text licorice #2B2438, five candy
  accents — bubblegum pink #FF6FB5, sunshine yellow #FFD23F,
  sky blue #3EC1FF, grass green #4CD97B, tangerine orange #FF8A3D.
  RULE: each section picks ONE accent as its dominant color for
  buttons/borders/shadows; the other four appear only as small dots,
  tags, or blob decoration — never five colors competing equally.
- Radius: cards/panels 24px+, buttons and tags fully pill-shaped
  (border-radius: 9999px). No sharp corners anywhere.
- Shadows are colored, never black: box-shadow uses the component's
  own hue at 25-30% opacity, e.g.
  0 10px 22px rgba(255,111,181,0.28). Buttons get an offset "squish"
  shadow: 0 8px 0 rgba(accent,0.35), collapsing to 0 4px 0 on press.
- Fonts: 'Baloo 2' (weight 700-800) for headings/buttons/big numbers,
  'Nunito' (400/600) for body text, 17px, line-height 1.7.
- Decoration: organic blob shapes behind hero/empty corners using
  asymmetric border-radius like 62% 38% 47% 53% / 45% 41% 59% 55%,
  at 12-20% opacity, max 2 blob colors per screen, always behind
  content (z-index 0).
- Motion: bouncy easing cubic-bezier(0.34,1.56,0.64,1), 0.2-0.3s,
  hover = translateY(-2px to -4px) + scale(1.01-1.02), press =
  translateY(2px).
- Layout: generous whitespace (48px+ between sections, 24px+ card
  padding) — the busier the palette, the more breathing room it needs.
- Icons: emoji (🎈 🍭 ⭐️), circular avatar/icon containers.
```

---

*Original system, 2026-07-13. Design Lab 原創設計系統，非萃取自既有品牌。*