# Design System: Dark 沉靜梅夜

> Direction from TypeUI's Dark design skill（typeui.sh）；本實作與配色細節為原創撰寫。深炭帶梅紫的畫布、微微抬升的暗卡、克制的梅紫品牌色、襯線展示標題、以及只在互動時才浮現的一圈微光（glint）。這是一套「安靜的高級」深色系統——不靠霓虹喧嘩，不靠聚光戲劇，靠的是分寸感。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Dark 沉靜梅夜的邏輯是「克制比喧嘩更高級」。畫布是統一的深炭梅紫色，卡片只比畫布亮一階，邊框只有 1px，強調色是被降低飽和度的梅紫——不是為了搶眼，是為了讓內容本身安靜地浮現。系統唯一的「表演」是 glint：互動元素在 hover / focus 時浮出一圈極克制的微光（底部陰影 + 內緣高光 + 外圍柔光三層疊加），像絲絨在燈下的反光，而不是霓虹管的放電。襯線展示標題（IBM Plex Serif）負責「這是有品味的產品」的第一印象，Inter 負責把介面撐起來。

**Atmosphere Keywords:** Quiet, Premium, Composed, Muted, Editorial-dark, Understated, Focused, Velvet

**Visual Anchors:**
- 統一深炭梅紫畫布 `#13111A`，卡片只抬升一階到 `#181621` — 深度靠色階差，不靠陰影堆疊
- 品牌色刻意降飽和 `#42344B`／`#5A4869` — 梅紫但不豔麗，任何時候都不搶過內容
- Glint 效果：`base shadow + inset highlight + outer glow` 三層疊加，只在互動狀態出現
- IBM Plex Serif 展示標題 + Inter 介面字型的雙字型分工
- 16px 圓角、1px 髮線邊框、8px 節奏間距 — 幾何規矩到近乎克制
- 大量留白（96px 桌面section間距）— 安靜的系統需要呼吸空間

**Mood Board References:**
- 高級媒體庫／分析儀表板的深色模式（不是遊戲介面的深色模式）
- 絲絨與啞光金屬在低光源下的反光質感
- 精品雜誌的深色版型頁（editorial dark spread）
- 安靜的深夜書房 — 一盞桌燈,而非整排霓虹

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | English Name | Hex | Role |
|--------|--------|--------------|-----|------|
| ⬛ | 底層炭黛 | Surface | `#13111A` | Canvas — 全站共用底色，page/section 背景 |
| 🟪 | 梅殼灰 | Card Surface | `#181621` | 卡片、面板、元件的抬升層 |
| 🟣 | 暗梅紫 | Brand | `#42344B` | Primary — 主按鈕、品牌強調、預設邊框色源 |
| 🟣 | 亮梅紫 | Brand Medium | `#5A4869` | Hover / 次要強調、glint 中層光暈 |
| ⬜ | 雪白 | Heading | `#FFFFFF` | 主標題與高對比標籤 |
| ⚪ | 霧灰 | Body | `#D4D0DC` | 內文與可讀 UI 文字 — 永遠不是純灰對純灰 |
| ▫️ | 界線灰 | Border Default | `#33313B` | 卡片邊框、分隔線、輸入框描邊 |

### Semantic Colors（低飽和延伸，維持系統的安靜語氣）

| Role | Hex | Note |
|------|-----|------|
| Success 成功 | `#5FA88A` | 霧化鼠尾草綠，非高飽和亮綠 |
| Warning 警告 | `#C99A57` | 霧化琥珀，與品牌梅紫同色溫 |
| Danger 危險 | `#B4636E` | 霧化玫瑰紅，克制不刺眼 |
| Info 資訊 | `#5A4869` | 同 Brand Medium |

**Rule:** 語意色一律先降飽和再上場——原色版本（純綠、純紅）在這個系統裡永遠是錯的，因為它們會打斷「安靜」的統一語氣。

### Surface & Depth

| Layer | Background | Border | Use |
|-------|-----------|--------|-----|
| Canvas | `#13111A` | — | Page / section 共用底 |
| Card（靜態） | `#181621`，上到下極輕微漸層 | `1px solid #33313B` | 面板、卡片、輸入框 |
| Card（hover/focus） | 同上 | `1px solid #5A4869` | + glint 三層陰影浮現 |
| Overlay | `rgba(19, 17, 26, 0.9)` | — | Modal / lightbox 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'IBM Plex Serif', 'Noto Serif TC', serif | 展示標題（h1/h2）— 高級編輯感的來源 |
| `--font-body` | 'Inter', 'Noto Sans TC', sans-serif | 內文、按鈕、標籤、控制項 — 一切需要被快速讀懂的東西 |
| `--font-mono` | 'JetBrains Mono', monospace | 程式碼、時間戳、技術性標籤 |

**Pairing logic:** IBM Plex Serif 只出現在大字級（h1/h2/巨大數字），負責「這個產品被認真對待」的第一印象；一旦進入控制項與內文，立刻切回 Inter 保證可讀性與操作的即時感。兩者絕不在同一行混用。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Hero h1 | clamp(2.4rem, 5vw, 3.4rem) | display | 500 | line-height 1.15，字距 -0.01em |
| h2 | 2rem | display | 500 | section 標題 |
| h3 | 1.25rem | body | 600 | 卡片標題，semibold Inter |
| Body | 16px | body | 400 | line-height 1.7 |
| Caption / label | 0.8125rem | body | 500 | 字距 0.02em，常配 uppercase |
| Mono / meta | 0.8125rem | mono | 400 | 時間戳、id、版本號 |

### Link Style

- 連結色 `#B9A9C4`（Brand Medium 提亮版），無底線
- Hover：色轉純白 `#FFFFFF` + `text-underline-offset: 3px` 實線底線，安靜地確認可點擊，不需要動畫花招

---

## 4. Component Stylings

### Glint Token（系統核心）

```css
--glint-shadow:
  0 1px 2px rgba(0, 0, 0, 0.45),
  inset 0 1px 0 rgba(255, 255, 255, 0.06),
  0 0 28px rgba(90, 72, 105, 0.35);
```

三層缺一不可：`base shadow` 給重量感、`inset highlight` 模擬絲絨頂緣反光、`outer glow` 是唯一允許的「發光」，且色源永遠是 Brand Medium，不引入第二色。

### Cards

- `#181621` 底 + 極輕微上到下漸層（`linear-gradient(180deg, #1B1824, #181621)`）
- `1px solid #33313B`，`border-radius: 16px`
- Hover/focus：邊框轉 `#5A4869` + `box-shadow: var(--glint-shadow)`，過渡 0.2s ease-out，無位移無縮放 — 安靜的系統不彈跳

### Buttons

- Primary：`#42344B` 底、`#FFFFFF` 文字、`border-radius: 16px`、semibold Inter
- Hover：底色轉 `#5A4869` + glint shadow
- Secondary：透明底 + `1px solid #33313B`，hover 邊框轉 `#5A4869`
- 全部按鈕 44px 最小點擊高度，無漸層填色

### Tags / Badges

- 膠囊形（`border-radius: 999px`），`#181621` 底 + `1px solid #33313B`
- 文字用 mono 或 uppercase caption，字距拉開，不用色塊搶眼——標籤在這個系統裡是「資訊」不是「裝飾」

### Glint Panel（招牌元件）

深色 stat / metric 面板：預設只有 1px 邊框與底色階差；當面板進入 focus-within 或 hover，glint 三層陰影同時浮現，數字用 IBM Plex Serif 放大展示。這是系統裡唯一會「發光」的地方，且光量極克制（28px 柔光半徑、35% 不透明度上限），刻意與 neon-night 的多層高飽和發光區隔。

### Table

- 表頭 `1px solid #33313B` 底線，內文列用 `1px solid #232030` 極淺分隔
- Row hover：底色轉 `#181621`，不加邊框變化

---

## 5. Layout Principles

- **容器寬度**：max-width 1152px，置中
- **8px 節奏**：所有 margin/padding/gap 為 8 的倍數
- **Section 間距**：桌面 96px，行動裝置 24px — 這是系統呼吸感的主要來源
- **卡片圓角**：16px 統一，不因元件大小改變
- **單一光源假設**：所有 hover 光暈方向與強度一致，不因元件位置改變（不是舞台光，是環境光）

---

## 6. Depth & Elevation

深度語言是「色階 + glint」，不是「陰影堆疊」：

1. Canvas（`#13111A`）— 最底層，無陰影
2. Card 靜置（`#181621` + 1px 邊框）— 只靠色階差表示抬升
3. Card 互動（+ glint 三層陰影）— 唯一會「亮起來」的狀態
4. Overlay（90% 深炭疊層）— modal / lightbox 底

Motion 全部輕量：`transform` 只用在極少數地方（無彈跳無縮放），主要靠 `box-shadow` 與 `border-color` 的 0.2s ease-out 過渡表達互動。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有互動元件的發光效果一律用 glint 三層 token，色源固定 Brand Medium
- 語意色（成功/警告/危險）一律先降飽和再使用
- 展示標題用襯線，控制項與內文一律 Inter
- 卡片深度靠色階差（`#13111A` → `#181621`），陰影只在 hover 出現
- 大量留白，讓內容而非裝飾成為焦點

### Don'ts ❌

- ❌ 高飽和霓虹發光、多色光暈 — 那是另一個系統（neon-night）的語言
- ❌ 單一聚光燈式的強烈明暗對比 — 那是 dramatic-light 的語言，這裡是環境光不是舞台光
- ❌ 純黑 `#000000` — 畫布永遠帶梅紫底色 `#13111A`
- ❌ 純白正文 — 內文一律 `#D4D0DC`，只有標題允許 `#FFFFFF`
- ❌ 卡片 hover 彈跳、縮放、位移 — 安靜的系統不做誇張動效
- ❌ 漸層填色按鈕 — 品牌色是純色梅紫，不是漸層

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1152px | 容器滿版 1152px，section 間距 96px |
| 768–1151px | 容器 padding 收至 32px，section 間距降至 64px |
| ≤767px | section 間距 24px，卡片牆 → 1 欄，hero 字級降至 clamp 下限，按鈕滿寬 |
| Focus-visible | 所有互動元件保留鍵盤可視焦點環（`2px solid #5A4869` + 2px offset），不因深色主題犧牲可及性 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Dark 沉靜梅夜" style — a calm, premium dark interface:

- Canvas: deep charcoal-plum #13111A, shared across all sections
- Cards: #181621 with a barely-visible top-to-bottom gradient,
  1px solid #33313B border, 16px border-radius
- Brand color: muted plum #42344B (primary), #5A4869 (hover/medium) —
  never bright or saturated, never a gradient fill
- Glint effect on hover/focus (the system's signature):
  box-shadow: 0 1px 2px rgba(0,0,0,.45),
              inset 0 1px 0 rgba(255,255,255,.06),
              0 0 28px rgba(90,72,105,.35)
  Border color shifts to #5A4869 at the same time. No bounce, no scale.
- Fonts: 'IBM Plex Serif' for h1/h2 display headings only (weight 500),
  'Inter' for everything else (body 16px/1.7, buttons, labels semibold),
  'JetBrains Mono' for code/meta/timestamps
- Text: headings #FFFFFF, body #D4D0DC — never pure gray on gray
- Semantic colors are desaturated: success #5FA88A, warning #C99A57,
  danger #B4636E — never pure saturated red/green
- Spacing: 8px rhythm, 96px section gaps on desktop, 24px on mobile,
  1152px max-width container
- No neon multi-color glow, no single-spotlight noir contrast —
  this is quiet ambient light, not theatrical light
```

---

*Direction from TypeUI's Dark design skill（typeui.sh）；本實作與配色細節為原創撰寫。2026-07-13.*