valantic-brand

Valantic 品牌样式

概述

如需访问 Valantic 的官方品牌标识资源，请使用此技能。其中包括 Liquid Brand Design 系统，该系统会根据特定目标群体调整视觉语言，同时保持 One Firm 品牌形象。

关键词：Liquid Brand Design、Route A、Route B、Route C、valantic gradient、Segoe UI、Calibre、视觉形象、One Firm

---

1. Liquid Brand Design 策略

Valantic 品牌采用灵活的 Liquid Brand Design 模式，可根据目标群体和接触点采用不同的视觉传达方式。

视觉路线（A–B–C 系统）

根据受众和信息强度选择合适的路线。

Route A：克制而优雅

• 特征：克制、优雅、信息丰富、严肃
• 目标受众：保守行业（银行、保险）、高可信度服务（金融、法律、数据隐私）
• 使用场景：发票、数据表、正式报告
• 视觉风格：标准版式，尽量减少干扰

Route B：自信而亲和（标准）

• 特征：自信、积极、有人情味、平易近人
• 状态：默认选择（适用于约 80% 的使用场景）
• 目标受众：灵活敏捷的客户（IT、汽车、制造业）、内部沟通
• 使用场景：项目进展、团队演示、常规沟通
• 视觉风格：圆形肖像蒙版（“Route B Shape”），突出人物元素

Route C：动感而富有表现力

• 特征：动感、醒目、富有表现力、大胆
• 目标受众：营销、初创企业、招聘（人才招募）
• 使用场景：展会、活动、关注时代潮流的行业（电子商务、旅游）
• 视觉风格：不规则的“Valantic V”多边形蒙版，具有强烈的视觉张力

---

2. 设计令牌与颜色

品牌主色

• Valantic Coral：#FF5757 — 标题、链接和重点内容的主强调色
• Purple Heart：#4C26B7 — 次要强调色（深蓝紫色，少量使用）
• Peach：#FFCCAA — 次要强调色，主要用于渐变

功能色

• Info Blue：#4A9EFF — 信息提示框和提示
• Warning Orange：#FF9800 — 警告和重要通知

文本颜色

• 主文本：#333333 — 正文
• 深色文本：#1A1A1A — 强调文本、小标题
• 浅色背景：#F8F8F8 — 介绍部分、表头

Valantic 渐变

渐变可增加层次感和品牌辨识度，同时不会喧宾夺主。

• 颜色：Valantic Coral（#FF5757）→ Peach（#FFCCAA）
• 角度：315°（从左上到右下）
• 用途：形状、活动元素、选中的图标

---

3. 字体排印系统

数字与 Web 标准

• 字体系列：Calibre
• 备用字体：Segoe UI、Helvetica、Arial、sans-serif
• 字重：
  • H1/H2（章节标题）：Light（300）— CORAL 色
  • H3/H4（小节标题）：Semibold/Bold（600）— BLACK 色
  • 正文：Regular（400）

标题层级

级别	颜色	字重	示例
H1	#FF5757 Coral	300（Light）	文档主标题
H2	#FF5757 Coral	300（Light）	章节标题
H3	#1A1A1A Black	600（Semibold）	小节标题
H4	#1A1A1A Black	600（Semibold）	细节标题

特殊文本样式

• 引述：Coral（#FF5757）、斜体
• 人名：Coral（#FF5757）、粗体
• 页眉：黑色、大写

Office 与演示文稿标准（PowerPoint / Word）

如果无法使用专有字体，请使用 Segoe UI。

• 规则：不要使用 Segoe UI Bold（在 Windows 上字形比例不佳）
• 正确用法：标题和强调文本使用 Segoe UI Semibold

---

4. 图标与图像

图标风格

• 来源：Microsoft Stock Icons（Thin 风格）
• 配色：
  • 默认：Valantic Coral（#FF5757）
  • 特定路线：Purple Heart（#4C26B7），用于正式场景
  • 强调色：有选择地应用 valantic 渐变（315°）

生成式图像工作流

• 要求：页眉图像（尤其是 Route C）必须使用 Generative Fill 横向扩展画布
• 目标：应用不规则的 Valantic 蒙版时，避免裁切人脸或主体

---

5. 技术实现细节

CSS 变量（Web）

:root {
  /* Primary Brand Colors */
  --valantic-coral: #FF5757;
  --valantic-purple: #4C26B7;
  --valantic-peach: #FFCCAA;

  /* Utility Colors */
  --valantic-info: #4A9EFF;
  --valantic-warning: #FF9800;

  /* Text Colors */
  --text-primary: #333333;
  --text-dark: #1A1A1A;
  --bg-light: #F8F8F8;

  /* Gradient */
  --valantic-gradient: linear-gradient(
    315deg,
    #FF5757 0%,
    #FFCCAA 100%
  );

  /* Typography */
  --font-primary: "Calibre", "Segoe UI", Helvetica, Arial, sans-serif;
}

h1, h2 {
  color: var(--valantic-coral);
  font-weight: 300;
}

h3, h4 {
  color: var(--text-dark);
  font-weight: 600;
}

p {
  color: var(--text-primary);
  line-height: 1.6;
}

a {
  color: var(--valantic-coral);
  text-decoration: none;
}

.pull-quote, blockquote.highlight {
  color: var(--valantic-coral);
  font-style: italic;
}

.author-name {
  color: var(--valantic-coral);
  font-weight: 600;
}

.highlight-box {
  border-left: 4pt solid var(--valantic-coral);
  background: #fff5f5;
  padding: 12pt 12pt 12pt 15pt;
}

.info-box {
  border-left: 4pt solid var(--valantic-info);
  background: #f0f8ff;
  padding: 12pt 12pt 12pt 15pt;
}

.warning-box {
  border-left: 4pt solid var(--valantic-warning);
  background: #fff8f0;
  padding: 12pt 12pt 12pt 15pt;
}

th {
  background: var(--bg-light);
  font-weight: 600;
}

.chart-primary { fill: var(--valantic-coral); }
.chart-secondary { fill: #999999; }

列表格式（演示文稿）

• 第 1–3 级：标准项目符号
• 第 4 级：
  • 粗体 Coral（Route B / C）
  • 黑色（Route A） 用作列表中的子标题

---

6. 快速参考

调色板

名称	Hex	RGB	用途
Valantic Coral	#FF5757	255, 87, 87	H1/H2 标题、链接、引言、强调色
Purple Heart	#4C26B7	76, 38, 183	次要品牌色、正式场景
Peach	#FFCCAA	255, 204, 170	渐变终点、柔和背景
Info Blue	#4A9EFF	74, 158, 255	信息提示框
Warning Orange	#FF9800	255, 152, 0	警告提示框
Text Primary	#333333	51, 51, 51	正文
Text Dark	#1A1A1A	26, 26, 26	H3/H4 标题、粗体文本
Background Light	#F8F8F8	248, 248, 248	简介框、表格标题

元素快速参考

元素	颜色	字重	样式
H1、H2	Coral #FF5757	300	常规
H3、H4	黑色 #1A1A1A	600	常规
正文	灰色 #333333	400	常规
摘录	Coral #FF5757	400	斜体
作者姓名	Coral #FF5757	600	常规
链接	Coral #FF5757	-	无下划线
图表柱	Coral #FF5757	-	主要数据