See Theme-UI for information on changing colors and fonts.
Changing logos and titles
Branding is handled using component shadowing. The file you want to modify is located at
src/components/header/branding.js. You can follow the comments in the code to get an idea of how you can modify this code to customize the look and feel of your brand entirely.
The site title is source from
gatsby-config.js under the siteMetadata field.
By default the logo is found in the
src/content/assets folder under the names
catalyst-site-logo.png. Change this file to reflect your branding. You can use other file extensions, e.g. .jpg but you cannot change the file name. It is queried by file name, not by relativePath. So it will work with
catalyst-site-logo.jpg but not with
If you want to completely customize the logo you can write your own GraphQL query in the shadowed branding component to source a logo from a different location or with a different file name.
This file is used as the default image in places like Twitter and Facebook. This file is best in a 2:1 aspect ratio, something like 1200x600px. See the twitter card docs for more information. You can use alternate image types such as .jpg if you want. It is queried by file name, not by relativePath. So it will work with
catalyst-site-social.jpg but not with
There is also a file called
catalyst-site-icon.png that provides your icon for use
gatsby-plugin-manifest to create icons for web, PWA, etc. This file should be square and at least 512x512px in dimensions.