PRIMARY · NEUTRALS · SECONDARY · ACCENT

UPerform 优普丰 设计系统

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

01 / 4-Layer Color System

4 层色彩体系

按国际设计标准,严格区分品牌色、中性色、辅助色、点缀色,各司其职——主色管品牌识别、灰色管功能支撑、金色管高级感、橙色管行动信号。

🎨 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 按钮 · 全场 ≤ 3 处 2 COLORS
Vibrant 活力橙
#FF6B35
CTA 主按钮
Coral 珊瑚光
#FF9B7D
次 CTA / 暖标签
02 / Four Critical Rules

4 条使用铁律

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

03 / Page Type Allocation

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

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

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

组件示例

海洋蓝 (主色)
活力橙 (行动)
尊贵金 (高级)
深底透明
05 / Cards & Badges

卡片 & 标签

主色卡片

海洋蓝背景、白色文字、8px 圆角、用于标准内容块

深海蓝主色卡片

Deep Sea 背景、最深卡片层级、用于强调

👑 金色暖卡片

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

冰川蓝信息卡片

半透明地平蓝背景、地平蓝左边框、用于说明

🚀 活力橙暖卡片

半透明活力橙背景、活力橙左边框、用于重点 CTA

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

海洋蓝底 + 🆕 金色文字渐变（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:正文只走灰阶。蓝/橙/金不参与正文。

Display H1 — 封面大标题用白
48–60px / 700 / #FFFFFF (on dark)
Page H2 — 页面主标题
32–36px / 700 / #FFFFFF (on dark)
Section H3 — 区块标题用 Horizon Blue
24–28px / 600 / #4A8FD8 (on dark)
Sub H4 — 子标题用白
20–22px / 600 / #FFFFFF
Body Base — 正文用银灰
15–16px / 400 / #A8B2BD / 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
Deep Sea 背景
Card Surface
Ocean (#1E4976)
Elevated
0 4px 16px rgba(0,0,0,0.3)
👑 Premium Surface
深海蓝 → 海洋蓝 → 尊贵金
10 / Forms

表单元素