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.
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
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.
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.
The Gatsby logo colors are rebeccapurple (Purple 60), black, and white. The logo works best on a white background.
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.
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.
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.
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:
- Kyle Mathews considering Futura:
- Sacha Greif posting the initial logo design:
- Let’s add some purple to the logomark:
- Kyle Mathews and Sacha Greif live streaming the initial design of the official Gatsby website, featuring the freshly designed Gatsby logo:
- First formalization of the Gatsby logo, custom wordmark G, minimum clearspace definition, and switch to rebeccapurple: