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’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.
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
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.
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.
128 x 128px
64 x 64px
32 x 32px
16 x 16px
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.
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.
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.
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.
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.
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.
Logo at 24px height
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
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: