---
name: bitseek-design-system
description: "Design system for BitSeek, a B2B SaaS AI product with dual-surface design (dark C-end marketing + light B-end dashboard). Use this skill when designing, prototyping, or building UI for BitSeek or any AI SaaS product following the BitSeek style. Triggers on mentions of BitSeek, AI agent workspace, employee agent, SaaS dashboard, B2B AI product, or requests for warm-orange-accent enterprise interfaces. Covers the Manrope typography system, coral/orange brand palette, dual light/dark theme tokens, spacing grid, corner radius rules, and component patterns for both marketing pages and admin dashboards."
---

# BitSeek 设计系统 (Design System)

## 1. 产品定义

BitSeek 是一款 B2B SaaS AI 产品，定位为"Employee Agent Workspace"——企业级 AI 员工代理工作台。设计上有两个明确的表面：

| 表面 | 名称 | 主题 | 用途 |
|------|------|------|------|
| C 端 | Marketing / Landing | **深色** (dark) | 官网、产品介绍、Discover 展示页 |
| B 端 | Dashboard / Workspace | **浅色** (light) | 管理后台、对话界面、知识库、团队管理 |

两个表面共享同一套品牌色、字体和间距系统，仅背景和文字色反转。

---

## 2. 品牌色彩系统 (Color System)

### A. 品牌色 (Brand)

| Token | Hex | 用途 |
|:------|:----|:-----|
| `brand-primary` | `#FF7F50` | **Coral Orange** — CTA 按钮、品牌链接、高亮标签、活跃元素 |
| `brand-dark` | `#FA4321` | 深品牌色 — 强调按钮、错误相关 |
| `brand-deep` | `#DE360C` | 最深品牌色 — hover/pressed 状态 |
| `brand-tint` | `#FFF7ED` | 品牌浅底 — 标签背景、hover 行 |
| `brand-light` | `#FFF4F0` | 更浅品牌底 — 卡片高亮区 |

### B. 中性色 — 浅色主题 (B 端 Dashboard)

| Token | Hex | 用途 |
|:------|:----|:-----|
| `bg-white` | `#FFFFFF` | 页面背景、卡片背景 |
| `bg-light-1` | `#FAFAFA` | 次级背景、侧边栏 |
| `bg-light-2` | `#F6F6F6` | 输入框背景、表格斑马纹 |
| `bg-light-3` | `#EFEEEB` | 分割区域 |
| `stroke-light` | `#ECEFF8` | 主描边（最高频使用） |
| `stroke-medium` | `#DFDFDF` | 次描边 |
| `text-primary` | `#404040` | 主文字（非纯黑，偏暖灰） |
| `text-secondary` | `#646464` | 辅助文字 |
| `text-muted` | `#A7A7A7` | placeholder、禁用文字 |

### C. 中性色 — 深色主题 (C 端 Marketing)

| Token | Hex | 用途 |
|:------|:----|:-----|
| `bg-dark` | `#160804` | 深色页面背景（暖黑） |
| `bg-dark-2` | `#1A1A1A` | 卡片/模块背景 |
| `surface-dark` | `#000000` | 纯黑表面 |
| `text-on-dark` | `#FFFFFF` | 深色背景上的主文字 |
| `text-on-dark-sub` | `#C4BAB8` | 深色背景上的辅助文字 |
| `stroke-dark` | `#040404` | 深色描边 |

### D. 功能色 (Semantic)

| Token | Hex | 用途 |
|:------|:----|:-----|
| `success` | `#83D04E` | 成功状态 |
| `accent-purple` | `#7468F2` | 辅助强调（AI/智能功能标记） |

**严禁幻觉规则：** 不得使用上表以外的颜色。品牌色核心是 `#FF7F50`（Coral），不是橙色 `#FF6600` 或红色 `#FF0000`。

---

## 3. 字体系统 (Typography)

### 字体族

| 优先级 | 字体 | 用途 |
|:-------|:-----|:-----|
| **主字体** | **Manrope** | 所有 UI 文字（SemiBold 最高频，其次 Medium，标题用 ExtraBold） |
| 备用字体 | Inter | 极少使用，仅部分旧页面残留 |

### 字号层级

| 层级 | 大小 | 字重 | 典型使用 |
|:-----|:-----|:-----|:---------|
| Display | 120px | Manrope ExtraBold | C 端 Hero 大标题（如 "BitSeek"） |
| H1 | 40px | Manrope ExtraBold | 页面主标题 |
| H2 | 32px | Manrope ExtraBold | 模块标题 |
| H3 | 24px | Manrope SemiBold | Section Header、卡片标题 |
| H4 | 20px | Manrope SemiBold | 子标题 |
| Body-L | 16px | Manrope Medium / SemiBold | **最高频** — 正文、按钮、菜单项 |
| Body-M | 14px | Manrope Medium | 列表文本、辅助信息 |
| Body-S | 12px | Manrope Medium | 标签、小字说明 |
| Caption | 10px | Manrope Medium | 极小辅助 |

### 排版规则

- 标题：**Manrope ExtraBold**，深色背景上 `#FFFFFF`，浅色背景上 `#404040`
- 正文：**Manrope Medium** 或 **SemiBold**
- CTA 按钮：**Manrope SemiBold** 16px
- 行高默认 140-150%
- 正文左对齐

---

## 4. 间距与圆角 (Spacing & Radius)

### 间距系统

| Token | 值 | 用途 |
|:------|:---|:-----|
| `space-xs` | 4px | 紧凑元素间距 |
| `space-s` | 8px | 默认元素间距 |
| `space-m` | 10px | 中等间距 |
| `space-base` | 16px | 组件内 padding |
| `space-l` | 20px | **最高频** — 模块间距、卡片 padding |
| `space-xl` | 24px | Section 间距 |
| `space-xxl` | 40px | 大区块间距、页面 padding |

### 主要 Padding 模式

| 模式 | 值 | 用途 |
|------|-----|------|
| 卡片默认 | `20px 16px` | 垂直 20px 水平 16px |
| 按钮大 | `16px 24px` | 主 CTA |
| 按钮小 | `8px 4px` 或 `10px 8px` | 小型按钮/标签 |
| 容器 | `40px` 四周 | 大面板 |

### 圆角系统

| Token | 值 | 用途 |
|:------|:---|:-----|
| `radius-xs` | 2-3px | 极小元素 |
| `radius-s` | 5px | 小标签 |
| `radius-m` | 8px | 输入框、小卡片 |
| `radius-base` | 12px | **高频** — 标准卡片、弹窗 |
| `radius-l` | 16px | 大卡片 |
| `radius-xl` | 20px | **高频** — 大型面板、模态框 |
| `radius-xxl` | 40px | 超大圆角容器 |
| `radius-pill` | 200px | **最高频** — CTA 按钮（全圆角胶囊） |
| `radius-circle` | 100px | 头像、圆形 icon |

---

## 5. 核心组件规范 (Components)

### 5.1 CTA 按钮 (Primary Button)

```
背景: #FF7F50 (brand-primary, Coral Orange)
文字: #FFFFFF, Manrope SemiBold 16px
Padding: 16px 24px
圆角: 200px (pill 胶囊形)
Hover: #DE360C
Disabled: opacity 40%
```

### 5.2 次要按钮 (Secondary Button)

```
背景: transparent
描边: 1px solid #FF7F50
文字: #FF7F50, Manrope SemiBold 14px
Padding: 12px 24px
圆角: 200px
```

### 5.3 侧边栏 (B 端 Sidebar)

```
宽度: ~240px
背景: #FFFFFF 或 #FAFAFA
描边: 右侧 1px #ECEFF8
Logo: 顶部，品牌 coral + 文字
菜单项: Manrope Medium 14px, padding 10px 8px
Active 菜单: #FF7F50 文字 + #FFF7ED 背景
Icon: 20px, #646464 (inactive) / #FF7F50 (active)
```

### 5.4 卡片 (Card)

```
背景: #FFFFFF (B 端) / #1A1A1A (C 端)
描边: 1px solid #ECEFF8 (B 端) / none (C 端)
圆角: 12px 或 20px
Padding: 20px 16px
阴影: 极轻或无（扁平风格）
```

### 5.5 输入框 (Input)

```
背景: #F6F6F6 (B 端)
描边: 1px solid #ECEFF8
圆角: 8px
高度: ~40px
Padding: 10px 8px
Placeholder: #A7A7A7 Manrope Medium 14px
Focus 描边: #FF7F50
```

### 5.6 数据表格 (B 端 Table)

```
Header: #FAFAFA 背景, Manrope SemiBold 12px, #646464
行: #FFFFFF 背景, Manrope Medium 14px, #404040
斑马纹: 偶数行 #FAFAFA
行高: padding 16px
描边: 行间 1px #ECEFF8
```

### 5.7 对话界面 (Chat)

```
用户消息: 右对齐, #FF7F50 背景, 白色文字, 圆角 12px
AI 消息: 左对齐, #F6F6F6 背景, #404040 文字, 圆角 12px
输入框: 底部固定, #FFFFFF 背景, 发送按钮 #FF7F50
时间戳: #A7A7A7 Manrope Medium 12px
```

### 5.8 导航栏 (C 端 Top Nav)

```
背景: transparent (深色页面叠加)
Logo 左侧, 导航链接居中
CTA 按钮右侧: "Get Started" — #FF7F50 pill 按钮
链接: #FFFFFF Manrope Medium 16px
```

---

## 6. 页面布局规范

### B 端 Dashboard 布局

```
┌─ Top Bar (可选) ────────────────────┐
├─ Sidebar (240px) ─┬─ Main Content ──┤
│  Logo             │  Page Header    │
│  Nav Menu         │  Content Area   │
│  · 对话           │  (padding 40px) │
│  · 知识库         │                 │
│  · 团队管理       │                 │
│  · 设置           │                 │
│                   │                 │
│  User Avatar      │                 │
└───────────────────┴─────────────────┘
```

### C 端 Marketing 布局

```
┌─ Sticky Nav Bar (transparent) ──────┐
├─────────────────────────────────────┤
│ Hero Section                        │
│  Display Title (120px ExtraBold)    │
│  Subtitle + CTA                    │
│  背景: 暗色 + 星空/粒子效果         │
├─────────────────────────────────────┤
│ Feature Sections                    │
│  交替深色/暖黑背景                   │
│  Feature Card Grid                  │
├─────────────────────────────────────┤
│ Discover / Use Case 展示            │
│  卡片轮播或网格                     │
├─────────────────────────────────────┤
│ Footer                              │
└─────────────────────────────────────┘
```

### 页面类型清单

| 页面类型 | 端 | 例子 |
|---------|-----|------|
| Landing Hero | C | 官网首页、产品介绍 |
| Discover 展示 | C | 功能展示、用例卡片 |
| 对话/Chat | B | AI Agent 对话窗口 |
| 知识库管理 | B | 文件列表、知识验证 |
| 团队管理 | B | 成员列表、角色权限 |
| 设置 | B | 账号设置、API 配置 |
| 邀请/分享 | B | 邀请码页面 |

---

## 7. 双主题切换规则

当需要在 B 端和 C 端之间切换时，遵循以下映射：

| 属性 | B 端 (Light) | C 端 (Dark) |
|------|-------------|------------|
| 页面背景 | `#FFFFFF` | `#160804` |
| 卡片背景 | `#FFFFFF` + 描边 | `#1A1A1A` 无描边 |
| 主文字 | `#404040` | `#FFFFFF` |
| 辅助文字 | `#646464` | `#C4BAB8` |
| 品牌色 | `#FF7F50` (不变) | `#FF7F50` (不变) |
| 描边 | `#ECEFF8` | `#040404` |
| 输入框底 | `#F6F6F6` | `#1A1A1A` |

**品牌色 `#FF7F50` 在任何主题下保持不变。**

---

## 8. Agent 执行流程 (SOP)

### 第一步：确认端和主题
明确用户需要 B 端 (Light Dashboard) 还是 C 端 (Dark Marketing) 页面。

### 第二步：载入颜色主题
根据端选择加载对应的中性色组。品牌色始终为 `#FF7F50`。

### 第三步：结构化输出

```
【BitSeek 设计执行清单】

1. 主题: [B端-Light / C端-Dark]
2. 色彩:
   - CTA Button: #FF7F50 bg, #FFFFFF text
   - 卡片背景: [#FFFFFF / #1A1A1A]
   - 主文字: [#404040 / #FFFFFF]
3. 字体:
   - 标题: Manrope ExtraBold [size]px
   - 正文: Manrope Medium/SemiBold [size]px
4. 布局:
   - 卡片圆角: 12px / 20px
   - 按钮圆角: 200px (pill)
   - Padding: 20px 16px
```

### 第四步：验证
- 品牌色是否为 `#FF7F50`（不是 #FF6600）？
- 字体是否为 Manrope（不是 Inter/Roboto）？
- 按钮是否为 200px 胶囊圆角？
- B 端主文字是否为 `#404040`（不是纯黑 #000000）？
