# Design System: Sci-Fi Fiction 科幻小說

> 復古科幻小說封面設計系統 — 向 1960〜70 年代平裝科幻小說（pulp paperback）致敬：深空藏青封面、泛黃舊紙內頁、粗體橘紅壓縮字、雙線書封邊框、版次編號、星圖裝飾點，把「在二手書店翻到的絕版科幻小說」搬進網頁。這是一套原創設計系統，不對應任何真實作者、出版社或既有科幻作品品牌。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** This system stages the browser as a paperback found on a dusty secondhand bookstore shelf — the kind with a cracked spine, a price sticker half peeled off, and a cover illustration that promised more adventure than the story delivered. Every panel behaves like a printed page: deep navy "cover stock" holds bold condensed titles, while cream "interior paper" carries the reading text. The system leans into mid-century print production quirks — off-register accent color, dot-matrix star fields, catalog stamps — rather than glossy modern sci-fi UI chrome (no neon, no holograms, no glassmorphism). It should feel *printed*, not *rendered*.

**Atmosphere Keywords:** Pulp, Retro-futurist, Paperback, Interstellar, Archival, Condensed, Analog print, Used-bookstore

**Visual Anchors:**
- 深空藏青封面色 + 舊紙米內頁色的強烈冷暖對比
- 雙線（double-rule）書封邊框 — 外粗內細，模仿平裝書封面印刷邊框
- 壓縮體大寫橘紅標題（Oswald 風格），字距略微加寬
- 版次／目錄編號徽章（如 `NO. 0114`、`ED. 7`），角落印章感
- 星圖點陣裝飾 — 不規則分布的星塵銀小圓點，偶爾用細線連成星座
- 訊號金細框與分隔線，像燙金書名邊條
- 輕微紙張紋理暗示（漸層 vignette），沒有任何鏡面高光或發光效果

**Mood Board References:**
- 1960〜70 年代平裝科幻小說封面排版（非特定作品，泛指該時代印刷美學）
- 天文台星圖與星座圖鑑的手繪點線圖
- 舊書店書背排列的燙金字與磨損書封
- 太空競賽年代的公家機關印刷品（任務手冊、目錄卡片）

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🔵 | Deep Space Navy 深空藏青 | `#0B1D33` | Primary background — 封面底色、深色面板 |
| ⬛ | Void Black 太空黑 | `#05090F` | 最深陰影、米色紙上的最深文字 |
| 🟠 | Nebula Orange 星雲橘紅 | `#E8542A` | 主強調色 — 標題文字、主要按鈕 |
| ⬜ | Old Paper Cream 舊紙米 | `#EDE0C8` | 紙頁面板底色、藏青上的文字色 |
| ⚪ | Star Silver 星塵銀 | `#C9D6DF` | 藏青上的次要文字、星點、淡化 UI |
| 🟡 | Signal Gold 訊號金 | `#D4A843` | 強調色 — 版次編號、邊框、徽章 |
| 🔴 | Rust Red 鏽紅 | `#A83232` | 危險／警示語意色 |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Success 成功 | Signal Gold 訊號金 | `#D4A843` | 沿用金色作「已核准／已收錄」語意，不新增綠色破壞復古印刷調性 |
| Warning 警告 | Nebula Orange 星雲橘紅 | `#E8542A` | 沿用主強調色作警示語氣（限量、絕版標記） |
| Danger 危險 | Rust Red 鏽紅 | `#A83232` | 錯誤、停用、絕版下架 |
| Info 資訊 | Star Silver 星塵銀 | `#C9D6DF` | 中性提示、註腳資訊 |

**Rule:** 全系統只用這 7 色。不新增任何飽和霓虹色或漸層色；語意色一律從既有 7 色中選派，不外加。

### Surface & Depth

| Layer | Background | Border | Use |
|-------|-----------|--------|-----|
| Cover Panel 封面面板 | `#0B1D33` | `2px solid #D4A843` 外框 + `1px solid rgba(201,214,223,0.35)` 內框 | Hero、書封展示區 |
| Paper Panel 紙頁面板 | `#EDE0C8` | `1px solid rgba(5,9,15,0.15)` | 內文卡片、色票說明 |
| Deepest Shadow 最深陰影 | `#05090F` | — | vignette 邊緣、overlay 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-display` | 'Oswald', sans-serif | 標題、版次編號、按鈕、徽章 — 壓縮體展示字 |
| `--font-body` | 'Bitter', serif | 正文、說明文字 — 舊紙印刷的閱讀感 |
| `--font-mono` | 'JetBrains Mono', monospace | 目錄代碼、hex 值、catalog 編號數字部分 |

**Pairing logic:** Oswald 的窄體大寫負責封面標題的視覺衝擊力（模仿舊平裝書的木刻活字標題）；Bitter 是為長篇印刷閱讀設計的襯線字，撐起內文段落的書卷氣。兩者絕不互換用途 — 標題永遠不用 Bitter，內文永遠不用 Oswald。

### Type Scale

| Element | Size | Font | Weight | Letter-spacing | Note |
|---------|------|------|--------|-----------------|------|
| h1 | clamp(2.4rem, 6vw, 3.6rem) | display | 600 | 0.03em | 全大寫，line-height 1.1 |
| h2 | 2rem | display | 600 | 0.04em | 全大寫，搭配訊號金分隔線 |
| h3 | 1.4rem | display | 500 | 0.02em | 大寫或首字大寫皆可 |
| Body 正文 | 17px（mobile 16px） | body | 400 | normal | line-height 1.75 |
| Caption / label | 0.8rem | display | 500 | 0.08em | 全大寫，用於徽章、標籤、註腳 |

**Letter-spacing rule:** 所有 display 字級標題一律加寬字距（0.02〜0.04em）模仿壓縮活字排版被拉開的印刷效果；body 字級維持 normal，避免閱讀吃力。

### Link Style

- 連結色：藏青底上用 Star Silver `#C9D6DF`，米紙底上用 Nebula Orange `#E8542A`
- 底線：`text-decoration: underline`，`text-decoration-color` 用 Signal Gold `#D4A843`，`text-underline-offset: 3px`
- Hover：文字色轉 Signal Gold，底線加粗至 2px — 模仿燙金強調

---

## 4. Component Stylings

### Book-Cover Frame（系統核心 token — 雙線邊框）

```css
--frame-outer: 3px solid #D4A843;
--frame-inner-offset: 6px;
--frame-inner: 1px solid rgba(201, 214, 223, 0.4);
```

實作方式：外容器 `border: var(--frame-outer)`，內部再包一層 `padding: 6px` 的子容器套用 `border: var(--frame-inner)`，形成「粗金線 + 細銀線」的雙線書封邊框。四角可選加 `::before`/`::after` 8px 短直角裝飾線模擬印刷套框角標。

### Edition Number Badge（版次編號徽章）

- `font-family: var(--font-mono)` + `var(--font-display)` 混排（前綴字用 display，數字用 mono）
- 底色 `transparent`，`border: 1px solid #D4A843`，`padding: 3px 10px`，`border-radius: 2px`（幾乎無圓角，印章感）
- 範例格式：`NO. 0114`、`ED. VII`、`CATALOG 7749-B`
- 字級 0.8rem，字距 0.08em，Signal Gold 文字色

### Star-Chart Dot Decoration（星圖點陣）

```css
background-image:
  radial-gradient(circle, #C9D6DF 1px, transparent 1.5px);
background-size: 60px 60px, 90px 90px;
background-position: 0 0, 30px 40px;
opacity: 0.5;
```

以兩組不同間距的 `radial-gradient` 疊加製造不規則星點分布；重點裝飾區可額外用內嵌 SVG 畫 2〜3 條細線連接星點模擬星座連線（`stroke: rgba(201,214,223,0.3)`, `stroke-width: 0.5`）。

### Buttons（橡皮章標籤風格）

- Primary：`background: #E8542A`，`color: #EDE0C8`，`border: 1px solid #E8542A`，`font-family: var(--font-display)`，全大寫，字距 0.05em，`border-radius: 2px`，`padding: 10px 24px`
- Secondary：`background: transparent`，`border: 2px solid #D4A843`，`color: #D4A843`
- Disabled：`opacity: 0.35`，`pointer-events: none`
- Hover：primary 底色轉 `#c94620`（加深 10%），secondary 邊框轉實心填色；兩者皆加 `box-shadow: 0 0 0 1px rgba(212,168,67,0.3)` 模擬印章壓印時的墨暈
- 絕不用 `border-radius` 超過 3px — 圓潤按鈕破壞印刷章戳感

### Tags / Badges

| 變體 | 樣式 |
|------|------|
| 版次徽章（edition） | 見上方 Edition Number Badge |
| 類型標籤（genre tag） | 米紙底 `#EDE0C8` + 藏青文字 `#0B1D33`，`border: 1px solid #0B1D33`，膠囊角 2px |
| 警示標籤（warning tag） | 鏽紅底 `#A83232` + 米紙文字，全大寫，用於「絕版」「限量」標記 |

### Cards（書封面板）

- 米紙底 `#EDE0C8` + `1px solid rgba(5,9,15,0.15)`，`padding: 1.5rem`
- 標題用 display 字，內文用 body 字
- Hover：`translateY(-3px)` + `box-shadow: 0 12px 24px rgba(5,9,15,0.35)`，無旋轉、無模糊發光 — 書本被輕輕抬起的實體感

---

## 5. Layout Principles

- **Max-width 1080px**，內距 40px（mobile 20px）— 書頁排版留白比講義寬鬆，模仿書籍版心
- **Grid 卡片牆**：`repeat(auto-fit, minmax(260px, 1fr))`，gap 1.5rem，最小寬度確保書封卡片不被過度擠壓變形
- **雙線書封邊框動機貫穿全頁**：Hero 區、Showpiece 區、任何「展示型」面板都套用 Book-Cover Frame，一般說明文字區塊則不套框（避免過度裝飾）
- **間距節奏**：section 之間 `margin: 4rem 0`，section 內元素 `gap: 1.25rem`，維持穩定的印刷版面呼吸感
- **星圖裝飾只用於深色（navy）背景區塊**，米紙區塊不疊加星點，保持內頁的乾淨閱讀性

---

## 6. Depth & Elevation

深度語言是「封面 vs 內頁」的雙層印刷堆疊，而非傳統陰影系統：

1. **底層（Deep Space Navy）**：頁面背景，帶輕微 vignette（四角漸暗至 Void Black）模擬掃描舊書封時的邊緣暗角
2. **封面層（Cover Panel）**：navy 底 + 雙線邊框 + 星圖點陣，用於 Hero 與 Showpiece，是視覺最重的層級
3. **內頁層（Paper Panel）**：cream 底，扁平無陰影，僅極細邊框，代表「翻開的書頁」
4. **Hover 抬升**：卡片 hover 用實色陰影 `0 12px 24px rgba(5,9,15,0.35)` 而非模糊光暈，維持印刷質感而非螢幕發光感

**Vignette 實作：**
```css
background:
  radial-gradient(ellipse at center, transparent 40%, rgba(5,9,15,0.55) 100%),
  #0B1D33;
```

Motion 統一 `transition: transform 0.2s ease, box-shadow 0.2s ease`，只做位移與陰影深淺，不做旋轉、縮放彈跳或發光脈動。

---

## 7. Do's and Don'ts

### Do's ✅

- 標題一律用 Oswald 全大寫 + 加寬字距，模仿活字印刷的展示體標題
- 深色區塊（navy）才加星圖點陣裝飾，米紙區塊保持乾淨
- 展示型面板（Hero、Showpiece）套用雙線書封邊框，強化「這是一本書」的錯覺
- 版次編號、目錄代碼用等寬字體混排展示體前綴，維持公文／目錄卡片的印刷感
- 陰影一律用實色低透明度色塊，不用模糊光暈或發光效果

### Don'ts ❌

- ❌ 標題用現代無襯線字（如 Inter、Helvetica）— 立刻失去復古平裝書氣質
- ❌ 使用調色盤以外的飽和霓虹色（電光藍、螢光紫）— 這是印刷書封，不是數位介面
- ❌ 跳過雙線書封邊框直接用普通卡片呈現展示型內容 — 邊框是系統的核心識別
- ❌ 圓角超過 3px 的按鈕或徽章 — 圓潤感與印章／活字排印美學衝突
- ❌ 用漸層背景取代星圖點陣裝飾 — 星點是這個系統唯一允許的裝飾紋理
- ❌ 在米紙面板上使用星圖點陣或深色 vignette — 內頁應保持乾淨可讀
- ❌ 加入玻璃擬態、模糊光暈、發光邊框等現代科技感效果 — 違反「印刷品」的核心定位

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | 卡片牆多欄（auto-fit minmax 260px）；Hero 雙欄（標題 + 星圖裝飾並排） |
| 768px〜1023px | 卡片牆縮為 2 欄；Hero 改單欄堆疊，星圖裝飾移至標題後方作背景 |
| ≤767px | 卡片牆 → 1 欄；h1 降至 clamp(2rem, 8vw, 2.6rem)；按鈕列直排；雙線邊框內距縮小至 4px |
| ≤480px | body 字級降至 16px；徽章與標籤改為可換行 flex-wrap；色票網格降為 2 欄 |

---

## 9. Agent Prompt Guide

```prompt
Create a page in the "Sci-Fi Fiction" style — a retro 1960s-70s pulp paperback
sci-fi book-cover aesthetic:

- Background: Deep Space Navy #0B1D33, with a subtle vignette darkening toward
  the corners using radial-gradient(ellipse at center, transparent 40%,
  rgba(5,9,15,0.55) 100%)
- Paper panels (for body content/cards): Old Paper Cream #EDE0C8 background,
  Void Black #05090F text, thin 1px border rgba(5,9,15,0.15)
- Titles: 'Oswald' font, uppercase, letter-spacing 0.03-0.04em, color
  Nebula Orange #E8542A on navy backgrounds
- Body text: 'Bitter' serif font, 17px, line-height 1.75, Old Paper Cream
  #EDE0C8 on navy or Void Black #05090F on cream
- Signature component — book-cover double-rule frame: outer 3px solid
  Signal Gold #D4A843 border, inner nested container with 6px offset and
  1px solid rgba(201,214,223,0.4) border. Apply to hero sections and any
  "showpiece" panel.
- Edition/catalog badges: monospace + Oswald mixed text like "NO. 0114" or
  "ED. VII", transparent background, 1px solid Signal Gold border, sharp
  2px border-radius, gold text
- Star-chart dot decoration on navy backgrounds only: two overlaid
  radial-gradient(circle, #C9D6DF 1px, transparent 1.5px) layers at
  different background-size (60px/90px) for irregular star density;
  optionally connect a few dots with thin SVG lines
  (stroke rgba(201,214,223,0.3), stroke-width 0.5) to suggest constellations
- Buttons: rubber-stamp style — Nebula Orange #E8542A fill for primary,
  transparent + 2px Signal Gold #D4A843 border for secondary, sharp corners
  (border-radius ≤ 2px), uppercase Oswald text, letter-spacing 0.05em
- Full palette (use only these 7): Deep Space Navy #0B1D33, Void Black
  #05090F, Nebula Orange #E8542A, Old Paper Cream #EDE0C8, Star Silver
  #C9D6DF, Signal Gold #D4A843, Rust Red #A83232 (danger/warning only)
- No neon colors, no glassmorphism, no glow/blur shadows, no rounded-pill
  buttons — this is a printed book cover, not a futuristic UI. Shadows are
  flat, low-opacity, dark color blocks: 0 12px 24px rgba(5,9,15,0.35)
- Layout: max-width 1080px, generous section spacing (4rem between
  sections), card grid repeat(auto-fit, minmax(260px, 1fr))
```

---

*Original design system created for Design Lab — Sci-Fi Fiction, 2026*