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 設計系統基礎

色彩系統

: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

: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)

.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
打字機	ClawBot 回應	30ms/字元
淡入	卡片載入	200ms ease-out
滑入	側邊欄	300ms cubic-bezier

@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 配置

// 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
• NDot Font
• 會議記錄: docs/meetings/2026-03-19_FRONTEND_RESTRUCTURE_STRATEGY.md