基本功能完成，下一步开始美化UI

docs/design-system.md

@@ -0,0 +1,53 @@
+# UI Design System & Brand Guidelines
+
+## 1. Brand Identity
+The visual identity is centered around **Mars Green**, representing a professional, modern, and technological atmosphere.
+
+### Colors
+- **Primary (Mars Green)**: `#008C8C` (Base), `#00A3A3` (Light), `#006666` (Dark)
+- **Neutral**: Slate Grays for text and borders.
+- **Background**: Very light cool grays (`#F9FAFB` or Mars-tinted whites).
+
+### Logo Usage
+- **Primary Logo**:
+  - **Dimensions**: 100px width x 40px height.
+  - **Placement**: Top Navigation Bar (Left).
+  - **Style**: Contains watermark "Placeholder" at 15% opacity.
+- **Secondary Logo**:
+  - **Dimensions**: 80px width x 30px height.
+  - **Placement**: Footer (Right).
+  - **Style**: Simplified version.
+
+## 2. Layout & Spacing
+- **Grid System**: 8px baseline. All margins and paddings should be multiples of 8px (e.g., 8, 16, 24, 32).
+- **Container**: Max-width 1200px for main content areas.
+- **Responsive**:
+  - Mobile (<768px): 16px padding.
+  - Desktop (>=768px): 24px+ padding.
+
+## 3. Typography
+- **Font Family**: Inter, system-ui, sans-serif.
+- **Base Size**: 14px (Body), 16px (Inputs/Buttons).
+- **Headings**:
+  - H1: 24px/32px Bold
+  - H2: 20px/28px Bold
+  - H3: 16px/24px SemiBold
+
+## 4. Components
+- **Buttons**:
+  - Height: 40px (Default), 48px (Large/Mobile).
+  - Radius: 8px.
+  - Shadow: Soft colored shadow on primary buttons.
+- **Cards**:
+  - Radius: 12px.
+  - Shadow: Multi-layered soft shadow.
+  - Border: None or 1px solid gray-100.
+- **Inputs**:
+  - Height: 40px.
+  - Radius: 8px.
+  - Border: Gray-300 default, Mars Green on focus.
+
+## 5. Implementation Notes
+- Use `ConfigProvider` in `src/main.tsx` for global Ant Design overrides.
+- Use `tailwind.config.js` for utility classes (`bg-mars-500`, `text-mars-600`).
+- Use `src/components/common/Logo.tsx` for all logo instances.