立即迁移到 Netlify

Netlify 宣布 Gatsby Cloud 的下一次迭代。 了解更多

支持登录
联系我们注册

Logo

Gatsby logo 是识别 Gatsby 及其官方资源、出版物、社区项目、产品和集成的主要视觉线索。Gatsby logo 无论出现在何处，都应保持一致的行为和外观。

由于 Gatsby 是且将永远是免费 的开源软件，但同时也得到 Gatsby 公司的支持，因此本指南不仅适用于内部使用，也同样适用于我们的社区成员和商业合作伙伴。

无论您是想在出版物或服务中引用 Gatsby，表达对我们的喜爱，还是链接回我们的网站，我们都希望本页面能提供您所需的一切。

如有任何疑问、建议或遇到问题，请 在 GitHub 上创建一个 issue 或 发送邮件至 Gatsby Inkteam！ 祝您开发顺利！
Gatsby 框架

Gatsby 的 logo 由 Sacha Greif 于 2016 年底创作，是真正的开源社区努力的成果。 💜🙏请查看脚注，回顾最重要的迭代步骤。

下载所有 logo 资源

包含 EPS、PNG 和 SVG 文件
v1.0, 2019 年 5 月 28 日

赶时间？这里只有 SVG 文件

Logo SVGLogo 图案 SVG

做这些很棒的事情

  • 使用 Gatsby logo 或 logo 图案链接到 gatsbyjs.org 或 gatsbyjs.com
  • 使用 Gatsby logo 或 logo 图案来宣传您的产品内置了 Gatsby 集成
  • 在关于 Gatsby 的博文或新闻文章中使用 Gatsby logo 或 logo 图案
  • 在链接到您的 Gatsby 社区个人资料时使用 Gatsby logo 图案

请不要做这些事情

  • 将 Gatsby logo 或 logo 图案用作您应用程序的图标
  • 创建 Gatsby logo 或 logo 图案的修改版本、更改颜色、尺寸或添加您自己的文本/图像 — 请参阅下面的指南部分以获取示例
  • 将 Gatsby logo 或 logo 图案集成到您的 logo 中
  • 未经许可出售任何 Gatsby 艺术品

主 Logo

主 Gatsby logo 是一个组合标志，由 Gatsby logo 图案/字母标志和文字标志组成。这是引用 Gatsby 的首选方式，可以让新用户将我们的品牌名称与 logo 图案联系起来。我们鼓励您尽可能使用它。

Gatsby 框架

Logo 图案

我们将 logo 图案用作官方 Twitter 和 GitHub 账号的社交媒体头像，以及官方网站的“favicon”。

此外，在与 Gatsby 的关联显而易见的情况下，也可以使用 logo 图案，尤其是在空间有限的情况下，例如我们目前在 store.gatsbyjs.org 移动设备上的用法。

Gatsby 框架
128x128px
Gatsby 框架
64x64px
Gatsby 框架
32x32px
Gatsby 框架
16x16px

合作标志组合

当将我们的文字标志与另一个品牌、产品或技术结合时，我们更倾向于使用 logo 图案而非文字标志。它应该与合作伙伴的 logo 具有相同的视觉重量，并通过“加号”连接。

文字标志

用于设置 logo 文字标志的字体是 Futura PT Demi。文字标志经过光学调整字距，其大写字母“G”经过定制，部分镜像了 logo 图案的严格几何形状。

Futura PT Demi
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@€$%&*()-=+
手动字距调整和自定义“G” vs. Futura PT Demi

颜色

Gatsby logo 的颜色为 rebeccapurple（Purple 60）、黑色和白色。logo 在白色背景上效果最佳。

Gatsby 框架
Gatsby
HEX
#663399
RGB
102 51 153
PMS
2077 C Pantone 色彩匹配系统参考
CMYK
76 85 0 0
黑色
HEX
#000000
RGB
0 0 0
CMYK
0 0 0 100
白色
HEX
#ffffff
RGB
255 255 255
CMYK
0 0 0 0

Gatsby logo 还有两种额外的单色版本：全黑或全白 logo，适用于必须以单一颜色显示或打印的场合。

对于深色背景，logo 应始终为白色。

在选择具体的颜色应用方面没有绝对的规定，但应考虑上下文、与背景色的对比度、周围的图像和制作参数。

Gatsby 框架

此外，我们允许 Gatsby logo 的单色版本适应浅色背景，只要保持健康的对比度。我们的示例使用的是基础中性色（Grey 60）在 Grey 20.

Gatsby 框架

安全空间

为确保 logo 的可读性，必须在其周围留有最小的安全空间。这可以将 logo 与摄影、文本或背景图案等可能分散注意力并降低整体影响的竞争元素隔离开。

洋红色 表示安全空间，由 logo 文字标志的 x 字高或 Gatsby logo 图案高度的 1/4 定义。 蓝色 标记文本和元素对齐及结构。

安全空间 logo 周围的空间等于文字标志的 x 字高。

安全空间 logo 图案周围的空间等于其高度的 1/4。

缩放

我们的 logo 设计用于在打印和屏幕上进行小尺寸缩放。

最小尺寸：屏幕上高 24 像素，打印上高 0.3 英寸/0.762 厘米。

Gatsby 框架
Gatsby 框架

高 24px 的 Logo

指南

请帮助我们通过不滥用 Gatsby logo 来维护其完整性并促进品牌的一致性。请负责任，而非鲁莽。 🙏

如果您发现您的需求未被 logo 及其推荐用法涵盖，请 与我们联系.

请勿将 logo 放置在复杂、繁忙的背景上
请勿使用未经批准的颜色组合
请勿使用本地的 Futura 版本来设置文字标志
请勿给图标或文字标志应用渐变
请勿更改字体，或重新创建、操纵文字标志和/或图标
请勿重新配置或更改任何 logo 元素的尺寸或位置
请勿倾斜、旋转、拉伸、歪斜或扭曲 logo
请勿应用斜角或阴影
请勿单独使用文字标志，而不与 logo 图案一起使用
请勿使用旧版的垂直 logo 布局
请勿仅使用 Gatsby logo 图案的“内部”部分
请勿裁剪 logo

脚注

Gatsby logo 最初由 Sacha Greif 于 2016 年底创作，是真正的开源社区努力的成果。我们汇总了一些导致 logo 出现当前版本的步骤

©2025Gatsby, Inc.
可访问性声明品牌指南
使用条款隐私政策