# TSP智能助手 - 字体和布局指南

参考成熟CRM系统的设计标准

## 字体系统

### 标题层级

# 主标题 (H1) - 36px

## 大标题 (H2) - 30px

### 中标题 (H3) - 24px

#### 小标题 (H4) - 20px

##### 副标题 (H5) - 18px

###### 小副标题 (H6) - 16px

### 文本大小

超大文本 (36px)

大文本 (30px)

中文本 (24px)

小文本 (20px)

大正文 (18px)

正文 (16px)

小正文 (14px)

辅助文本 (12px)

## 字重系统

轻字重 (300) - 用于辅助信息

正常字重 (400) - 用于正文

中等字重 (500) - 用于强调

半粗字重 (600) - 用于小标题

粗字重 (700) - 用于标题

### 使用场景

- 标题：使用 font-bold (700)
- 小标题：使用 font-semibold (600)
- 正文：使用 font-normal (400)
- 强调：使用 font-medium (500)
- 辅助信息：使用 font-light (300)

## 文本颜色

主要文本 - 用于重要内容

次要文本 - 用于一般内容

第三级文本 - 用于辅助信息

禁用文本 - 用于不可用状态

### 状态颜色

成功状态

警告状态

错误状态

信息状态

## 间距系统

### 垂直间距

mb-1 (4px)
mb-2 (8px)
mb-3 (12px)
mb-4 (16px)
mb-6 (24px)

### 水平间距

me-1
me-2
me-3

## 按钮系统

### 按钮大小

### 按钮样式

## 表格系统

列标题 | 数据类型 | 状态 | 操作
--- | --- | --- | ---
数据行1 | 文本 | 正常 |
数据行2 | 数字 | 警告 |

## 分页系统

## 使用规范

### 标题规范

- 页面标题使用 H1 (36px, bold)
- 区块标题使用 H2 (30px, semibold)
- 卡片标题使用 H3 (24px, semibold)
- 表单标题使用 H4 (20px, medium)

### 文本规范

- 正文使用 16px, normal
- 辅助信息使用 14px, normal
- 标签使用 12px, medium
- 按钮文字使用 14px, medium