2Slides Logo
Preview

GitHub 2026 品牌指南

89 张幻灯片

GitHub 2026 品牌指南 - 综合视觉识别系统,涵盖品牌属性、Logo、子品牌、联合品牌、插图、颜色、吉祥物、图标、图表、排版、布局和体验式设计

10 点赞
0 下载

快速导航

标签

Brand guidelines
GitHub
Design system
Visual identity
Tech brand

分享幻灯片

描述

主要主题

GitHub 2026 品牌指南 - 综合视觉识别系统,涵盖品牌属性、Logo、子品牌、联合品牌、插图、颜色、吉祥物、图标、图表、排版、布局和体验式设计

主要优势

  • 来自世界知名开发者平台的完整 89 页品牌识别系统
  • 四大主要部分:品牌视觉策略、视觉和插图、图形设备以及活动和体验
  • Copilot、Security、Actions、Spark 和其他产品的详细子品牌架构
  • 丰富的 3D 插图系统,以等距绿色立方体、贡献图图案和抖动纹理为特色
  • 三个备受欢迎的吉祥物角色(Mona、Copilot、Duckie),具有详细的使用指南和 3D 渲染图

目标受众

  • 科技公司的品牌设计师和创意总监
  • 构建可扩展品牌识别框架的设计系统架构师
  • 创建以开发者为中心的品牌体验的营销团队
  • 规划会议展位和体验式激活的活动设计师
  • 学习世界一流品牌指南文档的设计学生

使用场景

  • 科技公司的品牌指南模板和结构参考
  • 设计系统文档的最佳实践
  • 子品牌和产品架构策略参考
  • 开发者大会的活动和体验式设计灵感
  • 排版、颜色系统和图标库规范参考

独特价值主张

  • 在书呆子气的开发者文化与自信的企业品牌之间取得平衡的大师班
  • 五个品牌属性(Nerdy、Confident、Authentic、Imaginative、Empathetic),每个属性都包含文案、设计和体验指南
  • 创新的贡献图插图系统,将 UI 元素转换为完整的品牌视觉语言
  • 全面的标记层次结构决策树,用于在品牌标记、子品牌锁定、产品图标和扩展锁定之间进行选择
  • 详细的体验式设计部分,包含展位层级、照明、材料和互动装置指南

幻灯片页面 (89)

每张幻灯片页面的详细视图,包括布局、关键内容和视觉元素。

页面 1
title slide

封面 - 2026 品牌指南

内容

封面,包含 GitHub logo、2026 品牌指南标题、带有产品图标的 3D 等距绿色立方体以及 Mona 吉祥物

布局结构

浅色渐变背景,左侧为大型黑色排版,右侧为 3D 插图

关键视觉元素

  • 3D 等距绿色立方体
  • Mona 吉祥物
  • 产品图标
  • GitHub Invertocat logo
页面 2
table of contents

目录

内容

四个部分:品牌视觉策略、视觉和插图、图形设备、活动和体验

布局结构

深色背景,四个象限由绿色线条分隔

关键视觉元素

  • 深绿色背景
  • 绿色强调线
  • 等宽字体排版
页面 3
section divider

品牌属性 - 分节符

内容

章节标题:品牌属性

布局结构

全深色背景,左下角为大型白色文本

关键视觉元素

  • 深色背景
  • 超大白色排版
页面 4
brand attributes

品牌属性概述

内容

五个带有图标的品牌属性:书生气 (Nerdy)、自信 (Confident)、真实 (Authentic)、富有想象力 (Imaginative)、善解人意 (Empathetic)

布局结构

分栏:左侧为介绍性文字,右侧为深色背景上的五个属性行

关键视觉元素

  • 五个自定义属性图标
  • 深色背景
  • 绿色强调线
页面 5
brand attributes

品牌属性应用

内容

属性如何应用:GitHub Universe、Copilot、Shop、Enterprise 上下文

布局结构

四个带有属性标签和描述的照片卡片

关键视觉元素

  • Universe 活动照片
  • Copilot UI
  • Shop 商品
  • Enterprise 视觉效果
页面 6
brand attributes

Nerdy - 视觉示例

内容

书生气 (Nerdy) 属性:充满热情、精心设计、技术性,并附有示例

布局结构

属性定义位于左上角,四个照片示例横跨整个宽度

关键视觉元素

  • Nerdy 图标
  • 自定义键帽
  • ASCII 艺术
  • 太空插图
  • CEO 胸牌
页面 7
brand guidelines

Nerdy - 应用指南

内容

文案:精确、技术性。设计:等宽字体、网格。体验:深度内容、研讨会

布局结构

分栏:左侧为属性介绍,右侧为三个指南部分

关键视觉元素

  • 等宽字体章节标题
  • 文案/设计/体验 类别
页面 8
brand attributes

Confident - 视觉示例

内容

自信 (Confident) 属性:雄心勃勃、值得信赖、聪明,并附有示例

布局结构

属性定义位于左上角,五个照片/插图示例

关键视觉元素

  • 主题演讲舞台照片
  • Issues UI
  • Universe 展位
  • 3D 吉祥物
页面 9
brand guidelines

Confident - 应用指南

内容

文案:清晰、权威。设计:色彩鲜艳、引人注目。体验:兑现承诺

布局结构

分栏:左侧为属性介绍,右侧为三个指南部分

关键视觉元素

  • 简洁的文本布局
  • 等宽字体标题
页面 10
brand attributes

Authentic - 视觉示例

内容

真实 (Authentic) 属性:值得信赖、充满活力、明亮,并附有示例

布局结构

属性定义位于左上角,五个照片示例

关键视觉元素

  • GitHub 个人资料截图
  • 贴纸炸弹
  • 像素艺术
  • 霓虹 UI
页面 11
brand guidelines

Authentic - 应用指南

内容

文案:对话式,直白。设计:简洁,富有表现力。体验:鼓励互动

布局结构

分割式:属性介绍在左,三个指导方针部分在右

关键视觉元素

  • 简洁的文本布局
页面 12
brand attributes

Imaginative - 视觉示例

内容

富有想象力的属性:有趣,变革性,适应性强,并附带示例

布局结构

属性定义在左上方,三张大型照片

关键视觉元素

  • Mona 插图
  • 3D 爆炸艺术
  • Universe Central 入口
页面 13
brand guidelines

Imaginative - 应用指南

内容

文案:鼓舞人心。设计:打破常规。体验:改造空间

布局结构

分割式:属性介绍在左,三个指导方针部分在右

关键视觉元素

  • 简洁的文本布局
页面 14
brand attributes

Empathetic - 视觉示例

内容

富有同情心的属性:易于访问,相互关联,务实,并附带示例

布局结构

属性定义在左上方,照片和色板

关键视觉元素

  • 绿色/红色色阶
  • 多元化的团队照片
  • RKO 26 活动拱门
页面 15
brand guidelines

Empathetic - 应用指南

内容

文案:可访问性优先。设计:对比度,语境。体验:清晰的寻路,多元化的演讲者

布局结构

分割式:属性介绍在左,三个指导方针部分在右

关键视觉元素

  • 简洁的文本布局
页面 16
section divider

Logo - 分节符

内容

章节标题:Logo

布局结构

全黑背景,左下角大号白色文本,PG 15

关键视觉元素

  • 深色背景
  • 超大白色Logo文本
页面 17
logo specification

Logo - Invertocat 概述

内容

主要 logo 是 Invertocat (Mona the Octocat)。25% 的留白规则

布局结构

分割:左侧为带间距图的描述,右侧为大型 Invertocat 标志

关键视觉元素

  • 大型 Invertocat 标志
  • 1.0X/0.25X 间距图
页面 18
logo specification

Logo - 文字标记锁定

内容

完整的 GitHub logo(Invertocat + 文字商标)用于外部用途。50% 高度的留白

布局结构

左侧描述,中心为大型 GitHub 文字商标组合

关键视觉元素

  • GitHub 文字商标组合
  • 留白图
页面 19
logo specification

Logo - 放置

内容

Logo 位置:突出但不占主导地位。完整标志、单独的 Invertocat、角落位置

布局结构

三个带有网格叠加的放置示例

关键视觉元素

  • 三个网格叠加示例
  • 绿色/黄色引导线
页面 20
logo specification

Logo - 颜色

内容

浅色、浅灰色、深色主题中的 Logo 颜色变体,带有主要/次要/强调色

布局结构

三行网格,显示九个 logo 颜色变体

关键视觉元素

  • 九个 logo 变体
  • 三个背景主题
  • 绿色强调色
页面 21
logo specification

Logo - 不成功的示例

内容

禁止事项:裁剪、叠加、彩色Logo、改变比例、特效、旋转

布局结构

六个带有红色禁止图标的禁止示例

关键视觉元素

  • 六个红色禁止示例
页面 22
brand guidelines

品牌标语 - Let's build <3

内容

标语使用:独立使用以及与Invertocat组合使用。仅限策略性放置

布局结构

左侧为描述,右侧为多个标语布局变体

关键视觉元素

  • Let's build <3 变体
  • 绿色心形符号
页面 23
section divider

子品牌 - 分节符

内容

章节标题:子品牌

布局结构

全黑背景,左下角为大号白色文字,PG 23

关键视觉元素

  • 黑色背景
  • 超大白色文字
页面 24
brand architecture

子品牌 - 品牌标记和产品图标

内容

品牌标识层级:GitHub 标志(默认)、子品牌组合、平台内产品图标

布局结构

左侧为描述,右侧为品牌标识、组合(Advanced Security、Copilot、Actions)、产品图标网格

关键视觉元素

  • GitHub 品牌标识
  • 子品牌组合
  • 九个产品图标
页面 25
brand architecture

子品牌 - 上下文相关的锁定

内容

组合灵活性:仅Invertocat、子品牌组合、基于上下文的扩展组合

布局结构

三栏对比,包含产品UI示例

关键视觉元素

  • 三个组合层级
  • Copilot 编码助手
  • Push Protection
页面 26
brand architecture

子品牌 - 标记层次结构

内容

同心层级:GitHub Core、子品牌、活动。显示所有产品组合变体

布局结构

左侧为 Venn diagram,右侧为四栏组合系统

关键视觉元素

  • 同心圆环图
  • 完整产品组合列表
页面 27
brand architecture

子品牌 - 产品层

内容

子品牌组合(Mona Sans Display Medium)和所有产品的扩展组合变体

布局结构

双层布局,显示 Security、Copilot、Spark、Enterprise、Actions、Issues 的组合

关键视觉元素

  • 子品牌和扩展组合
  • 导航示例
页面 28
decision tree

子品牌 - 如何选择标记

内容

决策树:活动?GitHub 内的产品?独立的 Copilot/Security?产品营销?

布局结构

带有 YES/NO 分支的垂直流程图

关键视觉元素

  • 绿色 YES 箭头
  • 五个决策结果
页面 29
product branding

子品牌 - Copilot Hero

内容

Copilot 章节主视觉,带有 3D 等距绿色立方体和 Copilot 吉祥物

布局结构

大型 Copilot 标题,带有全宽 3D 等距插图,PG 30

关键视觉元素

  • 3D 等距立方体
  • Copilot 吉祥物
  • 产品图标
页面 30
product branding

子品牌 - Copilot 标识

内容

Copilot 紫色 (#8534F3)、产品组合、图标变体、3D 吉祥物插图

布局结构

左侧为描述和色板,右侧为组合/图标/插图,PG 32

关键视觉元素

  • Copilot 紫色色板
  • 绿色立方体上的 3D Copilot 吉祥物
页面 31
product branding

子品牌 - Copilot 颜色主题

内容

紫色抖动纹理,核心主题回退,80/10/5/5 颜色比例

布局结构

多示例布局,展示抖动、核心主题、无品牌方法,PG 33

关键视觉元素

  • 紫色抖动纹理
  • 颜色比例百分比
页面 32
product branding

子品牌 - 产品发布

内容

发布时使用环境稳定(抖动 + 屏幕截图)与响亮(关键艺术插图)

布局结构

并排比较,PG 34

关键视觉元素

  • Copilot Next Edit Suggestion UI
  • 3D 关键艺术
页面 33
product branding

子品牌 - Security Hero

内容

带有 3D 等距绿色立方体、蓝色盾牌图标的安全部分

布局结构

带有 3D 插图的大型安全标题,PG 35

关键视觉元素

  • 3D 蓝色盾牌图标
  • 绿色等距立方体
页面 34
product branding

子品牌 - Security 标识

内容

安全蓝 (#3094FF),产品锁定,盾牌图标变体,3D 插图

布局结构

左侧为描述和蓝色色板,右侧为锁定/图标/插图,PG 37

关键视觉元素

  • 安全蓝 色板
  • 3D 盾牌插图
页面 35
product branding

子品牌 - Security 颜色主题

内容

蓝色抖动纹理,核心主题回退,代码扫描 UI 示例

布局结构

多示例展示蓝色抖动和无品牌方法,PG 38

关键视觉元素

  • 蓝色抖动纹理
  • CodeQL UI
页面 36
section divider

联合品牌 - 分节符

内容

章节标题:联合品牌

布局结构

全深色背景,大号白色文本,PG 39

关键视觉元素

  • 深色背景
  • 超大号白色文本
页面 37
co-branding

联合品牌 - Microsoft 合作伙伴关系

内容

默认(图标 + 分隔符),堆叠,水平组合。相等的视觉尺寸

布局结构

三个带有 Microsoft + GitHub 徽标的组合变体,PG 40

关键视觉元素

  • Microsoft + GitHub 组合
页面 38
co-branding

联合品牌 - 不成功的示例

内容

禁止事项:扩展组合、叠加、子品牌、吉祥物、堆叠、Universe 徽标

布局结构

六个带有红色图标的禁止示例,PG 41

关键视觉元素

  • 六个红色禁止示例
  • WCAG AA 注释
页面 39
FAQ

联合品牌 - FAQ

内容

六个联合品牌常见问题解答:社交媒体、合作语言、演示文稿、产品名称、着陆页、周边产品

布局结构

问答列表格式,PG 42

关键视觉元素

  • 简洁的问答布局
页面 40
section divider

插图 - 分节符

内容

章节标题:插图

布局结构

全深色背景,大号白色文本,PG 43

关键视觉元素

  • 深色背景
  • 超大号白色文本
页面 41
illustration system

插图系统概述

内容

三种风格:关键插图 (3D),贡献图(创意抽象),纹理(位图)

布局结构

三个等宽的列,包含示例,PG 44

关键视觉元素

  • 3D 关键艺术图
  • 贡献图方块
  • 位图纹理
页面 42
illustration system

关键插图

内容

详细的、3D、等距视角。突出带有产品图标、抖动、吉祥物的贡献图

布局结构

左侧描述,右侧大型 3D 插图,PG 45

关键视觉元素

  • 3D 橡皮鸭
  • 等距绿色立方体
  • 彩虹立方体
页面 43
illustration system

关键插图变体

内容

灵活的构图,包含不同排列的 Mona、Duckie、绿色立方体

布局结构

六个插图变体的网格,PG 46

关键视觉元素

  • 多个 Mona 姿势
  • Duckie 变体
页面 44
illustration system

贡献图插图

内容

将贡献图 UI 转换为品牌视觉。绿色/灰色/粉色方块,吉祥物

布局结构

带有注释的完整插图,PG 47

关键视觉元素

  • 贡献图参考
  • 绿色方块变体
  • Mona 吉祥物
页面 45
illustration system

贡献图使用规则

内容

禁忌:孤立使用、用作背景、过度缩放、与抖动混合。推荐:动画、打印

布局结构

六个带有复选标记/禁止标记的用法示例,PG 48

关键视觉元素

  • 禁止的示例
  • Universe T 恤印花
页面 46
illustration system

纹理 - 颜色组合

内容

更简单的抖动纹理,用于背景和表面图案

布局结构

左侧描述,右侧两个应用示例,PG 49

关键视觉元素

  • UI 后面的抖动
  • 3D 盒子模型
页面 47
illustration system

纹理库

内容

六种抖动图案:圆形、热图、渐变、半圆、波浪、椭圆

布局结构

2x3 网格中的六个纹理示例,PG 50

关键视觉元素

  • 六种抖动图案
页面 48
illustration system

纹理颜色和对比度

内容

双色纹理:大胆的三元/互补色对以及单色选项

布局结构

顶部为大胆的双色行,底部为单色列,PG 51

关键视觉元素

  • 颜色对示例
  • 八个单色选项
页面 49
section divider

颜色 - 分节符

内容

章节标题:颜色

布局结构

全深色背景,带有大型白色文本,PG 52

关键视觉元素

  • 深色背景
  • 超大白色文本
页面 50
color system

调色板概述

内容

带有绿色点缀的 нейтральный 品牌。主要色(中性色 + 绿色),辅助色(6 个颜色系列)

布局结构

左侧描述,中间主要调色板,右侧辅助网格,PG 53

关键视觉元素

  • 绿色渐变
  • 灰色渐变
  • 辅助调色板网格
页面 51
color system

主调色板 - 完整规范

内容

白色、黑色、灰色 0-9,绿色 1-6 的 HEX/RGB/CMYK/专色。 90% 中性色,10% 绿色

布局结构

带有规格的完整色板网格,第 54 页

关键视觉元素

  • 十个灰色色板
  • 六个绿色色板
  • 90/10 比例
页面 52
color system

辅助调色板 - 完整规范

内容

主题调色板:DevX (绿色+粉色), Copilot (紫色), Security (蓝色+橙色+酸橙色)

布局结构

带有完整规格的大型颜色网格,第 55 页

关键视觉元素

  • 六个颜色系列 x 六个级别
页面 53
color system

基于文本的布局主题

内容

三个主题:白色、浅灰色、黑色。 中性色上的文本;图标/插图的颜色

布局结构

不同背景上的三个 Copilot 编码代理示例,第 56 页

关键视觉元素

  • 三个主题比较
页面 54
color system

可访问性 - 颜色对比度

内容

所有文本均符合 WCAG AA 标准。 主要、次要、强调文本在所有背景上均通过 AA 标准

布局结构

三个具有 AA 合规性的辅助功能面板,第 57 页

关键视觉元素

  • AA 合规性复选标记
  • 对比度演示
页面 55
section divider

吉祥物 - 分节符

内容

章节标题:吉祥物

布局结构

带有大号白色文本的完整深色背景,第 58 页

关键视觉元素

  • 深色背景
  • 超大号白色文本
页面 56
mascot design

吉祥物概述

内容

三个吉祥物:Mona (GitHub),Copilot (AI/创新),Ducky (开发者)

布局结构

三列,带有3D吉祥物渲染图,PG 59

关键视觉元素

  • 3D Mona
  • 3D Copilot 头盔
  • 3D 橡皮鸭
页面 57
mascot design

Mona - 角色表

内容

主要品牌大使。紫色/粉色调。五个角度视图

布局结构

左侧描述,右侧五个3D渲染图,PG 60

关键视觉元素

  • 五个 Mona 角度视图
页面 58
mascot design

Copilot - 角色表

内容

AI结对程序员。紫色/蓝色搭配粉色。五个角度视图

布局结构

左侧描述,右侧五个3D渲染图,PG 61

关键视觉元素

  • 五个 Copilot 角度视图
页面 59
mascot design

Duckie - 角色表

内容

橡皮鸭调试致敬。使用频率较低。五个角度视图

布局结构

左侧描述,右侧五个3D渲染图,PG 62

关键视觉元素

  • 五个 Duckie 角度视图
页面 60
mascot design

吉祥物使用规则

内容

可以:社区,内部,激励。不可以:作为logo,轻推/销售,严肃话题

布局结构

三行可以/不可以网格,PG 63

关键视觉元素

  • 绿色对勾
  • 红色禁止标志
页面 61
mascot design

备用吉祥物样式

内容

已弃用:Octocat 1.0、Octocat 2.0、Monamoji、轮廓样式

布局结构

带有禁止图标的四象限网格,PG 64

关键视觉元素

  • 经典 Octocat
  • Monamoji 表情符号网格
页面 62
section divider

图标 - 分节符

内容

章节标题:图标

布局结构

全深色背景,带有大号白色文本,PG 65

关键视觉元素

  • 深色背景
  • 超大号白色文本
页面 63
icon system

图标 - Octicons 和 Spot 图标

内容

Octicons (24px) 默认。Spot Octicons (60px) 来自 gitline 形状的更大的营销图标

布局结构

Octicons 网格左下角,Spot Octicons 网格右侧,PG 66

关键视觉元素

  • ~75 Octicons
  • ~60 Spot Octicons
页面 64
icon system

图标 - 尺寸指南

内容

16-30px Octicons,31-54px 死区,55-96px 营销图标,128px+ 插图

布局结构

带有示例的四个尺寸层级,PG 67

关键视觉元素

  • 四个尺寸层级
  • 复选标记/禁止标记
页面 65
icon system

图标 - Spot Octicons 图库

内容

完整的 60+ Spot Octicons 集,由 gitline 形状(时间线 + 提交圆圈)构建

布局结构

完整图标库网格,PG 68

关键视觉元素

  • 网格中 60+ 个 spot 图标
页面 66
icon system

图标 - 变体和组件

内容

适用于深色、白色、浅绿色、浅灰色主题以及平面版本的图标变体

布局结构

四列主题比较,PG 69

关键视觉元素

  • 四个主题图标变体
页面 67
icon system

图标 - Wondergraph 使用

内容

使用图标构建组合:确定主题,添加子品牌颜色

布局结构

左侧描述,右侧两个博客卡片示例,PG 70

关键视觉元素

  • 博客卡片组合
页面 68
section divider

图表 - 分节符

内容

章节标题:图表

布局结构

全深色背景,带有大号白色文本,PG 71

关键视觉元素

  • 深色背景
  • 超大号白色文本
页面 69
diagram guidelines

图表 - 图表和图形

内容

准确、信息丰富。每一行和颜色选择都很重要。条形图、散点图、合作伙伴网格

布局结构

左侧描述,右侧三个图表示例,PG 72

关键视觉元素

  • 紫色条形图
  • 散点图
  • 合作伙伴网格
页面 70
diagram guidelines

图表 - 信息图表

内容

用于非比较性声明的 Spot 图标 + 文字。Copilot 的紫色主题。绿色强调边框

布局结构

带有注释的三个统计卡片,PG 73

关键视觉元素

  • 紫色主题统计卡片
  • 绿色强调边框
页面 71
section divider

排版 - 分节符

内容

章节标题:排版

布局结构

全深色背景,大号白色文本,PG 74

关键视觉元素

  • 深色背景
  • 超大号白色文本
页面 72
typography

排版 - Mona Sans

内容

主要字体:Mona Sans(常规 + 中等)。辅助字体:Mona Sans Mono,用于代码/样式

布局结构

左侧描述,底部字母示例,PG 75

关键视觉元素

  • Mona Sans 示例
  • Mona Sans Mono 示例
页面 73
typography

排版 - 字体比例

内容

OPSZ 轴 V2.08+。H0 Display 110/110,Body Large 17/26,Pullquote Mono 58/68

布局结构

具有尺寸/粗细规格的字体比例示例,PG 76

关键视觉元素

  • H0 display 示例
  • 光学尺寸切换
页面 74
typography

排版 - 标题

内容

H0-H6 标题层级(160px 到 19px)。较大尺寸使用 Display Regular,较小尺寸使用 Medium

布局结构

完整的 H0-H6 标题层级,带有条形图,PG 77

关键视觉元素

  • 七个标题示例
  • 绿色条形图
页面 75
typography

排版 - 正文样式

内容

Body XL 到 Footnote。Blockquote Mono 58/68。Caption、Eyebrow、Footnote 样式

布局结构

完整的正文文本示例网格,PG 78

关键视觉元素

  • Blockquote 等宽字体
  • 正文条形图
页面 76
typography

排版 - 字体配对

内容

配对:眉题+标题,中等+中等,眉题对齐,标题+正文

布局结构

六种类型配对示例,PG 79

关键视觉元素

  • 六个配对框示例
页面 77
typography

排版 - 不成功的示例

内容

禁忌:其他宽度样式,大写多行等宽字体,连字,手动字距调整

布局结构

四个禁止示例,附带比较,PG 80

关键视觉元素

  • 四组红色/绿色比较对
页面 78
section divider

布局 - 分节符

内容

章节标题:布局

布局结构

全深色背景,搭配大号白色文字,PG 81

关键视觉元素

  • 深色背景
  • 超大白色文字
页面 79
layout system

布局 - 网格系统

内容

严格遵守网格。网格/边距(红色),比例(1/3、1/2、2/3),强调边框

布局结构

Copilot 示例上的网格叠加,附带注释,PG 82

关键视觉元素

  • 红色/黄色网格叠加
  • 绿色强调边框
页面 80
layout system

布局 - 边框

内容

边框默认 2px,细微 2px,强调色 4px 绿色。每个构图一个强调色

布局结构

Universe 参会者卡片,附带网格叠加,PG 83

关键视觉元素

  • 边框规范
  • 强调边框注释
页面 81
layout system

布局 - 实践中的网格

内容

内容浮动到边缘,中间大片空白。页眉/页脚感觉一致且具有技术性

布局结构

两个布局示例,带有对齐注释,PG 84

关键视觉元素

  • 电子书页面
  • Forrester 引言
页面 82
layout system

布局 - 不成功的示例

内容

禁忌:标题中颜色混合,内容拥挤

布局结构

两个禁止的示例,带有比较,PG 85

关键视觉元素

  • 颜色混合比较
  • 内容拥挤比较
页面 83
section divider

体验式 - 分节符

内容

章节标题:体验式

布局结构

全黑背景,带有大号白色文本,PG 86

关键视觉元素

  • 黑色背景
  • 超大白色文本
页面 84
experiential design

体验式 - 展位设计原则

内容

六项原则:品牌优先、材料真实、互动性、舒适性、模块化、前瞻性

布局结构

顶部声明文本,六个原则卡片呈 2x3 网格排列,PG 87

关键视觉元素

  • 六个自定义原则图标
页面 85
experiential design

体验式 - 建造和施工

内容

推荐:木材/金属材料、3D 细节、LED。 禁忌:扁平乙烯基、通用家具。 需要 Hero 时刻

布局结构

左侧推荐/禁忌列表,右侧九张展位照片,PG 88

关键视觉元素

  • 九张展位参考照片
页面 86
experiential design

体验式 - 互动装置

内容

每个展位都需要至少一个互动元素:充气物、贴纸、游戏、演示

布局结构

左侧描述,右侧六张互动展位照片,PG 89

关键视觉元素

  • 充气花朵
  • 插销板游戏
  • AR 触摸屏
页面 87
experiential design

体验式 - 照明

内容

用于视觉分离的色调环境光。 色温设定情绪

布局结构

左侧描述,右侧四张照明照片,PG 90

关键视觉元素

  • 霓虹灯展位示例
  • 色温指导
页面 88
experiential design

体验式 - 预算和约束

内容

三个层级:轻量级展示、中级展位、定制高影响力

布局结构

三个层级列,带有照片和描述,PG 91

关键视觉元素

  • 三个层级参考照片
页面 89
closing slide

结束语 - 有问题吗?

内容

联系方式:brand.github.com toolkit, brand-marketing-design@github.com

布局结构

深色背景,带有联系方式,PG 92

关键视觉元素

  • 联系信息

常见问题

关于此幻灯片和基础演示文稿内容的常见问题。

GitHub 2026 品牌指南是什么类型的文档?

这是一个综合性的 89 页品牌识别系统,涵盖了 GitHub 2026 年视觉识别的各个方面。它分为四个主要部分:品牌视觉策略(品牌属性、Logo、子品牌、联合品牌)、视觉和插图(插图系统、颜色、吉祥物)、图形设备(图标、图表、排版、布局)以及活动和体验(展位设计、建造、互动装置、照明)。

GitHub 的五个品牌属性是什么?

GitHub 定义了五个品牌属性:1) Nerdy(对代码充满热情、经过工程设计、技术性强),2) Confident(雄心勃勃、值得信赖、聪明),3) Authentic(忠于自己和社区),4) Imaginative(有趣、变革性、适应性强),5) Empathetic(平易近人、相互关联、务实)。每个属性都包含文案、设计和体验指南。

此品牌指南使用什么设计系统?

GitHub 使用以深色优先的设计系统,其中包含 Mona Sans 字体系列(sans-serif + monospace)、以灰色/黑色/白色为主的 нейтральный 主调色板,以及绿色 акценты (#0FBF3E) 和特定于产品的辅助调色板(Copilot 为紫色,Security 为蓝色)。视觉系统具有 3D 等距插图、贡献图图案、抖动纹理和三个 3D 吉祥物(Mona、Copilot、Duckie)。

GitHub 如何处理 Copilot 等产品的子品牌?

GitHub 使用分层标记层次结构:在上下文明确时仅使用 Invertocat,在独立营销中使用子品牌锁定(Invertocat + 产品名称),在受众可能不了解 GitHub 时使用扩展锁定(Invertocat + GitHub + 产品名称)。Copilot 有自己的紫色主题 (#8534F3),Security 有蓝色 (#3094FF)。决策树流程图指导锁定选择。

GitHub 使用什么排版系统?

Mona Sans 具有 оптический размер (OPSZ V2.08+)。标题使用 Display Regular(H0 为 110px)和 Medium(H3-H6)。正文使用 Regular(15/25 main)和 Medium(17/26 large)。Mona Sans Mono 用于代码、块引用、眉毛和脚注。连字必须关闭;禁止手动字距调整,而应使用 OPSZ。

GitHub 使用什么插图风格?

三种风格:1) 关键插图 - 详细的 3D 等距场景,带有绿色立方体、产品图标和吉祥物,用于重要的品牌时刻。2) 贡献图 - 使用绿色/灰色/粉色方块对 GitHub 个人资料网格进行创意抽象。3) 纹理 - 各种颜色组合的位图抖动图案(圆形、热图、渐变、波浪、椭圆形、半圆形)。

GitHub 的三个吉祥物是谁?

Mona - 粉色/紫色 Octocat(部分是猫,部分是章鱼),主要的品牌大使。Copilot - 蓝色/紫色机器人头盔,代表 AI 和创新。Duckie - 黄色橡皮鸭,向开发者调试传统致敬,谨慎使用。

是什么让体验式设计部分与众不同?

它涵盖了六项设计原则、三个预算等级(从轻量级到定制制造)、材料指导(始终包含一个非印刷的高级元素)、照明方向(色调环境 + 色温)以及每个展位至少一个互动装置的任务。

2slides

Create Your Own Slides

Turn your ideas into professional presentations in seconds with 2slides AI.

几秒钟内创建世界级幻灯片

参考专业设计,选择您的风格,生成具有完美文本渲染的幻灯片。由 Nano Banana 提供支持——立即开始创建您的演示文稿。

© 2026 2slides. All rights reserved.