awoooi/docs/adr/ADR-002-nothing-tech-design-system.md

# ADR-002: Nothing.tech 設計系統採用

> **狀態**: Accepted
> **日期**: 2026-03-19
> **決策者**: CPO + CTO

## 背景

AWOOOI 需要統一的視覺語言，區隔於傳統 Dashboard 風格。CEO 在戰略會議中指定採用 **Nothing.tech** 風格：點陣字體 + 毛玻璃效果 + 極簡黑白。

此風格強調「科技感」與「未來感」，符合 AI-First 運維平台定位。

## 決策

**採用 Nothing.tech 風格作為 AWOOOI 設計系統基礎**

### 色彩系統

```css
:root {
  /* 主色 */
  --nothing-black: #000000;
  --nothing-white: #FFFFFF;
  --nothing-red: #D71921;      /* 告警、錯誤、Critical */

  /* 灰階 */
  --nothing-gray-50: #FAFAFA;
  --nothing-gray-100: #F5F5F5;
  --nothing-gray-200: #E5E5E5;
  --nothing-gray-300: #D4D4D4;
  --nothing-gray-400: #A3A3A3;
  --nothing-gray-500: #737373;
  --nothing-gray-600: #525252;
  --nothing-gray-700: #404040;
  --nothing-gray-800: #1A1A1A;
  --nothing-gray-900: #0A0A0A;

  /* 語意色 */
  --status-healthy: #22C55E;   /* Green - 正常 */
  --status-warning: #F59E0B;   /* Amber - 警告 */
  --status-critical: #D71921;  /* Nothing Red - 嚴重 */
  --status-unknown: #6B7280;   /* Gray - 未知 */
}
```

### 字體系統

| 用途 | 字體 | Fallback |
|------|------|----------|
| **AI 介面** | NDot 57 | JetBrains Mono, monospace |
| **標題** | NDot 47 | Inter, system-ui |
| **內文** | Inter | system-ui, sans-serif |
| **程式碼** | JetBrains Mono | Fira Code, monospace |

```css
:root {
  --font-display: "NDot", "JetBrains Mono", monospace;
  --font-heading: "NDot", "Inter", system-ui;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", monospace;
}
```

### 毛玻璃效果 (Glassmorphism)

```css
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
}

.glass-panel-dark {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}
```

### 動效規範

| 效果 | 用途 | Duration |
|------|------|----------|
| **呼吸燈** | AI 狀態指示 | 2s ease-in-out |
| **打字機** | OpenClaw 回應 | 30ms/字元 |
| **淡入** | 卡片載入 | 200ms ease-out |
| **滑入** | 側邊欄 | 300ms cubic-bezier |

```css
@keyframes breathe {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

.ai-status-indicator {
  animation: breathe 2s ease-in-out infinite;
}
```

## 理由

### 1. 品牌差異化

傳統運維 Dashboard 使用 Material/Ant Design，視覺同質化嚴重。Nothing.tech 風格能立即建立品牌辨識度。

### 2. AI-First 視覺語言

點陣字體與極簡風格傳達「精準」與「科技感」，符合 AI 運維平台定位。

### 3. 技術可行性

| 需求 | 實現方式 |
|------|---------|
| 點陣字體 | NDot (需購買) 或 Dot Matrix (免費替代) |
| 毛玻璃 | CSS backdrop-filter (現代瀏覽器支援) |
| 深色主題 | Tailwind dark mode |

## 後果

### 優點

- **品牌辨識度** 強烈視覺風格
- **AI 定位** 符合 Agent-Centric 理念
- **現代感** 吸引科技用戶

### 缺點

- **字體成本** NDot 需商業授權
- **相容性** 舊瀏覽器不支援 backdrop-filter

### 風險

| 風險 | 緩解措施 |
|------|---------|
| NDot 授權費用 | 初期用 JetBrains Mono 替代，驗證後再購買 |
| Safari 毛玻璃問題 | 加入 `-webkit-backdrop-filter` prefix |
| 可讀性 | 限制點陣字體於標題，內文用 Inter |

## Tailwind 配置

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        nothing: {
          black: '#000000',
          white: '#FFFFFF',
          red: '#D71921',
          gray: {
            50: '#FAFAFA',
            100: '#F5F5F5',
            200: '#E5E5E5',
            300: '#D4D4D4',
            400: '#A3A3A3',
            500: '#737373',
            600: '#525252',
            700: '#404040',
            800: '#1A1A1A',
            900: '#0A0A0A',
          }
        },
        status: {
          healthy: '#22C55E',
          warning: '#F59E0B',
          critical: '#D71921',
          unknown: '#6B7280',
        }
      },
      fontFamily: {
        display: ['NDot', 'JetBrains Mono', 'monospace'],
        heading: ['NDot', 'Inter', 'system-ui'],
        body: ['Inter', 'system-ui', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      backdropBlur: {
        glass: '20px',
      }
    }
  }
}
```

## 參考

- [Nothing.tech Official](https://nothing.tech/)
- [NDot Font](https://pangrampangram.com/products/ndot)
- 會議記錄: `docs/meetings/2026-03-19_FRONTEND_RESTRUCTURE_STRATEGY.md`