Nothing 風格 UI/UX 設計系統
這是一套資深產品設計師的工具包，融合瑞士字體排版、工業設計（Braun、Teenage Engineering）與現代介面工藝。單色調、以字體為驅動、資訊密集而不雜亂。深色與淺色模式均以同等嚴謹度處理。
在開始任何設計工作前，請宣告需要哪些 Google Fonts 以及如何載入它們（請參閱 references/tokens.md 第 1 節）。切勿假設字體已可用。
1. 設計哲學
- 減法，而非加法。 每個元素都必須爭取它的像素。預設為移除。
- 結構即是裝飾。 將網格、資料、層級本身展現出來。
- 單色是畫布。 色彩是事件，不是預設——除非用於編碼資料狀態（見第 3 節）。
- 字體擔負重任。 字級、字重與間距創造層級——而非顏色、圖示或邊框。
- 兩種模式都是第一優先。 深色模式：OLED 黑。淺色模式：暖白。兩者都不是「衍生」而來——兩者都獲得完整的設計關注。請詢問使用者要從哪個模式開始。
- 工業溫度。 技術性與精確性，但絕不冰冷。應能感受到人的觸感。
2. 工藝規則——如何構圖
2.1 視覺層級：三層規則
每個畫面恰有 三個重要性層級。不是兩個，不是五個。就是三個。
| 層級 | 是什麼 | 如何處理 |
|---|---|---|
| 主要 | 使用者第一眼看到的那一件事。一個數字、一個標題、一個狀態。 | 使用 Doto 或 Space Grotesk 顯示字級。--text-display。48–96px 呼吸空間。 |
| 次要 | 輔助內容。標籤、說明、相關資料。 | 使用 Space Grotesk 內文/副標題。--text-primary。緊貼主要層級（8–16px）。 |
| 第三層 | 元資料、導航、系統資訊。可見但從不競爭。 | 使用 Space Mono 說明/標籤。--text-secondary 或 --text-disabled。全部大寫。推到邊緣或底部。 |
測試方法： 瞇著眼看畫面。你還看得出什麼最重要嗎？如果有兩個元素競爭，其中一個需要縮小、淡化或移動。
常見錯誤： 把一切都變成「次要」。大小均勻的元素搭配均勻的間距 = 視覺扁平。要勇敢——讓主要元素大得誇張，讓第三層元素小得誇張。這種對比本身就是層級。
2.2 字體紀律
每個畫面最多使用：
- 2 種字體家族（Space Grotesk + Space Mono。Doto 僅用於英雄時刻。）
- 3 種字體大小（一個大、一個中、一個小）
- 2 種字體粗細（Regular + 另一種——通常是 Light 或 Medium，少用 Bold）
把它想像成預算。每增加一個大小/粗細，都會犧牲視覺一致性。在增加新大小之前，先問：我能否改用間距或顏色來創造這個區別？
| 決策 | 大小 | 粗細 | 顏色 |
|---|---|---|---|
| 標題 vs. 內文 | 是 | 否 | 否 |
| 標籤 vs. 數值 | 否 | 否 | 是 |
| 啟用 vs. 停用導航 | 否 | 否 | 是 |
| 英雄數字 vs. 單位 | 是 | 否 | 否 |
| 區段標題 vs. 內容 | 是 | 選用 | 否 |
經驗法則： 如果想去使用新的字體大小，那很可能是間距問題。改用增加距離來解決。
2.3 間距即意義
間距是溝通關係的主要工具。
緊密（4–8px） = 「這些屬於一起」（圖示 + 標籤、數字 + 單位）
中等（16px） = 「同一組，不同項目」（清單項目、表單欄位）
寬鬆（32–48px） = 「新的一組從這裡開始」（區段分隔）
寬廣（64–96px） = 「這是一個新脈絡」（英雄區到內容區、主要分隔）
如果需要分隔線，那間距很可能錯了。 分隔線是間距對比不足的症狀。只在資料密集的清單中使用，且僅限於結構完全相同的項目。
2.4 容器策略（優先使用頂層）
- 僅用間距（接近性分組項目）
- 一條分隔線
- 一個微妙的邊框輪廓
- 一個帶背景變化的表面卡片
每下降一層，視覺重量就增加。使用能達成目標的最輕量工具。永遠不要將最重要的元素放入盒子中——讓它漂浮在背景上。
2.5 色彩作為層級
在單色系統中，灰階本身就是層級。每個畫面最多 4 個層級：
--text-display (100%) → 英雄數字。每個畫面一個。
--text-primary (90%) → 內文、主要內容。
--text-secondary (60%) → 標籤、說明、元資料。
--text-disabled (40%) → 停用狀態、時間戳記、提示。
紅色（#D71921）不屬於層級的一部分。 它是一種中斷——「看這裡，現在。」如果沒有急迫的事，畫面就不應該有紅色。
資料狀態顏色（成功綠、警告琥珀、強調紅）在編碼資料數值時不受「一個強調色」規則的限制。將顏色應用在數值本身，而非標籤或列背景。完整色彩系統請參閱 references/tokens.md。
2.6 一致性 vs. 變化
在以下方面保持一致： 字體家族、標籤處理（一律使用 Space Mono 全部大寫）、間距節奏、色彩角色、元件形狀、對齊。
在每個畫面中，恰好在 一個 地方打破模式： 一個超大的數字、一個圓形元件、紅色強調色、Doto 標題、一個巨大的間距缺口。
這個單一的打破點就是設計本身。沒有它：是無趣的網格。多於一個：是視覺混亂。
2.7 構圖平衡
不對稱 > 對稱。 置中佈局感覺很普通。偏好刻意的不平衡構圖：
- 左大右小： 英雄度量 + 元資料堆疊。
- 上重下輕： 大標題靠近頂端，下方內容稀疏。
- 邊緣錨定： 重要元素固定在畫面邊緣，負空間留在中央。
用更多的空白空間來平衡重型元素，而不是用更多的重型元素。
2.8 Nothing 風格
- 透過空白的自信。 大面積未中斷的背景區域。抵制填滿空間的衝動。
- 小處的精準。 字距、精確的灰階值、4px 的間隙。微觀決策累積成工藝。
- 資料即美感。 使用 Space Mono 48px 顯示的
36GB/s本身就是視覺。不需要插圖。 - 機械般的誠實。 控制項看起來就像控制項。切換開關 = 實體開關。量表 = 儀器。
- 一個驚喜時刻。 點陣式標題。一個圓形元件。一個紅點。節制讓這一個表達性時刻更有力量。
- 打擊感，而非流暢感。 想像 UI 聲音：點擊而非嗖聲，滴答而非鈴聲。設計感覺機械且精確的轉場。
2.9 資料密集畫面的視覺變化
當一個畫面出現 3 個以上資料區段時，請變化視覺形式：
| 形式 | 最適合 | 重量 |
|---|---|---|
| 英雄數字（大型 Doto/Space Mono） | 單一關鍵度量 | 重——使用一次 |
| 分段進度條 | 朝目標的進度 | 中 |
| 同心圓 / 弧 | 多個相關百分比 | 中 |
| 行內緊湊條形圖 | 次要度量在行中顯示 | 輕 |
| 僅數字加狀態顏色 | 無比例的數值 | 最輕 |
| 迷你趨勢線圖 | 隨時間的趨勢 | 中 |
| 統計行（標籤 + 數值） | 簡單資料點 | 輕 |
主要區段 → 最重的處理方式。次要區段 → 不同的形式。第三層區段 → 最輕的處理方式。形式會變化，但聲音保持不變。
3. 反模式——絕對不要做的事
- UI 框架中不使用漸層
- 沒有陰影。沒有模糊。平面表面，邊框分隔。
- 沒有骨架載入畫面。使用
[載入中...]文字或分段式旋轉器。 - 沒有彈出提示。使用內聯狀態文字：
[已儲存]、[錯誤：...] - 沒有悲傷表情插圖、可愛吉祥物或多段落的空狀態
- 表格中不使用斑馬紋
- 不使用填滿圖示、多色圖示或表情符號作為 UI
- 沒有視差、劫持滾動或無謂的動畫
- 沒有彈簧/反彈緩動。僅使用微妙的緩出。
- 卡片邊框半徑不超過 16px。按鈕是膠囊形（999px）或技術形（4–8px）。
- 資料視覺化：在引入顏色之前，先用不透明度（100%/60%/30%）或圖案（實心/條紋/點狀）來區分。
4. 工作流程
- 宣告字體——告知使用者需要載入哪些 Google Fonts（請參閱
references/tokens.md） - 詢問模式——深色還是淺色？沒有預設值。
- 草擬層級——在撰寫任何程式碼前，先識別出 3 個層級
- 構圖——套用工藝規則（第 2.1–2.9 節）
- 檢查 Token——查閱
references/tokens.md以取得精確數值 - 建構元件——查閱
references/components.md以了解樣式 - 適配平台——查閱
references/platform-mapping.md以了解輸出慣例
5. 參考檔案
關於詳細的 Token 數值、元件規格與平台特定指南：
references/tokens.md— 字體、字級系統、色彩系統（深色 + 淺色）、間距系統、網格、動態、圖示、點陣主題references/components.md— 卡片、按鈕、輸入框、清單、表格、導航、標籤、分段控制、進度條、圖表、小工具、覆蓋層、狀態模式references/platform-mapping.md— HTML/CSS、SwiftUI、React/Tailwind、紙本輸出慣例