# Design System: Riso Print 孔版印刷

> 一份獨立誌（zine）的印刷夢：把 Risograph 孔版印刷機的油墨味搬進網頁——套色不準的複印錯位、螢光專色油墨、米紙的粗顆粒紋理。這不是懷舊，是地下刊物的宣言。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** 想像一台老式孔版印刷機，每次只能上一種螢光油墨，紙張是沒有漂白的米色再生紙，滾筒每印一色都會有 1-3px 的套版誤差。這個系統不追求數位平面設計的「完美對齊」，而是刻意保留印刷過程的物理痕跡——顆粒感、色偏、油墨疊印時的 multiply 暗部。它是獨立誌、地下藝術展海報、社運文宣的美學語言：便宜、快速、大聲。

**Atmosphere Keywords:** Indie zine, Poster art, Analog print, Fluorescent, Grainy, Off-register, Bold, DIY, Underground, Graphic

**Visual Anchors:**
- 米紙／再生紙底色，覆蓋低透明度顆粒雜訊（模擬孔版印刷的紙面粗糙感）
- 2-3 支螢光專色油墨（不是印刷四色 CMYK，是孔版特有的螢光單色油墨）
- 套版錯位（misregistration）——同一形狀用兩種顏色印兩次，刻意位移 2-6px，用 `mix-blend-mode: multiply` 疊色
- 粗黑幾何無襯線字體，標題常見輕微旋轉或超大字級溢出版面
- 硬邊塊面色塊，幾乎不用漸層（漸層不屬於孔版印刷的物理限制）

**Mood Board References:**
- Risograph 印刷機的實際印刷樣本（GR3770、MZ870 系列機型常見色域）
- 1990s 獨立音樂海報、地下漫畫誌（mini-comix）
- 螢光廣告顏料、螢光麥克筆
- 東京／倫敦獨立書店的自製 zine 陳列桌

---

## 2. Color Palette & Roles

### Core Palette（7 色）

| Swatch | 中文名稱 | English Name | Hex | Role |
|--------|---------|--------------|-----|------|
| 🩷 | 螢光桃紅 | Fluoro Magenta | `#FF3EA5` | Primary spot ink — 主標題、主按鈕、misregistration 主色 |
| 🩵 | 螢光青 | Fluoro Teal | `#00B2A9` | Secondary spot ink — 次要強調、連結、misregistration 副色 |
| 🟡 | 芥末黃 | Mustard Yellow | `#F5B700` | Accent spot ink — 標籤、警示強調、疊色實驗第三色 |
| ⬜ | 米紙白 | Rice Paper | `#F2EBDD` | Canvas — 頁面底色（未漂白紙感） |
| ⬛ | 孔版墨黑 | Stencil Ink | `#1C1B19` | Ink — 正文、外框線、深色版面 |
| ◽ | 沉靜灰 | Quiet Gray | `#8A8378` | Muted — 次要文字、分隔線、說明文字 |
| 🟣 | 深靛藍 | Deep Indigo | `#3A2E6E` | Rare spot ink — 特殊強調、深色卡片底、對比用重色 |

**Rule:** 螢光油墨色（桃紅／青／黃）永遠是「印在米紙上的一層墨」，不當純背景鋪滿整頁；深靛藍與墨黑負責穩住高彩度色塊，避免整頁螢光過曝。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#1C1B19` | 標題、正文 |
| Text Muted 次要 | `#8A8378` | 說明文字、圖說、時間戳 |
| Text Inverse 反白 | `#F2EBDD` | 深色底（墨黑／靛藍）上的文字 |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | 螢光青延伸 | `#009688` | 較深的青，避免與 Secondary 混淆 |
| Warning 警告 | 芥末黃延伸 | `#C98A00` | 較深的黃，文字可讀 |
| Danger 危險 | 桃紅延伸 | `#D6217A` | 較深的桃紅，警示用不刺眼 |

### Surface & Depth

| Layer | Background | Border / Effect | Use |
|-------|-----------|-----------------|-----|
| Canvas | `#F2EBDD` + 顆粒雜訊疊層 | — | 頁面底 |
| Surface | `#FFFFFF` 微偏米 `#FBF8F2` | `2px solid #1C1B19` 硬邊框 | 卡片、色票、表格容器 |
| Ink Block | 螢光專色純色塊 | 無圓角或極小圓角（2-4px） | 標籤、按鈕、色塊裝飾 |
| Dark Surface | `#1C1B19` 或 `#3A2E6E` | 反白文字 | 對比強調區塊、footer |
| Misprint Layer | 疊色形狀 | `mix-blend-mode: multiply` + 位移 2-6px | 套版錯位效果 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Space Grotesk', sans-serif | 英文標題、數字、Latin 強調字 — 粗獷幾何感 |
| `--font-tc` | 'Noto Sans TC', 'Space Grotesk', sans-serif | 中文標題與正文 — 現代無襯線黑體 |
| `--font-mono` | 'Space Grotesk', monospace | 標籤、色碼、meta 資訊（Space Grotesk 本身即帶等寬數字特性） |

**Pairing logic:** Space Grotesk 的方正字懷與略帶未來感的幾何比例，是孔版印刷海報最愛用的「工業感無襯線」；Noto Sans TC 提供對等的粗細與黑體結構，讓中英文標題並排時視覺重量一致，不會一邊纖細一邊笨重。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| Hero H1 | clamp(2.8rem, 8vw, 5.5rem) | display + tc | 700 | 字距收緊 -0.02em，常帶 misregistration 疊字效果 |
| h2 | 2.2rem | display + tc | 700 | 全大寫（英文部分），letter-spacing 0.02em |
| h3 | 1.4rem | display + tc | 700 | |
| Body | 17px（mobile 16px） | tc | 400–500 | line-height 1.7 |
| Label / Tag | 0.78rem | display | 700 | 全大寫，letter-spacing 0.08em |
| Mono / Hex | 0.85rem | mono | 500 | 色碼、meta 標記 |

### Link Style

- 連結色 `#00B2A9`（螢光青），底線 `2px solid`，非虛線非波浪——孔版印刷不做曲線細節
- Hover：背景轉螢光黃 `#F5B700`，文字轉墨黑，模擬「螢光筆劃過」的硬切換（無漸變過場，`transition: none` 或極短 0.05s）

---

## 4. Component Stylings

### Misregistration Token（系統核心效果）

```css
.misprint {
  position: relative;
}
.misprint::before {
  content: attr(data-text);
  position: absolute;
  top: 3px; left: -4px;
  color: var(--fluoro-teal);
  mix-blend-mode: multiply;
  z-index: -1;
}
.misprint::after {
  content: attr(data-text);
  position: absolute;
  top: -3px; left: 4px;
  color: var(--fluoro-magenta);
  mix-blend-mode: multiply;
  z-index: -1;
}
```

任何標題文字都可套用此 token：本體墨黑，`::before`/`::after` 各疊一層偏移的螢光色文字，`mix-blend-mode: multiply` 讓重疊處產生類似真實油墨疊印的深色。

### Grain Texture（顆粒紋理）

```css
.grain {
  position: relative;
}
.grain::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,...feTurbulence...");
  opacity: 0.08;
  mix-blend-mode: multiply;
  pointer-events: none;
}
```

用 SVG `feTurbulence` + `feColorMatrix` 產生的雜訊 data URI 疊在畫布與卡片表面，低透明度、multiply 混合，模擬孔版印刷紙面顆粒與油墨不均勻。

### Cards

- 白偏米底 `#FBF8F2` + `2px solid #1C1B19` 硬邊框，直角或極小圓角（4px）
- 左上角或右上角常貼一塊螢光色三角形/色塊裝飾（`clip-path` 三角）
- Hover：`translate(-2px, -2px)` + 硬邊陰影 `4px 4px 0 #1C1B19`（無 blur）

### Tags & Badges

- 螢光專色純色塊底 + 墨黑文字，全大寫，直角或 2px 圓角
- 語意分類：桃紅＝主要／熱門，青＝次要／新，黃＝限定／注意，靛藍＝特殊
- 數字徽章：方形（非圓形）螢光色塊 + 墨黑等寬數字

### Buttons

- Primary：螢光桃紅底 + 墨黑 2px 邊框 + 墨黑文字，hover 位移 `2px 2px 0 #1C1B19` 硬陰影
- Secondary：透明底 + 2px 墨黑邊框，hover 填滿螢光青
- 按鈕文字一律全大寫 + letter-spacing

### Misprint Demo Block（簽名元件）

多層重疊的螢光色幾何形狀（圓形、長條、三角形）各自位移 3-8px，`mix-blend-mode: multiply` 疊加，展示三色油墨套版誤差的視覺趣味；可搭配一顆「校正十字」圖標（印刷業的 registration mark ✛）強化真實感。

### Dividers

- 粗黑實線 `3px solid #1C1B19`，或螢光色虛線色塊（`repeating-linear-gradient` 硬邊，非圓角虛線）
- 裝飾分隔可用一排小小的 registration mark（✛）重複排列

### Table

- 表頭墨黑底反白字，表格線 `1px solid #1C1B19`，斑馬紋用米紙色與白色交錯（不用灰階）

---

## 5. Layout Principles

- **海報式不對稱版面**：Hero 區塊允許文字大幅溢出、跨越色塊邊界，不強求置中對齊
- **模組化網格但故意輕微錯位**：卡片牆 grid 用 `repeat(auto-fit, minmax(240px, 1fr))`，部分卡片可加 `transform: rotate(-1deg)` 打破絕對網格感
- **色塊即版面元素**：大面積純色矩形/三角形本身就是版面分隔工具，不只是裝飾
- **單欄閱讀寬度**：正文內容 max-width 720px，但 Hero 與圖片區塊可全寬溢出
- **顆粒紋理全頁鋪底**：body 背景與所有 Surface 卡片表面都疊一層低透明度 grain
- **Registration mark 作為版面裝飾**：頁首/頁尾角落放置小型十字校準記號，強化「這是一份印刷品」的錯覺

---

## 6. Depth & Elevation

**No blur, no glassmorphism.** 深度語言是「油墨堆疊」而非光影：

1. 平放（預設）：`2px solid` 硬邊框，無陰影
2. 抬起（hover）：硬邊位移陰影 `4px 4px 0 #1C1B19`，配合 `translate(-2px, -2px)` 位移本體，製造「油墨錯版」的立體感
3. 疊印（misprint 元件）：多層色塊用 `mix-blend-mode: multiply` 疊加，重疊區自然變暗，此為系統唯一的「漸變式」深度來源
4. 強調區塊：純色塊背景（墨黑／靛藍）直接製造對比深度，不靠陰影

Motion 極簡且「卡頓感」：`transition: transform 0.08s steps(2)` 或極短 ease，避免絲滑的數位動畫感——孔版印刷機沒有平滑這回事。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有色塊維持高飽和螢光專色，直接使用，不加漸層或透明度混色（除了 grain 與 misprint 疊層）
- 疊色一律用 `mix-blend-mode: multiply` 模擬真實油墨透光疊印
- 標題可以大到溢出容器邊界——這是海報美學，不是排版失誤
- 邊框永遠硬邊直角或極小圓角，陰影永遠硬邊無 blur
- 保留 1-2 處明顯的「套版誤差」作為系統簽名，不要修得太整齊

### Don'ts ❌

- ❌ 漸層背景、box-shadow blur、玻璃擬態 — 立刻脫離孔版印刷的物理限制感
- ❌ 圓潤大圓角（>8px）或全圓形卡片 — 孔版印刷模板是硬邊切割
- ❌ 柔和莫蘭迪色或大地色系 — 這是螢光油墨系統，飽和度必須夠高
- ❌ 平滑細膩的過場動畫（400ms+ ease-in-out）— 動作要短促、略帶「卡頓」
- ❌ 襯線字體或手寫字體 — 破壞工業印刷的粗獷幾何感
- ❌ 把 misregistration 效果用在全部文字上 — 只用在 Hero 或關鍵標題，過度使用會影響可讀性

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤768px | Hero 字級縮小至 clamp 下限；卡片牆改單欄；misprint demo 形狀縮小排列 |
| ≤600px | body 16px；色票 grid 改 2 欄；表格改卡片式堆疊（每列變一張卡）；registration mark 裝飾隱藏以節省空間 |
| Print | 建議直接關閉 grain 疊層與 misprint blend（列印機無法還原螢光專色與 multiply 疊色的視覺效果） |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Riso Print 孔版印刷" style — a Risograph zine-poster aesthetic:

- Canvas: unbleached rice-paper off-white #F2EBDD with a subtle grain/noise
  texture overlay (SVG feTurbulence data-URI, ~8% opacity, mix-blend-mode: multiply)
- Spot ink palette (use flat, fully saturated — no gradients):
  Fluoro Magenta #FF3EA5, Fluoro Teal #00B2A9, Mustard Yellow #F5B700,
  Stencil Ink (near-black) #1C1B19, Deep Indigo #3A2E6E, Quiet Gray #8A8378
- Fonts: 'Space Grotesk' (bold, geometric) for Latin/display text and numbers,
  'Noto Sans TC' for Chinese, both weight 700 for headings, uppercase +
  letter-spacing 0.02-0.08em on labels/buttons
- Signature effect — misregistration/misprint: duplicate key headline text
  with ::before/::after pseudo-elements offset 3-6px in two spot colors,
  mix-blend-mode: multiply, so the overlap darkens like off-register ink layers
- Borders: 2px solid #1C1B19, hard edges, minimal or no border-radius (0-4px)
- Shadows: hard offset only, e.g. `4px 4px 0 #1C1B19`, never blur;
  hover = translate(-2px,-2px) + the hard shadow appears
- Buttons/tags: flat spot-color fill, black border, uppercase bold text,
  square or barely-rounded corners
- Include at least one "misprint" demo: 3-4 overlapping geometric shapes
  (circles/bars/triangles) in different spot colors, each offset a few px,
  mix-blend-mode: multiply, plus a small registration-mark cross (✛) motif
- Layout: asymmetric poster composition, oversized headline allowed to
  overflow its container, single-column body max-width ~720px
- Motion: short and snappy (0.05-0.1s), no smooth glossy easing
- Never use: blur shadows, glassmorphism, soft pastels, rounded pill shapes,
  serif or handwritten fonts
```

---

*Original design system for the Design Lab showcase wall — 2026-07-13*