PRIMARY · NEUTRALS · SECONDARY · ACCENT

# UPerform 优普丰 设计系统

国际标准 4 层色彩体系:主色管品牌、灰色管功能、金色管气质、橙色管行动

01 / 4-Layer Color System

## 4 层色彩体系

按国际设计标准(Material Design / IBM Carbon / Figma 等),严格区分品牌色、中性色、辅助色、点缀色,各司其职——主色管品牌识别、灰色管功能支撑、金色管高级感与强调、橙色管行动信号(全场 ≤ 1 处,尽可能不采用)。

🎨 PRIMARY 主色系 — 蓝色 品牌识别 · 60-70% 视觉量 5 COLORS
Deep Sea 深海蓝
#0A2540
深色背景
Ocean 海洋蓝 ⭐
#1E4976
品牌主色
Sky 天空蓝
#2E6BA8
辅助蓝
Horizon 地平蓝
#4A8FD8
点缀蓝
Glacier 冰川蓝
#E8F2FC
浅蓝底
⚪ NEUTRALS 中性色 — 灰色 (工具集) 功能支撑 · 文字/边/底 5 COLORS
Carbon 碳黑
#1A1A1A
极深文本
Slate 石板灰
#3D4852
强文本
Steel 钢铁灰
#6B7785
正文
Silver 银灰
#A8B2BD
边框
Mist 雾白
#F5F7FA
浅色背景
👑 SECONDARY 辅助色 — 金色 (高级感 + 强调点缀) 装饰+强调 · 全场 ≤ 3 处 · 橙色的优先替代 2 COLORS
Prestige 尊贵金
#D4AF37
金重点 · VIP/奖项
Champagne 香槟金
#F2D492
金柔光
🚀 ACCENT 点缀色 — 橙色 (极度克制) CTA 按钮 · 全场 ≤ 1 处 · 尽可能不采用 2 COLORS
Vibrant 活力橙
#FF6B35
CTA 主按钮
Coral 珊瑚光
#FF9B7D
次 CTA / 暖标签

02 / Four Critical Rules

## 4 条使用铁律

这 4 条铁律是整个色彩体系的灵魂——保证主色不被稀释、CTA 不被淹没、金色不流于廉价、金属感不被油漆感破坏。

- 1 橙色是"放大镜",不是"油漆" — 整场不超过 1 处橙色元素,且尽可能不采用。金色系已承担强调与点缀职责,是橙色的优先替代。
- 2 金色永远搭配深色 — 尊贵金 + 深海蓝 = 经典奢华;香槟金 + 雾白 = 轻柔优雅。金色不要放在冰川蓝上(会糊)。
- 3 文字层级用灰色系统,蓝/橙/金不参与正文 — 正文只走 `#1A1A1A → #3D4852 → #6B7785` 的灰阶。蓝是装饰色,不是文字色。
- 4🆕 金色一律使用渐变,禁止纯色 — 尊贵金/香槟金是金属色,纯色 = 廉价 = 油漆感。所有金色元素(背景/底色/按钮/描边/文字)100% 渐变;金字必须用 `background-clip: text` 渐变技术,绝不能 `color: #D4AF37`。

03 / Page Type Allocation

## 按页面类型分配 (三明治结构)

不同页面类型有不同的色彩主导——封面/章节/结尾用深海蓝主导,内容页用海洋蓝主导,数据/成果页让碳黑与金色数字承担视觉。

页面类型 | 背景 (PRIMARY) | 标题色 (PRIMARY) | 正文色 (NEUTRALS) | 可用点缀 (SECONDARY + ACCENT)
--- | --- | --- | --- | ---
封面/章节页 | `#0A2540` 深海蓝 | `#F5F7FA` 雾白 | `#E8F2FC` 冰川蓝 | 👑 尊贵金(品牌标识) + 海洋蓝(辅助文字)
内容页 | `#F5F7FA` 雾白 / `#E8F2FC` 冰川蓝 | `#1E4976` 海洋蓝 | `#6B7785` 钢铁灰 | 👑 尊贵金(强调) + 天空蓝(图表)
数据/成果页 | `#F5F7FA` 雾白 | `#1A1A1A` 碳黑 | `#3D4852` 石板灰 | 👑 尊贵金(关键大数字 + 增长率)
结尾/CTA 页 | `#0A2540` 深海蓝 | `#F5F7FA` 雾白 | `#E8F2FC` 冰川蓝 | 👑 尊贵金(按钮,优先) / 🚀 活力橙(仅此处保留 ≤ 1 处) + 👑 尊贵金(品牌收尾)

04 / Components

## 组件示例

海洋蓝 (主色)
尊贵金 · 替代活力橙
活力橙 · 仅 1 处
地平蓝 (描边)

### 深色背景上的 Ghost 按钮

05 / Cards & Badges

## 卡片 & 标签

### 标准卡片

白色背景、1px 银灰边框、8px 圆角、24px padding

### PRIMARY 主色卡片

海洋蓝背景、雾白文字、用于强调重要内容块

### 👑 金色暖卡片

香槟金渐变背景、🆕 金色渐变描边、用于高级引用

### 冰川蓝信息卡片

冰川蓝背景、地平蓝左边框、用于说明内容

### 👑 金色暖卡片(强调版)

香槟金渐变背景、🆕 金色渐变描边、用于重点引用(替代原活力橙暖卡片)

### 👑 海洋蓝+金字(标志性奢华)

海洋蓝底 + 🆕 金色文字渐变（background-clip: text）+ 金色渐变描边 + 深阴影

PRIMARY ACCENT CORAL SKY 👑 SECONDARY CHAMPAGNE NEUTRAL 👑 OCEAN GOLD 👑 DEEP GOLD

06 / 🆕 金字渐变 (铁律 #4 样本)

## 金字渐变 — 深色背景上的金属字

深色背景上的金色文字必须用 `background-clip: text` 渐变技术,让字本身呈现金属光泽。绝不能 `color: #D4AF37` 写死。

UPerform · SIGNATURE COMBINATION

### 海洋蓝 + 尊贵金字

深海蓝铺底,金属质感的金色文字浮于其上,营造"深海藏金"的视觉张力。用于高端封面、Hero 标题、奖项大数字、VIP 标识、限量版标签。

### 对比演示:渐变金字 vs 纯色金字(廉价感)

✅ 渐变金字 (推荐)
金属光泽
❌ 纯色金字 (廉价)
油漆感

07 / Typography (灰阶文字)

## 字体层级 — 文字只用灰阶

遵循铁律 #3:正文只走 `#1A1A1A → #3D4852 → #6B7785` 的灰阶。蓝/橙/金不参与正文。

Display H1 — 大标题用碳黑
48–60px / 700 / #1A1A1A 碳黑
Page H2 — 页面主标题可用海洋蓝(品牌位)
32–36px / 700 / #1E4976 海洋蓝 — 标题级例外
Section H3 — 区块标题用石板灰
24–28px / 600 / #3D4852 石板灰
Sub H4 — 子标题用石板灰
20–22px / 600 / #3D4852 石板灰
Body Base — 正文用碳黑或钢铁灰(避免纯黑过重)
15–16px / 400 / #1A1A1A 碳黑 / line-height 1.6
Caption — 注释、说明用钢铁灰
13–14px / 400 / #6B7785 钢铁灰

08 / Spacing & Radius

## 间距 & 圆角

### 间距系统

4px
8px
16px
24px
32px
48px

4 | 8 | 12 | 16 | 24 | 32 | 48 | 64 | 80 | 96

### 圆角系统

4px
6px (按钮)
8px (卡片)
20px (标签)

09 / Elevation

## 深度层级

Base
无阴影，纯白背景
Card Elevation
0 2px 8px rgba(10,37,64,0.08)
Header Gradient
#0A2540 → #1E4976 → #2E6BA8
👑 Premium Header
深海蓝 → 海洋蓝 → 尊贵金

10 / Forms

## 表单元素

输入框（默认）
输入框（聚焦）
输入框（错误）