Logo

The Gatsby logo is the central visual cue to identify Gatsby and its official resources, publications, community projects, products, and integrations. Everywhere the Gatsby logo shows up, it should act and behave the same.

Because Gatsby is and always will be free open source software, but also is backed by Gatsby the company, this guide is relevant not only for internal use, but also for our community members and commercial partners.

Whether you want to reference Gatsby in your publication or service, show some love or link back to us, we hope this page contains everything you need.

Please open an issue on GitHub or send a mail to the Gatsby Inkteam if you have any questions, suggestions, or problems! Happy shipping!
Gatsby

Gatsby’s logo was created by Sacha Greif in late 2016, and is a true open source community effort. 💜🙏 Check out the footnotes to retrace the most important iteration steps.

Download all logo assets

Contains EPS, PNG, and SVG files
v1.0, May 28, 2019

In a hurry? Here’s just the SVGs:

Logo SVGMonogram SVG

Do these awesome things

  • Use the Gatsby logo or monogram to link to gatsbyjs.org or gatsbyjs.com
  • Use the Gatsby logo or monogram to advertise that your product has built-in Gatsby integration
  • Use the Gatsby logo or monogram in a blog post or news article about Gatsby
  • Use the Gatsby monogram when linking to your Gatsby community profile

Please don’t do these things

  • Use the Gatsby logo or monogram for your application’s icon
  • Create a modified version of the Gatsby logo or monogram, change the colors, dimensions or add your own text/images — please see the Guidance section below for examples
  • Integrate the Gatsby logo or monogram into your logo
  • Sell any Gatsby artwork without permission

Primary Logo

The primary Gatsby logo is a combination mark that consists of the Gatsby monogram/lettermark, and a wordmark. It is the preferred way to reference Gatsby, allowing newcomers to associate our brand name with the monogram. We encourage you to use it whenever possible.

Gatsby

Monogram

We use the monogram as social media profile image for our official Twitter and GitHub accounts, and as “favicon” for our official website.

Furthermore the monogram may be used in cases where the association with Gatsby is evident, especially when space is an issue, e.g. like we currently do on store.gatsbyjs.org for mobile devices.

Gatsby
128 x 128px
Gatsby
64 x 64px
Gatsby
32 x 32px
Gatsby
16 x 16px

Partnership Lockups

When combining our logotype with another brand, product, or technology, we prefer the monogram over the logotype. It should be the same visual weight as the partner's logo, and connected by a “plus” sign.

Wordmark

The typeface used to set the logo wordmark is Futura PT Demi. The wordmark is optically kerned, and its uppercase “G” is customized to partly mirror the strict geometry of the monogram.

Futura PT Demi
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890!@€$%&*()-=+
Manual kerning and custom “G” vs. Futura PT Demi

Colors

The Gatsby logo colors are rebeccapurple (Purple 60), black, and white. The logo works best on a white background.

Gatsby
Gatsby
HEX
#663399
RGB
102 51 153
PMS
2077 C Pantone Matching System reference
CMYK
76 85 0 0
Black
HEX
#000000
RGB
0 0 0
CMYK
0 0 0 100
White
HEX
#ffffff
RGB
255 255 255
CMYK
0 0 0 0

There are two additional, one-color versions of the Gatsby logo: An entirely black or white logo for those instances where the logo must display or print in a single color.

For dark backgrounds, the logo should always be white.

There are no absolutes regarding the selection of the specific color application, but context, contrast with regard to background color, and surrounding imagery and production parameters all should be considered.

Gatsby

Additionally, we allow the single color version of the Gatsby logo to adapt to light colored backgrounds as long as a healthy contrast is preserved. Our example uses base neutral (Grey 60) on Grey 20.

Gatsby

Clearspace

To ensure the legibility of the logo, it must be surrounded with a minimum amount of clearspace. This isolates the logo from competing elements such as photography, text or background patterns that may detract attention and lessen the overall impact.

Magenta indicates clearspace, defined by the logo wordmark x-height or by 1/4 height of the Gatsby monogram. Blue marks type and element alignment and construction.

Clearspace around the logo is equal to the wordmark x-height.

Clearspace around the monogram equals 1/4 of its height.

Scale

Our logo is designed to scale to small sizes on print and screen.

Smallest size: 24 pixels high for screens, 0.3 inch/0.762 centimeter high for print.

Gatsby
Gatsby

Logo at 24px height

Guidance

Please help us maintain the integrity of the Gatsby logo and promote the consistency of the brand by not misusing it. Be responsible, not reckless. 🙏

If you find your needs are not covered by the logo and its recommended usage, please get in touch.

Do not place the logo on top of complex, busy backgrounds
Do not use unapproved color combinations
Do not use a local Futura version to set the wordmark
Do not apply a gradient to the icon or wordmark
Do not change the typeface, or recreate, or manipulate the wordmark and/or the icon
Do not reconfigure or change the size or placement of any logo elements
Do not tilt, rotate, stretch, skew or distort the logo
Do not apply bevel or shadow
Do not use the wordmark without the monogram
Do not use the legacy vertical treatment of the logo
Do not use just the “innards” of the Gatsby monogram
Do not cut the logo

Footnotes

Originally created by Sacha Greif in late 2016, the Gatsby logo is a true open source community effort. We compiled some of the steps that lead to the current version of the logo: