# 现代 SaaS 配色参考

> 用于工具类、SaaS、B端、现代 C端 设计。
> 每种风格都是"主色 + 辅色 + 中性色 + 语义色"的完整配方。

## 风格 A：Linear 风（深色调，适合专业工具）

特征：深色背景、低饱和主色、精致高光、克制留白

| 角色 | HEX | 用途 |
|---|---|---|
| 背景 | #0A0A0A | 主背景 |
| 表面 | #171717 | 卡片 / 面板 |
| 边框 | #262626 | 分隔线 |
| 主色 | #5E6AD2 | Linear 紫，点缀 |
| 主色浅 | #8B92FF | hover 状态 |
| 正文 | #E5E5E5 | 主要文字 |
| 辅助 | #737373 | 次要文字 |
| 成功 | #10B981 | |
| 警告 | #F59E0B | |
| 危险 | #EF4444 | |

搭配字体：Inter（英文）+ PingFang SC（中文）
适合场景：专业工具、开发者产品、数据类、AI 产品

## 风格 B：Stripe 风（明亮、精致、国际化）

特征：明亮背景、饱和主色、柔和阴影、现代感强

| 角色 | HEX | 用途 |
|---|---|---|
| 背景 | #FFFFFF | 主背景 |
| 次背景 | #F6F9FC | 区块区分 |
| 主色 | #635BFF | Stripe 紫 |
| 主色深 | #0A2540 | 深色强调 |
| 边框 | #E3E8EE | |
| 正文 | #0A2540 | |
| 辅助 | #425466 | |
| 成功 | #00D924 | Stripe 绿 |

搭配字体：同样 Inter + PingFang SC
适合场景：支付、金融、国际化 SaaS、高端 B 端

## 风格 C：Vercel / Notion 风（极简黑白）

特征：极致黑白对比、几乎不用彩色、靠字体和留白撑质感

| 角色 | HEX | 用途 |
|---|---|---|
| 背景 | #FFFFFF | |
| 次背景 | #FAFAFA | |
| 边框 | #EAEAEA | |
| 主色 | #000000 | 纯黑当主色 |
| 强调 | #0070F3 | 链接/按钮 |
| 正文 | #111111 | |
| 辅助 | #666666 | |

适合场景：极简产品、内容类、文档类、博客、作品集

## 风格 D：Notion / Figma 风（友好、柔和）

特征：中性色偏暖、主色柔和、亲和力强

| 角色 | HEX | 用途 |
|---|---|---|
| 背景 | #FFFFFF | |
| 次背景 | #F7F6F3 | Notion 米色 |
| 主色 | #2383E2 | Notion 蓝 |
| 强调 | #EB5757 | 标签红 |
| 辅助 | #F2C94C | 标签黄 |
| 成功 | #27AE60 | 标签绿 |
| 正文 | #37352F | 偏暖黑 |
| 辅助文 | #9B9A97 | |

适合场景：协作工具、笔记类、教育类、内容管理

## 通用建议

1. **一个项目只用一种风格**，不要混搭
2. **主色占比 < 10%**，中性色占 80% 以上 —— 主色用来"点睛"
3. **阴影统一**：一个项目只用 1-2 级阴影
4. **留白是设计的一部分**：宁可空一点，不要堆满
5. **中文 + 数字混排时**，数字用英文字体、中文用中文字体，视觉层级更清晰