# Design System: Magazine Editorial

> 雜誌誌面設計系統 — 印刷雜誌排版美學的網頁化。黑白為主、留白為骨、髮線分隔為界，一抹校訂紅點題。這是給「內容值得慢讀」的版面用的系統：大字級襯線標題、跨欄正文、首字放大，像翻開一本裝幀考究的雙月刊。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** A print magazine's editorial spread, rendered in a browser without apologizing for it. Every surface behaves like paper under ink — flat, high-contrast, precisely ruled. There is no gradient, no soft shadow, no rounded corner anywhere in this system; confidence comes from typographic scale and negative space, not decoration. The system trusts hairline rules to do the work that borders-with-radius do elsewhere.

**Atmosphere Keywords:** Editorial, Confident, High-contrast, Considered, Typographic, Restrained, Archival, Deliberate

**Visual Anchors:**
- 大字級襯線 masthead 標題（Playfair Display + Noto Serif TC）
- 1px 髮線（hairline rule）取代所有圓角卡片框 — 分欄、分節、表格全靠它
- 首字放大 Drop Cap — 段落第一個字放大 3-4 行高，印刷雜誌正文起手式
- CSS 多欄正文（`column-count`），窄欄距搭配 `column-rule` 細線
- Kicker 標籤：全大寫、寬letter-spacing、搭配「FEATURE — 01」式編號
- 黑白為底，校訂紅只用在極少數強調點（不做滿版色塊）

**Mood Board References:**
- 老派雙月刊的封面與內頁跨版（masthead + kicker + drop cap 三件套）
- 報紙訃聞版與專題版的髮線分欄
- 活版印刷年代的目錄頁（Table of Contents）編排邏輯
- 攝影集畫冊的留白與圖說（caption）字級節制

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | 中文名 | English Name | Hex | Role |
|--------|--------|--------------|-----|------|
| ⬛ | 極墨黑 | Ink Black | `#15120E` | Primary text, headlines, hairline rules, borders |
| ⬜ | 報紙米白 | Paper Cream | `#F6F2E8` | Canvas — page background |
| 🔲 | 版面純白 | Sheet White | `#FFFFFF` | Card / surface background（與米白區隔出前景） |
| 🩶 | 校樣灰 | Proof Gray | `#69645C` | Secondary text, captions, byline, muted copy |
| ▫️ | 版線淺灰 | Rule Gray | `#D9D2C2` | Table dividers, muted hairlines, disabled state |
| 🟥 | 校訂紅 | Editorial Red | `#A31621` | **唯一強調色** — kicker、drop cap、連結 hover、編號 |
| ◽ | 引文米 | Quote Cream | `#ECE6D6` | Blockquote / pull-quote 背景、hover 底色 |

**Rule:** 校訂紅是整套系統唯一的彩色，出現量必須維持在「畫龍點睛」等級——一個版面裡通常只有 kicker、一個連結、一個編號在用它，絕不做背景色塊或大面積填色。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#15120E` | headings, body copy |
| Text Muted 次要 | `#69645C` | captions, byline, meta, footnotes |
| Text Inverse 反白 | `#F6F2E8` | 深色 overlay 上的文字 |

### Semantic Colors

| Role | Hex | Note |
|------|-----|------|
| Accent / Link | `#A31621` | 連結色、hover 底線、kicker 文字 |
| Success 標記 | `#3F5B3F` | 極少用，僅狀態徽章（如「已發布」） |
| Warning 標記 | `#8A6516` | 極少用，僅狀態徽章（如「草稿」） |

### Surface & Depth

| Layer | Background | Border | Use |
|-------|-----------|--------|-----|
| Canvas | `#F6F2E8` | — | 頁面底 |
| Surface | `#FFFFFF` | `1px solid #15120E` | 卡片、specimen 區塊、表格容器 |
| Surface Muted | `#ECE6D6` | `1px solid #D9D2C2` | Pull-quote、hover 狀態底 |
| Overlay | `rgba(21, 18, 14, 0.92)` | — | Lightbox / modal 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Playfair Display', 'Noto Serif TC', serif | 英文大標題、masthead、drop cap |
| `--font-serif` | 'Noto Serif TC', 'Playfair Display', serif | 中文標題與正文 — 襯線讓長文閱讀有印刷質感 |
| `--font-sans` | 'Inter', 'Noto Sans TC', sans-serif | Kicker、caption、meta、UI 標籤 — 與襯線標題形成經典雜誌對比 |

**Pairing logic:** Playfair Display 的高對比襯線負責「這是雜誌」的第一印象，扛大字級標題；Noto Serif TC 延續同一種襯線氣質撐起中文標題與正文；Inter 作為 sans 負責所有「輔助資訊」角色（kicker、圖說、頁碼、標籤）——正文用襯線讀、標籤用 sans 掃，是雙月刊排版的標準對比手法。

### Scale

| Element | Size | Font | Weight | Letter-spacing | Note |
|---------|------|------|--------|-----------------|------|
| Masthead / H1 | clamp(3rem, 8vw, 5.5rem) | display/serif | 700 | -0.01em | line-height 1.05，全版唯一巨字 |
| H2 | clamp(1.8rem, 4vw, 2.6rem) | serif | 700 | -0.005em | 段落章節標題 |
| H3 | 1.4rem | serif | 600 | normal | 卡片/子區塊標題 |
| Body 正文 | 17px（mobile 16px） | serif | 400 | normal | line-height 1.75 |
| Kicker 眉標 | 0.78rem | sans | 700 | 0.16em | 全大寫，搭配編號如「FEATURE — 01」 |
| Caption 圖說 | 0.85rem | sans | 500 | 0.02em | 灰階 |

### Link Style

- 連結色 `#A31621`，預設無底線
- **Hover：`text-decoration: underline`，`text-underline-offset: 3px`，`text-decoration-thickness: 1px`** — 印刷校對紅線的直接聯想，不用波浪或動畫

### Drop Cap（首字放大）

```css
p.lead::first-letter {
  font-family: var(--font-display);
  font-size: 4.2em;
  font-weight: 700;
  float: left;
  line-height: 0.82;
  padding: 0.03em 0.08em 0 0;
  color: var(--ink);
}
```

只用在文章開場第一段，一頁最多一次；首字永遠是墨黑，不用紅色（紅色留給 kicker）。

---

## 4. Component Stylings

### Hairline Rule（系統核心 token）

```css
--hairline: 1px solid var(--ink);
--hairline-muted: 1px solid var(--rule-gray);
--rule-double: 3px double var(--ink); /* 章節分隔用雙線，向活版印刷致敬 */
```

所有分隔一律靠線條，不靠色塊或陰影；卡片邊框、表格、分欄線統一用 `--hairline`。

### Kicker（眉標）

- 結構：`<span class="kicker">FEATURE — 01</span>`
- 全大寫、Inter 700、letter-spacing 0.16em、色 `--accent-red`
- 常搭配左右各一段 24px 髮線，形成「線—字—線」的版頭

### Cards（Article Preview）

- 白底 + `--hairline`，無圓角、無陰影
- 內部結構固定：kicker → H3 標題（serif）→ 摘要（serif muted）→ byline（sans caption）
- Hover：僅 `border-color` 變 `--accent-red` + 標題底線浮現，**不做位移、不做陰影**——雜誌卡片翻頁時不會浮起來

### Buttons

- Primary：墨黑底、米白字、無圓角、Inter 700、letter-spacing 0.04em；hover 反轉為校訂紅底
- Secondary：透明底 + 1px 墨黑框；hover 底色轉 `--quote-cream`
- 一律矩形直角，按鈕永遠是「圖章」感而非「氣泡」感

### Tags / Section Labels

- 矩形無圓角、1px 墨黑框、Inter 700 全大寫、letter-spacing 0.08em
- 語意色只動文字與邊框顏色，背景永遠白或米白（絕不填滿彩色背景）
- 數字編號徽章：`01` `02` 樣式，serif 顯示字級，不用圓形色塊

### Pull-quote / Blockquote

- `--quote-cream` 底 + 上下各一條 `--hairline`（無左邊條、無引號圖示）
- 內文 Playfair Display italic，1.4rem，置中對齊
- 來源標註（byline）用 sans caption，置中，前綴一條 12px 短橫線

### Multi-column Article（招牌元件）

```css
.article-columns {
  columns: 2 280px;
  column-gap: 2.5rem;
  column-rule: var(--hairline-muted);
}
```

窄螢幕自動降回單欄（見第 8 節）；段落首句可選擇性套用 drop cap。

### Table（Color Reference 等）

- 無外框，只有 `thead` 底部一條粗線（`--rule-double`）與每列一條 `--hairline-muted`
- 表頭 Inter 700 全大寫小字級，內文 serif

---

## 5. Layout Principles

- **版心置中**：max-width 1040px，左右 padding 48px（mobile 24px）— 模擬印刷頁面的版心與出血邊
- **12 欄 editorial grid 概念**：主要內容佔 8 欄、側欄/圖說佔 4 欄的比例關係，用 CSS Grid `grid-template-columns: 2fr 1fr` 實現
- **章節分隔**：每個大節之間用 `--rule-double` 雙線 + 上下各 4rem 留白，取代卡片容器包整節
- **Sticky masthead**：頁首列印刊頭風格 — 左側刊名（serif）、右側期號/日期（sans caption），底部一條 `--hairline`
- **錨點跳轉**：`section[id] { scroll-margin-top: 96px }` 預留 sticky header 高度
- **圖文比例**：圖說（caption）永遠比正文小兩級、用 sans、置於圖片正下方靠左

---

## 6. Depth & Elevation

**No blur shadows, no color-based elevation.** 這個系統的深度語言是「紙張的厚度」，只靠線條粗細與留白層級表現，不靠陰影堆疊：

1. 平面（預設）：`1px solid` 髮線，零陰影
2. 強調（章節分隔）：`3px double` 雙線 — 比單線「厚」，代表更高一級的結構分隔
3. 互動（hover）：僅改變 `border-color`（轉校訂紅）或加底線，**不做 translateY、不做陰影放大**
4. 覆蓋（lightbox/modal）：`rgba(21,18,14,0.92)` 深墨 overlay，內容區維持白底 + 1px 框，無陰影

Motion 極度節制：僅 `border-color` 與 `text-decoration` 的 0.15s ease 過渡；系統刻意不用位移/縮放動畫，保持印刷品的靜態尊嚴。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有分隔一律用髮線（1px 或 3px double），不用色塊、不用陰影
- 校訂紅只做點題強調 — kicker、hover 底線、編號，絕不大面積使用
- 標題永遠用襯線字體（Playfair Display / Noto Serif TC），輔助資訊永遠用 sans（Inter）
- 保留大量留白，讓字級本身撐起視覺層級
- Drop cap 每頁最多一次，只在文章正文開場段落使用

### Don'ts ❌

- ❌ 圓角（`border-radius`）— 這套系統沒有任何圓角，出現即破壞印刷感
- ❌ 模糊陰影、漸層背景、玻璃擬態 — 立刻讓版面失去紙感
- ❌ 校訂紅當背景色塊或大面積填色 — 紅色只能是「筆畫」不能是「色塊」
- ❌ Hover 位移/放大動畫 — 這是靜態版面，不是互動 App
- ❌ 標題用 sans-serif — 大標題永遠襯線，破例即失去雜誌調性
- ❌ 多於一種強調色 — 校訂紅是唯一彩色，不加第二個強調色

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤960px | 12 欄 grid → 主欄與側欄疊為單欄；masthead 字級降至 clamp 下限 |
| ≤768px | `.article-columns` 多欄 → `columns: 1`；卡片牆 grid → 1 欄 |
| ≤560px | body 16px；masthead padding 收窄至 24px；kicker 編號換行顯示 |
| Print | `@media print` 隱藏互動元件（按鈕、hover 狀態），保留全部髮線與 drop cap——本系統本來就是設計來印的 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Magazine Editorial" style — a high-end print
magazine layout aesthetic, rendered for the web:

- Palette: near-black ink #15120E, cream paper #F6F2E8, white surface
  #FFFFFF, muted gray #69645C for captions, ONE accent color — deep
  red #A31621 — used sparingly (kickers, link hover, hover borders,
  numbering only, never as a fill/background color)
- Fonts: 'Playfair Display' for large English display headings,
  'Noto Serif TC' for Traditional Chinese headings and body text
  (17px, line-height 1.75), 'Inter' for kickers/captions/UI labels
  (uppercase, letter-spacing 0.08-0.16em)
- Zero border-radius anywhere. Zero blur shadows. Depth comes only
  from 1px solid hairline rules and occasional 3px double rules for
  major section breaks — never from shadow or color elevation
- Kicker labels: small uppercase sans-serif with wide letter-spacing,
  paired with a section number like "FEATURE — 01", accent-red text
- Drop cap: first letter of a lead paragraph enlarged ~4.2em via
  ::first-letter, serif display font, floated left, ink-black (not
  accent color), max one per page
- Multi-column body text: CSS `columns: 2 280px` with a thin
  `column-rule` hairline, collapsing to a single column under 768px
- Buttons/tags: rectangular, no rounding, 1px ink border or solid
  ink fill; hover inverts to the red accent, never scales or lifts
- Links: red #A31621, hover = solid underline with 3px offset,
  no wavy/animated underlines
- Generous whitespace, editorial grid feel (wide margins, ~1040px
  content width), sticky masthead-style header with a hairline
  bottom border
```

---

*Original design system for the Designs Hub Design Lab — a print-magazine-editorial world, independent of any hand-drawn or brand-derived system in this repo.*