# Design System: Retro Wave

> 復古浪潮 — 一場 80 到 90 年代的 Memphis 派對：卡帶奶油底、亂序碰撞色、彈跳圓潤字體，把「隨身聽與街機廳」的快樂能量搬進網頁。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Retro Wave 不是懷舊的低飽和濾鏡，而是 Memphis Group 設計運動的原始能量重現——大膽、任性、不怕撞色。每個元素都應該像 1985 年錄音帶封套上的插畫：厚黑外框圈住每一塊色塊，幾何裝飾物（波浪線、圓點、三角碎紙）像彩帶一樣灑滿版面，卻永遠讓內容站在最前面。這是一個「拒絕高雅」的系統——它要的是玩具店的興奮感，不是精品店的冷靜感。

**Atmosphere Keywords:** Playful 玩心、Bold 大膽、Nostalgic 懷舊未來感、Energetic 動感、Clashing 撞色、Bouncy 彈跳、Analog 類比溫度、Confetti 碎紙慶典

**Visual Anchors:**
- 卡帶奶油底色（`#FDF6E3`）— 永遠溫暖不冷白，像老錄音帶封套泛黃的紙
- 厚墨黑外框（3px solid）＋硬位移陰影（`4px 4px 0`）— 每個色塊都像剪紙貼上去的
- Memphis 幾何裝飾三件套：波浪塗鴉線（squiggle）、圓點陣（polka dot）、三角碎紙（confetti triangle）
- 對比色隨機碰撞：橘×藍綠、桃紅×紫、芥末黃當點綴——不追求和諧，追求活力
- 圓潤彈跳字體（Righteous 標題）搭配友善圓體（Fredoka 內文）
- Hover 時輕微旋轉＋放大，像元素被彈簧頂了一下

**Mood Board References:**
- 卡帶隨身聽（Walkman）與錄音帶封套插畫
- 手提音響（Boombox）與霓虹街機廳招牌
- Memphis Group 設計運動（Ettore Sottsass 派系的幾何家具與圖案語言）
- 80 年代街機遊戲機台美術與貼紙簿

---

## 2. Color Palette & Roles

### Core Palette（鎖定七色）

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟡 | Cassette Cream 卡帶奶油 | `#FDF6E3` | 畫布底色 — page background / base canvas |
| 🟠 | Sunset Orange 落日橘 | `#FF6B35` | 主色 — primary buttons、標題強調、CTA |
| 🟢 | Retro Teal 復古藍綠 | `#00B8A9` | 次色 — secondary accent、連結、資訊提示 |
| 🩷 | Magenta Pop 桃紅爆炸 | `#E63E96` | 第三色 — confetti、tags、強調徽章 |
| 🟣 | Grape Purple 葡萄紫 | `#6C4AB6` | 第四色 — 裝飾幾何形、info 語意色 |
| 🟡 | Mustard Yellow 芥末黃 | `#FFC93C` | 亮點色 — 圓點裝飾、badge 底、hover 高光 |
| ⬛ | Ink Black 墨黑 | `#1A1A2E` | 文字／外框 — text, outlines, hard shadow |

### Semantic Colors（語意色，新增一色並標註）

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Retro Teal 復古藍綠 | `#00B8A9` | 沿用 palette，成功提示、確認狀態 |
| Warning 警告 | Mustard Yellow 芥末黃 | `#FFC93C` | 沿用 palette，警示徽章、注意事項 |
| Info 資訊 | Grape Purple 葡萄紫 | `#6C4AB6` | 沿用 palette，提示框、次要資訊 |
| Danger 危險 | Alert Red 警示紅 *(新增)* | `#E63946` | 系統唯一新增色，僅用於錯誤／刪除等破壞性操作，避免與 Magenta Pop 混淆 |

**Rule:** 七色鎖定色永遠優先使用；Danger 紅是本系統唯一允許的例外色，且僅限錯誤／刪除語境，不得用於裝飾或一般強調。

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas 畫布 | `#FDF6E3` + 散落 Memphis 裝飾 | — | 頁面底層 |
| Surface 卡片 | `#FFFFFF` | `3px solid #1A1A2E` | 卡片、面板、輸入框 |
| Color Block 色塊 | palette 任一亮色 | `3px solid #1A1A2E` | Hero、標籤底、按鈕 |
| Hover Lift | 同上 | `6px 6px 0 #1A1A2E` + rotate(-2deg) scale(1.02) | 可互動元件 |
| Overlay 遮罩 | `rgba(26, 26, 46, 0.85)` | — | Modal / Lightbox 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Righteous', 'Fredoka', sans-serif | 標題、Hero 文字、按鈕文字、徽章 — 厚實圓潤的招牌字 |
| `--font-body` | 'Fredoka', sans-serif | 正文、UI 標籤、表格內容 — 友善圓體，長文可讀 |

**Pairing logic:** Righteous 提供街機招牌等級的存在感，筆畫厚實圓潤帶點復古電視感，只用在短字串（標題、按鈕、徽章）；Fredoka 的圓角字腔延續同一種「軟糖感」但重量較輕，撐得起長文閱讀而不會太吵。兩者同屬「圓潤彈跳」家族，搭配時不會打架。

### Type Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2.4rem, 6vw, 3.6rem) | display | 400（Righteous 僅單一字重） | line-height 1.2，常搭配文字陰影 `3px 3px 0` |
| h2 | 2.1rem | display | 400 | margin-top 3rem |
| h3 | 1.5rem | display | 400 | |
| Body 正文 | 17px（mobile 16px） | body | 400–500 | line-height 1.7 |
| Caption / tag | 0.85–0.95rem | body | 600–700 | 全大寫或中文短詞 |

### Link Style

- 連結色 `#00B8A9`（Retro Teal），底部 3px 實線墨黑底線（非細線，呼應厚外框語言）
- Hover：文字背景轉 `#FFC93C`（芥末黃色塊）＋輕微 `rotate(-1deg)`，像貼紙被撕起一角

---

## 4. Component Stylings

### Memphis 裝飾系統（系統核心 token）

三種幾何裝飾元件，散落於版面空白處，皆以 inline SVG data-URI 或純 CSS 實現：

**1. 波浪塗鴉線 Squiggle**
```css
.squiggle {
  width: 140px; height: 16px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 16'%3E%3Cpath d='M2 8 C 14 0, 22 16, 34 8 S 46 0, 58 8 S 70 16, 82 8 S 94 0, 106 8 S 118 16, 130 8 S 138 4, 138 8' fill='none' stroke='%231A1A2E' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
```

**2. 圓點陣 Polka Dot（背景紋理）**
```css
.polka-dots {
  background-image: radial-gradient(#1A1A2E 3px, transparent 3.5px);
  background-size: 28px 28px;
  opacity: 0.12;
}
```

**3. 三角碎紙 Confetti Triangle**
```css
.confetti-tri {
  width: 0; height: 0;
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 24px solid var(--tri-color); /* 隨機取 palette 亮色 */
  filter: drop-shadow(2px 2px 0 #1A1A2E);
  transform: rotate(var(--tri-rotate, 12deg));
}
```

**Rule:** 三種裝飾單獨或成組散落在區塊邊角與留白處，絕不疊在文字或互動元件正上方；單一畫面裝飾密度上限約 8–10 個，避免視覺噪音。

### Buttons

- 底色為 palette 亮色（primary 用 Sunset Orange），厚 3px 墨黑外框，`border-radius: 14px`
- 陰影：`4px 4px 0 #1A1A2E`（無模糊）
- Hover：`transform: translate(-2px, -2px) rotate(-1deg)` + 陰影加大為 `6px 6px 0 #1A1A2E`
- Active：`transform: translate(2px, 2px)` + 陰影收為 `2px 2px 0 #1A1A2E`（按下去的回饋感）
- Disabled：`opacity: 0.4`，陰影移除，游標 `not-allowed`

### Tags / Badges（碎紙徽章）

- 膠囊形（`border-radius: 999px`）或六角形剪紙形（`clip-path: polygon(...)`），2px 墨黑框
- 底色輪流取 Magenta Pop / Grape Purple / Retro Teal / Mustard Yellow，文字一律墨黑或白（依對比自動選）
- 尺寸：`padding: 4px 14px`，字體 Fredoka 700，字距 `0.02em`

### Cards（Memphis 邊角裝飾卡）

- 白底、3px 墨黑框、`border-radius: 20px`，`box-shadow: 5px 5px 0 #1A1A2E`
- 右上角固定放一個小三角碎紙（`position: absolute; top: -10px; right: 16px`），左下角放一顆芥末黃圓點
- Hover：`translate(-3px, -3px) rotate(1deg)` + 陰影加大至 `8px 8px 0 #1A1A2E`

### Dividers（招牌分隔帶）

- 由 squiggle + polka-dot + confetti-tri 重複排列組成的 60px 高裝飾帶，`display: flex; justify-content: space-around`
- 底色可用 Cassette Cream 或任一亮色色塊區隔章節

---

## 5. Layout Principles

- **內容寬度**：`max-width: 1100px`，左右 padding 32px（mobile 20px）— 比極簡系統寬一階，因為 Memphis 裝飾需要呼吸空間
- **裝飾散落原則**：Memphis 形狀只出現在區塊「邊界」與「留白角落」，絕不覆蓋文字或表單元素；每個 section 建議裝飾數 3–6 個，維持「熱鬧但不亂」
- **色塊分區**：不同 section 可用不同 palette 亮色當背景色塊（如 Hero 用橘、Divider 用藍綠），製造分區節奏，但相鄰兩區避免用同一色
- **卡片牆**：`grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))`，gap 1.5rem
- **間距韻律**：8px 基準單位（8/16/24/32/48px），大區塊間距 64–96px 讓裝飾物有空間跳躍
- **對齊**：主要文字內容一律靠左或置中對齊，裝飾物可自由旋轉但功能性元件（按鈕、輸入框）永遠保持水平

---

## 6. Depth & Elevation

**No blur, ever.** 深度語言是「厚紙剪貼」而非光影模擬：

1. 平放（預設）：3px 墨黑外框，無陰影或極淺陰影
2. 抬起（hover）：硬位移陰影 `4px→6px 4px→6px 0 #1A1A2E` + 輕微旋轉（-1° ~ 2°）+ `translate(-2px,-2px)`
3. 按下（active）：陰影收縮至 `2px 2px 0`，元素往陰影方向位移，模擬「壓下去」的實體回饋
4. 遮罩（modal）：`rgba(26,26,46,0.85)` 深墨純色遮罩，無模糊，白卡置中彈出並自帶厚外框

**Shadow Token 對照表**

| State | Shadow |
|-------|--------|
| Rest | `2px 2px 0 #1A1A2E`（小元件）／無陰影（大色塊） |
| Hover | `6px 6px 0 #1A1A2E` |
| Active/Pressed | `2px 2px 0 #1A1A2E` + translate(2px,2px) |
| Card 常態 | `5px 5px 0 #1A1A2E` |
| Card Hover | `8px 8px 0 #1A1A2E` |

Motion 一律 `transform` + `box-shadow`，時長 0.15–0.2s，`ease-out`，不做入場淡入動畫（Memphis 風格是「已經在那裡」的自信，不是漸漸浮現）。

---

## 7. Do's and Don'ts

### Do's ✅

- 每個互動元件一律 3px 墨黑外框 + 硬位移陰影 — 這是系統統一的「剪紙貼上去」語言
- 大膽讓對比色相鄰（橘配藍綠、桃紅配紫）— 撞色是特色不是失誤
- Memphis 三件套（squiggle / polka-dot / confetti）成組散落，維持「熱鬧但留白」
- 標題一律用 Righteous，短字串才用，長文用 Fredoka 保持可讀
- Hover 給旋轉 + 位移的雙重回饋，讓元素感覺像實體貼紙被撥動

### Don'ts ❌

- ❌ 柔和漸層背景、玻璃擬態、模糊陰影 — 立刻把 Memphis 能量拉回中性科技感
- ❌ 莫蘭迪色、灰階、任何低飽和「高級感」配色 — 與本系統哲學相反
- ❌ 純黑 `#000000` 取代墨黑 — 一律用 `#1A1A2E`（帶一點暖紫調的墨色）
- ❌ 裝飾物疊在文字或表單控制項正上方，影響可讀性/可點擊性
- ❌ 單一畫面塞超過 10 個裝飾形狀 — 從「派對」變成「視覺垃圾場」
- ❌ 用細襯線體或纖細字重 — 破壞圓潤彈跳的字體性格

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥ 1024px（Desktop） | 完整裝飾密度，卡片牆多欄，Hero 大型 squiggle + confetti 群組 |
| 641px – 1023px（Tablet） | 卡片牆縮為 2 欄，裝飾密度減半（保留邊角裝飾，移除中段填充裝飾） |
| ≤ 640px（Mobile） | 卡片牆 → 1 欄；h1 降至 `2rem`；大型背景 polka-dot 紋理透明度降至 0.06 或隱藏；僅保留每個 section 1–2 個裝飾點綴，避免小螢幕擁擠 |

**規則：** 裝飾物優先於次要視覺元素被隱藏——內容永遠比裝飾優先保留在小螢幕上。

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Retro Wave" style — an 80s-90s Memphis-design pastiche
(cassette tape / boombox / arcade era, NOT a real brand):

- Canvas background: Cassette Cream #FDF6E3 (warm off-white, never cold white)
- Palette (use exactly, clash them boldly, no muted/gradient variants):
  Sunset Orange #FF6B35 (primary), Retro Teal #00B8A9 (secondary),
  Magenta Pop #E63E96 (tertiary/confetti), Grape Purple #6C4AB6 (quaternary),
  Mustard Yellow #FFC93C (highlight/dots), Ink Black #1A1A2E (text/outlines)
- Every interactive element: 3px solid #1A1A2E border, border-radius 14-20px,
  hard offset shadow `4px 4px 0 #1A1A2E` (NEVER blur), rounded corners
- Fonts: 'Righteous' for headings/buttons/badges (chunky rounded display face,
  short strings only), 'Fredoka' for body text and UI labels (rounded, friendly,
  500-700 weight for labels)
- Memphis decoration system, scattered in corners and whitespace (never over
  text/controls, max ~8-10 shapes per screen):
  1. Squiggle line — wavy SVG stroke, stroke-width 3, color #1A1A2E
  2. Polka-dot pattern — radial-gradient dots, 3px radius, 28px grid, low opacity
  3. Confetti triangle — CSS border-triangle, drop-shadow 2px 2px 0 #1A1A2E,
     random rotation, filled with any palette accent color
- Hover behavior: translate(-2px,-2px) rotate(-1deg to 2deg), shadow grows to
  `6px 6px 0 #1A1A2E`; Active: translate(2px,2px), shadow shrinks to `2px 2px 0`
- Links: Retro Teal #00B8A9 with 3px solid underline; hover = mustard yellow
  highlight background + slight rotation
- Layout: max-width 1100px, 8px spacing rhythm, generous section gaps (64-96px)
  for decorations to breathe
- Avoid: soft gradients, glassmorphism, blurred shadows, muted/pastel colors,
  pure black, thin/serif fonts, decorations overlapping interactive elements
```

---

*Original design system created for Design Lab — Retro Wave, 2026*