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.
Wether 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.
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 assetsContains EPS, PNG, and SVG files
v1.0, February 20, 2019
In a hurry? Here’s just the SVGs:
Logo SVG Monogram SVGThe 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.
The typeface used to set the logo wordmark is Futura PT Demi. The wordmark is optically kerned, and it’s uppercase “G” is customized to partly mirror the strict geometry of the monogram.
The Gatsby logo colors are rebeccapurple (Purple 600), 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 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 600) on Grey 200.
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:
