# IP Design Sheet: Magnolia Mark

> 木蘭印記 — TingYu's Deco 品牌識別的 IP 設計表：一朵五瓣薰衣草紫木蘭 + 手寫字標的完整規格，含造型解剖、色彩、動態人格與使用規範。

---

## 1. The IP & Its Story

**Mark:** 一朵手繪線稿風的五瓣木蘭花（magnolia），薰衣草紫漸層填色、深墨描邊，花瓣層疊帶一枝短梗。

**Wordmark:** "TingYu's Deco" 連筆手寫字（單線 script），與花朵同一隻手的筆觸。

**Tagline:** "AI, Art, Craft, Imagination" — 細字副標，永遠在右下。

**Personality Keywords:** Elegant, Organic, Blooming（動態規格書原文）— 優雅、有機、綻放中。木蘭是「手作與科技並存」的象徵：花是手繪的，動起來卻是程式驅動的。

---

## 2. Anatomy 構成解剖

| Part | Element | Rule |
|------|---------|------|
| 1 | Magnolia mark 木蘭花標 | 永遠在字標上方偏右；可單獨使用（favicon、浮水印） |
| 2 | Wordmark 手寫字標 | 不可重新排版或換字型 — 它是手寫的，不是字體 |
| 3 | Tagline 副標 | 只與完整 logo 同時出現，不單獨使用 |

原始檔：533 × 255 px，RGBA 透明底。

---

## 3. Color Specification（取樣自原始 logo 檔）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 💜 | Magnolia Lavender 木蘭薰衣草 | `#A080B0` | 花瓣主色 |
| 🟣 | Deep Lavender 深薰衣草 | `#9078A0` | 花瓣暗面、漸層深端 |
| 🍇 | Plum Shadow 花影梅紫 | `#705878` | 花瓣最深陰影、描邊過渡 |
| ⬛ | Ink 墨線 | `#111111` | 花朵描邊、字標、副標 |
| ⬜ | Paper 紙白 | `#F0F0F0` | 淺色底；深色底時改用紙白反白字標 |

**Rule:** 花瓣紫三階不得替換成其他紫；墨線不得改成彩色。深色背景上：字標反白、花朵保持原色（紫在深底上自帶對比）。

---

## 3.5 Companion Typography 配套字體

字標本體是手寫件不可重排（§2），但品牌周邊排版需要與字標同世界的字體：

| Role | Font | Note |
|------|------|------|
| Display（英文標題/裝飾） | 'Dancing Script' 500–700 | 連筆圓潤 script，最接近字標的手寫筆意 |
| Display（中文標題） | 'LXGW WenKai TC' | 楷書筆意，與英文 script 同屬手寫世界 |
| Body 正文 | 'Nunito', 'Noto Sans TC' | 長文保持易讀，手寫字型只用於標題層 |
| Code / spec | 'JetBrains Mono' | 動態 tokens、色值 |

**Rule:** Dancing Script 是「配套」不是「替身」— 不得用它重打 "TingYu's Deco" 字標。

---

## 4. Motion Personality（源自 motion_spec.md）

> 動態隱喻：**花瓣綻放 → 手寫字流出 → 副標浮現** — 像同一隻手先畫花、再簽名。

### Choreography（2000ms 總長）

| Phase | Timing | Motion |
|-------|--------|--------|
| Magnolia bloom | 0–800ms | 花瓣由中心向外 stagger 展開，微旋轉 + organic overshoot |
| Wordmark draw-on | 400–1500ms | 筆畫由左至右 draw-on，與綻放尾段重疊 |
| Tagline fade-up | 1300–1800ms | 透明度 + translateY 緩升 |
| Settle | 1800–2000ms | 微 ease 歸位 |

### Easing Tokens

```css
--p2m-ease-bloom: cubic-bezier(0.34, 1.56, 0.64, 1);  /* 花瓣 overshoot */
--p2m-ease-draw:  cubic-bezier(0.65, 0, 0.35, 1);      /* 字標 draw-on */
--p2m-ease-fade:  cubic-bezier(0.4, 0, 0.2, 1);        /* 副標 fade-up */
--p2m-duration:   2000ms;
```

**應用原則:** Staging（花先出場定錨）、Slow In/Out、Follow Through（花瓣過衝回彈）、重的元素動得慢（花 > 字 > 副標）。

**Live demo:** `motion.html` — 已實作的動態版本：SVG stroke-dasharray 線稿逐筆描繪（9 path stagger）→ 上色（線稿淡出、彩圖淡入）→ Tegaki 引擎現場手寫字標 → 副標浮現，附重播與調速控制。線稿描繪是「同一隻手先畫花再簽名」隱喻的直接呈現。

---

## 5. Usage Do's and Don'ts

### Do's ✅
- 淺色紙感底（`#F0F0F0`–`#FBF7F4`）上使用完整 logo
- 花標單獨用於 favicon、載入動畫、浮水印（透明度 ≤10%）
- 動態出場一律遵循 bloom → draw → fade 的順序

### Don'ts ❌
- ❌ 改變花與字標的相對位置或比例
- ❌ 字標換字型、重打字 — 手寫件不可重排
- ❌ 花瓣改色（品牌紫三階是身分，不是主題色）
- ❌ 加陰影、外框、漸層底盤 — logo 本體是平面手繪件
- ❌ 動畫超過 2000ms 或使用彈跳以外的誇張效果

---

## 6. Agent Prompt Guide

```
Use the "Magnolia Mark" brand IP (TingYu's Deco):
- The mark is a 5-petal lavender magnolia (petals #A080B0 → #9078A0,
  deepest shadow #705878) with #111111 ink outlines,
  paired with a handwritten script wordmark "TingYu's Deco"
- On light paper backgrounds (#F0F0F0–#FBF7F4) use full-color logo;
  on dark backgrounds keep petals as-is, invert wordmark to paper white
- Motion identity: petals bloom first (0-800ms, overshoot ease
  cubic-bezier(0.34,1.56,0.64,1)), wordmark draws on left-to-right,
  tagline fades up last; total 2000ms
- Mood: elegant, organic, blooming — hand-drawn warmth driven by code
```

---

*Assets: `logo.png`（完整 logo, 透明底）、`mark.png`（花標單體）、`motion.html`（互動動態示範，Tegaki 手寫引擎）。Motion spec 正本：Designs repo `pixel2motion-tingyus-deco/motion_spec.md`。*