# Design System: Dithered Pixel 抖動像素

> 1-bit 低解析度抖動風設計系統 — 舊 Macintosh 系統面板與熱感紙收據機的美學混血。近乎純黑白的畫面，靠 Bayer 抖動網點與鋸齒像素邊角製造層次，只留一色當警示訊號。原創系統，不對應任何既有品牌。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 假裝螢幕只有兩個顏色能用。所有「灰階」都不是真的灰，是黑白像素以不同密度交錯出來的視覺錯覺（ordered dithering）。邊角不是圓角，是階梯狀的像素缺口。陰影不是模糊，是硬邊位移的黑色色塊。這套系統獎勵限制——用最少的顏色逼出最多的細節層次。

**Atmosphere Keywords:** Retro-computing, 1-bit, Terminal, Thermal-receipt, Analog-digital, Utilitarian, High-contrast, Nostalgic-but-crisp

**Visual Anchors:**
- 純黑 × 紙白雙色為主，唯一 accent 是訊號紅
- Bayer 抖動網點紋理（`repeating-conic-gradient` 模擬棋盤網點）取代灰階漸層
- 像素階梯邊角（`clip-path` 鋸齒缺角）取代圓角
- 硬邊位移陰影（無模糊）
- VT323 終端機像素字型當標題
- 掃描線（scanline）疊加在圖片/hero 區塊上，模擬 CRT 螢幕

**Mood Board References:**
- 1984 原初 Macintosh 系統面板與圖示
- 熱感紙收據機列印出的黑白網點圖
- Game Boy / 早期 LCD 掌機介面
- 報紙印刷網點放大照

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| ⬛ | Ink Black 墨黑 | `#0D0D0D` | Primary — 文字、邊框、抖動網點深色、硬陰影 |
| ⬜ | Paper White 紙白 | `#F6F3E7` | Canvas — 頁面底色，微帶暖調模擬熱感紙 |
| ⬜ | Static Gray 雜訊灰 | `#4A4A46` | Secondary — 次要文字、深層陰影 |
| ◻️ | Halftone Light 網點灰 | `#C9C6B8` | Muted — 淺色抖動網點、分隔線、停用狀態 |
| 🟥 | Signal Red 訊號紅 | `#FF3B2F` | Accent — 系統唯一彩色，警示/CTA/選取狀態 |
| ⬛ | Deep Static 深雜訊 | `#242420` | 卡片深色變體、hover 反白背景 |

**Rule:** 除了 Signal Red，畫面上不應出現任何第二個彩色色相。所有「灰」一律用抖動網點產生，不用實色灰階漸層（除了必要的文字色與邊框色）。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#0D0D0D` | 標題、內文 |
| Text Muted 次要 | `#4A4A46` | 說明文字、caption |
| Text Inverse 反白 | `#F6F3E7` | 深色背景上的文字 |

### Semantic Colors

僅用單一 accent 撐起所有語意，靠圖示與文字前綴區分，不新增色相：

| Role | Color | Note |
|------|-------|------|
| Alert / CTA / Selected | Signal Red `#FF3B2F` | 唯一彩色狀態 |
| Success | Ink Black + `[OK]` 前綴 | 不用綠色，用文字符號區分 |
| Error | Signal Red + `[ERR]` 前綴 | |

### Surface & Depth

| Layer | Background | Border / Shadow | Use |
|-------|-----------|-----------------|-----|
| Canvas | `#F6F3E7` + scanline overlay | — | 頁面底 |
| Surface | `#F6F3E7` | `2px solid #0D0D0D`，pixel-corner clip-path | 卡片、面板 |
| Surface Inverse | `#0D0D0D` | 同上，白邊框 | Hover / 選取狀態 |
| Hard shadow | 同上 | `6px 6px 0 #0D0D0D`（無模糊） | 可互動元件 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-pixel` | 'Press Start 2P', monospace | 極短標籤 — 徽章、hero micro-label（僅 3-6 字，可讀性差不可長用） |
| `--font-terminal` | 'VT323', monospace | 標題 h1-h3、按鈕、導覽、UI 標籤 |
| `--font-body` | 'Space Mono', monospace | 內文段落 — 較 VT323 更適合長文閱讀 |

**Pairing logic:** VT323 的終端機像素感負責標題與互動元件的「這是舊電腦」第一印象；Space Mono 字重與字距更規整，長段落不失讀性；Press Start 2P 只用於極短徽章文字，絕不用於句子。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2.4rem, 7vw, 4rem) | terminal | 400 | letter-spacing 0.02em，VT323 本身無粗體 |
| h2 | 2.2rem | terminal | 400 | |
| h3 | 1.6rem | terminal | 400 | |
| Body | 16px（mobile 15px） | body | 400 | line-height 1.7 |
| Micro-label | 0.65rem | pixel | 400 | letter-spacing 0.05em，全大寫 |

### Link Style

- 連結色 `#0D0D0D`，底線用 `2px dashed`（虛線像素感）
- Hover：背景反轉為 Ink Black，文字轉 Paper White（`[SELECTED]` 終端機選取效果）

---

## 4. Component Stylings

### Pixel Corner（系統核心 token）

```css
--pixel-notch: 8px;
clip-path: polygon(
  0 var(--pixel-notch), var(--pixel-notch) var(--pixel-notch), var(--pixel-notch) 0,
  calc(100% - var(--pixel-notch)) 0, calc(100% - var(--pixel-notch)) var(--pixel-notch), 100% var(--pixel-notch),
  100% calc(100% - var(--pixel-notch)), calc(100% - var(--pixel-notch)) calc(100% - var(--pixel-notch)), calc(100% - var(--pixel-notch)) 100%,
  var(--pixel-notch) 100%, var(--pixel-notch) calc(100% - var(--pixel-notch)), 0 calc(100% - var(--pixel-notch))
);
```

四角切掉一個像素方塊，取代圓角。所有卡片、按鈕、輸入框統一用這組 clip-path，`--pixel-notch` 可依元件尺寸縮放（小元件用 4px）。

### Bayer Dither Texture

```css
/* 50% 網點（中灰替代） */
background-image: repeating-conic-gradient(#0D0D0D 0% 25%, transparent 0% 50%);
background-size: 4px 4px;
/* 25% 網點（淺灰替代，加大 size 降低密度）*/
background-size: 6px 6px;
```

用於：hero 底紋、卡片標題列底色、進度條未完成段、圖片 hover 遮罩。永遠只用 Ink Black 或 Signal Red 當網點色，底色永遠是 Paper White。

### Cards / Panels

- Paper White 底 + `2px solid #0D0D0D` + pixel-corner
- Hover：`6px 6px 0 #0D0D0D` 硬陰影，無位移動畫（`transform: none`，只有陰影瞬間出現，模擬像素跳動不做平滑補間）

### Buttons

- 預設：透明底 + 2px 黑框 + pixel-corner，terminal 字型
- Primary：Ink Black 底、Paper White 字
- Hover：背景與文字反色（黑↔白），Signal Red 版本 hover 轉純黑
- Active/pressed：陰影收為 `2px 2px 0`（按下去的視覺回饋）

### Tags / Badges

- pixel 字型（極短文字）+ 2px 黑框 + 無圓角（直角）
- 選取態：Signal Red 底 + Paper White 字

### Scanline Overlay

```css
background-image: repeating-linear-gradient(
  0deg, rgba(13,13,13,0.08) 0px, rgba(13,13,13,0.08) 1px,
  transparent 1px, transparent 3px
);
```

疊加在 hero 圖片或深色面板上，模擬 CRT 掃描線，opacity 極低（0.06-0.1）避免影響可讀性。

### Progress / Meter

- 外框 2px 黑，內部用 50% Bayer 網點填充已完成部分，未完成部分留白紙色

---

## 5. Layout Principles

- **窄版置中**：max-width 880px，模擬終端機/收據紙的窄版閱讀感
- **模組化網格**：卡片牆 `repeat(auto-fill, minmax(240px, 1fr))`，gap 固定 16px（像素網格感，不用奇數間距）
- **無漸層背景**：頁面底色永遠純色 Paper White，深度靠邊框與陰影堆疊，不靠漸層
- **標題前綴符號**：section 標題一律加 `>_` 或 `[ ]` 終端機提示符前綴
- **像素網格對齊**：所有 padding/margin 用 4 的倍數（4/8/16/24/32），呼應像素網格邏輯

---

## 6. Depth & Elevation

**零模糊。** 深度語言是「像素位移」，只有兩層：

1. 平放（預設）：只有 2px 黑框，無陰影
2. 抬起（hover/focus）：`6px 6px 0 #0D0D0D` 硬邊位移陰影，瞬間出現無 transition 或極短 `0.05s steps(2)` 製造跳幀感

Motion 全部去除 easing 曲線，改用 `steps()` timing function（如 `steps(3, end)`）讓動作看起來像逐格播放，符合低更新率的 1-bit 螢幕質感。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有「灰階」用 Bayer 網點紋理產生，不用實色灰漸層
- 邊角一律用 pixel-corner clip-path，不用 border-radius
- 陰影永遠硬邊無模糊，位移量取 4 的倍數
- 全站只有一個彩色（Signal Red），其餘靠黑白對比與網點密度分層
- Motion 用 `steps()` 製造逐格跳動感，不用平滑 ease

### Don'ts ❌

- ❌ `border-radius` 圓角（除了刻意的圓形 UI 元件如選取圓點）
- ❌ 模糊陰影、漸層背景、玻璃擬態
- ❌ 第二個彩色色相 — 一旦出現兩種彩色就破壞系統的「限制美學」
- ❌ 平滑 `ease`/`ease-in-out` transition — 用 `steps()` 或直接無過渡
- ❌ 純黑 `#000000` 當文字/邊框色 — 用 `#0D0D0D`（帶一點暖度避免死黑）

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤768px | 卡片牆降為 1-2 欄；pixel-notch 尺寸從 8px 降為 6px |
| ≤480px | body 15px；hero h1 clamp 下限觸發；scanline overlay opacity 降至 0.04（小螢幕更容易顯髒） |
| Hover-less（觸控） | hover 態同時綁定 `:active`，確保觸控裝置也能看到反色效果 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Dithered Pixel" style — a 1-bit retro-computing /
thermal-receipt aesthetic:

- Palette: near-monochrome only — ink black #0D0D0D, paper white #F6F3E7,
  static gray #4A4A46, halftone light #C9C6B8, plus exactly ONE accent
  color: signal red #FF3B2F. Never introduce a second hue.
- "Gray" values are never flat gray — simulate them with Bayer-style
  ordered dithering: repeating-conic-gradient(#0D0D0D 0% 25%, transparent
  0% 50%) at background-size 4px–8px, varying size/density for tone.
- No border-radius anywhere. Use a pixel-notch clip-path instead — cut an
  8px square out of each corner:
  clip-path: polygon(0 8px,8px 8px,8px 0,calc(100% - 8px) 0,
  calc(100% - 8px) 8px,100% 8px,100% calc(100% - 8px),
  calc(100% - 8px) calc(100% - 8px),calc(100% - 8px) 100%,
  8px 100%,8px calc(100% - 8px),0 calc(100% - 8px));
- Shadows: hard offset only, no blur — box-shadow: 6px 6px 0 #0D0D0D.
  No transitions with ease curves — use steps(3, end) or none.
- Fonts: 'VT323' for headings/buttons/UI labels (terminal pixel font,
  weight 400 only), 'Space Mono' for body text (16px, line-height 1.7),
  'Press Start 2P' ONLY for very short badge text (3-6 characters max).
- Buttons: transparent or black fill, 2px black border, pixel-notch
  corners, hover = invert black/white.
- Optional scanline overlay on hero/dark panels:
  repeating-linear-gradient(0deg, rgba(13,13,13,.08) 0 1px,
  transparent 1px 3px), opacity 0.06-0.1.
- Section titles prefixed with `>_` or `[ ]` terminal markers.
- Layout: narrow centered column (max-width 880px), 4px-multiple spacing.
```

---

*Original system, 2026-07-13. Design Lab 原創設計系統，非萃取自既有品牌。*