# Design System: Graphite Sketch

> 石墨草稿設計系統 — 一位設計師在交稿前的草稿桌：鉛筆灰階打底、藍圖式虛線輔助格線、紅鉛筆校對記號。整個介面看起來像「還沒定案、仍在推敲」的工作稿，而不是拋光完成品。

---

## 1. Visual Theme & Atmosphere

**Design Philosophy:** This is the desk of a designer mid-draft — graphite pencil under-sketch, blueprint construction lines, a red pencil for corrections. Every surface reads as "in progress": rough double-traced outlines (a line drawn twice for confidence), corner registration marks borrowed from print production, dashed guide lines that expose the underlying grid instead of hiding it. Color is almost entirely absent — grayscale carries the whole system — so the single red pencil accent lands with maximum weight every time it appears.

**Atmosphere Keywords:** Draft, Analytical, Precise-but-loose, Blueprint, Editorial, Restrained, Graphite, Corrective

**Visual Anchors:**
- Paper-white canvas with a faint graphite grain overlay（SVG turbulence noise, 極低透明度）
- 雙描邊框（sketch-border）— 主框線 + 偏移旋轉的次框線，像手畫兩次確認位置
- 四角登記記號（registration corner marks）— 借用印刷校色十字/裁切線語彙
- 虛線構造線（dashed guide lines）貫穿版面，像藍圖底稿還沒擦掉
- 唯一色彩：紅鉛筆校對色，只用於標記、圈選、箭頭、極少數強調
- 手繪感標題字體 + 楷書中文正文，維持草稿感但仍可長篇閱讀

**Mood Board References:**
- 建築師的藍圖描圖紙與丁字尺輔助線
- 印刷打樣的裁切線／十字規（registration marks）
- 設計師交稿前紅筆校對的草圖
- 素描本裡反覆疊線確認輪廓的鉛筆稿

---

## 2. Color Palette & Roles

### Core Palette

| Swatch | Name | Hex | Role |
|--------|------|-----|------|
| ⬛ | 石墨黑 Graphite Black | `#262624` | Ink — 文字、框線、登記記號 |
| ◼️ | 炭灰 Charcoal Grey | `#5A5854` | Secondary — 副標、次要文字、圖示 |
| ◻️ | 塵灰 Dust Grey | `#9B9891` | Muted — 說明文字、停用狀態 |
| ▫️ | 導引線灰 Guideline Grey | `#CBC7BE` | 虛線構造線、分隔線、table 邊框 |
| ⬜ | 草稿紙白 Draft Paper White | `#F3F0E9` | Canvas — 頁面底色（微暖白） |
| ⬜ | 描圖紙白 Tracing Paper | `#FFFFFF` | Surface — 卡片、輸入框表面 |
| 🔴 | 紅鉛筆 Red Pencil | `#C1392B` | Accent — 校對圈選、箭頭、唯一強調色 |

**Rule:** 紅鉛筆色全站僅作「校對標記」用途（圈選、劃線、徽章、關鍵 CTA），出現頻率必須遠低於灰階——它是例外，不是裝飾。禁止把紅鉛筆色鋪成大面積背景。

### Text Colors

| Role | Hex | Use |
|------|-----|-----|
| Text 主文 | `#262624` | headings, body |
| Text Muted 次要 | `#5A5854` | captions, meta, labels |
| Text Faint 極弱 | `#9B9891` | placeholder, disabled, footnote |

### Semantic Colors

| Role | Color | Hex | Note |
|------|-------|-----|------|
| Accent / Danger 校對 | `#C1392B` | 紅鉛筆同色 — 錯誤、必填星號、刪除線 |
| Success 確認 | `#4A6350` | 低飽和墨綠，僅文字/圖示用，不做背景 |
| Info 註記 | `#5A5854` | 沿用 Charcoal，不另設藍色系 |

### Surface & Depth

| Layer | Background | Border | Use |
|-------|-----------|--------|-----|
| Canvas | `#F3F0E9` + 石墨顆粒紋理 overlay | — | 頁面底 |
| Surface | `#FFFFFF` | 雙描邊 sketch-border | 卡片、輸入框、標本框 |
| Annotation | transparent | 1px dashed `#C1392B` | 紅鉛筆圈選/引線 |
| Overlay | `rgba(38,38,36,0.85)` | — | Lightbox 底 |

---

## 3. Typography Rules

### Font Families

| Token | Stack | Use |
|-------|-------|-----|
| `--font-hand` | 'Architects Daughter', 'LXGW WenKai TC', sans-serif | 標題、標籤、按鈕、登記記號文字 — 建築師手寫感 |
| `--font-body` | 'LXGW WenKai TC', 'Architects Daughter', serif | 正文 — 楷書筆意撐起長文閱讀 |
| `--font-mono` | 'Space Mono', monospace | 尺寸標註、色碼、座標、量測數字 |

**Pairing logic:** Architects Daughter 是建築製圖師的手寫字跡，天生帶著「草稿、未定案」的氣質，用在標題與標籤上立刻建立草圖語境；LXGW WenKai TC（霞鶩文楷）的楷書筆劃讓中文正文維持書寫感又不犧牲可讀性；Space Mono 專門處理量測數字與色碼，暗示「這是精密的草稿，不是隨手塗鴉」。

### Scale

| Element | Size | Font | Weight | Note |
|---------|------|------|--------|------|
| h1 | clamp(2.1rem, 5.5vw, 3rem) | hand | 400 | letter-spacing 0.01em |
| h2 | 1.7rem | hand | 400 | margin-top 3rem |
| h3 | 1.25rem | hand | 400 | |
| Body | 17px（mobile 16px） | body | 400 | line-height 1.85 |
| 量測標註 | 0.7–0.8rem | mono | 400 | letter-spacing 0.04em, 全大寫 |
| Caption / tag | 0.8–0.95rem | hand | 400 | |

### Link Style

- 連結色 `#262624`，`border-bottom: 1px dashed #CBC7BE`
- **Hover:** 底線變 `1px solid #C1392B`，像紅筆重新描過一次

---

## 4. Component Stylings

### Sketch Border（系統核心 token — 雙描邊）

```css
--stroke: 1.5px solid var(--ink);
--stroke-radius: 3px;
```

每個容器用兩層框：主層 `1.5px solid` 貼齊邊界；`::before` 偽元素做出第二層，`inset: -3px`、`opacity: 0.4`、`rotate(-0.3deg)`，模擬設計師手繪時「描第二次確認輪廓」的痕跡。這取代對稱／不對稱圓角把戲，成為本系統唯一的框線語言。

### Registration Corner Marks（登記記號 — 簽名元件之一）

四角小型十字/L 型記號（借用印刷裁切線），`position: absolute` 貼在卡片四角，`1px solid var(--ink)`，用於 hero、色票卡、標本框。傳達「這是待校對的版面」。

### Cards

- 白底 + sketch-border + registration corner marks（可選）
- Hover：`translateY(-2px)` + 主框線變紅鉛筆色，次描邊 rotate 角度加大到 `-0.6deg`
- 卡片牆 `repeat(auto-fit, minmax(260px, 1fr))` grid

### Tags & Badges

- 透明底 + 1px dashed guideline-grey 框，mono 字型全大寫，膠囊角 `border-radius: 2px`
- 唯一「強調」標籤：紅鉛筆 1px solid 框 + 紅字

### Buttons

- Primary：石墨黑底、紙白字，sketch-border hover 時邊框轉紅鉛筆
- Secondary：透明底 + 1.5px solid ink 框
- Ghost：只有 dashed 底線，無框
- Hover 共通：`transform: translateY(-1px)`，無旋轉（草稿的精確感，不用塗鴉式歪斜）

### Sketch Annotation（紅鉛筆校對標記 — 簽名元件之二）

紅鉛筆手繪圓圈（SVG 橢圓路徑，`stroke-dasharray` 製造不完美筆觸）圈住關鍵字，搭配一條彎曲引線指向旁註文字，模擬設計師在草稿上用紅筆圈出待修改處並寫評語。

### Dimension Line（量測線 — 簽名元件之三）

藍圖式量測標註：兩端 `|←—— 120px ——→|` 虛線+短垂直端點，中間浮出 mono 字型的數值標籤，背景挖空貼齊 canvas 色。用於展示 spacing / size token。

### Dashed Guide Lines（構造線）

`repeating-linear-gradient` 虛線，貫穿 section 標題右側、table 列分隔、卡片間的對齊輔助線。是版面的結構裝置，不只是裝飾分隝。

### Table

- 表頭 `2px solid var(--ink)` 底線，mono 字型全大寫
- 列分隔 `1px dashed var(--guideline)`
- 色碼欄一律 mono 字型

---

## 5. Layout Principles

- **單欄置中，寬版留白**：max-width 960px，padding 40px（mobile 20px）— 草稿桌需要呼吸空間
- **顆粒紋理底**：body 疊一層極低透明度（0.035）SVG turbulence noise，`mix-blend-mode: multiply`，模擬鉛筆在紙面留下的顆粒感
- **虛線格線提示**：hero 與各 section 標題後方接一條延伸到版面邊界的虛線，暗示底下有一張看不見的排版格線
- **登記記號只出現在「待確認」的區塊**：hero、色票卡、標本框 — 不要每個元件都加，會失去意義
- **Sticky header**：草稿紙白底 + `1px solid var(--ink)` border-bottom，無陰影
- **錨點跳轉**：`section[id] { scroll-margin-top: 84px }`

---

## 6. Depth & Elevation

**No blur shadows, no color-based depth.** 深度語言完全靠「線的層次」與「位移」：

1. 平放（預設）：單層 sketch-border
2. 抬起（hover）：`translateY(-2px)` + 主框線轉紅鉛筆色 + 次描邊角度加大
3. 覆蓋（overlay/lightbox）：`rgba(38,38,36,0.85)` 純色遮罩，不用漸層或模糊
4. 量測線與登記記號本身不參與深度變化——它們是「標註層」，永遠平貼在最上層

Motion 精簡：`transform` 0.12s ease，只做 translateY，禁止 rotate 超過 1°（草稿的精確感 vs 塗鴉的隨性感的分界線）。

---

## 7. Do's and Don'ts

### Do's ✅

- 所有容器用雙描邊 sketch-border，這是系統唯一的框線語言
- 紅鉛筆色只做「校對標記」：圈選、箭頭、關鍵 CTA、必填提示
- 虛線構造線可以貫穿版面當結構裝置，不只是分隔線
- 登記記號只放在少數「待確認」區塊，保持稀有性
- 標題用手寫建築字體，正文用楷書，量測數字用等寬字體
- Hover 只做位移與變色，不做誇張旋轉

### Don'ts ❌

- ❌ 大面積使用紅鉛筆色當背景 — 它是唯一強調色，濫用即失效
- ❌ 模糊陰影、漸層按鈕、玻璃擬態 — 立刻脫離「鉛筆草稿」語境
- ❌ 純黑 `#000` 或純白 `#fff` 當主要墨色 — 墨色是 `#262624`
- ❌ 加入第二種強調色（藍/黃/綠系）— 系統靠「幾乎無色」讓紅色有意義
- ❌ 超過 1° 的旋轉或誇張塗鴉式歪斜 — 這是精密草稿，不是隨手塗鴉
- ❌ 每個元件都加登記記號 — 會從「稀有標記」變成「重複裝飾」

---

## 8. Responsive Behavior

| Breakpoint | Behavior |
|-----------|----------|
| ≤900px | 卡片牆從 auto-fit 多欄收斂為 2 欄；登記記號縮小 40% |
| ≤640px | body 16px、h1 clamp 下限生效；卡片牆 → 1 欄；量測線元件改直排；nav 收進漢堡選單 |
| Print | 白底、隱藏 nav 與 hover 互動、登記記號保留（呼應印刷校對語境） |

---

## 9. Agent Prompt Guide

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

```
Create a page in the "Graphite Sketch" style — a designer's pencil draft, not a
finished product:

- Canvas: warm off-white #F3F0E9 with a very faint (opacity 0.035) SVG
  turbulence-noise grain overlay, mix-blend-mode: multiply
- Grayscale-only palette: ink #262624, charcoal #5A5854, dust grey #9B9891,
  guideline grey #CBC7BE, paper white #F3F0E9, surface white #FFFFFF
- ONE accent color used sparingly: red pencil #C1392B — only for circled
  annotations, arrows, badges, or a single primary CTA. Never as a background fill.
- Every container gets a double-traced "sketch border": a 1.5px solid ink
  border, plus a ::before pseudo-element offset by -3px, opacity 0.4,
  rotated -0.3deg — like a line drawn twice for confidence
- Corner registration marks (small L-shaped print crop-mark crosses) on hero
  and a few key cards only — keep them rare, not on every element
- Dashed construction/guide lines (repeating-linear-gradient) running behind
  section headers and between table rows, like an unerased blueprint grid
- Fonts: 'Architects Daughter' for headings/labels/buttons,
  'LXGW WenKai TC' for Traditional Chinese body text (17px, line-height 1.85),
  'Space Mono' for measurements, hex codes, and dimension labels
- Signature component: a "dimension line" — |←—— 120px ——→| style
  measurement annotation with dashed arrows and a mono-font number label
- Signature component: a red-pencil "sketch annotation" — a hand-drawn
  imperfect SVG circle (stroke-dasharray for rough texture) around a keyword,
  with a curved leader line to a margin note
- Hover states: translateY(-2px) + border turns red pencil color — never
  rotate more than 1deg, this is precise draft energy, not playful doodle energy
- No blur shadows, no gradients, no glassmorphism — depth comes only from
  line layering and displacement
```

---

*Original design system — 石墨草稿, created 2026-07-13 for the Designs Design Lab showcase wall.*