Brand Guidelines v1.0

SiKeMeng SCRM 思客盟 · 品牌使用规范

连接客户,智慧增长。本规范定义了思客盟 SCRM 产品的视觉语言体系, 涵盖色彩、字体、Logo 及界面设计的全部标准。

版本 1.0 2025 年 7 月 设计团队 · 思客盟产品设计部

品牌故事与设计哲学

思客盟(SiKeMeng)致力于为企业提供新一代社交客户关系管理(SCRM)解决方案。我们相信,真正的客户关系不是单向的管理,而是多节点的连接与共振——正如品牌 Logo「连接之桥」所表达的,每一个客户触点都是网络中的一个节点,彼此关联,共同创造价值。

全系品牌色以深蓝(#153E7A)为根基,蓝色在科技行业承载着信任、专业与稳定的心理联想。从深海的沉稳到天空的广阔,思客蓝(SiKe Blue)的 11 阶梯度系统覆盖了从数据深潜到界面高亮的全部视觉需求。

我们的设计语言追求清晰、克制、高效——用最少的视觉噪音传递最关键的信息,让产品本身成为品牌最好的代言。

品牌色哲学

信任 Trust
深蓝传递可靠与安全感,让客户放心托付数据
专业 Professional
冷色基调建立技术领先的品牌认知
科技 Technology
蓝色是数字化与智能化的通用符号

主色系统:思客蓝 SiKe Blue

11 阶梯度色板,从品牌标准色(#153E7A)向深色和浅色两端延展。最深色用于数据可视化底色,最浅色用于信息提示背景。黄色标记为关键色。

最深
SiKe Blue 950
#0B1D3A
11, 29, 58
深色背景 / 数据底
SiKe Blue 900
#0F2448
15, 36, 72
渐变过渡
SiKe Blue 800
#122E5C
18, 46, 92
深色卡片底
品牌色
SiKe Blue 700
#153E7A
21, 62, 122
Logo 主色 / 品牌标识
SiKe Blue 600
#1A4F9E
26, 79, 158
Hover 状态
CTA
SiKe Blue 500
#1E5FC8
30, 95, 200
主操作按钮
SiKe Blue 400
#3B82F6
59, 130, 246
链接 / 交互态
SiKe Blue 300
#60A5FA
96, 165, 250
辅助图标
SiKe Blue 200
#93C5FD
147, 197, 253
浅色分割线
SiKe Blue 100
#DBEAFE
219, 234, 254
选中背景
最亮
SiKe Blue 50
#EFF6FF
239, 246, 255
信息提示底 / 浅背景

辅助色与中性色

辅助色用于数据可视化区分、特殊状态标识。中性色负责界面层级、文本对比和背景,10 阶覆盖纯白到纯黑。

辅助色 Accent Colors

Teal 青绿
#0EA5A0
14, 165, 160
图表序列 B / 辅助高亮
Amber 琥珀
#F59E0B
245, 158, 11
图表序列 C / 强调标记

中性色 Neutral Grays

Gray 50
#FAFAFA
全局背景
Gray 100
#F5F5F5
次背景
Gray 200
#E5E5E5
边框 / 分割
Gray 300
#D4D4D4
禁用态边框
Gray 400
#A3A3A3
辅助文字
Gray 500
#737373
次要正文
Gray 600
#525252
正文
Gray 700
#404040
加重正文
Gray 800
#262626
标题
Gray 900
#171717
主标题
Gray 950
#0A0A0A
强调文字

语义色系统

语义色用于状态反馈。每个语义色配有对应的浅色背景,确保在任何界面中信息可读性。下方同时展示色块与文字在背景上的对比效果。

Success 成功
成功 Success
#10B981
操作已成功完成 ✓  —  绿底浅色文字
Warning 警告
警告 Warning
#F59E0B
请注意此操作的影响 ⚠  —  黄底深色文字
Error 错误
错误 Error
#EF4444
提交失败,请重试 ✕  —  红底浅色文字
Info 信息
信息 Info
#3B82F6
新功能已上线 ℹ  —  蓝底浅色文字

字体系统

中英文混排体系:中文使用 PingFang SC / Noto Sans SC,英文与数字使用 Inter,等宽数字使用 JetBrains Mono。 以下是 5 个核心字号层级。

层级 字号 / 行高 / 字重 预览 用途
Hero 56px / 1.1 / 700
连接客户,智慧增长
首页主标题 Hero Title
H1 36px / 1.2 / 700
思客盟 品牌使用规范
页面标题 Page Heading
H2 24px / 1.3 / 600
主色系统:思客蓝 SiKe Blue
章节标题 Section Title
Body 15px / 1.65 / 400
思客盟致力于为企业提供新一代社交客户关系管理解决方案。We build tools for the next generation of customer engagement.
正文段落 Body Text
Caption 12px / 1.5 / 400
版本 1.0 · 2025 年 7 月 · 思客盟产品设计部
辅助说明 Caption / Meta

数字等宽字体 JetBrains Mono

所有数字、代码、数据表格统一使用等宽字体,确保数值对齐和可扫描性。

// 数字对比:等宽 vs 非等宽
客户总数:    128,456
本月新增:      3,892
活跃率:       76.4%
平均响应:        1.8s

// HEX 色值
#153E7A #1E5FC8 #3B82F6 #60A5FA #93C5FD

// 数据表对齐
| 2025-Q1 | ¥1,280,000 | +12.4% |
| 2025-Q2 | ¥1,456,000 | +13.8% |
| 2025-Q3 | ¥1,692,000 | +16.2% |

间距 · 圆角 · 阴影

三大基础令牌系统的完整速查表。所有间距和圆角使用 4px 基数递增,阴影分三层级。

间距 Spacing

--spacing-44px
--spacing-88px
--spacing-1212px
--spacing-1616px
--spacing-2424px
--spacing-3232px
--spacing-4848px
--spacing-6464px

圆角 Border Radius

--radius-44px
--radius-88px
--radius-1212px
--radius-1616px
--radius-2424px
按钮: 8px · 卡片: 12px · 模态: 16px · 头像: 24px

阴影 Shadows

--shadow-sm
卡片默认态
--shadow-md
卡片悬停态 / 下拉菜单
--shadow-lg
模态框 / 弹窗

下载资源

以下资源将在品牌规范正式发布后提供下载。请联系设计团队获取最新版本。

Logo PNG 包
全尺寸 · 含 @1x @2x @3x
Logo SVG 源文件
矢量 · 可无限缩放
Figma 设计组件库
含全部 token · 组件变体
品牌规范 PDF
完整规范文档 · A4 排版
设计令牌 JSON / CSS
可直接导入项目