# Design System: Frosted Glass 毛玻璃

> 玻璃擬態設計系統 — 多彩柔霧漸層底上漂浮著半透明白色玻璃卡片，`backdrop-filter` 模糊出景深，細白描邊勾出玻璃邊緣。整體感覺像把介面元件做成一片片懸浮在彩色霧氣上的磨砂玻璃，輕盈、通透、現代。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Every surface is a pane of frosted glass suspended above a soft multicolor gradient mist. Content lives in translucent white panels that let color bleed through from behind — never opaque, never fully hidden. The system trades sharp contrast for depth-through-blur: hierarchy comes from how much of the background you can see through each layer, not from heavy shadows or borders. The result should feel airy, weightless, and calm — like looking at UI through a bathroom window on a sunny day.

**Atmosphere Keywords:** Translucent, Airy, Floating, Soft-focus, Luminous, Weightless, Calm, Modern

**Visual Anchors:**
- Multicolor soft gradient mesh background（紫／青／橘／粉四色暈染，永不用純色底）
- Semi-transparent white glass panels（`rgba(255,255,255,0.55–0.75)`）+ `backdrop-filter: blur()`
- Hairline white borders（`1px solid rgba(255,255,255,0.4–0.6)`）勾出玻璃邊緣的光線反射
- Large soft border-radius（20–28px）— 玻璃沒有尖角
- Decorative blurred color blobs behind glass panels，製造景深與色彩滲透感
- Gentle hover lift（`translateY(-4px)` + 陰影加深），像玻璃片被輕輕托起

**Mood Board References:**
- iOS/macOS 毛玻璃控制中心與通知面板
- 晨霧中透光的磨砂玻璃窗
- 彩色霓虹光暈打在半透明壓克力板上
- 水彩暈染紙材的柔和色彩過渡

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟣 | Sky Lilac 天霧紫 | `#A78BFA` | Primary — 主漸層色、連結、主要按鈕 |
| 🟢 | Aqua Mist 霧藺青 | `#5EEAD4` | Secondary — 次漸層色、次要強調 |
| 🟠 | Peach Glow 蜜桃光 | `#FDBA74` | Warm accent — 暖色漸層點綴、標籤高光 |
| 🩷 | Blush Pink 薄霧粉 | `#F9A8D4` | Accent — 徽章、裝飾色塊 |
| ⚪ | Glass White 玻光白 | `#FFFFFF` | Surface — 卡片玻璃面（低透明度使用） |
| ⬛ | Ink Slate 石墨灰 | `#1E293B` | 主文字色 |
| ⚪ | Cloud Gray 雲灰 | `#64748B` | 次要／輔助文字色 |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Mint Success 薄荷成功綠 | `#34D399` | 玻璃徽章、成功提示邊框 |
| Warning 警告 | Amber Warning 琥珀警示黃 | `#FBBF24` | 提醒標籤、警示邊框 |
| Danger 危險 | Coral Danger 珊瑚危險紅 | `#F87171` | 錯誤狀態、危險按鈕 |
| Info 資訊 | 同 Sky Lilac | `#A78BFA` | 提示框左邊條、info 徽章 |

**Rule:** 語意色一律只用於玻璃面上的細邊框、圖示或小面積徽章，絕不作為大面積背景實色 — 大面積背景永遠是漸層 mesh。

### Surface & Depth（玻璃層級）

| Layer | Background Opacity | Blur | Border | Use |
|-------|--------------------|------|--------|-----|
| Base card 基礎卡片 | `rgba(255,255,255,0.55)` | `backdrop-filter: blur(16px)` | `1px solid rgba(255,255,255,0.4)` | 一般內容卡片 |
| Elevated card 抬升卡片 | `rgba(255,255,255,0.7)` | `backdrop-filter: blur(20px)` | `1px solid rgba(255,255,255,0.55)` | hover 狀態、重點卡片 |
| Showpiece panel 展示面板 | `rgba(255,255,255,0.75)` | `backdrop-filter: blur(24px) saturate(160%)` | `1px solid rgba(255,255,255,0.6)` | 招牌展示區、hero 內嵌面板 |
| Blob layer 色塊層 | 各色 40–60% opacity | `filter: blur(60–90px)` | 無邊框 | 卡片背後的裝飾模糊色塊 |
| Overlay 遮罩 | `rgba(30,41,59,0.4)` | `backdrop-filter: blur(4px)` | 無邊框 | modal/lightbox 底（如有） |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Poppins', sans-serif | 標題、按鈕、標籤 — 圓潤幾何字形呼應玻璃圓角 |
| `--font-body` | 'Inter', sans-serif | 正文、說明文字 — 高可讀性 |

**Pairing logic:** Poppins 的幾何圓潤字形與大圓角玻璃卡片同一個語言；Inter 在小尺寸與半透明背景上仍保持清晰對比，撐住長文閱讀。

### Type Scale

| Element | Size | Font | Weight | Line-height |
|---------|------|------|--------|-------------|
| h1 | clamp(2.4rem, 5vw, 3.4rem) | Poppins | 700 | 1.2 |
| h2 | 2rem | Poppins | 600 | 1.3 |
| h3 | 1.4rem | Poppins | 600 | 1.4 |
| Body | 16px | Inter | 400 | 1.7 |
| Caption / tag | 0.8–0.9rem | Inter | 500 | 1.4 |

### Link Style

- 連結色 `#A78BFA`，無底線
- Hover：色轉深一階（`#8B5CF6`）+ `text-decoration: underline`，`text-underline-offset: 3px`

---

## 4. Component Stylings

### Glass Token（系統核心變數）

```css
--glass-bg: rgba(255, 255, 255, 0.55);
--glass-bg-strong: rgba(255, 255, 255, 0.75);
--glass-border: 1px solid rgba(255, 255, 255, 0.45);
--glass-blur: blur(16px);
--radius-glass: 24px;
--radius-pill: 999px;
```

### Cards

- `background: var(--glass-bg)` + `backdrop-filter: var(--glass-blur)` + `-webkit-backdrop-filter`（Safari 相容）
- `border: var(--glass-border)`，`border-radius: 24px`，`padding: 1.75rem`
- `box-shadow: 0 8px 32px rgba(31, 38, 135, 0.12)` — 柔和陰影，永不用硬陰影
- Hover：`transform: translateY(-4px)` + 陰影加深至 `0 16px 40px rgba(31,38,135,0.18)` + 背景不透明度微升至 0.65

### Buttons

| Variant | Style |
|---------|-------|
| Primary | `background: linear-gradient(135deg, #A78BFA, #5EEAD4)` 實色漸層 + 白字，`border-radius: 999px` |
| Secondary | 玻璃底（`--glass-bg`）+ `--glass-border` + Ink Slate 文字 |
| Disabled | `opacity: 0.4` + `pointer-events: none`，保留玻璃質感不變灰階 |

- Hover：Primary 微亮 + `translateY(-2px)`；Secondary 背景不透明度升高
- Padding：`0.7rem 1.75rem`

### Tags / Badges

- 膠囊形（`border-radius: 999px`），各色 20–25% opacity 底 + 對應色文字 + 對應色 1px 邊框
- 例：`background: rgba(167,139,250,0.18); color: #A78BFA; border: 1px solid rgba(167,139,250,0.35)`
- 四種語意變體：Primary（紫）、Fresh（青）、Warm（橘）、Featured（粉）
- **文字對比修正色（Tint-for-Text）：** Aqua Mist / Peach Glow / Blush Pink 三色在自身淺色底上直接當文字色對比不足，故各自定義一個加深文字變體，僅用於「同色系標籤文字」情境，不作為獨立色板色：

| 基礎色 | 文字加深變體 | Hex | Use |
|--------|-------------|-----|-----|
| Aqua Mist 霧藺青 | Aqua Text 青字 | `#0F8A76` | tag-aqua 文字色 |
| Peach Glow 蜜桃光 | Peach Text 橘字 | `#C2660D` | tag-peach 文字色 |
| Blush Pink 薄霧粉 | Pink Text 粉字 | `#C0257A` | tag-pink 文字色 |

### 招牌裝飾元素 — Glass Blob 光暈色塊

- 絕對定位的圓形／不規則形色塊，`filter: blur(60–90px)`，`opacity: 0.5–0.7`
- 放置在玻璃面板背後（`z-index: -1` 或獨立底層），穿透玻璃產生柔和色彩暈染
- 常用尺寸 200–360px，顏色取自 Sky Lilac / Aqua Mist / Peach Glow / Blush Pink 任意組合
- 可加 `animation` 緩慢漂移（8–14s ease-in-out infinite）製造呼吸感，但非必要

### Inputs（如需要）

- `background: rgba(255,255,255,0.5)` + `--glass-border` + `border-radius: 14px`
- Focus：邊框轉 `rgba(167,139,250,0.6)` + 外圈 `box-shadow: 0 0 0 3px rgba(167,139,250,0.15)`

---

## 5. Layout Principles

- **Max-width：** 1140px 置中容器，padding `2rem`（mobile `1.25rem`）
- **背景漸層 mesh：** 多層 `radial-gradient` 疊加，四色（紫/青/橘/粉）各佔一角落並互相暈染，例如：
  ```css
  background:
    radial-gradient(circle at 15% 20%, #A78BFA55, transparent 45%),
    radial-gradient(circle at 85% 15%, #5EEAD455, transparent 45%),
    radial-gradient(circle at 80% 85%, #FDBA7455, transparent 45%),
    radial-gradient(circle at 20% 90%, #F9A8D455, transparent 45%),
    #F5F3FF;
  ```
- **Grid 卡片牆：** `grid-template-columns: repeat(auto-fit, minmax(240px, 1fr))`，gap `1.5rem`
- **間距節奏：** 8px 基準單位（8/16/24/32/48px），section 間距 `3–4rem`
- **玻璃層不重疊過密：** 同畫面同時可見的玻璃面板建議 ≤ 4–5 片，避免視覺過載與效能負擔

---

## 6. Depth & Elevation

玻璃系統的深度語言是「模糊程度 + 陰影柔度」的組合，而非顏色深淺：

1. **背景層**：漸層 mesh，無模糊，最底層色彩來源
2. **Blob 裝飾層**：`blur(60–90px)`，強模糊、低銳利度，製造氛圍光暈
3. **基礎玻璃卡片**：`blur(16px)` + 柔和陰影 `0 8px 32px rgba(31,38,135,0.12)`
4. **抬升／hover 卡片**：`blur(20px)` + 陰影加深、不透明度微升 + `translateY(-4px)`
5. **展示面板（showpiece）**：`blur(24px) saturate(160%)`，飽和度提升讓穿透的背景色更鮮明，是全系統模糊最強、最搶眼的一層

規則：**層級越高（越靠近使用者），模糊越強、陰影越柔越深**；不用色階深淺表達層級，用模糊與陰影表達。

---

## 7. Do's and Don'ts

### Do's ✅

- 卡片一律用半透明白 + `backdrop-filter: blur()`，不透明度控制在 0.55–0.75 之間
- 背景永遠是多彩漸層 mesh，讓玻璃「有東西可以透」
- 邊框用低透明度白色 hairline（1px），模擬玻璃反光邊緣
- 圓角一律偏大（20px 以上），玻璃沒有尖角
- 陰影一律柔和模糊（`box-shadow` 大 blur 值、低 opacity），絕不用硬陰影

### Don'ts ❌

- ❌ 玻璃卡片放在低對比／單色背景上 — 沒有色彩可透，玻璃感消失變成純灰霧
- ❌ 全頁塞滿高 blur 玻璃層（>6-8 個 `backdrop-filter` 元素同屏）— 行動裝置會明顯掉幀
- ❌ 用純黑陰影或高對比硬陰影 — 破壞輕盈通透的氛圍
- ❌ 邊框用不透明實色 — 白色 hairline 必須帶透明度才有玻璃反光感
- ❌ 文字直接放在強模糊 blob 上而不墊玻璃面板 — 對比不足，可讀性崩潰
- ❌ 小圓角或直角卡片 — 會變成一般 UI 而非玻璃美學
- ❌ 漸層背景色數超過 4–5 色同時出現在同一視野 — 會糊成一片失去層次

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥ 1024px | 卡片牆多欄（auto-fit, minmax 240px），blob 裝飾層完整顯示 |
| ≤ 768px | 卡片牆 → 2 欄；h1 縮至 clamp 下限；padding 收至 1.5rem |
| ≤ 480px | 卡片牆 → 1 欄；`backdrop-filter` blur 值降至 10–12px（效能考量）；按鈕全寬；blob 尺寸縮小 30% 或減少數量 |

**效能提醒：** 行動裝置 GPU 合成 `backdrop-filter` 成本高，小螢幕斷點應主動降低 blur px 值與同屏玻璃層數量，而非只改版面排列。

---

## 9. Agent Prompt Guide

```
Create a page in the "Frosted Glass 毛玻璃" style — a glassmorphism design system:

- Background: multicolor soft gradient mesh using radial-gradients at each
  corner — Sky Lilac #A78BFA (top-left), Aqua Mist #5EEAD4 (top-right),
  Peach Glow #FDBA74 (bottom-right), Blush Pink #F9A8D4 (bottom-left),
  blended over a very light base (#F5F3FF). Never a flat/neutral background.
- Every card/panel: semi-transparent white surface
  `background: rgba(255,255,255,0.55)` to `rgba(255,255,255,0.75)`,
  `backdrop-filter: blur(16px)` (up to `blur(24px) saturate(160%)` for
  showpiece panels), `-webkit-backdrop-filter` for Safari,
  `border: 1px solid rgba(255,255,255,0.45)`, `border-radius: 24px`
- Shadows: always soft — `box-shadow: 0 8px 32px rgba(31,38,135,0.12)`,
  deepening on hover to `0 16px 40px rgba(31,38,135,0.18)` with
  `transform: translateY(-4px)`. Never hard/sharp shadows.
- Fonts: 'Poppins' (600–700) for headings/buttons/labels,
  'Inter' (400–500) for body text (16px, line-height 1.7)
- Buttons: primary = `linear-gradient(135deg, #A78BFA, #5EEAD4)` pill shape
  (`border-radius: 999px`) with white text; secondary = glass surface
  with Ink Slate #1E293B text
- Tags/badges: pill shape, 18-25% opacity tint of palette color as
  background, matching color text and 1px border
- Signature element: blurred color "blobs" (`filter: blur(60-90px)`,
  opacity 0.5-0.7, 200-360px, using the palette colors) positioned behind
  glass panels to create depth and color bleed-through
- Text colors: Ink Slate #1E293B for primary text, Cloud Gray #64748B
  for secondary/muted text
- Links: #A78BFA, hover underline + darker shade #8B5CF6
- Never place glass cards over low-contrast/flat backgrounds — the
  gradient mesh must always be visible through the blur
- On mobile (≤480px), reduce backdrop-filter blur to 10-12px and limit
  simultaneous glass layers for GPU performance
```

---

*Original design system created for Design Lab — Frosted Glass, 2026*