Brand Identity System

蛮腾科技

野蛮生长，向上突破 —— 品牌视觉识别系统 v1.0

品牌人格

不是所有科技公司都应该是蓝的

✅ 蛮腾是谁

颠覆者 破局者 生猛 锐利 智能 不设限

用野蛮的速度，做科技的腾跃。
蛮腾不温吞、不跟随、不套路。品牌的每一条视觉线索都应传递这种“向上突破”的势能。

❌ 蛮腾不是谁

温吞的 跟随者 套路化科技蓝 保守的 中庸的 循规蹈矩

这些感觉在蛮腾的品牌中不应出现。如果某次设计稿让你觉得“这好安全”——推翻重来。

色彩体系

腾焰橙打侵略感 · 蛮石黑压信任感 · 极光青点智能感

品牌主色

主色 · 侵略/行动
腾焰橙
#FF4B1F
CTA · 关键图形 · 品牌识别
主色 · 信任/底色
蛮石黑
#141414
页面底色 · 标题 · 品牌氛围
主色 · 内容/反白
纯白
#FFFFFF
内容底 · 深色底反白文字

品牌辅色

辅色 · 智能/科技
极光青
#00D4AA
科技点缀 · AI 标识 · 数据高亮
辅色 · 深度/可靠
深穹蓝
#1B2D4A
次级深色底 · 卡片底 · 可靠感
辅色 · 暖调/亲和
暖灰
#F5F3F0
浅色背景 · 卡片底（避免冷感）

功能色

成功
成功绿
#00C853
警示
警示黄
#FFB300
错误
错误红
#FF1744
信息
信息蓝
#448AFF

中性色阶

50
100
200
300
400
500
600
700
800
900
最浅底浅底/hover分割线禁用边界禁用文字次要文字辅助文字正文标题最深

品牌渐变

升焰渐变

CTA · Hero · 重点卡片

linear-gradient(135deg, #FF4B1F, #FF7A45)

极光渐变

AI · 智能 · 数据可视

linear-gradient(135deg, #00D4AA, #00B8D4)

夜幕渐变

深色背景过渡

linear-gradient(180deg, #141414, #1B2D4A)

字体规范

阿里巴巴普惠体（中文）+ Inter（英文数字）+ JetBrains Mono（代码数据）

中文 · 展示标题

野蛮生长
向上突破 不设边界
四川蛮腾科技有限公司，以颠覆者之姿进入科技赛道。我们相信好的产品不需要循规蹈矩，品牌视觉亦然。每一块像素都应该有“向上突破”的势能。

English · Display & Body

Wild Growth
Breakthrough · Relentless · Smart
Manteng Tech challenges conventions. Every visual element carries the momentum of upward breakthrough — from color to type, from spacing to shadow.

字阶体系 · Type Scale

Display 56px / Bold
突破边界
H1 40px / Bold
品牌视觉识别系统
H2 32px / Bold
色彩体系与使用规范
H3 24px / SemiBold
品牌辅色使用场景
H4 20px / SemiBold
细节与实施规范
Body LG 18px / Regular
蛮腾科技的品牌视觉系统基于“野蛮生长，向上突破”的核心精神构建。
Body 16px / Regular
正文是品牌与用户沟通的主通道，需要清晰、有力、不拖泥带水。
Body SM 14px / Regular
辅助文字用于列表、补充说明和次级信息。保持可读性优先。
Caption 12px
注释 · 标签 · 时间戳
Overline 11px / 0.08em
CATEGORY · TAG · LABEL

间距 & 圆角

基于 4px 基准网格 · 从 4px 到 96px 覆盖所有空间层级

间距系统

--space-1 · 4px
--space-2 · 8px
--space-3 · 12px
--space-4 · 16px
--space-6 · 24px
--space-8 · 32px
--space-12 · 48px
--space-16 · 64px
--space-24 · 96px

圆角系统

--radius-sm · 4px
--radius-md · 8px
--radius-lg · 12px
--radius-xl · 16px
--radius-full · 9999px

阴影系统

从微观悬浮感到品牌色发光，五种阴影覆盖全部层级

sm
--shadow-sm
卡片悬浮微阴影
md
--shadow-md
下拉菜单 · 浮层
lg
--shadow-lg
模态框
xl
--shadow-xl
Hero 区域叠加
✨
--shadow-glow-orange
品牌色发光

场景应用

规范落到具体场景才有生命力

🖥 网页 / 产品 UI

色彩比例参考

蛮石黑 55%
纯白 25%
橙 12%
青 8%

深色底为主（信任+专业），白色内容区托底，橙色做侵略性 CTA，青色做 AI/智能点缀。

📱 社交媒体模板

快速标识模板方向

突破边界
行业首位
蛮腾科技

黑色底 + 白色粗体标题 + 橙色关键词高亮 + 反白 Logo 右下角。

📊 PPT / 路演模板

三套页面模板方向

封面：蛮石黑底 + 升焰渐变光效

正文：白底 + 黑标题 + 深穹蓝装饰线

数据：深穹蓝底 + 极光青高亮

三套模板配合使用，让路演节奏有呼吸感——不是每页都“炸裂”，但关键时刻要有爆发力。

设计令牌

CSS Custom Properties — 复制即用，零成本接入项目

/* ===== 蛮腾科技 · Design Tokens ===== */
/* 复制到 :root 或 Tailwind config 即可使用 */

/* --- Brand Colors --- */
--brand-flame-orange: #FF4B1F;
--brand-stone-black: #141414;
--brand-pure-white: #FFFFFF;
--brand-aurora-cyan: #00D4AA;
--brand-deep-vault-blue: #1B2D4A;
--brand-warm-gray: #F5F3F0;

/* --- Typography --- */
--font-display: 'Alibaba PuHuiTi', 'Inter', sans-serif;
--font-mono: 'JetBrains Mono', 'Consolas', monospace;
--text-display: 3.5rem;
--text-h1: 2.5rem;
--text-body: 1rem;

/* --- Spacing (4px grid) --- */
--space-4: 16px;
--space-6: 24px;
--space-12: 48px;

/* --- Radii --- */
--radius-md: 8px;
--radius-full: 9999px;

/* --- Shadows --- */
--shadow-glow-orange: 0 0 20px rgba(255,75,31,0.3);

/* 完整版见 manteng-design-tokens.css */

完整 CSS 文件：manteng-design-tokens.css | 完整规范文档：manteng-brand-system.md

蛮腾科技 · 品牌视觉识别系统 v1.0

四川蛮腾科技有限公司 · 2026-06-27

野蛮生长，向上突破