# Design System: Cypherpunk 電馭密碼

> Direction from TypeUI's Cypherpunk design skill（typeui.sh）；本實作與配色細節為原創撰寫。
> 一個刻意二色調的復古科技系統：全版電光萊姆綠底 + 極黑墨字，卡片與控制項以卡其米色浮起，配 2px 粗墨框——像地下駭客論壇的終端機介面。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Cypherpunk 不是「深色駭客風」，而是反過來——用最刺眼的電光萊姆綠當作唯一背景色，強迫每個頁面都帶著挑釁與不安。文字永遠是接近純黑的墨色，卡片與輸入框則從這片萊姆綠中「浮起」成卡其米色的實體方塊，用 2px 粗墨框圈住。沒有漸層、沒有玻璃感、沒有柔和陰影——只有硬邊、硬陰影、和像素字體。這是給加密貨幣、去中心化工具、資安儀表板、實驗性 SaaS 用的視覺語言：吵、技術、顛覆體制，但元件本身仍然規矩、可預測。

**Atmosphere Keywords:** Stark 刺眼、Terminal 終端機感、Technical 技術性、Subversive 顛覆、Grounded 落地、Retro-computing 復古電腦、Loud 大聲、Disciplined 有紀律

**Visual Anchors:**
- 全版電光萊姆綠畫布（唯一背景色，不分區塊變色）
- 卡片／輸入框／次要控制項一律卡其米色 + 2px 實心墨框
- 像素點陣標題字（Press Start 2P）搭配等寬終端機正文字（JetBrains Mono）
- 硬邊直角或極小圓角（2px），絕不用膠囊圓角
- 硬偏移陰影（`4px 4px 0` / `8px 8px 0`），無模糊、無漸層
- 終端機讀出面板（system status panel）作為系統標誌性元件

**Mood Board References:**
- 1990 年代 BBS／終端機介面與 CRT 綠字
- Cyberdeck / hacker terminal 美學
- 早期加密龐克（cypherpunk）郵件清單的樸素排版
- 復古像素遊戲 UI（Press Start 2P、8-bit HUD）

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟢 | Electric Lime 電馭萊姆綠 | `#D4FF3F` | Canvas — 全站唯一背景色，不分區塊替換 |
| ⬛ | Near-black Ink 極黑墨 | `#0A0A0A` | Ink — 全部文字、邊框、硬陰影 |
| 🟤 | Beige Raised 卡其浮面 | `#F0E9D8` | Surface — 卡片、輸入框、次要控制項的浮起色 |
| 🩷 | Terminal Magenta 終端洋紅 | `#FF2E92` | Danger — 警示、刪除、危險操作 |
| 🔵 | Circuit Cyan 電路青 | `#00E5D0` | Info / Link — 連結、focus ring、資訊提示 |
| 🟡 | Warning Amber 警示琥珀 | `#FFB800` | Warning — 警告狀態、待處理徽章 |

**Rule:** 萊姆綠只當畫布用，絕不作為卡片或文字底色；卡其米色只用在「從畫布浮起」的元件（卡片、輸入框、terminal 面板），兩者不可互換，這是系統唯二的表面語言。

### Text Colors

| Role | Hex | Use | Contrast |
|------|-----|-----|----------|
| Ink Primary 主文墨 | `#0A0A0A` | 標題、正文、按鈕文字 | on Lime ≈ 16.8:1／on Beige ≈ 18.7:1 — 遠超 WCAG AAA |
| Ink Muted 次要墨 | `#4A4A3E` | 說明文字、caption、時間戳 | on Beige ≈ 8.9:1，AA 以上 |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Lime Badge | `#D4FF3F`（badge 底 + 墨字） | 只用在卡其面板上的徽章底色，不可當文字色 |
| Warning 警告 | Amber | `#FFB800` | 待處理狀態、需注意的欄位 |
| Danger 危險 | Magenta | `#FF2E92` | 刪除、不可逆操作、安全性警示 |
| Info 資訊 | Cyan | `#00E5D0` | 連結、focus ring、資訊提示框左邊條 |

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas 畫布 | `#D4FF3F` | — | 全頁唯一底色 |
| Surface 浮面 | `#F0E9D8` | `2px solid #0A0A0A` | 卡片、輸入框、terminal 面板 |
| Raised 抬起 | 同上 | `4px 4px 0 #0A0A0A` | 靜態卡片常駐陰影 |
| Hover lift | 同上 | `8px 8px 0 #0A0A0A` + translate(-4px,-4px) | 可互動元件 hover |
| Inverted 反轉 | `#0A0A0A` | `2px solid #0A0A0A` | Primary 按鈕、terminal 標題列 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-pixel` | 'Press Start 2P', monospace | H1/H2/H3、按鈕、標籤、terminal 標題列 — 像素點陣感 |
| `--font-mono` | 'JetBrains Mono', monospace | 正文、輸入框、terminal 內容、程式碼、表格 |

**Pairing logic:** Press Start 2P 是真正的點陣字（8-bit 遊戲機字重），字符極寬，只用在短字串（標題、按鈕、徽章），並拉大 `letter-spacing` 與 `line-height` 維持可讀。JetBrains Mono 負責所有長篇閱讀內容，等寬字元讓資料、數字、程式碼對齊，強化「終端機」的技術感。兩者都是 monospace 家族，視覺上同屬一個世界，但點陣字負責「喊話」，等寬字負責「陳述」。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(1.6rem, 4.5vw, 2.4rem) | pixel | 400 | line-height 1.6，letter-spacing 0.02em |
| h2 | 1.3rem | pixel | 400 | line-height 1.7，margin-top 3rem |
| h3 | 1rem | pixel | 400 | line-height 1.6 |
| Body | 16px（mobile 15px） | mono | 400 | line-height 1.7 |
| Caption / label | 0.7–0.8rem | pixel | 400 | 大寫 + letter-spacing 0.08em |

### Link Style

- 連結色 `#00E5D0`（Circuit Cyan），底線恆常存在（`text-decoration: underline`），不是 hover 才出現——terminal 連結一律標記清楚
- Hover：背景反白為 `#0A0A0A`，文字轉 `#D4FF3F`（完整反色，像選取終端機文字）

---

## 4. Component Stylings

### Grounded Border（系統核心 token）

```css
--ink-border: 2px solid #0A0A0A;
--radius-sharp: 2px;      /* 唯一允許的圓角，接近直角 */
--shadow-raised: 4px 4px 0 #0A0A0A;
--shadow-lift: 8px 8px 0 #0A0A0A;
```

所有卡片、按鈕、輸入框、徽章共用同一組直角語彙——沒有例外，沒有膠囊圓角。

### Buttons

- **Primary**：墨黑底 `#0A0A0A` + 萊姆綠文字 `#D4FF3F` + 2px 墨框（同色框與底融合成一塊硬色磚），`radius-sharp`，常駐 `shadow-raised`
- **Secondary**：卡其米底 + 墨字 + 2px 墨框，同樣常駐陰影
- **Hover**（兩者皆同）：`transform: translate(-2px, -2px)` + 陰影放大到 `shadow-lift` — 像元件被拉離畫布
- **Active/press**：陰影收回 `2px 2px 0`，位移歸零 — 模擬按下
- **Disabled**：不透明度 0.4，陰影移除，游標 `not-allowed`
- 一律直角文字大寫（`text-transform: uppercase`），像素字體 0.85rem

### Cards

- 卡其米底 + 2px 墨框 + `radius-sharp`，padding 1.75rem
- 常駐 `shadow-raised`（不是 hover 才有陰影——這是系統與 doodle-notebook 最大的差異：卡片本來就是「浮起的實體」，不需要互動才顯形）
- Hover（可點擊卡片）：陰影加大到 `shadow-lift` + 位移 `-4px,-4px`，無旋轉（cypherpunk 不做手繪傾斜，維持硬邊秩序）

### Inputs

- 卡其米底 + 2px 墨框 + `radius-sharp`，內距 0.75rem 1rem，`--font-mono`
- placeholder 用 Ink Muted `#4A4A3E`
- Focus：邊框轉 Circuit Cyan `#00E5D0` + `box-shadow: 0 0 0 3px rgba(0,229,208,0.35)`（唯一允許的「光暈」，象徵訊號被選中，不是玻璃感）

### Tags / Badges

- 矩形（`radius-sharp`），2px 墨框，`--font-pixel` 0.68rem 大寫 + letter-spacing 0.08em
- 語意底色：琥珀＝警告、洋紅＝危險、青＝資訊、萊姆＝成功（僅徽章使用，非文字色）
- 徽章一律墨字，不因底色改變文字色（維持二色調紀律）

### Terminal / Status Panel（見第 9 節之外的旗艦元件說明，實作於 preview.html）

- 卡其米面板 + 2px 墨框 + `shadow-raised`
- 頂部標題列反轉為墨黑底 + 萊姆綠文字，內含三顆狀態圓點（磚紅／琥珀／萊姆，模擬終端機視窗控制鈕但不做玻璃感，純平色圓）
- 面板內容為等寬字元逐行輸出，配一個閃爍的方塊游標（`step-end` CSS animation，無平滑淡入淡出）

---

## 5. Layout Principles

- **單一背景紀律**：整頁只有萊姆綠一種背景色，section 之間用留白與墨線分隔，絕不切換背景色分區塊
- **置中容器**：max-width 960px，padding 40px（mobile 20px）
- **卡片牆**：`repeat(auto-fit, minmax(260px, 1fr))` grid，gap 1.5rem，卡片本身已有陰影，grid 間距不需額外裝飾
- **墨線分隔**：section 標題後接 4px 實心墨線（非虛線——虛線是 doodle-notebook 的語彙，cypherpunk 用實線強調硬邊）
- **對齊網格**：所有元件間距取 8px 倍數（8/16/24/32/40），呼應終端機字元網格的機械感
- **Sticky header**：墨黑底 + 萊姆綠文字（反轉色），2px 墨線 border-bottom，無模糊 backdrop

---

## 6. Depth & Elevation

**No soft gradients, no glossy depth, no blur.** 這個系統的深度語言是「硬體積木」：

1. 畫布（預設）：純萊姆綠，零陰影，是最底層
2. 浮面（cards / inputs）：卡其米 + 2px 墨框 + 常駐 `4px 4px 0` 硬陰影 — 一出現就是浮起的方塊，不需互動觸發
3. 抬升（hover / focus）：硬陰影加大到 `8px 8px 0` 並位移 `-4px,-4px` — 像積木被拉離桌面，不是懸浮發光
4. 反轉（primary 按鈕 / terminal 標題列）：墨黑底 + 亮色文字，用「色彩反轉」而非陰影表達最高強調層級
5. Focus ring：唯一允許的柔和效果，`0 0 0 3px` 純色光暈（無模糊半徑），代表訊號被選取，不是材質光澤

Motion 全部瞬時且機械：`transform` 0.08–0.12s `steps()` 或 `ease-out`，只做位移，無縮放、無旋轉、無淡入淡出。

---

## 7. Do's and Don'ts

### Do's ✅

- 全站背景永遠是電光萊姆綠，卡片永遠是卡其米 — 二色調紀律不妥協
- 所有容器一律 2px 墨框 + `radius-sharp`（2px 圓角）
- 卡片預設就帶硬陰影，不用等 hover 才「浮起」
- 標題、按鈕、徽章用像素字體且大寫；長文一律等寬字體
- Primary 強調用「色彩反轉」（墨底亮字）而非額外強調色

### Don'ts ❌

- ❌ **No soft gradients** — 任何漸層背景或漸層按鈕都會立刻破壞終端機感
- ❌ **No alternate section backgrounds** — 不准切換 section 背景色製造「分區塊」錯覺，畫布只有一種綠
- ❌ **No pill rounding** — 圓角上限 2px，膠囊按鈕、圓形標籤都不屬於這個系統
- ❌ **No glossy depth** — 不做玻璃擬態、內陰影高光、材質反光；深度只靠硬偏移陰影表達
- ❌ 模糊陰影（`box-shadow` 帶 blur radius）— 一律 0 blur
- ❌ 萊姆綠當文字色或卡片底色 — 它只屬於全域畫布

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤960px | 容器 padding 縮到 24px；卡片牆維持 `auto-fit` 自動降欄 |
| ≤768px | 導覽收進純 CSS checkbox 漢堡選單；terminal 面板 stats grid → 2 欄 |
| ≤640px | body 15px、h1 clamp 下限觸發；卡片牆、按鈕列、terminal stats → 1 欄；像素標題字級再降 10% 避免爆版 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Cypherpunk 電馭密碼" style — a stark two-tone
retro-terminal system:

- Canvas: the ENTIRE page background is electric lime #D4FF3F.
  Never switch section backgrounds — one color for the whole page.
- Text/ink: near-black #0A0A0A for all text, borders, and shadows.
- Raised surfaces (cards, inputs, secondary buttons, terminal panels):
  beige #F0E9D8 background + 2px solid #0A0A0A border + 2px border-radius
  (never more, never pill-shaped).
- Depth: NO blurred shadows, NO gradients, NO glassmorphism. Use flat
  hard-offset shadows only — `4px 4px 0 #0A0A0A` at rest on cards,
  `8px 8px 0 #0A0A0A` + translate(-4px,-4px) on hover.
- Primary emphasis: color inversion, not extra accent colors —
  ink background + lime text (e.g. primary buttons, sticky header,
  terminal panel title bar).
- Fonts: 'Press Start 2P' (pixel/bitmap) for headings, buttons, badges,
  labels — short strings only, uppercase, generous letter-spacing.
  'JetBrains Mono' for all body text, inputs, code, tables.
- Accent colors (use sparingly, only as small badge fills or focus
  rings, never as page backgrounds): magenta #FF2E92 (danger),
  cyan #00E5D0 (info/links/focus ring), amber #FFB800 (warning).
- Links: cyan #00E5D0, permanent underline; hover = full color
  inversion (ink background, lime text) like a terminal text selection.
- Signature component: a terminal/status-readout panel — beige panel,
  inverted title bar (ink bg + lime text) with three flat status dots,
  monospace log lines, a blinking block cursor (steps() animation,
  no fade).
- Layout: single-color canvas throughout, sharp 2px-radius grid,
  8px-multiple spacing rhythm, no rotation, no soft motion — everything
  moves in flat, mechanical steps.
```

---

*Direction: typeui.sh — Cypherpunk. Implementation and palette are original.*