SOS 設計系統
藝術方向
高級、平靜、公民參與、以人為本。想像編輯雜誌遇上緊急應變中心 — 自信但不驚慌。
可以： 超大字級編輯標題、大量留白、強烈的左對齊網格搭配刻意不對稱、偶爾使用滿版出血區塊、微妙的電影打光（每個深色區段最多一個柔和徑向漸層）、僅在疊加層上使用克制的玻璃效果、緊急紅色僅作為精確點綴。
不可以： 霓虹發光、飽和紅色背景、表情符號圖形、到處都是通用儀表板卡片、帶有沉重陰影的浮動卡片、持續旋轉的物件、多個相互競爭的漸層、粒子背景。
經驗法則：如果紅色覆蓋超過視口約 5%，就太多了。
顏色代碼
在 src/app/globals.css 中的 Tailwind v4 @theme 下定義一次。元件只使用代碼工具（bg-ink、text-paper、text-accent），絕不使用原始十六進位。
| 代碼 | 值 | 用途 |
|---|---|---|
--color-ink | #101318 | 主要深色背景 |
--color-ink-raised | #1B2027 | 深色表面、手機邊框、深色背景上的卡片 |
--color-ink-line | #2A313B | 深色背景上的分隔線 |
--color-paper | #F5F6F7 | 淺色區段背景 |
--color-paper-line | #E1E4E8 | 淺色背景上的分隔線 |
--color-accent | #D93642 | 強調色：行動呼籲按鈕、關鍵標記、狀態指示點 |
--color-accent-strong | #B8232F | 淺色背景上的強調文字（在 #F5F6F7 上符合 AA 標準） |
--color-accent-soft | #F6E8EA | 淺色背景上的色調背景、徽章 |
--color-text-dark | #171A20 | 淺色背景上的內文 |
--color-text-light | #F7F8FA | 深色背景上的內文 |
--color-muted-dark | #9AA2AD | 深色背景上的低調文字（在 #101318 上 ≥ 4.5:1） |
--color-muted-light | #5E6672 | 淺色背景上的低調文字（在 #F5F6F7 上 ≥ 4.5:1） |
對比注意事項：
#858D98（提供的低調色）僅在深色背景上適用於大字型；內文請使用--color-muted-dark。#D93642按鈕上的白色文字約為 4.6:1 — 適用於 ≥ 16px 半粗體的按鈕標籤。更改後請務必驗證。- 淺色背景上的紅色文字必須使用
--color-accent-strong。 - 切勿僅用顏色傳達狀態 — 請搭配標籤或圖示。
狀態顏色（僅限追蹤區段）：待處理 = 琥珀色 #C98A1B + 時鐘圖示，進行中 = 強調色紅色 + 無脈衝點，已清除 = 綠色 #2F8F5B + 勾選圖示。務必有標籤。
字體排印
- 字型：一個可變無襯線字型，透過
next/font/google引入（首選：Inter Tight 用於顯示 + Inter 用於內文，或僅用 Geist）。display: "swap"，子集latin，最多 2 個字型家族。 - 標題：粗細 600–700，字距緊縮（
-0.03em到-0.045em），行高 0.95–1.05。 - 內文：粗細 400，行高 1.6，最大寬度約 65ch。
- 眉列文字：12–13px，全大寫，
tracking-[0.18em]，粗細 500，低調顏色，通常前面有一條短紅色分隔線。
流體比例（在 @theme 中設定為 --text-*）：
--text-display: clamp(3rem, 1.2rem + 7.5vw, 9rem); /* 英雄區 h1 */
--text-h2: clamp(2.25rem, 1.2rem + 4.2vw, 5.5rem);
--text-h3: clamp(1.375rem, 1rem + 1.4vw, 2.25rem);
--text-lead: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
--text-body: 1rem; /* 在 ≥ md 時為 1.0625rem */
--text-small: 0.875rem;
--text-eyebrow: 0.8125rem;
在 320px 寬度下，英雄區標題必須不溢出 — 請特別測試「Every Second Matters.」這個句子。
佈局與間距
- 容器：
max-w-[1440px]，側邊內距clamp(1.25rem, 4vw, 4rem)。 - 在 ≥ lg 螢幕上使用 12 欄網格；不對稱跨欄（例如 7/5、5/7、offset-1）。
- 區段垂直節奏：上下
clamp(5rem, 10vw, 10rem)。 - 間距比例：以 4px 為基礎（Tailwind 預設）。偏好使用 6、8、12、16、24、32 這些步長。
- 圓角：小型控制項 6px，卡片 14px，手機外框約 2.6rem 外圓角。
表面與區段節奏
交替使用深色與淺色來營造章節感： 英雄區（深色）→ 關於（淺色）→ 運作方式（深色）→ 類別（淺色）→ 展示（深色，滿版出血）→ 註冊（淺色）→ 追蹤（深色）→ 協調（淺色）→ 常見問題（淺色）→ 最終行動呼籲（深色，電影打光）→ 頁尾（深色）。
打光：每個深色區段最多一個 radial-gradient，低不透明度（≤ 0.18），紅色或冷灰色調。靜態 — 永不動畫。
玻璃效果：bg-white/5 + backdrop-blur-md + 1px ink-line 邊框，僅用於導航列和小型疊加層。不使用大型模糊面板（效能考量）。
元件
- 主要按鈕： 強調色背景、淺色文字、最小高度 48px、水平內距 20–28px、懸停時向右位移 2px 的細微箭頭圖示。
- 次要按鈕： 透明、1px 邊框（深色背景上用
ink-line/ 淺色背景上用paper-line），相同尺寸。 - 無商店/下載按鈕 — 此頁面沒有安裝行動呼籲按鈕，請參閱 CLAUDE.md「範圍：展示，非安裝漏斗」。
- 眉列文字： 紅色 24px 分隔線 + 全大寫標籤。
- 草稿徽章： 小型琥珀色輪廓藥丸形狀「草稿 — 待確認」；僅出現在包含草稿內容的區段。
- 類別方塊： 圖示（24px lucide，筆劃 1.5）+ 標題 + 一行描述；極細邊框，無沉重陰影；懸停 = 邊框顏色變化 + 上移 2px。
- 手機外框： 請參閱
app-screenshot-showcase技能。
圖示
僅使用 lucide-react，筆劃 1.5，尺寸 20/24/32。每個概念一個圖示；圖示輔助文字，絕不取代文字。
完成視覺工作前的檢查清單
- 僅使用代碼；元件中無原始十六進位
- 紅色使用有所克制；狀態不僅靠顏色傳達
- 標題層級一目了然；每個視口一個主導元素
- 深色/淺色節奏保持完整
- 任何新的顏色搭配都已檢查對比度
- 在 320px 寬度下看起來是有意為之，而非簡單縮小