# Design System: Paper Peony

> 紙上牡丹色票 — 從 TingYu's Deco 的巨型皺紋紙牡丹作品實拍照萃取的色彩系統。所有色值取樣自真實作品照片（2024 春夏系列），不是螢幕上調出來的顏色，是紙張、光線與庭園實際交會的結果。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Colors that exist in the physical world. This palette was sampled from photographs of hand-crafted giant crepe paper peonies — each hue carries the texture of crepe paper catching natural light in a garden. The result is inherently harmonious: these colors already lived together in one artwork.

**Atmosphere Keywords:** Handcrafted, Botanical, Romantic, Soft, Garden-fresh, Feminine, Tactile

**Visual Anchors:**
- 皺紋紙的半透明層疊感 — 顏色永遠帶一點光
- 亮粉與乾燥玫瑰的雙花對比 — 同色系的兩種性格
- 庭園深綠作為錨 — 粉色需要深色才站得穩
- 蕊心金是唯一的暖黃 — 小面積、高精度使用

---

## 2. Color Palette & Roles

### Core Palette（全部取樣自作品照）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🌸 | Peony Rose 牡丹緋 | `#F080A0` | Primary accent — CTA、標題強調、主視覺 |
| 🥀 | Dusty Rose 乾燥玫瑰 | `#E898A8` | Secondary — hover、次要按鈕、柔和強調 |
| 🌷 | Petal Edge 瓣緣粉 | `#E8A8B8` | Tint — 背景色塊、badge、卡片染色 |
| 🌼 | Stamen Gold 蕊心金 | `#E8C898` | Highlight — 小面積點綴、icon、分隔飾線 |
| 🌫️ | Mist Blue 霧藍灰 | `#A8B0C8` | Cool neutral — 次要文字、邊框、安靜的對比 |
| 🌿 | Garden Green 庭園深綠 | `#404828` | Anchor — 標題文字、footer、深色區塊 |

### Suggested Neutrals（配套中性色）

| Name | Hex | Use |
|------|-----|-----|
| Paper White 紙白 | `#FBF7F4` | Canvas — 帶暖的紙感底色 |
| Crepe Blush 皺紋紙微粉 | `#F6EDEE` | Surface — 卡片、區塊底 |
| Deep Ink 墨綠黑 | `#2A2E1F` | Text — 由庭園綠加深，不用純黑 |

### Usage Ratio

60% 紙白/微粉底 · 25% 粉色系（緋/乾燥玫瑰/瓣緣）· 10% 庭園綠 · 5% 蕊心金＋霧藍灰

---

## 3. Typography Rules

| Role | Font | Note |
|------|------|------|
| Display | 'Playfair Display', 'Noto Serif TC', serif | 優雅襯線，呼應花藝的古典氣質 |
| Body | 'Nunito', 'Noto Sans TC', sans-serif | 圓潤無襯線，柔和不搶戲 |

標題可用 Garden Green 或 Peony Rose；正文一律 Deep Ink。粉色不當長文文字色。

---

## 4. Do's and Don'ts

### Do's ✅
- 粉色系三階（緋 → 乾燥玫瑰 → 瓣緣）當漸進層次用，像花瓣由內而外
- 蕊心金只做小面積點綴 — 它在作品裡就是花蕊的比例
- 深色需求一律用庭園綠系，讓整個頁面像在花園裡

### Don'ts ❌
- ❌ 純黑文字 — 用墨綠黑 `#2A2E1F`
- ❌ 蕊心金大面積鋪底 — 會從「花蕊」變成「土黃」
- ❌ 高飽和正紅/正藍亂入 — 這個系統的顏色都經過紙張柔化

---

## 5. Agent Prompt Guide

```
Use the "Paper Peony" palette (sampled from real crepe paper flower artwork):
- Canvas: warm paper white #FBF7F4, surfaces #F6EDEE
- Primary accent: peony rose #F080A0; hover: dusty rose #E898A8
- Tint backgrounds: petal edge #E8A8B8 at low opacity
- Small highlights only: stamen gold #E8C898
- Cool neutral (borders, muted text): mist blue #A8B0C8
- Dark anchor (headings, footer): garden green #404828; body text #2A2E1F
- Fonts: Playfair Display / Noto Serif TC for display, Nunito for body
- Mood: handcrafted, botanical, romantic — soft shadows, generous whitespace,
  rounded corners 8-16px, nothing clinical or neon
```

---

*Colors sampled 2026-07-13 from photographs of giant crepe paper peonies by TingYu's Deco (2024). Artwork: hand-crafted crepe paper, 60-80cm blooms.*