蓝晶微生物 · 动物健康事业部
Visual Identity — Color System v1.0
继承自蓝晶微生物主品牌(Bluepha Green #00AD50),在此基础上以蓝色为主色调,体现科技感与生命力
一、主色 Primary Colors
蓝色系为核心,传递科技、专业、信赖感。深蓝用于主要标题和重要元素,中蓝用于交互和强调,浅蓝用于背景和辅助。
深空蓝 Deep Space
#0A2463 · RGB(10,36,99)
主标题 / 深色背景 / 品牌主色
星际蓝 Stellar Blue
#1B4F9E · RGB(27,79,158)
按钮 / 链接 / 交互元素
海洋蓝 Ocean Blue
#247BA0 · RGB(36,123,160)
副标题 / 图标 / 中间色调
晨雾蓝 Mist Blue
#B8D8E8 · RGB(184,216,232)
浅色背景 / 卡片 / 分隔
二、辅助色 Secondary Colors
辅助色传递温度与生机感,用于产品分类、数据可视化、强调信息。与主色蓝形成冷暖对比,丰富视觉层次。
生机绿 Vital Green
#2ECDA7 · RGB(46,205,167)
生命力表达 / 成功状态 / 与母品牌呼应
活力橘 Vitality Orange
#F4845F · RGB(244,132,95)
温暖感 / 宠物营养产品线 / 强调
阳光金 Sunshine Gold
#F9C74F · RGB(249,199,79)
活力表达 / 警示 / 数据高亮
细胞紫 Cell Violet
#A78BFA · RGB(167,139,250)
科研/细胞主题 / 数据可视化
三、中性色 Neutral Colors
用于正文、背景、边框、分隔线等基础 UI 元素,确保信息层级清晰。
#0F172A
#334155
#64748B
#94A3B8
#CBD5E1
#E2E8F0
#F1F5F9
#F8FAFC
四、品牌渐变 Gradients
渐变用于背景、Banner、重要视觉区域,体现科技感与深度。
深海渐变 Deep Ocean
linear-gradient(135deg, #0A2463, #247BA0)
主 Banner / 深色背景 / 品牌主视觉
科技生机 Tech Vitality
linear-gradient(135deg, #1B4F9E, #2ECDA7)
科技+生命力表达 / 产品页 / 图标背景
晨光渐变 Dawn Light
linear-gradient(135deg, #247BA0, #B8D8E8)
浅色场景 / 卡片背景 / 柔和氛围
全谱渐变 Full Spectrum
linear-gradient(135deg, #0A2463, #1B4F9E 40%, #2ECDA7)
大面积背景 / 品牌发布会 / 主视觉 KV
五、半透明玻璃质感 Glassmorphism
参考需求中的半透明玻璃风格,以下为实际效果演示。适用于卡片、弹窗、数据面板等场景。
CSS 参数:background: rgba(255,255,255,0.12) · backdrop-filter: blur(16px) · border: 1px solid rgba(255,255,255,0.2) · border-radius: 20px
六、色彩使用比例 Color Ratio
遵循 60-30-10 原则,确保视觉层次清晰、品牌识别度高。
主色 · 深空蓝/星际蓝
中间色 · 海洋蓝
辅助色 · 生机绿 / 活力橘
七、场景配色方案 Color Combinations
动物保健产品
专业、可信赖的深蓝色调,传递科技实力与安全感
宠物营养产品
蓝绿过渡搭配暖色点缀,兼顾科技感与亲和力
研发 / 技术传播
蓝紫色调体现前沿科研属性,适用于学术和技术场景
品牌主视觉 / 发布会
全谱渐变展现品牌完整调性,适用于大型活动和主 KV
八、与母品牌色彩关系 Brand Hierarchy
蓝晶微生物 · 母品牌
绿色体系 · 可持续 · 合成生物学
辅助色"生机绿 #2ECDA7"作为桥梁色,与母品牌绿色体系形成呼应,确保品牌家族的视觉关联性。
Bluepha Animal Health Division · Color System v1.0 · 2026.02