# Design System: Nostalgia 復古桌面

> Direction from TypeUI's Nostalgia design skill（typeui.sh）；本實作與配色細節為原創撰寫。
> 把介面變成一台復古作業系統：烤吐司般的米色桌面、濃縮咖啡色墨字、發光橘色強調、俐落的 taupe 邊框，一切都像是一個可以觸摸的實體桌面控制項。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** Nostalgia 不是「懷舊裝飾」，而是把介面重建成一整套復古桌面作業系統的隱喻。每一個表面都有邊框，每一個面板都有 chrome（標題列、控制點、陰影），每一次互動都該讓人聯想到實體桌面控制項——按下去會凹陷、視窗有重量、資料夾有分頁。系統性格是「玩味但精確」：色彩溫暖懷舊，結構卻極度規矩，銳利到近乎工程感。

**Atmosphere Keywords:** Retro-OS, Toasted-cream, Tangible, System-precise, Editorial, Warm-terminal, Vintage-manual, Crisp

**Visual Anchors:**
- 烤吐司米色桌面（`#FFEEDD`）— 永遠是 wallpaper 色，不是內容表面色
- 視窗式面板：標題列 + traffic-light 控制點 + 1px taupe 邊框
- 銳利角度：surface/control 圓角上限約 3px，「不軟」是系統的核心規則
- 暖色方向性實體陰影（`2px 2px 0` 系）取代模糊光暈
- 資料夾/檔案隱喻：folder-tab 分頁式內容分組、file-icon 項目符號
- 按下即凹陷的按鍵回饋（pressed-key active state）

**Mood Board References:**
- 1990s 桌面作業系統（視窗 chrome、圖示格線、選單列）
- 曬褪色的產品手冊與說明書排版
- CRT 終端機夜間模式（暗色模式時的琥珀/橘色掃描線氛圍）
- 復古文字處理軟體的等寬狀態列

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| 🟧 | 烤吐司米 Surface | `#FFEEDD` | Canvas — 桌面與視窗背景，wallpaper 色，只出現在最外層 |
| 🟫 | 溫潤淺褐 Secondary Surface | `#F6E6D6` | 視窗內容區、面板、次要表面 |
| 🔶 | 發光橘 Brand | `#FF631A` | 主強調 — 主按鈕、active 狀態、主要高亮 |
| 🟠 | 深焰橘 Brand Strong | `#D94A00` | 更強的 CTA、active chrome、按下狀態 |
| 🟤 | 濃縮咖啡 Heading | `#381C00` | 標題文字，espresso-brown |
| 🟫 | 深可可 Body | `#4A3826` | 內文、標籤、UI 文字 |
| ⬜ | 邊框褐 Border Taupe | `#C4A483` | 所有面板、按鈕、輸入框的 1px 邊框 — 系統的統一筆觸 |

**Rule:** Surface 只用於最外層桌面背景；視窗與內容一律用 Secondary Surface 或白化更淺的變體，避免整頁扁平——「wallpaper 色屬於視窗後方，不屬於內容表面」。

### Dark Mode（CRT 終端機夜移）

深色模式不是單純反色，而是切換成「關掉燈的終端機」氛圍：桌面沉入深咖啡黑，文字轉為暖米白，橘色強調變得更亮、更像螢光管發光。

| Role | Hex | Note |
|------|-----|------|
| Surface（暗） | `#1A120B` | 深咖啡黑桌面 |
| Secondary Surface（暗） | `#241809` | 視窗/面板底 |
| Brand（暗） | `#FF7A33` | 更亮的發光橘，模擬 CRT 螢光 |
| Brand Strong（暗） | `#FF9457` | 暗色下的強 CTA，避免死暗背景吃色 |
| Heading（暗） | `#FFE9D2` | 暖米白標題 |
| Body（暗） | `#E3C6A3` | 暖米內文 |
| Border（暗） | `#5C4530` | 深褐邊框，維持「有邊框」規則不因暗色消失 |

### Semantic Colors

| Role | Hex | Use |
|------|-----|-----|
| Success 成功 | `#4C7A3D` | 系統確認訊息、完成狀態徽章 |
| Warning 警告 | `#B8860B` | 警示列、待處理標記 |
| Danger 危險 | `#B33A1E` | 錯誤對話框、刪除確認 |

---

## 3. Typography Rules

### Font Families

| Token | Google Font | Use |
|-------|-------------|-----|
| `--font-serif` | **Source Serif 4** | 標題 — 文學感襯線體，像曬褪色的產品手冊標題 |
| `--font-sans` | **Work Sans** | 內文、控制項、UI 文字 — 乾淨的幾何無襯線，系統感 |
| `--font-mono` | **IBM Plex Mono** | 程式碼、metadata、狀態列、系統標籤 — 讀起來像機器輸出 |

**Pairing logic:** Source Serif 4 負責「編輯感」的第一印象——像手冊封面的鉛字標題；Work Sans 撐起控制項與長文的可讀性，幾何線條呼應銳利邊框語言；IBM Plex Mono 只用在「機器在說話」的地方（時間戳、路徑、狀態碼），刻意與其他兩者拉開質感差異。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2.2rem, 5vw, 3rem) | serif | 600 | line-height 1.2 |
| h2 | 1.75rem | serif | 600 | margin-top 2.5rem |
| h3 | 1.25rem | serif | 600 | 常搭配標題列使用 |
| Body | 16px | sans | 400 | line-height 1.7 |
| UI Label / Button | 0.85–0.95rem | sans | 600 | letter-spacing 0.01em |
| Metadata / Code | 0.8–0.85rem | mono | 400–500 | 狀態列、時間戳、路徑 |

### Link Style

- 連結色 `#FF631A`，底線常駐（`text-decoration: underline`，非 hover 才出現）— 復古手冊的連結習慣是「隨時看得見」
- Hover：色轉 `#D94A00` + 背景輕微 `#F6E6D6` 反白，像選單被選取

---

## 4. Component Stylings

### Window Chrome（系統核心 token）

```css
--nostalgia-radius: 3px;      /* 系統圓角上限 */
--nostalgia-border: 1px solid #C4A483;
--nostalgia-shadow: 3px 3px 0 rgba(56, 28, 0, 0.35);
```

所有主要內容容器一律以「視窗」處理：

- 標題列（title bar）：Secondary Surface 深一階或 Brand 底，內含 3 個 traffic-light 控制點（8px 圓點，橘/褐/米三色，僅此處允許 `border-radius: 50%`）
- 視窗本體：Surface/Secondary Surface 底 + 1px taupe 邊框 + `--nostalgia-radius`
- 陰影：`--nostalgia-shadow`，方向固定右下，不做模糊

### Buttons

- **Primary**：`#FF631A` 實心底、白字、1px 邊框（`#D94A00`）
- **Secondary**：透明底、`#4A3826` 邊框與文字
- **Disabled**：不透明度 0.45，邊框轉淺灰褐
- **Pressed-key Active State**（系統招牌互動）：`transform: translate(1px, 1px)` + 陰影從 `3px 3px 0` 收縮為 `1px 1px 0`，模擬實體按鍵被按下去的視覺回饋

### Folder / File 隱喻內容分組

- **Folder-tab 分頁**：section 標題做成資料夾分頁形狀（上方梯形/切角 + 底色與內容區相接），未選取分頁比選取分頁矮一階、色淺一階
- **File-icon 項目符號**：列表項目前綴小方形「檔案圖示」（有摺角的簡化檔案形狀，純 CSS 或 emoji 📄 皆可）取代傳統圓點

### Tags & Badges

- 方角或極小圓角（≤3px）膠囊，taupe 邊框 + Secondary Surface 底，mono 字型顯示狀態碼（如 `[NEW]` `[BETA]`）

### Inputs

- 白/米底、1px taupe 邊框、3px 圓角、focus 時邊框轉 Brand 橘並加 1px 內縮 outline，模擬終端機游標感

---

## 5. Layout Principles

- **固定頂部選單列（Fixed Menu Bar）**：全站頂部常駐一條 Secondary Surface 選單列，內含系統名稱（左）與選單項（右），像經典桌面作業系統的全域選單
- **視窗式構圖**：頁面內容以多個「視窗面板」並置或堆疊組成，而非單一連續捲動文章——每個功能區塊都該感覺像獨立視窗
- **桌面工作區感**：主背景維持 Surface 米色 wallpaper，內容視窗浮於其上，製造「你正在操作一個桌面」的空間感
- **單欄/多欄依內容決定**：資訊密集頁可用多視窗並排（如檔案總管 + 側欄），敘事型內容維持單欄視窗，寬度上限約 960px

---

## 6. Depth & Elevation

**No blur-heavy modern gloss.** 深度語言是「實體物件疊放在桌面上」，一律用方向性硬陰影，不用 `box-shadow` 的 blur 參數：

1. 平放（預設面板）：`3px 3px 0 rgba(56, 28, 0, 0.35)` — 固定右下方向，無模糊
2. 抬升（hover 可互動卡片）：陰影加大為 `5px 5px 0 rgba(56, 28, 0, 0.4)` + `translate(-1px, -1px)`，像視窗被拖曳抬起一角
3. 按下（active/pressed）：陰影收縮為 `1px 1px 0` + `translate(1px, 1px)`，模擬實體按鍵下壓
4. 對話框/Modal：底層加 `rgba(56, 28, 0, 0.5)` 純色遮罩（不加 blur backdrop-filter），維持「復古系統沒有毛玻璃」的規則

Motion 全部輕量、瞬間感：`transform`/`box-shadow` 0.08–0.12s ease-out，不用彈簧曲線，回饋要「喀」一聲的乾脆感，不做柔和過渡。

---

## 7. Do's and Don'ts

### Do's ✅

- 每個表面、每個面板都要有 1px taupe 邊框 — 這是系統的統一語言
- 視窗一律配標題列，重要面板加 traffic-light 控制點
- 按鈕/可點擊項目要有可見的 pressed-key 下壓回饋
- 標題用 Source Serif 4，控制項與內文用 Work Sans，機器輸出用 IBM Plex Mono
- 陰影固定方向（右下），硬邊、不模糊

### Don'ts ❌

- ❌ 模糊光暈陰影、毛玻璃 backdrop-filter、現代 gloss 漸層 — 立刻破壞復古桌面的「實體感」
- ❌ 過大圓角（12px/16px/9999px/50% 除了 traffic-light 小圓點）— 系統規則是「銳利不柔軟」
- ❌ 冷灰 / 中性灰階背景 — 一律維持暖米/咖啡/橘的溫暖色域，即使是分隔線也要偏 taupe 而非純灰
- ❌ 把 wallpaper 米色（`#FFEEDD`）直接當內容表面用 — 桌面色只能在視窗「後方」
- ❌ 無邊框的「懸浮」卡片 — 復古桌面裡沒有無邊框元件

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≥1024px | 多視窗並排（如 2–3 欄面板 grid）；選單列展開完整項目文字 |
| 768–1023px | 視窗 grid 收為 1–2 欄；選單列項目維持文字但間距收緊 |
| ≤767px | 所有視窗堆疊為單欄；固定選單列簡化為系統名稱 + 漢堡選單圖示；標題列控制點縮小但保留 |
| ≤480px | 視窗內邊距收緊、字級下調一階；folder-tab 分頁改為可橫向捲動的單列 |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Nostalgia 復古桌面" style — a retro desktop-OS interface:

- Desktop background (wallpaper only, never content surfaces): toasted-cream #FFEEDD
- Window/panel surfaces: secondary surface #F6E6D6, always with a 1px solid
  taupe border #C4A483 and border-radius capped at 3px
- Every primary content container is a WINDOW: title bar on top (secondary
  surface, slightly darker) with 3 small traffic-light control dots
  (8px circles, only place border-radius:50% is allowed), bordered body below
- Headings: espresso-brown #381C00, body/UI text: #4A3826
- Brand accent: orange #FF631A (primary), #D94A00 (strong/active)
- Fonts: 'Source Serif 4' for headings, 'Work Sans' for body/UI,
  'IBM Plex Mono' for code/metadata/status text
- Buttons: flat fill with border; pressed/active state = translate(1px,1px)
  + shadow shrinks from `3px 3px 0 rgba(56,28,0,.35)` to `1px 1px 0` —
  visible physical press-down feedback
- Shadows: hard, directional, bottom-right only — NEVER blur.
  Default `3px 3px 0 rgba(56,28,0,.35)`, hover lifts to `5px 5px 0`
- Content groups can use folder-tab styled section headers and
  file-icon (📄 or clipped-corner square) list bullets
- Layout: fixed top menu bar + composed window panels over the cream
  desktop, not one continuous scroll of plain content
- Dark mode: deep brown-black surfaces (#1A120B), warm cream text
  (#FFE9D2), brighter glowing orange (#FF7A33) — CRT-terminal atmosphere
- No large radii, no gray, no blur — sharp, warm, tangible
```

---

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